/* One responsive interaction column. Pixel scenery remains full bleed. */
:root{--body-font:'Segoe UI',Arial,sans-serif;--muted:#afc7df;--flow-top:124px;--flow-width:740px;--edge:28px;--view-top:0px}
#game{top:var(--view-top);bottom:auto;height:var(--vh)}
.crt{z-index:2;opacity:.07}.danger-glow{z-index:3}.vignette{opacity:.18}
.square,.utility .square{width:60px;height:60px;font-size:30px;opacity:1}
.square svg{width:26px;height:26px}.utility{right:var(--edge);top:var(--edge);gap:10px}
.menu-btn,body:not([data-phase="intro"]):not([data-phase="done"]) .menu-btn{left:var(--edge);top:var(--edge)}
.hud{left:100px;right:100px;top:20px;max-width:740px;height:78px;gap:16px;padding:0;align-items:stretch}
.hud-pod{min-width:126px;display:flex;flex-direction:column;justify-content:center;padding:10px 18px;background:#0c2238}
.hud-pod>span{font:14px/1.2 var(--body-font);letter-spacing:0}.hud-pod strong{font:600 30px/1.2 var(--body-font)}
.round-progress{display:flex;flex-direction:column;justify-content:center;gap:10px;font:14px/1.2 var(--body-font);padding:10px 16px;letter-spacing:0}
#round-dots{justify-content:center}#round-dots i{width:13px;height:13px}
body[data-phase="intro"] .hud{display:none}
#play-flow{position:absolute;z-index:12;top:var(--flow-top);bottom:max(24px,env(safe-area-inset-bottom));left:100px;right:100px;max-width:var(--flow-width);margin:0 auto;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#62849b #081726;display:flex;flex-direction:column;gap:18px;align-items:stretch;padding:4px 6px 16px}
#play-flow> .prompt-card,#play-flow> .landing{position:relative;top:auto!important;left:auto;right:auto;bottom:auto;transform:none;width:100%;max-width:none;max-height:none;overflow:visible;margin:0;flex:none;background:#081b2f;clip-path:none;border:1px solid #537d98;box-shadow:0 10px 28px #02081250;padding:24px 28px}
#play-flow .prompt-card h2{font:600 30px/1.35 var(--body-font);text-wrap:pretty;margin:10px 0 14px;overflow-wrap:anywhere}
#play-flow .prompt-card .eyebrow{font:14px/1.3 var(--body-font);letter-spacing:0;color:#afc7df;margin:0}
#play-flow .hint{font:15px/1.4 var(--body-font);margin:0;color:#afc7df}
#play-flow .answer-dock{position:relative;inset:auto;width:100%;max-width:none;margin:0;flex:none;background:#081b2f;padding:16px;border:1px solid #537d98}
#answer-form{display:flex;gap:16px;align-items:center}.input-wrap{flex:1;min-width:0}
.input-wrap input{font:20px/1.3 var(--body-font);height:56px;padding:12px 14px;background:#03101d;color:#f2f7fc;border:1px solid #6b9ab5;border-radius:3px}
#submit-btn,.tutorial-entry button{height:56px;min-width:112px;background:#ff88aa;color:#142237;font:600 18px/1.2 var(--body-font);padding:12px 18px;border:0;border-radius:3px}
.timer{height:56px;width:56px;flex:none;font:600 22px/1 var(--body-font);color:#f2f7fc}.timer:after{display:none}
.answer-status{position:static;min-height:0;margin:0;font:16px/1.4 var(--body-font);letter-spacing:0;color:#ffb6cc}
.answer-status:not(:empty){margin-bottom:12px}.answer-status small{font-size:14px;display:block}
#play-flow .preview-label{position:static;margin:0;padding:10px 18px;background:#081b2f;font:16px/1.4 var(--body-font);color:#e8f1ff;flex:none}
#play-flow .landing{text-align:center;padding:24px}.outcome{font:700 32px/1.2 var(--body-font);color:#f2f7fc;margin:0 0 12px}
#play-flow .landing .eyebrow{font:18px/1.4 var(--body-font);letter-spacing:0;margin:8px 0;color:#afc7df}
#play-flow .landing h2{font:600 26px/1.3 var(--body-font);margin:8px 0}#play-flow .land-icon{width:50px;height:50px;float:none;margin:0 auto}
#play-flow .landing #land-points{font:22px/1.4 var(--body-font);margin:12px 0;color:#7cdded}#play-flow .landing #land-quip{font:16px/1.5 var(--body-font);margin:8px 0 0;color:#afc7df}
#play-flow .next-wrap{position:static;margin:0;transform:none;flex:none;text-align:center}.next-btn{min-height:56px;padding:14px 24px;font:600 18px/1.3 var(--body-font);letter-spacing:0;border:1px solid #7cdded;background:#10384b;color:#e8f1ff;border-radius:3px;width:100%}
#answer-confirmation{background:#081b2f;border:1px solid #7cdded;padding:20px;text-align:center;font:600 24px/1.4 var(--body-font);color:#f2f7fc}
#tutorial{flex:none;background:#081b2f;border:1px solid #7cdded;padding:24px 28px;font:17px/1.5 var(--body-font)}
.tutorial-top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#afc7df;font-size:15px}.tutorial-top button{min-height:44px;font:16px var(--body-font);text-decoration:underline}
#tutorial h2{font:600 30px/1.35 var(--body-font);margin:12px 0}#tutorial p{margin:12px 0}.tutorial-entry{display:flex;gap:12px;margin-top:8px}
.tutorial-entry input{width:100%;min-width:0;height:56px;padding:12px;font:20px var(--body-font);background:#03101d;border:1px solid #6b9ab5;color:#e8f1ff;border-radius:3px}
#tutorial-status:empty{display:none}#tutorial-status{color:#7cdded}#tutorial-status strong{display:block;font-size:26px}.tutorial-note{font-size:15px;color:#afc7df}
body[data-phase="tutorial"] .hud{visibility:hidden}body[data-phase="tutorial"] .mascot{pointer-events:none}
body[data-phase="answering"] .mascot,body[data-phase="preview"] .mascot{left:calc(100% - 84px)!important;top:120px!important;width:68px!important;height:68px!important}
.results{padding-top:100px;background:#061322ed;font:17px/1.5 var(--body-font)}.result-brand{font-family:VT323,monospace;font-size:36px}.result-header{font-size:16px}.result-score strong{font-family:VT323,monospace;font-size:100px}.result-score span{font-size:22px}.result-replay{margin:18px 0 10px;max-width:420px}.review-question{font:17px/1.5 var(--body-font)}.review-question small{font-size:16px}.review-points{font-size:24px}.results .rule{font:14px/1.4 var(--body-font);letter-spacing:.03em}.distribution p{font:14px/1.4 var(--body-font);letter-spacing:0}.band-list li{font:16px/1.4 var(--body-font)}.band-list .band-range{font-size:14px}.chart-grid>span{font-size:14px}.dive-column>span{font-size:14px}
.connection-notice{font:16px/1.4 var(--body-font);max-height:40dvh;overflow:auto;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.hero{top:15%!important}.hero .tagline,.hero .subline,.quick-start{font-family:var(--body-font)}.hero .tagline{font-size:28px}.hero .subline{font-size:19px}.quick-start{font-size:17px;line-height:1.5}.intro{max-width:640px;bottom:28px}.intro-meta,.intro-meta button{font-family:var(--body-font);font-size:16px}.intro-links{position:static;transform:none}.begin-btn{font-size:30px}
@media(max-width:1050px),(max-height:620px){:root{--edge:16px;--flow-top:98px;--flow-width:720px}.square,.utility .square{width:48px;height:48px}.hud{height:64px;top:12px;left:80px;right:80px;max-width:620px;gap:10px}.hud-pod{min-width:110px;padding:8px 12px}.hud-pod strong{font-size:28px}.hud-pod>span,.round-progress{font-size:13px}#play-flow{left:76px;right:88px;gap:14px;bottom:12px}#play-flow .prompt-card{padding:18px 22px}#play-flow .prompt-card h2{font-size:26px;margin:8px 0 10px}#play-flow .landing{padding:16px}.outcome{font-size:28px}.hero{top:68px!important}.hero-word{font-size:70px}.hero .tagline{font-size:22px;margin:10px 0}.hero .subline{display:none}.intro{bottom:18px;gap:6px}.quick-start{font-size:16px}.how-to{display:none}.sample-note{display:none}.intro-meta button{min-height:44px}.results{padding-top:76px}}
@media(max-width:699px){:root{--edge:12px;--flow-top:116px}.square,.utility .square{height:44px;width:44px}.square svg{width:24px;height:24px}.utility{flex-direction:row;gap:6px}.hud{top:64px;height:42px;left:12px;right:12px;gap:8px}.hud-pod{min-width:70px;padding:4px 8px;flex-direction:row;gap:6px;align-items:center}.hud-pod strong{font-size:19px}.hud-pod>span{font-size:12px}.round-progress{font-size:12px;gap:3px;padding:3px 5px}#round-dots{gap:3px}#round-dots i{width:7px;height:7px}#play-flow{left:12px;right:12px;top:var(--flow-top);bottom:max(12px,env(safe-area-inset-bottom));padding:0 1px 12px;gap:12px}#play-flow .prompt-card{padding:16px}#play-flow .prompt-card h2{font-size:23px;line-height:1.4;margin:8px 0 10px}#play-flow .hint{font-size:14px}.input-wrap input{font-size:19px;height:52px}#play-flow .answer-dock{padding:12px}#answer-form{gap:10px;display:grid;grid-template-columns:44px minmax(0,1fr)}.timer{width:44px;height:44px;font-size:18px}#submit-btn{grid-column:1/-1;height:50px;min-width:0;width:100%}.answer-status{font-size:15px}.mascot{visibility:hidden}body[data-phase="intro"] .mascot{visibility:visible}#play-flow .landing{padding:18px}.outcome{font-size:26px}#play-flow .landing h2{font-size:23px}#play-flow .landing #land-points{font-size:20px}.next-btn{min-height:50px;font-size:17px}#tutorial{padding:16px;font-size:16px}#tutorial h2{font-size:24px}.tutorial-entry{flex-direction:column}.tutorial-entry button{height:50px}.tutorial-note{font-size:14px}.hero{top:19%!important}.hero-word{font-size:clamp(40px,11vw,66px)}.hero .tagline{font-size:22px;line-height:1.4;max-width:290px}.intro{left:16px;right:16px;bottom:24px}.quick-start{font-size:16px;line-height:1.4}.quick-start br{display:none}.intro-links{font-size:16px}.intro-meta button{font-size:14px}.intro-meta>span{font-size:14px}.results{padding:76px 16px 36px}.result-header{padding:0;font-size:14px}.result-brand{font-size:32px}.result-score strong{font-size:84px}.result-score span{font-size:20px}.review-toggle{gap:6px;grid-template-columns:18px 18px minmax(0,1fr) 30px 16px}.review-question{font-size:16px}.results .actions{grid-template-columns:1fr 1fr}.connection-notice{flex-wrap:wrap;font-size:14px}.connection-notice button{font-size:16px}}
@media(max-height:540px) and (min-width:700px){#play-flow{top:94px;bottom:10px}.hero{top:68px!important}.hero-word{font-size:60px}.hero .tagline{font-size:19px;margin:8px 0}.intro{max-width:570px;bottom:16px}.quick-start{font-size:15px}.begin-btn{min-height:48px;padding:8px}.intro-meta{margin:0}.intro-links{display:none}}
@media(max-height:480px) and (max-width:699px){:root{--flow-top:64px}.hud{display:none}.utility #settings-btn,.utility #wardrobe-btn{display:none}#play-flow .prompt-card h2{font-size:21px}#play-flow .hint{display:none}.hero{top:70px!important}.hero .tagline,.quick-start{display:none}.intro{bottom:14px}.intro-links{display:none}}
@media(max-height:500px) and (min-width:700px){#play-flow .prompt-card h2{font-size:24px}.hud-pod{min-width:92px}.landing .land-icon{display:none}}
body.keyboard-open .mascot{visibility:hidden}body.keyboard-open #play-flow{scroll-padding-block:12px}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #ffd166;outline-offset:3px}::selection{background:#7cdded;color:#071625}
#play-flow .answer-dock,#play-flow .next-wrap{animation:none;transform:none;opacity:1}
#play-flow .answer-dock:before,#play-flow .prompt-card:after{display:none}
body:not([data-phase="intro"]) .utility{top:var(--edge)}
#submit-btn{letter-spacing:0;box-shadow:none}.input-wrap input{box-shadow:none}

#play-flow .landing{animation:none;opacity:1;transform:none}#play-flow .landing .eyebrow{text-shadow:none}#play-flow .landing h2{letter-spacing:0}#play-flow .land-icon{animation:none;filter:none}
body[data-phase="landed"] .mascot{left:calc(100% - 84px)!important;top:120px!important;width:68px!important;height:68px!important}
.intro .intro-links,.intro .intro-links .text-button{font:15px/1.4 var(--body-font)}.quick-start{background:#081b2fee;padding:12px 16px;border-radius:3px}.quick-start br:after{content:" "}

#depth-rail{position:absolute;right:0;top:90px;bottom:24px;width:88px;z-index:4;pointer-events:none;border-right:1px solid #7cdded66;background:#081b2f88;font:15px/1.4 var(--body-font);color:#e8f1ff}#depth-rail span,#depth-rail b{position:absolute;right:8px;transform:translateY(-50%);background:#081b2f;padding:3px 5px}#depth-rail b{color:#ff88aa;font-size:17px}body[data-phase="answering"] .mascot,body[data-phase="preview"] .mascot,body[data-phase="landed"] .mascot{left:8px!important;top:120px!important}body[data-phase="intro"] .mascot{top:calc(50% - 72px)!important;left:calc(100% - 80px)!important;pointer-events:none}

#play-flow .preview-label{transform:none;translate:none;clip-path:none;width:100%;text-align:center}