:root { --ink:#1a1329; --violet:#241b3a; --mid:#3d2c5c; --lilac:#6b5490; --cream:#f4cd9a; --paper:#fbe8c8; --gold:#d98e2b; --bright:#f2b542; --burgundy:#6b2737; --blue:#2e5f6e; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--ink); color:var(--paper); }
body { display:grid; place-items:center; font-family:"Courier New",monospace; overflow:hidden; }
button { font:inherit; }
.shell { width:100%; display:grid; place-items:center; }
.game { position:relative; width:min(100vw, 1280px); aspect-ratio:16/9; overflow:hidden; background:#000; border:clamp(2px,.4vw,6px) solid #5c2e1f; box-shadow:0 0 0 3px var(--cream); image-rendering:pixelated; }
canvas { width:100%; height:100%; display:block; image-rendering:pixelated; image-rendering:crisp-edges; }
.scanlines { position:absolute; inset:0; pointer-events:none; opacity:.11; background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,#1a1329 3px,#1a1329 5px); }
.hidden { display:none !important; }
.boot,.title-card,.quest,.travel,.verdict,.reveal { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:var(--ink); }
.boot p { margin:.5rem; font-weight:bold; letter-spacing:.14em; }
.loader { width:45%; height:18px; padding:3px; border:3px solid var(--cream); }
.loader span { display:block; width:0; height:100%; background:var(--gold); }
.title-card { background:rgba(26,19,41,.28); justify-content:center; align-items:flex-start; padding-left:9%; text-align:left; text-shadow:3px 3px 0 var(--ink); }
.eyebrow { color:var(--cream); font-size:clamp(8px,1.25vw,18px); letter-spacing:.22em; }
h1 { margin:.1em; color:var(--cream); font-size:clamp(28px,6.5vw,88px); line-height:.72; letter-spacing:-.07em; }
h1 strong,.reveal strong { color:var(--bright); }
.pixel-button { color:var(--ink); background:var(--cream); border:0; padding:.75em 1.35em; margin-top:1.2em; font-weight:900; letter-spacing:.08em; box-shadow:inset -4px -4px 0 #c97b4a, 4px 4px 0 var(--ink); cursor:pointer; image-rendering:pixelated; }
.pixel-button:hover,.pixel-button:focus-visible { color:var(--paper); background:var(--burgundy); outline:3px solid var(--bright); }
.dialog { position:absolute; left:5%; right:5%; bottom:5%; min-height:28%; display:grid; grid-template-columns:min(15vw,110px) 1fr 32px; gap:1rem; padding:clamp(9px,1.5vw,20px); color:var(--ink); background:var(--cream); border:4px solid var(--ink); box-shadow:inset 0 0 0 3px var(--paper); clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px); }
.portrait { min-width:48px; background:var(--burgundy); border:3px solid var(--ink); image-rendering:pixelated; }
.dialog-copy { text-align:left; }
.dialog-copy strong { display:block; color:var(--burgundy); font-size:clamp(10px,1.45vw,19px); }
.dialog-copy p { margin:.4em 0; font-weight:bold; font-size:clamp(10px,1.45vw,19px); line-height:1.35; }
.dialog button { align-self:end; border:0; color:var(--burgundy); background:none; cursor:pointer; animation:blink .8s steps(2,end) infinite; }
.quest { inset:11% 18%; background:var(--cream); color:var(--ink); border:5px solid var(--ink); box-shadow:inset 0 0 0 3px var(--paper),0 0 0 5px var(--cream); }
.quest>p,.verdict>p { color:var(--burgundy); letter-spacing:.2em; font-weight:bold; }
.quest h2,.verdict h2 { margin:.2em; font-size:clamp(18px,3.2vw,44px); }
.quest dl { width:70%; margin:.5em; font-size:clamp(9px,1.2vw,16px); }
.quest dl div { display:flex; justify-content:space-between; border-bottom:2px dotted var(--burgundy); padding:.3em; }
.quest dd { margin:0; }
.travel { background:transparent; text-shadow:2px 2px var(--ink); gap:.8rem; }
.travel p { color:var(--cream); letter-spacing:.2em; }
.travel strong { font-size:clamp(16px,3vw,40px); }
.travel span { color:var(--gold); font-weight:bold; }
.hud { position:absolute; inset:3% 3% auto; display:flex; justify-content:space-between; align-items:center; padding:.55em .8em; color:var(--cream); background:var(--violet); border:3px solid var(--lilac); font-size:clamp(8px,1.2vw,16px); font-weight:bold; }
.evidence-label { display:flex; align-items:center; gap:.35em; }
.evidence-label i { width:1.1em; aspect-ratio:1; border:2px solid var(--cream); background:var(--ink); }
.evidence-label i.found { background:var(--gold); box-shadow:inset 0 0 0 2px var(--ink); }
.instructions { position:absolute; top:14%; left:50%; transform:translateX(-50%); width:max-content; max-width:88%; padding:.5em 1em; text-align:center; color:var(--cream); background:var(--violet); border:2px solid var(--lilac); font-size:clamp(7px,1vw,14px); }
.instructions p { margin:0; color:var(--gold); font-weight:bold; }
.clue-toast { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:1em 1.5em; color:var(--ink); background:var(--cream); border:4px solid var(--ink); text-align:center; font-weight:bold; white-space:pre-line; }
.verdict { inset:18% 12%; background:var(--cream); color:var(--ink); border:5px solid var(--ink); }
.reveal { z-index:4; background:transparent; text-shadow:3px 3px 0 var(--ink); }
.level-number { margin:0; color:var(--bright); font-size:clamp(50px,11vw,150px); font-weight:900; line-height:.75; }
.reveal h2 { margin:.2em; font-size:clamp(25px,5vw,68px); line-height:.85; }
.reveal>p:not(.level-number) { margin:.4em; color:var(--bright); font-size:clamp(15px,2.6vw,34px); font-weight:bold; }
.reveal span { font-size:clamp(8px,1.25vw,17px); line-height:1.5; }
.sound-toggle { position:absolute; z-index:8; right:8px; bottom:7px; padding:.35em .5em; border:2px solid var(--cream); color:var(--cream); background:var(--ink); font-size:clamp(7px,.9vw,12px); cursor:pointer; }
.mobile-note { display:none; }
@keyframes blink { 50% { opacity:.25; } }
@media (max-aspect-ratio:4/5) { body { overflow:auto; } .mobile-note { display:block; margin:1.5em 1em; text-align:center; font-size:12px; } .game { width:100vw; } }
@media (prefers-reduced-motion:reduce) { .dialog button { animation:none; } }