html, body { margin: 0; height: 100%; overflow: hidden; background: linear-gradient(180deg, #2a3f78 0%, #7d86b8 55%, #f0a17a 100%); overscroll-behavior: none; touch-action: none; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif; }
#c { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
/* A soft vignette: free (CSS), no post pass. */
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 120% 95% at 50% 45%, transparent 55%, rgba(8, 12, 30, 0.34) 100%); }
#status { position: fixed; left: 50%; bottom: 14%; transform: translateX(-50%); color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; pointer-events: none; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; } }
#status:empty { display: none; }
#load-errors { position: fixed; z-index: 100; bottom: 18%; left: 50%; transform: translateX(-50%); max-width: 90vw; }
#load-errors > div { display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 12px 16px; border-radius: 14px; background: #202a40; color: #fff; font: 14px system-ui; }
#load-errors button { border: 0; border-radius: 9px; padding: 9px 14px; color: #202a40; background: #f5f0f7; font: inherit; cursor: pointer; }

/* ---- HUD: Roomlet "Avondglas": dark glass tinted by the hour, one cool accent (Lucht), filled icons. */
:root { --glass: rgba(18, 24, 48, 0.42); --glass-hi: rgba(255, 255, 255, 0.14); --ink: #eef4ff; --lucht: #6cc2ff; --hole: rgba(18, 24, 48, 0.85);
  --enter: cubic-bezier(.2, .8, .2, 1); --safe-t: max(12px, env(safe-area-inset-top)); --safe-r: max(12px, env(safe-area-inset-right)); --safe-b: max(12px, env(safe-area-inset-bottom)); --safe-l: max(12px, env(safe-area-inset-left)); }
.hud { position: fixed; inset: 0; pointer-events: none; color: var(--ink); transition: opacity .5s var(--enter); }
body.photo .hud { opacity: 0; }
.hud button { pointer-events: auto; }
.hud-bar { position: absolute; top: var(--safe-t); right: var(--safe-r); display: flex; gap: 10px; }
.hud-btn { width: 44px; height: 44px; border-radius: 999px; border: 0; padding: 11px; background: var(--glass); color: var(--ink);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--glass-hi), 0 6px 18px rgba(8, 12, 30, .18); cursor: pointer; transition: transform .25s var(--enter), background .3s; }
.hud-btn svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.hud-btn:active { transform: scale(.9); }
.hud-btn.on { background: rgba(108, 194, 255, .28); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(108, 194, 255, .75); }
.hud-dial { position: absolute; top: calc(var(--safe-t) + 56px); right: var(--safe-r); width: min(320px, 46vw); height: 52px; border-radius: 999px; background: var(--glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--glass-hi); opacity: 0; transform: translateY(-6px) scale(.97);
  transition: opacity .3s var(--enter), transform .3s var(--enter); pointer-events: none; }
.hud-dial.open { opacity: 1; transform: none; pointer-events: auto; }
.hud-track { position: absolute; left: 30px; right: 30px; top: 0; bottom: 0; touch-action: none; cursor: pointer; }
.hud-track::before { content: ''; position: absolute; left: 0; right: 0; top: 25px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.22); }
.hud-stop { position: absolute; top: 12px; width: 28px; height: 28px; margin-left: -14px; padding: 5px; border: 0; background: none; color: rgba(238,244,255,.72); cursor: pointer; }
.hud-stop svg { width: 100%; height: 100%; fill: currentColor; }
.hud-knob { position: absolute; top: 9px; width: 34px; height: 34px; margin-left: -17px; border-radius: 999px; background: rgba(108, 194, 255, .3);
  box-shadow: inset 0 0 0 2px var(--lucht), 0 0 16px rgba(108,194,255,.35); pointer-events: none; transition: left .12s linear; }
.hud-disc { position: absolute; left: var(--safe-l); bottom: var(--safe-b); display: flex; gap: 8px; }
.hud-hint { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 40px); width: 52px; height: 52px; margin-left: -26px; opacity: 0; transition: opacity .6s var(--enter); }
.hud-hint svg { width: 100%; height: 100%; fill: rgba(255,255,255,.9); filter: drop-shadow(0 4px 10px rgba(8,12,30,.35)); }
.hud-hint.show { opacity: 1; animation: swing 2.2s ease-in-out infinite; }
@keyframes swing { 0%, 100% { transform: translateX(-38px) rotate(-8deg); } 50% { transform: translateX(38px) rotate(8deg); } }
.hud-place { position: absolute; left: 50%; top: calc(var(--safe-t) + 18px); transform: translateX(-50%) translateY(-8px); font-size: 15px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.92); text-shadow: 0 2px 14px rgba(8,12,40,.45); opacity: 0;
  transition: opacity .9s var(--enter), transform .9s var(--enter); white-space: nowrap; }
.hud-place.show { opacity: 1; transform: translateX(-50%); }
.hud-photo { position: fixed; right: var(--safe-r); bottom: var(--safe-b); display: none; gap: 10px; }
body.photo .hud-photo { display: flex; }
.hud-photo .hud-btn { pointer-events: auto; }
.hud-shoot { width: 60px; height: 60px; padding: 15px; }
body.flash::after { content: ''; position: fixed; inset: 0; background: #fff; opacity: .55; pointer-events: none; animation: flash .35s ease-out forwards; }
@keyframes flash { to { opacity: 0; } }
@media (max-height: 430px) { .hud-btn { width: 40px; height: 40px; padding: 10px; } .hud-dial { top: calc(var(--safe-t) + 50px); } }
.intro-title { position: fixed; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; }
.intro-title span { display: inline-block; font-size: clamp(34px, 6.5vw, 76px); font-weight: 800; letter-spacing: .34em; margin-right: -.34em; color: #fff;
  text-transform: uppercase; text-shadow: 0 6px 40px rgba(20, 20, 60, .35); opacity: 0; transform: translateY(10px); filter: blur(6px);
  transition: opacity 2.2s cubic-bezier(.2,.8,.2,1), transform 2.2s cubic-bezier(.2,.8,.2,1), filter 2.2s cubic-bezier(.2,.8,.2,1); }
.intro-title.show span { opacity: .94; transform: none; filter: none; }
body.intro .hud { opacity: 0; }
.hud-up { position: absolute; right: var(--safe-r); bottom: var(--safe-b); }
.hud.riding .hud-bar, .hud.riding .hud-disc, .hud.riding .hud-up { opacity: 0; pointer-events: none; }
.fade { position: fixed; inset: 0; background: #f4f1f8; opacity: 0; pointer-events: none; transition: opacity .6s cubic-bezier(.2,.8,.2,1); }
.fade.on { opacity: 1; }
/* The snowmobile button (game/sled.js): in the seat button's place left of the up button (a sled nearby wins
   over a bench), big for a thumb; while driving it takes the up button's corner. */
.hud-sled { position: absolute; right: calc(var(--safe-r) + 54px); bottom: var(--safe-b); width: 60px; height: 60px; padding: 15px; opacity: 0; transform: scale(.8);
  pointer-events: none; transition: opacity .35s var(--enter), transform .35s var(--enter), right .35s var(--enter); }
.hud-sled.show { opacity: 1; transform: none; pointer-events: auto; }
body.sledding .hud-sled { right: var(--safe-r); }
body.sledding .hud-up, body.sledding .hud-sit, body.sledding .hud-hint, body.sledding .hud-emote { opacity: 0; pointer-events: none; }
@media (pointer: coarse), (max-height: 430px) { .hud-sled { width: 68px; height: 68px; padding: 17px; right: calc(var(--safe-r) + 66px); } body.sledding .hud-sled { right: var(--safe-r); } }
.fade.quick { transition-duration: .3s; }
.hud-skip { position: absolute; right: var(--safe-r); bottom: var(--safe-b); width: 56px; height: 56px; padding: 15px; opacity: 0; pointer-events: none !important;
  transition: opacity .4s var(--enter); }
.hud.riding .hud-skip { opacity: 1; pointer-events: auto !important; }
.hud-rideline { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 24px); width: min(260px, 40vw); height: 3px; margin-left: min(-130px, -20vw); border-radius: 3px;
  background: rgba(255,255,255,.22); opacity: 0; transition: opacity .4s var(--enter); overflow: hidden; }
.hud-rideline div { height: 100%; background: var(--lucht); transform-origin: left; transform: scaleX(0); transition: transform .25s linear; }
.hud.riding .hud-rideline { opacity: 1; }
.hud-sit { position: absolute; right: calc(var(--safe-r) + 54px); bottom: var(--safe-b); opacity: 0; transform: scale(.8); pointer-events: none;
  transition: opacity .35s var(--enter), transform .35s var(--enter); }
.hud-sit.show { opacity: 1; transform: none; pointer-events: auto; }
body.resting .hud-disc, body.resting .hud-up, body.resting .hud-sit, body.resting .hud-hint { opacity: 0; pointer-events: none; }

/* ---- the race (game/race.js) and the stars (game/stars.js) */
.race-clock { position: absolute; left: 50%; top: calc(var(--safe-t) + 4px); transform: translate(-50%, -12px); display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; border-radius: 999px; background: var(--glass); opacity: 0; transition: opacity .35s var(--enter), transform .35s var(--enter); }
.race-clock.show { opacity: 1; transform: translate(-50%, 0); }
.race-time { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; min-width: 76px; text-align: center; }
.race-dots { display: flex; gap: 6px; }
.race-dots i { width: 10px; height: 10px; border-radius: 99px; background: rgba(255,255,255,.25); transition: background .25s, transform .25s; }
.race-dots i.got { background: var(--lucht); transform: scale(1.15); }
.race-dots i.miss { background: #ff7a8a; }
.race-pen { position: absolute; left: 50%; top: calc(var(--safe-t) + 54px); transform: translateX(-50%); font-size: 18px; font-weight: 800; color: #ff9aa6; opacity: 0; }
.race-pen.show { animation: pen 1.1s var(--enter); }
@keyframes pen { 0% { opacity: 0; transform: translate(-50%, 6px); } 15% { opacity: 1; transform: translate(-50%, 0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -8px); } }
.race-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.96); min-width: 250px; padding: 18px 22px 14px; border-radius: 22px;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .45s var(--enter), transform .45s var(--enter); text-align: center; }
.race-card.show { opacity: 1; transform: translate(-50%, -50%); }
.race-card.record { box-shadow: 0 0 0 2px #ffd36b, 0 10px 50px rgba(255, 200, 90, .35); }
.race-big { font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.race-card.record .race-big { color: #ffd36b; }
.race-sub { margin-top: 6px; font-size: 13px; font-weight: 700; opacity: .7; letter-spacing: .08em; }
.race-card ol { list-style: none; margin: 12px 0 0; padding: 0; font-size: 15px; font-weight: 700; }
.race-card li { display: flex; justify-content: space-between; gap: 28px; padding: 5px 10px; border-radius: 10px; }
.race-card li b { font-variant-numeric: tabular-nums; color: #ffd36b; }
.race-card li.me { background: rgba(108, 194, 255, .25); }
.star-tag { position: absolute; left: 50%; top: calc(var(--safe-t) + 58px); transform: translate(-50%, -8px) scale(.9); display: flex; align-items: center; gap: 6px;
  padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--glass); font-size: 17px; font-weight: 800; opacity: 0; transition: opacity .3s var(--enter), transform .3s var(--enter); }
.star-tag svg { width: 22px; height: 22px; fill: #ffd36b; }
.star-tag span { opacity: .6; font-weight: 700; }
.star-tag.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
@media (max-height: 430px) { .race-card { padding: 12px 18px 10px; } .race-big { font-size: 34px; } .race-card ol { font-size: 13px; margin-top: 8px; } .race-card li { padding: 3px 8px; } }

/* ---- the map (ui/map.js) */
.map { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; gap: 18px; background: rgba(12, 16, 36, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .35s var(--enter); }
.map.open { opacity: 1; pointer-events: auto; }
.map-card { position: relative; height: min(92vh, 900px); aspect-ratio: 2640 / 3000; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 70px rgba(6, 10, 30, .5);
  transform: scale(.97); transition: transform .35s var(--enter); }
.map.open .map-card { transform: none; }
.map-card canvas { width: 100%; height: 100%; display: block; }
.map-layer { position: absolute; inset: 0; }
.map-place { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink); }
.map-place span { width: 40px; height: 40px; padding: 9px; border-radius: 999px; background: rgba(28, 34, 70, .82); box-shadow: 0 4px 14px rgba(10, 14, 40, .35), inset 0 0 0 1.5px rgba(255,255,255,.25); box-sizing: border-box; }
.map-place svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.map-place em { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .02em; padding: 1px 7px; border-radius: 99px; background: rgba(28, 34, 70, .7); white-space: nowrap; }
.map-place:active span { transform: scale(.9); background: var(--lucht); }
.map-me { position: absolute; width: 26px; height: 26px; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; }
.map-me i { position: absolute; inset: 0; background: #ff6f7d; clip-path: polygon(50% 0, 92% 92%, 50% 72%, 8% 92%); filter: drop-shadow(0 0 3px #fff); }
.map-others i { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 99px; background: #2c3570; box-shadow: 0 0 0 1.5px #fff; }
.map-star { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: rgba(40, 44, 80, .25); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); pointer-events: none; }
.map-star.got { background: #ffc440; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
.map-close { position: absolute; top: var(--safe-t); right: var(--safe-r); }
.map-list { display: grid; grid-template-columns: 1fr; gap: 8px; max-height: 92vh; overflow-y: auto; transform: translateX(10px); transition: transform .35s var(--enter); }
.map.open .map-list { transform: none; }
.map-go { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 6px; border: 0; border-radius: 999px; background: var(--glass); color: var(--ink);
  font: 800 15px ui-rounded, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.map-go span { width: 34px; height: 34px; padding: 7px; border-radius: 99px; background: rgba(255,255,255,.12); box-sizing: border-box; }
.map-go svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.map-go:active { background: rgba(108, 194, 255, .45); }
@media (max-height: 600px) {
  .map { justify-content: flex-start; padding-left: max(16px, env(safe-area-inset-left)); gap: 12px; }
  .map-card { height: 94vh; border-radius: 16px; }
  .map-place { pointer-events: none; }
  .map-place span { width: 24px; height: 24px; padding: 4px; }
  .map-place em { display: none; }
  .map-list { grid-template-columns: 1fr 1fr; max-height: 94vh; align-content: center; }
  .map-go { height: 44px; font-size: 14px; padding-right: 14px; }
}

/* ---- emotes (game/emote.js): above the up button; the four open to the left */
.hud-emote { position: absolute; right: var(--safe-r); bottom: calc(var(--safe-b) + 58px); display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(6px);
  pointer-events: none; transition: opacity .3s var(--enter), transform .3s var(--enter); }
.hud-emote.show { opacity: 1; transform: none; }
.hud-emote button { pointer-events: none; }
.hud-emote.show .hud-emote-open { pointer-events: auto; }
.hud-emote-list { display: flex; gap: 8px; opacity: 0; transform: translateX(10px); transition: opacity .25s var(--enter), transform .25s var(--enter); }
.hud-emote.open .hud-emote-list { opacity: 1; transform: none; }
.hud-emote.open .hud-emote-list button { pointer-events: auto; }
.hud.riding .hud-emote { opacity: 0 !important; }
/* Touch: the thumb buttons bottom right are bigger than the settings up top. */
@media (pointer: coarse) {
  .hud-up, .hud-sit, .hud-emote-open, .hud-skip { width: 56px; height: 56px; padding: 15px; }
  .hud-sit { right: calc(var(--safe-r) + 66px); }
  .hud-emote { bottom: calc(var(--safe-b) + 68px); }
  .hud-emote-list .hud-btn { width: 50px; height: 50px; padding: 13px; }
}

/* ---- goals (game/goals.js): beside the map, and a pop-up when one is done */
.map-goals { list-style: none; margin: 0; padding: 14px 16px; border-radius: 18px; background: var(--glass); max-height: 92vh; overflow-y: auto; width: 250px; box-sizing: border-box;
  font: 700 13px ui-rounded, system-ui, sans-serif; color: var(--ink); transform: translateX(10px); transition: transform .35s var(--enter); }
.map.open .map-goals { transform: none; }
.map-goals h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .14em; opacity: .7; }
.map-goals li { display: flex; align-items: center; gap: 8px; padding: 5px 0; opacity: .92; }
.map-goals li span { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 99px; background: rgba(255,255,255,.12); box-sizing: border-box; }
.map-goals li svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.map-goals li.done { opacity: .5; text-decoration: line-through; }
.map-goals li.done span { background: var(--lucht); }
.goal-pop { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 70px); transform: translate(-50%, 10px); display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 800 14px ui-rounded, system-ui, sans-serif; opacity: 0; transition: opacity .35s var(--enter), transform .35s var(--enter); white-space: nowrap; }
.goal-pop.show { opacity: 1; transform: translate(-50%, 0); }
.goal-pop span, .goal-pop b { width: 30px; height: 30px; padding: 6px; border-radius: 99px; background: rgba(255,255,255,.14); box-sizing: border-box; }
.goal-pop b { background: var(--lucht); }
.goal-pop svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.goal-pop em { font-style: normal; }
@media (max-height: 600px) { .map-goals { width: 200px; padding: 10px 12px; font-size: 11px; max-height: 94vh; } .map-goals li { padding: 3px 0; } .map-goals li span { width: 18px; height: 18px; padding: 3px; } }
@media (max-width: 900px) and (max-height: 600px) { .map-goals { width: 186px; font-size: 10.5px; padding: 8px 10px; } .map-goals li { gap: 6px; padding: 2px 0; } }

.hud-air { position: absolute; left: 50%; top: 34%; transform: translate(-50%, 8px) scale(.9); display: flex; align-items: baseline; gap: 4px; font: 800 30px ui-rounded, system-ui, sans-serif;
  color: #fff; text-shadow: 0 4px 18px rgba(10, 16, 50, .45); opacity: 0; transition: opacity .25s var(--enter), transform .25s var(--enter); pointer-events: none; }
.hud-air svg { width: 26px; height: 26px; fill: #ffd36b; align-self: center; filter: drop-shadow(0 2px 8px rgba(10,16,50,.4)); }
.hud-air span { font-size: 18px; opacity: .8; }
.hud-air.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---- the speedometer (ui/hud.js): above the ski/board buttons, right of the gear button; shows when you move */
.hud-speed { position: absolute; left: calc(var(--safe-l) + 62px); bottom: calc(var(--safe-b) + 60px); display: flex; align-items: baseline; gap: 5px; padding: 6px 13px 6px 12px;
  border-radius: 999px; background: var(--glass); font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--enter), transform .35s var(--enter); pointer-events: none; }
.hud-speed.show { opacity: 1; transform: none; }
.hud-speed b { font-size: 22px; font-weight: 800; min-width: 2ch; text-align: right; }
.hud-speed span { font-size: 11px; font-weight: 700; opacity: .7; letter-spacing: .04em; }
.hud-speed em { font-style: normal; font-size: 11px; font-weight: 700; color: #ffd36b; margin-left: 4px; }
.hud-speed em:empty { display: none; }
@media (pointer: coarse), (max-height: 430px) { .hud-speed { left: calc(var(--safe-l) + 68px); bottom: calc(var(--safe-b) + 60px); } }
/* ---- the ground (ui/ground-hud.js, game/stuck.js): the gear button above the ski/board pair (skis or board on
   foot, ringed in Lucht: put them on; a boot riding: take them off), and the reset that pops up when she is stuck. */
.hud-gear { position: absolute; left: var(--safe-l); bottom: calc(var(--safe-b) + 54px); width: 52px; height: 52px; padding: 13px; opacity: 0; transform: scale(.8);
  pointer-events: none !important; transition: opacity .35s var(--enter), transform .35s var(--enter); }
body.on-foot .hud-gear { box-shadow: inset 0 0 0 1.5px rgba(108, 194, 255, .75); color: #fff; }
.hud-gear.show { opacity: 1; transform: none; pointer-events: auto !important; }
.hud.riding .hud-gear, body.sledding .hud-gear, body.resting .hud-gear { opacity: 0; pointer-events: none !important; }
.hud-jump { position: absolute; right: calc(var(--safe-r) + 66px); bottom: calc(var(--safe-b) + 66px); width: 64px; height: 64px; padding: 17px; opacity: 0;
  transform: scale(.8); pointer-events: none !important; transition: opacity .3s var(--enter), transform .3s var(--enter); display: none; }
@media (pointer: coarse) { .hud-jump { display: block; } .hud-jump.show { opacity: 1; transform: none; pointer-events: auto !important; } }
.hud-jump:active { transform: scale(.92); }
.hud-sprint { position: absolute; right: calc(var(--safe-r) + 140px); bottom: calc(var(--safe-b) + 72px); width: 52px; height: 52px; padding: 14px; opacity: 0;
  transform: scale(.8); pointer-events: none !important; transition: opacity .3s var(--enter), transform .3s var(--enter); display: none; }
@media (pointer: coarse) { .hud-sprint { display: block; } .hud-sprint.show { opacity: 1; transform: none; pointer-events: auto !important; } }
.hud-sprint.on { box-shadow: inset 0 0 0 1.5px rgba(108, 194, 255, .75); }
.hud-reset { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 86px); width: 56px; height: 56px; margin-left: -28px; padding: 14px; opacity: 0;
  transform: scale(.6); pointer-events: none !important; transition: opacity .4s var(--enter), transform .4s var(--enter); }
.hud-reset.show { opacity: 1; transform: none; pointer-events: auto !important; animation: nudge 2.6s var(--enter) 1.2s infinite; }
@keyframes nudge { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.12) rotate(-18deg); } 90% { transform: scale(1) rotate(6deg); } }
@media (pointer: coarse), (max-height: 430px) { .hud-gear { width: 58px; height: 58px; padding: 15px; bottom: calc(var(--safe-b) + 50px); } .hud-reset { width: 62px; height: 62px; margin-left: -31px; padding: 16px; } }
/* Hidden overlays inside the HUD must not catch a thumb: ".hud button" turns every button back on, so the closed
   map's travel list (centre right) and the closed dials' stops took touches meant for steering or walking. */
.map:not(.open) button, .hud-dial:not(.open) button { pointer-events: none !important; }

/* ---- things to do where you stand (game/offers.js): one pill above the Up button, an icon and a word (E) */
.hud-act { position: fixed; right: var(--safe-r); bottom: calc(var(--safe-b) + 60px); height: 48px; padding: 0 16px 0 10px; display: flex; align-items: center; gap: 8px;
  border: 0; border-radius: 999px; background: linear-gradient(180deg, rgba(166, 220, 255, .96), rgba(108, 194, 255, .96)); color: #061f38;
  font: 700 15px/1 ui-rounded, "SF Pro Rounded", system-ui, sans-serif; letter-spacing: .01em; box-shadow: 0 8px 24px rgba(8, 12, 30, .28), inset 0 1px 0 rgba(255,255,255,.55);
  opacity: 0; transform: translateY(8px) scale(.94); pointer-events: none; transition: opacity .3s var(--enter), transform .3s var(--enter); cursor: pointer; z-index: 5; }
.hud-act.on { opacity: 1; transform: none; pointer-events: auto; }
.hud-act:active { transform: scale(.94); }
.hud-act .ic { width: 28px; height: 28px; }
.hud-act .ic svg { width: 100%; height: 100%; fill: currentColor; --hole: rgba(166, 220, 255, .96); display: block; }
.hud-act kbd { font: 700 11px/1 ui-rounded, system-ui, sans-serif; padding: 4px 6px; border-radius: 6px; background: rgba(6, 31, 56, .14); color: #061f38; }
@media (pointer: coarse) { .hud-act { height: 56px; padding: 0 20px 0 12px; font-size: 17px; bottom: calc(var(--safe-b) + 76px); } .hud-act kbd { display: none; } }
body.sledding .hud-act, body.resting .hud-act, body.photo .hud-act, body.in-activity .hud-act { opacity: 0; pointer-events: none; }
/* An activity with its own screen (the pool table, the telescope): the HUD steps aside. */
body.in-activity .hud { opacity: 0; pointer-events: none; }
body.in-activity .hud * { pointer-events: none !important; }
/* A small note in the middle of the screen (a discovery, a hint that shows once). */
.toast { position: fixed; left: 50%; top: 22%; transform: translate(-50%, -8px); padding: 12px 18px; border-radius: 16px; background: var(--glass); color: var(--ink);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 0 0 1px var(--glass-hi), 0 10px 30px rgba(8,12,30,.25);
  font: 700 15px/1.25 ui-rounded, system-ui, sans-serif; display: flex; align-items: center; gap: 10px; opacity: 0; pointer-events: none; transition: opacity .4s var(--enter), transform .4s var(--enter); z-index: 6; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 26px; height: 26px; fill: #ffd36b; }
.toast em { font-style: normal; font-weight: 800; font-size: 13px; margin-left: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 211, 107, .18); color: #ffd36b; font-variant-numeric: tabular-nums; }
/* The telescope (game/village-play.js): a round view with a soft black edge. */
.scope { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s var(--enter); z-index: 4;
  background: radial-gradient(circle at 50% 50%, transparent 0 38vmin, rgba(0,0,0,.92) 42vmin, #000 60vmin); }
.scope.on { opacity: 1; pointer-events: auto; }

/* The way to the gondola for someone new (ui/waypoint.js): a tag over the station, or at the screen's edge. */
.waypoint { position: fixed; left: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 8px;
  border-radius: 999px; background: var(--glass); color: var(--ink); box-shadow: inset 0 0 0 1px var(--glass-hi), 0 8px 24px rgba(8,12,30,.22);
  backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
  font: 700 13px/1 ui-rounded, system-ui, sans-serif; pointer-events: none; opacity: 0; transition: opacity .5s var(--enter); white-space: nowrap; }
.waypoint.on { opacity: 1; }
.waypoint .ic svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.waypoint .d { opacity: .7; font-variant-numeric: tabular-nums; }
.waypoint .arr { display: none; position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.waypoint .arr::after { content: ''; position: absolute; left: 30px; top: -6px; border: 6px solid transparent; border-left: 9px solid var(--ink); opacity: .85; }
.waypoint.edge .lb { display: none; }
.waypoint.edge .arr { display: block; }
@media (max-width: 600px) { .waypoint .lb { display: none; } }

#room-loading {position:fixed;bottom:18%;left:50%;transform:translateX(-50%);background:#202a40;color:white;padding:10px 16px;border-radius:12px;font:14px system-ui;pointer-events:none;}

/* ---- The Wondovator (src/landing, docs/LANDING.md): the ride in, the door swap, the lift button, party tags, the room placeholder.
   One accent token for the landing's light: --lift-light (the 3D side reads LANDING.light in landing.js). */
:root { --lift-light: #ffe6c2; --lift-navy: #0d1430; }
body.lift-ride #status { display: none; }
.ride { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.ride-dim { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 50% 40%, #1d2b5c 0%, var(--lift-navy) 70%); transition: opacity 1.1s var(--enter); }
.ride.world .ride-dim { opacity: 0; }
.ride-title { position: absolute; left: 0; right: 0; top: 13%; display: flex; flex-direction: column; align-items: center; gap: 18px; transition: opacity 1s var(--enter), transform 1s var(--enter); }
.ride-title span { font-size: clamp(30px, 5.4vw, 64px); font-weight: 700; color: #fff; text-shadow: 0 6px 36px rgba(10, 14, 50, .45); letter-spacing: .01em; }
.ride-bar { display: block; width: min(180px, 36vw); height: 3px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.ride-bar b { display: block; height: 100%; background: var(--lift-light); transform-origin: 0 50%; transform: scaleX(0); transition: transform .4s linear; box-shadow: 0 0 10px var(--lift-light); }
.ride-title.away { opacity: 0; transform: translateY(-10px); }
body:not(.lift-ride) .ride-title { opacity: 0; }
.ride-doors i { position: absolute; top: 0; bottom: 0; width: 50.5%; background: linear-gradient(90deg, rgba(196, 210, 240, .5), rgba(232, 238, 255, .62));
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); transition: transform .25s cubic-bezier(.3,.7,.2,1); }
.ride-doors i:first-child { left: 0; transform: translateX(-101%); box-shadow: inset -2px 0 0 rgba(255,255,255,.9); }
.ride-doors i:last-child { right: 0; transform: translateX(101%); box-shadow: inset 2px 0 0 rgba(255,255,255,.9); }
.ride.shut .ride-doors i { transform: none; transition-duration: .15s; }
/* The liftrit's cloud (src/landing/cloud.js): over everything but load errors; only opacities and the drifts' transforms move.
   The colour is packages/wondo-runtime/seam.js CLOUD_CSS (the script sets it; this one is for the first paint). */
#ride-mist { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; display: none; contain: strict; }
#ride-mist b { position: absolute; inset: 0; background: rgb(232,226,224); opacity: 0; will-change: opacity; }
#ride-mist i { position: absolute; left: 0; top: 0; width: 120vmax; height: 64vmax; margin: -32vmax 0 0 -60vmax; opacity: 0; will-change: transform, opacity; }
html.ride-cloud #ride-mist { display: block; }
html.ride-cloud #ride-mist b { opacity: 1; }
html.ride-cloud body { background: rgb(232,226,224); }
html.ride-gold #ride-mist b { background: rgb(222,171,107); }   /* luik 06: the shaft's gold (seam.js GOLD_CSS) */
html.ride-gold body { background: rgb(222,171,107); }
.hud-lift { position: absolute; top: var(--safe-t); left: var(--safe-l); pointer-events: auto; }
.hud-lift .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.hud-lift .ring circle { fill: none; stroke: var(--lift-light); stroke-width: 2.5; stroke-dasharray: 126; stroke-dashoffset: 126; stroke-linecap: round; }
.hud-lift.holding .ring circle { transition: stroke-dashoffset .6s linear; stroke-dashoffset: 0; }
.hud-lift-hint { position: absolute; top: calc(var(--safe-t) + 54px); left: var(--safe-l); padding: 7px 12px; border-radius: 999px; background: var(--glass); color: var(--ink);
  font-size: 13px; font-weight: 600; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transform: translateY(-4px); transition: opacity .4s var(--enter), transform .4s var(--enter); }
.hud-lift-hint.on { opacity: 1; transform: none; }
.party-tag { position: fixed; left: 0; top: 0; z-index: 5; padding: 3px 9px; border-radius: 999px; background: rgba(13, 20, 48, .62); color: #fff; font-size: 12px; font-weight: 700;
  pointer-events: none; white-space: nowrap; transition: opacity .3s; will-change: transform; }
.room-screen { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: radial-gradient(ellipse 80% 70% at 50% 35%, #1d2b5c 0%, var(--lift-navy) 75%);
  opacity: 0; transition: opacity .6s var(--enter); color: #fff; }
.room-screen.on { opacity: 1; }
.room-card { width: min(360px, 86vw); display: flex; flex-direction: column; align-items: stretch; gap: 14px; text-align: center; }
.room-icon { width: 54px; height: 54px; margin: 0 auto; color: var(--lift-light); }
.room-icon svg { width: 100%; height: 100%; fill: currentColor; --hole: var(--lift-navy); }
.room-card h1 { margin: 0; font-size: 28px; font-weight: 700; }
.room-card p { margin: -6px 0 6px; color: rgba(255,255,255,.66); font-size: 15px; }
.room-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.07); font-size: 15px; font-weight: 600; }
.seg { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.25); }
.seg button { border: 0; border-radius: 999px; padding: 6px 14px; background: none; color: rgba(255,255,255,.7); font: inherit; font-size: 14px; cursor: pointer; }
.seg button.on { background: rgba(255,255,255,.16); color: #fff; }
.sw { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 999px; background: rgba(255,255,255,.18); position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s var(--enter); }
.sw:checked { background: #6cc2ff; }
.sw:checked::after { transform: translateX(18px); }
.room-go { margin-top: 6px; border: 0; border-radius: 16px; padding: 15px; background: #fff; color: var(--lift-navy); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }

body.mouse-locked canvas { cursor: none; }


/* ---- The phone HUD (ui/compact.js, body.wv-compact: a touch screen in the app, or ?hud=touch; ?hud=old: the HUD above).
   Only the stick, Jump and at most two actions (packages/wondo-move's pad), the app's hotel button top left, and the
   speed top right. The rest is in the hotel menu, so its buttons leave the page (display: none, not just faded). */
body.wv-compact .hud-bar, body.wv-compact .hud-disc, body.wv-compact .hud-up, body.wv-compact .hud-sit, body.wv-compact .hud-sled,
body.wv-compact .hud-skip, body.wv-compact .hud-gear, body.wv-compact .hud-jump, body.wv-compact .hud-sprint, body.wv-compact .hud-reset,
body.wv-compact .hud-retry, body.wv-compact .hud-act, body.wv-compact .hud-lift, body.wv-compact .hud-lift-hint, body.wv-compact .hud-emote-open,
body.wv-compact .hud-dial:not(.open), body.wv-compact .map:not(.open), body.wv-compact .pool-prompt { display: none !important; }
body.wv-compact .hud-emote { display: none; }
body.wv-compact .hud-dial { top: var(--safe-t); right: auto; left: 50%; margin-left: max(-160px, -23vw); }
body.wv-compact .hud-speed { left: auto; right: var(--safe-r); top: var(--safe-t); bottom: auto; transform: none; }
body.wv-compact .hud-rideline { display: none; }
/* the emotes, opened from the menu: a row low in the middle, clear of the stick and Jump */
body.wv-emotes .hud-emote { display: flex !important; opacity: 1 !important; transform: none; pointer-events: auto; }
body.wv-emotes .hud-emote .hud-emote-list { opacity: 1; transform: none; }
body.wv-emotes .hud-emote .hud-emote-list button { pointer-events: auto; }
body.wv-compact.wv-emotes .hud-emote { right: auto; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 18px); }
body.wv-compact .wm-pad button svg { --hole: rgba(16, 30, 70, .72); }
body.wv-nojump .wm-jump { display: none; }
/* inside the app on a desktop the app's hotel button is top left: the valley's lift button goes below it */
.wondo-host .hud-lift { top: calc(var(--safe-t) + 72px); }
.wondo-host .hud-lift-hint { top: calc(var(--safe-t) + 126px); }
/* the pool table's leave button sits top left in its own page: in the app that is the hotel button's corner (apps/hotel #wvbtn),
   so here it goes top right, beside the table's sound button */
.wondo-host .pl-btn.pl-x, body.wv-compact .pl-btn.pl-x { left: auto; right: calc(var(--pl-r) + 56px); }
/* The hotel's screen (scherm 02, ui/hud2.js; ?hud=v1 brings all of this back): the valley's own buttons, dials, counters,
   cards and labels step aside; what they said is in the place menu and the boxes A-C now. The map stays (opened from the
   Valley tab), and so do the world's own fades. */
body.wv-hud2 .hud > :not(.map), body.wv-hud2 .hud-act, body.wv-hud2 .waypoint, body.wv-hud2 .hud-photo, body.wv-hud2 > .toast,
body.wv-hud2 .trk, body.wv-hud2 .hud-retry, body.wv-hud2 .hud-lift-hint { display: none !important; }