:root {
  color-scheme: dark;
  --gold: #e7c06b;
  --gold-light: #f6dc9a;
  --gold-deep: #9d6d2b;
  --ivory: #fff7e7;
  --muted: #b7aa96;
  --ink: #080706;
  --panel: rgba(12, 9, 7, 0.95);
  --line: rgba(231, 192, 107, 0.35);
  --good: #72d6a0;
  --bad: #ff8f8f;
  --display: "Avenir Next Condensed", "HelveticaNeue-CondensedBold", Impact, "Arial Narrow", sans-serif;
  --body: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", Menlo, Monaco, monospace;
  --safe-top: max(10px, calc(env(safe-area-inset-top) + 8px));
  --safe-right: max(14px, calc(env(safe-area-inset-right) + 10px));
  --safe-bottom: max(10px, calc(env(safe-area-inset-bottom) + 8px));
  --safe-left: max(14px, calc(env(safe-area-inset-left) + 10px));
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #080706; color: var(--ivory); font-family: var(--body); -webkit-text-size-adjust: 100%; }
button, input, textarea { font: inherit; }
button { min-height: 44px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.is-hidden { display: none !important; }
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }

.game { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 35%, #433425, #110d0a 52%, #050403 100%); }
.world { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; background: #050403; transition: opacity .4s ease, filter .3s ease, transform .7s ease; }
.game.is-question .world { filter: brightness(.34) saturate(.66) contrast(1.12); transform: scale(1.015); }
.game.is-map .world { filter: brightness(.26) saturate(.56) blur(1px); transform: scale(1.025); }
.game.is-cinematic .world { filter: brightness(.84) saturate(.88) contrast(1.08); transform: scale(1.025); }
.grade, .grain, .vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.grade { background: linear-gradient(180deg, rgba(7,5,4,.3), transparent 35%, rgba(8,5,4,.3)), linear-gradient(90deg, rgba(25,12,5,.15), transparent 45%, rgba(17,8,5,.14)); mix-blend-mode: multiply; }
.grain { opacity: .07; background: repeating-radial-gradient(circle at 12% 23%, rgba(255,255,255,.5) 0 1px, transparent 1px 4px); mix-blend-mode: soft-light; animation: noise .25s steps(2) infinite; }
.vignette { background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.08) 4px), radial-gradient(circle, transparent 48%, rgba(0,0,0,.62) 100%); }
@keyframes noise { 0%{transform:translate(0)} 33%{transform:translate(-1%,1%)} 66%{transform:translate(1%,-1%)} }

.start-sequence { position:absolute; z-index:80; inset:0; overflow:hidden; background:#050403 url("assets/poster-entry.jpg") center/cover no-repeat; }
.start-sequence-shade { position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,rgba(2,2,2,.48),rgba(2,2,2,.08) 55%,rgba(2,2,2,.04)),radial-gradient(circle at 50% 30%,rgba(231,192,107,.06),rgba(0,0,0,.46) 76%); }
.start-sequence > p, .start-sequence-logo, .start-sequence-led { position:absolute; z-index:2; left:50%; transform:translateX(-50%); }
.start-sequence > p { margin:0; color:var(--gold-light); font:900 clamp(.64rem,1.6vw,.88rem)/1 var(--display); letter-spacing:.28em; text-shadow:0 2px 12px #000; }
#start-sequence-kicker { top:max(5%,var(--safe-top)); }
#start-sequence-status { top:62%; min-width:240px; text-align:center; opacity:.78; }
.start-sequence-logo { top:16%; display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; align-items:end; filter:drop-shadow(0 10px 28px #000); }
.start-sequence-logo span { font:950 italic clamp(3.1rem,11vw,8.2rem)/.76 var(--display); letter-spacing:-.065em; }
.start-sequence-logo strong { margin-left:.06em; color:transparent; font:950 italic clamp(4rem,13vw,9.7rem)/.7 var(--display); -webkit-text-stroke:2px var(--gold); text-shadow:0 0 0 transparent; transition:color .16s ease,text-shadow .16s ease,transform .16s ease; }
.start-sequence-logo small { grid-column:1 / -1; justify-self:center; margin-top:12px; color:var(--gold-light); font:900 clamp(.68rem,1.55vw,.94rem)/1 var(--display); letter-spacing:.22em; }
.start-sequence-led { top:55%; display:grid; grid-template-columns:repeat(4,52px); gap:12px; }
.start-sequence-led i { display:block; height:5px; background:#3c3020; box-shadow:0 0 0 transparent; transform:scaleX(.72); transition:background .1s ease,box-shadow .1s ease,transform .1s ease; }
.start-sequence.step-1 .start-sequence-led i:nth-child(1),
.start-sequence.step-2 .start-sequence-led i:nth-child(-n+2),
.start-sequence.step-3 .start-sequence-led i:nth-child(-n+3),
.start-sequence.step-4 .start-sequence-led i { background:#fff2bd; box-shadow:0 0 8px #fff,0 0 24px var(--gold),0 0 52px var(--gold); transform:scaleX(1); }
.start-sequence.is-final .start-sequence-logo strong { color:#fff0bb; text-shadow:0 0 12px #fff,0 0 38px var(--gold),0 0 80px #9d6d2b; transform:scale(1.08); }
.start-sequence.is-final::after { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; background:#f7daa0; animation:startImpact .48s ease-out both; }
@keyframes startImpact { 0%{opacity:.68} 100%{opacity:0} }

.screen { position: absolute; inset: 0; z-index: 30; padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }
.start-screen { display:grid; grid-template-columns:minmax(340px,720px) auto; align-items:center; gap:clamp(20px,5vw,72px); background:#050403 url("assets/poster-entry.jpg") center/cover no-repeat; }
.start-background-video { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; background:#050403; transform:translateX(9%) scale(1.002); transition:filter .35s ease,transform .7s ease; }
.start-screen::before { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(100deg,rgba(7,5,4,.97) 4%,rgba(13,8,6,.76) 52%,rgba(7,5,4,.08)); pointer-events:none; }
.start-screen::after, .results::after { content:""; position:absolute; z-index:3; inset:12px; border:1px solid rgba(231,192,107,.24); pointer-events:none; }
.start-screen.is-launching .start-background-video { filter:brightness(1.3) saturate(1.12); transform:translateX(9%) scale(1.025); }
.start-screen.is-launching .start-panel { opacity:.82; transform:scale(.995); }
.start-panel { position:relative; z-index:2; width:min(650px,78vw); padding-left:clamp(10px,3vw,36px); text-align:left; transition:opacity .3s ease,transform .3s ease; }
.eyebrow { margin:0 0 7px; color:var(--gold); font:800 clamp(.68rem,1.15vw,.82rem)/1.1 var(--display); letter-spacing:.2em; text-transform:uppercase; }
.start-screen h1 { margin:0; font:900 italic clamp(4rem,10vw,8.8rem)/.78 var(--display); letter-spacing:-.07em; text-shadow:6px 6px 0 rgba(157,109,43,.17); }
.start-screen h1 span { color:transparent; -webkit-text-stroke:2px var(--gold); }
.creator-credit { margin:9px 0 0; color:var(--gold-light); font:800 clamp(.72rem,1.3vw,.9rem)/1 var(--display); letter-spacing:.14em; text-transform:uppercase; }
.tagline { margin:8px 0 11px; font:800 clamp(.82rem,1.6vw,1.05rem)/1 var(--display); letter-spacing:.16em; text-transform:uppercase; }
.start-identity { display:grid; grid-template-columns:minmax(175px,.9fr) minmax(165px,.8fr) minmax(195px,1fr); align-items:end; gap:8px; width:min(620px,100%); margin-bottom:8px; }
.language-picker { min-width:0; margin:0; border:0; padding:0; }
.language-picker legend, .player-field span { display:block; margin-bottom:5px; color:var(--gold); font:800 .64rem/1 var(--display); letter-spacing:.15em; }
.language-picker > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; }
.language-picker button { min-width:0; min-height:44px; border:1px solid rgba(231,192,107,.28); padding:5px 4px; color:#cbbda9; background:rgba(5,4,3,.68); font:900 .61rem/1 var(--display); letter-spacing:.04em; cursor:pointer; }
.language-picker button.is-active { border-color:var(--gold-light); color:#160f08; background:linear-gradient(120deg,#efd081,#b27b34); }
.mode-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; width:min(620px,100%); }
.mode-card { display:grid; align-content:center; gap:4px; min-height:66px; border:1px solid rgba(231,192,107,.28); padding:9px 12px; color:var(--ivory); background:rgba(5,4,3,.64); text-align:left; cursor:pointer; }
.mode-card span { color:var(--gold); font:900 .8rem/1 var(--display); letter-spacing:.12em; }
.mode-card small { color:#cabfae; font:650 .7rem/1.25 var(--body); }
.mode-card.is-active { border-color:var(--gold-light); background:linear-gradient(130deg,rgba(157,109,43,.34),rgba(46,20,13,.7)); box-shadow:0 0 0 2px rgba(231,192,107,.08) inset; }
.mode-copy { min-height:30px; max-width:610px; margin:7px 0 5px; color:#d7cbb9; font-size:.72rem; line-height:1.3; }
.player-field { display:block; min-width:0; margin:0; }
.player-field input { width:100%; min-height:44px; border:0; border-bottom:1px solid var(--gold); outline:0; padding:7px 2px 5px; color:#fff; background:transparent; font:800 1rem/1 var(--display); letter-spacing:.12em; text-transform:uppercase; }
.player-field input[aria-invalid="true"] { border-color:var(--bad); }
.player-error { display:block; margin-top:4px; color:var(--bad); font:750 .68rem/1.2 var(--body); letter-spacing:.01em; }
.start-actions { display:flex; align-items:stretch; flex-wrap:wrap; gap:8px; }
.primary-button { position:relative; min-width:230px; min-height:48px; border:1px solid var(--gold); padding:10px 20px 8px; color:#140d06; background:linear-gradient(120deg,#f0d083,#b27a32); box-shadow:0 12px 35px rgba(0,0,0,.4); font:900 .83rem/1 var(--display); letter-spacing:.15em; cursor:pointer; text-transform:uppercase; }
.primary-button::before { content:""; position:absolute; inset:3px; border:1px solid rgba(55,31,9,.25); pointer-events:none; }
.primary-button small { display:block; margin-top:5px; font-size:.58rem; letter-spacing:.14em; opacity:.76; }
.primary-button.compact { min-width:190px; padding:9px 16px; }
.offline-button, .secondary-button { min-height:44px; border:1px solid var(--line); padding:8px 12px; color:var(--gold-light); background:rgba(7,5,4,.72); font:800 .66rem/1.1 var(--display); letter-spacing:.1em; cursor:pointer; }
.offline-button span { margin-right:5px; font-size:1rem; }
.offline-button.is-ready { border-color:var(--good); color:var(--good); }
.offline-button:disabled { cursor:wait; opacity:.75; }
.fullscreen-launch { display:grid; grid-template-columns:34px 1fr; grid-template-rows:auto auto; align-content:center; align-items:center; min-height:50px; border:1px solid var(--gold-light); padding:5px 8px; color:var(--gold-light); background:linear-gradient(130deg,rgba(157,109,43,.28),rgba(5,4,3,.88)); text-align:left; cursor:pointer; box-shadow:inset 0 0 0 2px rgba(231,192,107,.06),0 0 20px rgba(231,192,107,.08); }
.fullscreen-launch > span { grid-row:1 / 3; color:var(--gold); font-size:1.35rem; }
.fullscreen-launch strong { font:950 .72rem/1 var(--display); letter-spacing:.1em; }
.fullscreen-launch small { margin-top:4px; color:#c9bca8; font:750 .52rem/1 var(--display); letter-spacing:.06em; }
.fullscreen-launch.is-active { border-color:var(--good); color:var(--good); }
.offline-status, .controls { margin:6px 0 0; color:var(--muted); font:700 .63rem/1.25 var(--display); letter-spacing:.09em; text-transform:uppercase; }
.offline-status.is-ready { color:var(--good); }
.offline-status.is-error { color:var(--bad); }
.start-badge { position:relative; z-index:2; align-self:end; justify-self:end; display:grid; justify-items:end; padding:0 20px 18px 0; font-family:var(--display); }
.start-badge strong { color:var(--gold); font-size:.62rem; letter-spacing:.2em; }

.hud { position:absolute; z-index:10; top:var(--safe-top); left:var(--safe-left); right:var(--safe-right); display:flex; align-items:stretch; gap:5px; pointer-events:none; }
.hud-block { min-width:118px; padding:7px 11px 5px; border-left:2px solid var(--gold); background:linear-gradient(90deg,rgba(5,4,3,.92),rgba(5,4,3,.58)); box-shadow:0 5px 20px rgba(0,0,0,.28); }
.hud-block.zone { min-width:176px; }
.hud-block.score, .hud-block.time { margin-left:auto; min-width:95px; text-align:right; }
.hud-block.time { margin-left:0; }
.hud small { display:block; color:#a89882; font:700 .58rem/1 var(--display); letter-spacing:.12em; }
.hud strong { display:block; margin-top:3px; font:900 .78rem/1 var(--display); letter-spacing:.07em; }
.hud .score strong, .hud .time strong { color:var(--gold); font-family:var(--mono); }
.icon-button { width:44px; min-width:44px; border:1px solid var(--line); color:var(--gold); background:rgba(5,4,3,.8); pointer-events:auto; cursor:pointer; font-weight:900; }
.progress { position:absolute; z-index:11; top:max(62px,calc(env(safe-area-inset-top) + 56px)); left:var(--safe-left); display:flex; align-items:center; gap:8px; }
.progress > span { min-width:42px; color:var(--gold); font:800 .68rem/1 var(--mono); }
.progress-track { width:150px; height:4px; overflow:hidden; background:rgba(255,255,255,.18); }
.progress-track i { display:block; height:100%; width:0; background:linear-gradient(90deg,#9d6d2b,#f3d485); box-shadow:0 0 12px var(--gold); transition:width .45s ease; }

.mission-card { position:absolute; z-index:18; top:50%; left:var(--safe-left); transform:translateY(-50%); width:min(410px,58vw); padding:18px 22px 16px; border-left:4px solid var(--gold); background:linear-gradient(90deg,rgba(6,5,4,.97),rgba(6,5,4,.18)); animation:missionIn .45s cubic-bezier(.2,.8,.2,1); }
.mission-card span, .mission-card small { display:block; color:var(--gold); font:800 .68rem/1.1 var(--display); letter-spacing:.18em; }
.mission-card strong { display:block; margin:5px 0; font:900 italic clamp(1.8rem,5vw,3.8rem)/.9 var(--display); letter-spacing:-.03em; }
@keyframes missionIn { from{opacity:0;transform:translate(-30px,-50%)} to{opacity:1;transform:translate(0,-50%)} }
.cinematic-label { position:absolute; z-index:15; top:max(65px,calc(env(safe-area-inset-top) + 59px)); right:var(--safe-right); padding:7px 10px; border:1px solid var(--line); color:var(--gold); background:rgba(5,4,3,.78); font:800 .62rem/1 var(--display); letter-spacing:.16em; }
.skip-button { position:absolute; z-index:18; right:var(--safe-right); bottom:var(--safe-bottom); min-width:88px; border:1px solid var(--line); padding:7px 12px; color:#e6d9c6; background:rgba(5,4,3,.78); font:800 .64rem/1 var(--display); letter-spacing:.13em; cursor:pointer; }

.destination-panel { position:absolute; z-index:16; inset:0; display:grid; grid-template-columns:minmax(205px,.7fr) 1.5fr minmax(160px,.5fr); align-items:center; gap:clamp(12px,2.6vw,36px); padding:max(76px,calc(env(safe-area-inset-top) + 70px)) var(--safe-right) var(--safe-bottom) var(--safe-left); background:linear-gradient(95deg,rgba(6,5,4,.93),rgba(6,5,4,.52) 48%,rgba(6,5,4,.82)); }
.destination-heading h2 { margin:5px 0 8px; font:900 italic clamp(2.4rem,6vw,5.2rem)/.82 var(--display); letter-spacing:-.04em; }
.destination-heading > p:last-child { max-width:360px; margin:0; color:#d0c4b2; font-size:clamp(.72rem,1.2vw,.88rem); line-height:1.4; }
.destination-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.destination-card { position:relative; min-height:110px; overflow:hidden; border:1px solid rgba(231,192,107,.28); padding:0; color:#fff; background:#110d09; text-align:left; cursor:pointer; isolation:isolate; }
.destination-card::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(5,4,3,.91),rgba(5,4,3,.18)); }
.destination-card img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; filter:saturate(.76) contrast(1.08); transition:transform .5s ease,filter .3s ease; }
.destination-card .card-copy { position:absolute; inset:auto 12px 10px; }
.destination-card small { display:block; color:var(--gold); font:800 .58rem/1 var(--display); letter-spacing:.14em; }
.destination-card strong { display:block; margin-top:4px; font:900 italic clamp(1rem,2.2vw,1.55rem)/.9 var(--display); letter-spacing:.03em; }
.destination-card .card-index { position:absolute; top:8px; right:9px; color:rgba(255,255,255,.75); font:700 .62rem/1 var(--mono); }
.destination-card:hover img, .destination-card:focus-visible img { transform:scale(1.05); filter:saturate(1) contrast(1.08); }
.destination-card.is-complete { border-color:rgba(231,192,107,.72); }
.destination-card.is-complete::before { content:"VALIDÉ ◆"; position:absolute; z-index:2; top:8px; left:9px; color:var(--gold); font:900 .58rem/1 var(--display); letter-spacing:.1em; }
.destination-card:disabled { cursor:default; opacity:.64; }
.boss-lock { display:grid; place-items:center; min-height:150px; width:100%; border:1px solid rgba(231,192,107,.24); padding:16px; color:var(--ivory); text-align:center; background:rgba(7,5,4,.72); cursor:default; }
.boss-lock span { color:var(--gold); font-size:1.4rem; }
.boss-lock strong { margin:8px 0 5px; font:900 1rem/1 var(--display); letter-spacing:.08em; }
.boss-lock small { color:var(--muted); font:700 .6rem/1.35 var(--display); letter-spacing:.1em; }
.boss-lock.is-ready { border-color:var(--gold); background:linear-gradient(145deg,rgba(75,21,35,.94),rgba(7,5,4,.92)); animation:bossPulse 1.5s ease-in-out infinite; cursor:pointer; }
.boss-lock.is-ready strong { color:var(--gold); }
.boss-lock:disabled { opacity:1; }
@keyframes bossPulse { 50%{box-shadow:0 0 28px rgba(231,192,107,.2)} }

.walking-ui { position:absolute; z-index:12; left:var(--safe-left); right:var(--safe-right); bottom:var(--safe-bottom); display:grid; grid-template-columns:72px auto 1fr; align-items:center; gap:12px; }
.walking-line { height:2px; background:linear-gradient(90deg,transparent,var(--gold)); box-shadow:0 0 12px var(--gold); animation:routeLine 1.1s ease-in-out infinite; }
@keyframes routeLine { 50%{transform:scaleX(.72);opacity:.5} }
.walking-ui small { display:block; color:var(--gold); font:800 .58rem/1 var(--display); letter-spacing:.14em; }
.walking-ui strong { display:block; margin-top:3px; font:900 .82rem/1 var(--display); letter-spacing:.07em; }
.walking-ui p { justify-self:end; margin:0; color:#cbbfae; font:700 .62rem/1 var(--display); letter-spacing:.11em; }
.arrival { position:absolute; z-index:22; inset:0; display:grid; place-content:center; justify-items:center; text-align:center; background:radial-gradient(circle,rgba(12,10,8,.82),rgba(2,2,2,.97)); animation:arrivalIn 1.9s ease both; }
.arrival-mark { color:var(--gold); font-size:1.5rem; }
.arrival p { margin:10px 0 4px; color:var(--gold); font:800 .7rem/1 var(--display); letter-spacing:.24em; }
.arrival h2 { margin:0; font:900 italic clamp(3rem,9vw,7rem)/.82 var(--display); letter-spacing:-.04em; }
.arrival span { margin-top:12px; color:#c7baa7; font:800 .68rem/1 var(--display); letter-spacing:.16em; }
@keyframes arrivalIn { 0%{opacity:0} 18%,72%{opacity:1} 100%{opacity:0} }

.encounter { position:absolute; z-index:24; top:max(68px,calc(env(safe-area-inset-top) + 62px)); left:var(--safe-left); right:var(--safe-right); bottom:var(--safe-bottom); overflow:auto; padding:10px; border:1px solid rgba(231,192,107,.48); background:linear-gradient(145deg,rgba(8,6,5,.98),rgba(24,14,10,.96)); box-shadow:0 22px 70px rgba(0,0,0,.62); animation:encounterIn .35s ease-out; }
@keyframes encounterIn { from{opacity:0;transform:translateY(20px)} }
.speaker-row { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:1px 5px 8px; }
.speaker-row > div { display:flex; align-items:baseline; gap:10px; }
.speaker { color:var(--gold); font:900 .72rem/1 var(--display); letter-spacing:.13em; }
.speaker-row small { color:#a2947f; font:700 .62rem/1 var(--display); letter-spacing:.1em; }
.timer { min-width:50px; text-align:right; color:var(--gold); font:800 .9rem/1 var(--mono); }
.timer.is-free { font-size:.7rem; letter-spacing:.08em; }
.timer.is-low { color:#ff6a5f; animation:timerPulse .4s ease-in-out infinite alternate; }
@keyframes timerPulse { to{transform:scale(1.08)} }
.encounter-body { display:grid; grid-template-columns:minmax(140px,23%) 1fr; gap:12px; padding-top:10px; }
.zone-visual { position:relative; min-height:150px; margin:0; overflow:hidden; }
.zone-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.72) contrast(1.08); }
.zone-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(5,4,3,.88)); }
.zone-visual figcaption { position:absolute; z-index:2; left:9px; bottom:8px; color:var(--gold); font:900 .66rem/1 var(--display); letter-spacing:.1em; }
.question-column { display:grid; grid-template-rows:auto 1fr; min-width:0; }
.question { margin:1px 0 8px; font:900 clamp(.95rem,2vw,1.2rem)/1.18 var(--display); letter-spacing:.01em; }
.answers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.answer-button { display:grid; grid-template-columns:30px 1fr; align-items:center; gap:8px; min-height:48px; border:1px solid rgba(255,255,255,.14); padding:6px 9px; color:#f7eee0; background:rgba(255,255,255,.04); text-align:left; font:700 clamp(.86rem,1.35vw,.98rem)/1.2 var(--display); cursor:pointer; }
.answer-button:hover, .answer-button:focus-visible { border-color:var(--gold); background:rgba(231,192,107,.1); }
.answer-button .keycap { display:grid; place-items:center; width:26px; height:26px; border:1px solid var(--line); color:var(--gold); font:700 .68rem/1 var(--mono); }
.answer-button.is-correct { border-color:var(--good); color:#fff; background:linear-gradient(90deg,rgba(60,134,92,.54),rgba(114,214,160,.1)); }
.answer-button.is-wrong { border-color:#ae3c41; color:#ffd6d6; background:rgba(112,23,31,.46); }
.answer-button:disabled { cursor:default; }
.feedback { display:grid; grid-template-columns:minmax(0,1fr) 144px; align-items:end; gap:12px; margin-top:9px; border-top:1px solid var(--line); padding:10px 3px 2px; color:#eadcc5; }
.feedback.is-empty { min-height:0; margin:0; border:0; padding:0; }
.feedback-copy { display:grid; gap:4px; }
.feedback strong { color:var(--gold); font:900 .78rem/1.2 var(--display); letter-spacing:.07em; }
.feedback p { margin:0; font:650 .75rem/1.3 var(--body); }
.feedback-reaction { color:#f5e7d1; font-style:italic; }
.feedback-correction { color:var(--good); font-weight:800 !important; }
.feedback-takeaway { color:#d8c28f; font-weight:800 !important; }
.feedback a { display:inline-flex; align-items:center; min-height:44px; padding:4px 2px; color:var(--gold); font:800 .64rem/1.2 var(--display); letter-spacing:.06em; text-decoration:none; }
.feedback.is-wrong strong { color:var(--bad); }
.feedback.is-nuanced strong { color:#f0c87d; }
.feedback-continue { width:100%; min-height:48px; border:1px solid var(--gold); color:#150e07; background:linear-gradient(120deg,#efd081,#b27b34); font:900 .72rem/1 var(--display); letter-spacing:.12em; cursor:pointer; }
.encounter.has-feedback .answers { opacity:.22; }
.flash { position:absolute; z-index:40; inset:0; pointer-events:none; opacity:0; }
.flash.good { background:rgba(92,198,139,.18); animation:flash .45s ease; }
.flash.bad { background:rgba(152,29,45,.22); animation:flash .45s ease; }
@keyframes flash { 40%{opacity:1} }

.install-sheet { position:absolute; z-index:60; top:50%; left:50%; width:min(440px,86vw); transform:translate(-50%,-50%); border:1px solid var(--gold); padding:24px; text-align:center; background:rgba(10,8,6,.99); box-shadow:0 26px 90px #000; }
.sheet-close { position:absolute; top:5px; right:8px; width:44px; border:0; color:#fff; background:transparent; font-size:1.4rem; cursor:pointer; }
.install-icon { color:var(--gold); font-size:2rem; }
.install-sheet h2 { margin:10px 0 8px; font:900 italic 1.8rem/1 var(--display); }
.install-sheet p { margin:0 0 16px; color:#cabdab; font-size:.84rem; line-height:1.5; }

.results { overflow:hidden; background:linear-gradient(100deg,rgba(8,6,5,.98),rgba(18,10,7,.84)),url("assets/reference/checkout.jpg") center/cover; }
.results-shell { position:relative; z-index:1; display:grid; grid-template-columns:minmax(220px,.65fr) minmax(0,1.55fr); gap:14px; width:100%; height:100%; }
.result-hero { position:relative; display:flex; flex-direction:column; min-width:0; padding:16px 14px; border:1px solid rgba(231,192,107,.3); background:linear-gradient(145deg,rgba(7,5,4,.95),rgba(48,22,17,.83)); text-align:center; }
.result-hero .eyebrow { margin-bottom:8px; font-size:.64rem; }
.result-hero h2 { margin:0; font:900 italic clamp(2rem,4vw,3.6rem)/.86 var(--display); letter-spacing:-.035em; animation:resultReveal .7s cubic-bezier(.2,.8,.2,1); }
@keyframes resultReveal { from{opacity:0;transform:scale(.8) translateY(15px)} }
.grade-badge { position:absolute; top:8px; left:8px; display:grid; place-content:center; width:60px; height:60px; border:1px solid var(--gold); transform:rotate(-5deg); background:rgba(5,4,3,.9); box-shadow:0 0 24px rgba(231,192,107,.18); }
.grade-badge span { font:800 .48rem/1 var(--display); letter-spacing:.12em; color:var(--muted); }
.grade-badge strong { color:var(--gold); font:900 2rem/.9 var(--display); }
.grade-badge.grade-s { border-color:#fff0b6; box-shadow:0 0 28px rgba(255,230,150,.42); }
.final-score { display:grid; justify-items:center; margin:20px 0 8px; }
.final-score span { color:var(--muted); font:800 .64rem/1 var(--display); letter-spacing:.14em; }
.final-score strong { color:var(--gold); font:900 clamp(2.9rem,6.6vw,5rem)/.88 var(--mono); }
.final-score.is-remediation strong { font-size:clamp(2.2rem,5vw,3.7rem); letter-spacing:-.06em; }
.result-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin-top:auto; }
.result-metrics div { display:grid; align-content:center; min-height:54px; border:1px solid rgba(231,192,107,.18); padding:5px; background:rgba(255,255,255,.03); }
.result-metrics span { color:var(--muted); font:800 .54rem/1.15 var(--display); letter-spacing:.08em; }
.result-metrics strong { margin-top:4px; color:var(--gold-light); font:850 .75rem/1 var(--mono); }
.ranking-status { margin:8px 0 0; padding:7px; border:1px solid var(--line); color:var(--gold); font:850 .58rem/1.2 var(--display); letter-spacing:.11em; }
.ranking-status.is-online { border-color:rgba(114,214,160,.55); color:var(--good); }
.ranking-status.is-local { border-color:rgba(255,143,143,.55); color:var(--bad); }

.result-content { min-width:0; min-height:0; display:grid; grid-template-rows:44px minmax(0,1fr) 50px; border:1px solid rgba(231,192,107,.24); background:rgba(7,5,4,.88); }
.result-tabs { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); }
.results.is-remediation .result-tabs { grid-template-columns:repeat(3,1fr); }
.result-tabs button { border:0; border-right:1px solid rgba(231,192,107,.14); color:var(--muted); background:rgba(255,255,255,.025); font:900 .68rem/1 var(--display); letter-spacing:.12em; cursor:pointer; }
.result-tabs button.is-active { color:#170f07; background:linear-gradient(120deg,#efd081,#b27b34); }
.result-tabs button:disabled { opacity:.45; cursor:not-allowed; }
.result-panels { min-width:0; min-height:0; }
.result-panel { height:100%; overflow:auto; padding:11px 13px; scrollbar-color:var(--gold-deep) transparent; }
.result-message { margin:0 0 8px; color:#ded1bf; font-size:.82rem; line-height:1.35; }
.result-panel-feedback { padding:8px 10px; }
.game-feedback-card { min-height:100%; border:1px solid rgba(231,192,107,.28); padding:10px 12px; background:linear-gradient(135deg,rgba(56,27,18,.72),rgba(8,6,5,.88)); }
.game-feedback-heading { display:flex; align-items:end; justify-content:space-between; gap:10px; margin-bottom:8px; }
.game-feedback-heading .eyebrow { margin-bottom:3px; font-size:.58rem; }
.game-feedback-heading h3 { margin:0; font:900 italic 1.48rem/1 var(--display); }
.game-feedback-heading > span { flex:0 0 auto; border:1px solid var(--gold); padding:5px 7px; color:var(--gold-light); font:850 .58rem/1 var(--display); letter-spacing:.1em; }
#game-feedback-form { display:grid; grid-template-columns:minmax(240px,.9fr) minmax(220px,1.1fr); gap:8px 12px; align-items:start; }
.rating-fieldset { min-width:0; margin:0; border:0; padding:0; }
.rating-fieldset legend, .game-feedback-comment > span { display:block; margin-bottom:5px; color:var(--gold); font:850 .62rem/1 var(--display); letter-spacing:.12em; }
.star-rating { display:flex; gap:4px; }
.star-rating input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.star-rating label { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; border:1px solid rgba(231,192,107,.28); color:#655a4a; background:rgba(4,3,3,.7); font-size:1.75rem; line-height:1; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.star-rating label.is-selected { border-color:var(--gold-light); color:var(--gold-light); background:rgba(157,109,43,.28); box-shadow:inset 0 -3px var(--gold); }
.star-rating input:focus-visible + label { outline:2px solid var(--gold-light); outline-offset:2px; }
.rating-fieldset > p { margin:5px 0 0; color:#cfc2b0; font-size:.68rem; line-height:1.25; }
.game-feedback-comment { display:block; min-width:0; }
.game-feedback-comment textarea { display:block; width:100%; min-height:86px; max-height:150px; resize:vertical; border:1px solid rgba(231,192,107,.38); border-radius:0; padding:9px 10px; color:var(--ivory); background:rgba(4,3,3,.72); font-size:16px; line-height:1.3; -webkit-appearance:none; scroll-margin:70px; }
.game-feedback-comment textarea::placeholder { color:#998c79; }
.game-feedback-comment textarea[aria-invalid="true"] { border-color:var(--bad); }
.game-feedback-footer { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.game-feedback-footer > div { display:grid; gap:3px; color:var(--muted); font:750 .62rem/1.2 var(--body); }
.game-feedback-footer small { color:#b9ad9d; font-size:.62rem; }
.game-feedback-footer .primary-button { min-width:210px; min-height:48px; margin:0; }
.game-feedback-status { min-height:18px; margin:7px 0 0; color:var(--gold-light); font:800 .68rem/1.25 var(--body); }
.game-feedback-status.is-error { color:var(--bad); }
.game-feedback-status.is-queued { color:var(--gold-light); }
.game-feedback-status.is-sent { color:var(--good); }
.game-feedback-card.is-complete { display:grid; place-content:center; text-align:center; }
.game-feedback-card.is-complete #game-feedback-form { display:none; }
.game-feedback-card.is-complete .game-feedback-heading { display:block; margin:0; }
.game-feedback-card.is-complete .game-feedback-heading > span { display:inline-block; margin-top:10px; border-color:var(--good); color:var(--good); }
.game-feedback-card.is-complete .game-feedback-status { max-width:520px; margin:14px auto 0; color:var(--good); font-size:.86rem; }
.result-actions button:disabled { opacity:.42; cursor:not-allowed; filter:grayscale(.4); }
.score-breakdown { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.score-breakdown div { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:44px; border:1px solid rgba(231,192,107,.19); padding:7px 9px; background:rgba(255,255,255,.035); }
.score-breakdown small { color:var(--muted); font:800 .64rem/1 var(--display); letter-spacing:.1em; }
.score-breakdown strong { color:var(--gold); font:800 .72rem/1 var(--mono); }
.progress-insight { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:7px 0; border-left:3px solid var(--gold); padding:7px 9px; background:rgba(231,192,107,.08); }
.progress-insight strong { color:var(--gold-light); font:900 .7rem/1.2 var(--display); letter-spacing:.07em; }
.progress-insight span { color:#d6c9b8; text-align:right; font-size:.7rem; }
.podium-wrap, .profile-wrap { margin-top:7px; }
.podium-wrap h3, .profile-wrap h3 { margin:0 0 5px; color:var(--gold); font:900 .66rem/1 var(--display); letter-spacing:.15em; }
.podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:6px; min-height:86px; margin:0; padding:0; list-style:none; }
.podium-place { display:grid; align-content:end; justify-items:center; gap:3px; min-width:0; border:1px solid rgba(231,192,107,.2); padding:7px 4px; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(157,109,43,.12)); animation:podiumUp .65s ease both; }
.podium-place.is-first { min-height:86px; border-color:var(--gold); order:2; }
.podium-place.is-second { min-height:70px; order:1; }
.podium-place.is-third { min-height:62px; order:3; }
.podium-place span { color:var(--gold); font:900 .7rem/1 var(--mono); }
.podium-place strong { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:900 .74rem/1 var(--display); }
.podium-place small { color:#cdbfae; font:700 .62rem/1 var(--mono); }
@keyframes podiumUp { from{opacity:0;transform:translateY(22px)} }
.profile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 12px; }
.profile-row > div { display:flex; justify-content:space-between; gap:8px; color:#d8cbb8; font:750 .68rem/1 var(--display); }
.profile-row > div strong { color:var(--gold); font-family:var(--mono); }
.profile-row > i { display:block; height:4px; margin-top:4px; overflow:hidden; background:rgba(255,255,255,.14); }
.profile-row > i b { display:block; height:100%; background:linear-gradient(90deg,#9d6d2b,#f3d485); transition:width .5s ease; }
.ranking-heading, .review-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:8px; }
.ranking-heading .eyebrow, .review-heading .eyebrow { margin-bottom:3px; font-size:.58rem; }
.ranking-heading h3, .review-heading h3 { margin:0; font:900 italic 1.5rem/1 var(--display); }
.ranking-heading > span { color:var(--gold); font:800 .68rem/1 var(--mono); }
.nearby-ranking { margin:0 0 9px; padding:7px; border:1px solid var(--line); list-style:none; background:rgba(231,192,107,.06); }
.nearby-ranking:empty { display:none; }
.nearby-ranking li, .leaderboard li { display:grid; grid-template-columns:42px minmax(0,1fr) auto auto; align-items:center; gap:8px; min-height:44px; border-bottom:1px solid rgba(255,255,255,.07); padding:5px 7px; font:750 .76rem/1 var(--display); }
.nearby-ranking li:last-child, .leaderboard li:last-child { border-bottom:0; }
.nearby-ranking .rank, .leaderboard .rank { color:var(--gold); font-family:var(--mono); }
.nearby-ranking .name, .leaderboard .name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.nearby-ranking .score, .leaderboard .score { color:var(--gold-light); font-family:var(--mono); }
.nearby-ranking .duration, .leaderboard .duration { color:var(--muted); font-family:var(--mono); }
.nearby-ranking li.is-current, .leaderboard li.is-current { background:rgba(231,192,107,.16); box-shadow:inset 3px 0 var(--gold); }
.leaderboard { margin:0; padding:0; list-style:none; }
.secondary-button { display:block; margin:9px auto 0; }
.answer-review { display:grid; gap:8px; }
.review-item { display:grid; grid-template-columns:34px 1fr; gap:9px; border:1px solid rgba(255,255,255,.09); padding:9px; background:rgba(255,255,255,.025); font-size:.75rem; }
.review-item > span { display:grid; place-content:center; width:32px; height:32px; border:1px solid var(--line); color:var(--gold); font-family:var(--mono); }
.review-item strong { display:block; line-height:1.25; }
.review-item p { margin:4px 0 0; color:#c5b9a8; line-height:1.3; }
.review-item .review-correct { color:var(--good); }
.review-item .review-takeaway { color:#dbc38d; font-weight:800; }
.review-item a { display:inline-flex; align-items:center; min-height:44px; margin-top:3px; padding:4px 2px; color:var(--gold); }
.result-actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; min-width:0; padding:3px 8px; border-top:1px solid var(--line); }
.result-actions .primary-button, .result-actions .secondary-button { min-height:44px; margin:0; }
.text-button { min-height:44px; border:0; padding:7px 9px; color:#cdbfae; background:transparent; font:800 .64rem/1 var(--display); letter-spacing:.09em; text-decoration:underline; cursor:pointer; }
.orientation-gate { display:none; }

@media (max-height: 460px) {
  .start-panel { width:min(650px,82vw); padding-left:8px; }
  .start-screen h1 { font-size:clamp(3.2rem,9vw,5.6rem); }
  .tagline { margin:8px 0; }
  .start-identity { margin-bottom:5px; }
  .language-picker legend, .player-field span { margin-bottom:3px; font-size:.58rem; }
  .fullscreen-launch { min-height:44px; }
  .mode-card { min-height:54px; padding:6px 9px; }
  .mode-copy { min-height:22px; margin:4px 0 2px; }
  .player-field { margin:0; }
  .offline-status, .controls { margin-top:3px; }
  .start-badge { display:none; }
  .destination-panel { grid-template-columns:minmax(165px,.58fr) 1.42fr minmax(135px,.46fr); gap:9px; padding-top:max(66px,calc(env(safe-area-inset-top) + 62px)); }
  .destination-card { min-height:88px; }
  .boss-lock { min-height:112px; padding:9px; }
  .encounter { top:max(61px,calc(env(safe-area-inset-top) + 56px)); padding:8px; }
  .encounter-body { grid-template-columns:minmax(115px,19%) 1fr; gap:9px; padding-top:7px; }
  .zone-visual { min-height:128px; }
  .question { font-size:.95rem; margin-bottom:6px; }
  .answer-button { min-height:46px; font-size:.86rem; padding:5px 7px; }
  .feedback { grid-template-columns:minmax(0,1fr) 132px; padding-top:7px; }
  .encounter.has-feedback .encounter-body { display:none; }
  .results-shell { grid-template-columns:minmax(220px,.63fr) minmax(0,1.5fr); gap:8px; }
  .result-hero { padding:10px 9px; }
  .result-hero h2 { font-size:2rem; }
  .grade-badge { width:52px; height:52px; }
  .grade-badge strong { font-size:1.7rem; }
  .final-score { margin:17px 0 4px; }
  .final-score strong { font-size:2.7rem; }
  .result-metrics div { min-height:49px; }
  .ranking-status { margin-top:5px; padding:5px; }
  .result-panel { padding:8px 10px; }
  .game-feedback-card { padding:8px 10px; }
  .game-feedback-heading { margin-bottom:6px; }
  .game-feedback-heading h3 { font-size:1.25rem; }
  .game-feedback-heading > span { font-size:.54rem; }
  #game-feedback-form { gap:6px 10px; }
  .star-rating label { flex-basis:48px; }
  .game-feedback-comment textarea { min-height:76px; max-height:104px; }
  .game-feedback-footer .primary-button { min-width:190px; }
  .result-actions { gap:4px; padding-inline:4px; }
  .result-actions > button { flex:1 1 0; min-width:0 !important; padding-inline:6px; font-size:.72rem; line-height:1.1; letter-spacing:.06em; white-space:normal; }
  .result-tabs button { font-size:.72rem; letter-spacing:.08em; }
  .final-score span { font-size:.68rem; letter-spacing:.08em; }
  .result-metrics span { font-size:.6rem; letter-spacing:.04em; }
}

@media (max-width: 980px) and (orientation: landscape) {
  .hud-block.identity { display:none; }
  .hud-block { min-width:92px; padding:6px 8px; }
  .hud-block.zone { min-width:145px; }
  .destination-heading h2 { font-size:2.45rem; }
  .destination-heading > p:last-child { font-size:.72rem; }
  .destination-card strong { font-size:1rem; }
  .boss-lock strong { font-size:.82rem; }
  .result-hero .eyebrow { padding-left:44px; }
  .results.is-remediation .result-hero .eyebrow { padding-left:0; }
}

@media (max-width: 760px) and (orientation: landscape) {
  .start-identity { grid-template-columns:1fr 1fr; }
  .fullscreen-launch { grid-column:1 / -1; }
  #game-feedback-form { grid-template-columns:minmax(0,1fr); }
  .game-feedback-footer { grid-column:1; align-items:end; }
  .game-feedback-footer .primary-button { min-width:170px; }
  .game-feedback-comment textarea { min-height:72px; }
}

@media (orientation: portrait) and (max-width: 1024px) {
  .orientation-gate { position:absolute; z-index:100; inset:0; display:grid; place-content:center; justify-items:center; gap:10px; padding:30px; text-align:center; background:#090706; }
  .phone-icon { color:var(--gold); font-size:3.4rem; transform:rotate(90deg); }
  .orientation-gate strong { font:900 1.4rem/1 var(--display); letter-spacing:.1em; }
  .orientation-gate span { color:var(--muted); font-size:.82rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}