:root{color-scheme:dark;--ink:#e9e2cf;--muted:#9aa7b5;--panel:#09131d;--line:#25384b;--accent:#e5a84b;--danger:#c86c66;--paper:#d8ccb0}
*{box-sizing:border-box}html,body{margin:0;background:#05090d;color:var(--ink);font-family:var(--pixel-font,'Echo Ridge Pixel',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);overflow:hidden}
/* The pixel face only stays crisp on whole device pixels, so the base size is 20px (2x)
   and every size below is 10, 20, 30 or 40. Nothing in between. Synthesis is off because
   a faux-bolded bitmap face smears; there is a real drawn bold instead. */
body{font-size:20px;line-height:30px;font-synthesis:none;-webkit-font-smoothing:none;font-smooth:never;text-rendering:optimizeSpeed}button{font:inherit;line-height:20px;color:inherit;background:#132333;border:1px solid #38506a;border-radius:6px;padding:10px 14px;cursor:pointer}button:hover{background:#1a3044}button:focus-visible,#game:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}.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}
#app{position:relative;width:100vw;height:100vh;background:#05090d}#game{display:block;width:100%;height:100%;image-rendering:pixelated;background:#0e1b24}#hud{position:absolute;left:0;right:0;top:0;height:48px;background:linear-gradient(180deg,rgba(4,10,15,.94),rgba(4,10,15,.72));border-bottom:1px solid #263a4c;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:20px;pointer-events:none;text-shadow:0 1px 1px #000}.hud-left,.hud-center{display:flex;gap:16px;align-items:center}.hud-left b{color:#f1d7a5}.hud-center{color:#b9c7d5}.hud-right{color:#7f91a3;font-size:10px}.prompt{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);background:rgba(5,11,17,.92);border:1px solid #49647c;padding:10px 14px;border-radius:6px;font-size:20px}.toast{position:absolute;top:64px;left:50%;transform:translateX(-50%);background:#142331;border:1px solid #61798c;padding:10px 16px;border-radius:6px;max-width:min(720px,90vw);text-align:center}.hidden{display:none!important}
.panel{position:absolute;z-index:20;background:rgba(7,16,24,.97);border:1px solid #3e566d;box-shadow:0 18px 70px rgba(0,0,0,.65);border-radius:10px}.panel header{display:flex;align-items:center;gap:12px;border-bottom:1px solid #263a4c;padding:14px 18px}.panel h2{margin:0;color:#f1d7a5;font:700 30px/30px var(--pixel-font)}.panel header button{margin-left:auto;padding:5px 10px;font-size:20px}.dialogue{left:50%;bottom:24px;transform:translateX(-50%);width:min(860px,92vw);padding-bottom:16px}.dialogue header{align-items:center}.dialogue p{margin:14px 18px 12px;line-height:30px}.portrait{width:54px;height:54px;border:1px solid #52697f;border-radius:6px;background:#1e3241;box-shadow:inset 0 0 0 3px #0b141c}.choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 18px}.choices button{text-align:left;min-height:48px}.book,.phone,.map-panel,.pause{left:50%;top:50%;transform:translate(-50%,-50%);width:min(860px,94vw);max-height:82vh;overflow:auto}.book #notesBody,.phone #phoneBody{padding:18px}.note{border-bottom:1px solid #263a4c;padding:12px 0}.note b{display:block;color:#f1d7a5;margin-bottom:4px}.note small{display:block;margin-top:6px;font-size:10px;line-height:16px}.muted{color:var(--muted)}.map-panel{width:min(780px,94vw)}#miniMap{display:block;width:100%;height:auto;image-rendering:pixelated;padding:16px}.phone{width:min(520px,92vw)}.phone-tabs{display:flex;gap:8px;padding:12px 18px;border-bottom:1px solid #263a4c}.message{padding:10px 0;border-bottom:1px solid #223445}.message b{color:#e5a84b}.pause{text-align:center;padding:28px}.pause-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.title-screen{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:radial-gradient(circle at 50% 68%,rgba(230,168,75,.12),transparent 28%),linear-gradient(#0a1a28 0%,#112739 38%,#17251f 62%,#05090d 100%);overflow:hidden}.title-screen:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 7%,rgba(0,0,0,.1) 7% 7.3%),linear-gradient(transparent 74%,rgba(4,8,10,.9) 74%);opacity:.5}.title-card{position:relative;text-align:center;max-width:650px;padding:40px}.eyebrow{font-size:10px;line-height:16px;letter-spacing:5px;color:#8ba1b4;margin-bottom:10px}.title-card h1{font-family:var(--pixel-font);font-size:60px;line-height:60px;margin:0;color:#f0e4c7;text-shadow:0 4px 0 #253446,0 10px 34px #000}.title-card p{color:#b7c2ca;margin:24px 0}.title-card button{background:#d19a45;color:#111820;border-color:#f2c879;font-weight:700;padding:14px 20px}.title-card small{display:block;color:#778996;margin-top:18px;font-size:10px;line-height:16px}
.debug{top:56px;right:12px;bottom:12px;width:min(620px,96vw);overflow:auto}.debug-actions{position:sticky;top:0;display:flex;flex-wrap:wrap;gap:8px;padding:12px;background:#09131d;border-bottom:1px solid #263a4c}.debug select{min-width:150px;color:var(--ink);background:#132333;border:1px solid #38506a;border-radius:6px;padding:10px}.debug pre{margin:0;padding:16px;font:10px/16px var(--pixel-font);white-space:pre-wrap;color:#b8c9d8}.ending{left:50%;top:50%;transform:translate(-50%,-50%);width:min(680px,92vw);padding:34px;text-align:center}.ending h2{font:700 40px/40px var(--pixel-font);margin:12px 0 20px}.ending p{line-height:30px}.ending button{margin-top:16px;background:#d19a45;color:#111820;border-color:#f2c879;font-weight:700}
.controls{left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,92vw);max-height:84vh;overflow:auto;padding-bottom:18px}.controls>p,.controls>#controlsReset{margin-left:18px}.controls-body{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 18px 18px}.binding{display:flex;align-items:center;justify-content:space-between;text-align:left}.binding span:last-child{color:#e5a84b;text-transform:uppercase}
/* Sub-pixel snapping. Percentage centring puts a box at x.5 whenever the viewport and the
   box disagree on parity, and half a device pixel of offset is the one remaining way to
   make an on-grid pixel font look soft. round() pins the box back to whole pixels. A
   browser without round() keeps the plain 50% centring and is no worse off than before. */
@supports (left:round(down,50%,1px)){.book,.phone,.map-panel,.pause,.ending,.controls,.credits{left:round(down,50%,1px);top:round(down,50%,1px);transform:translate(round(down,-50%,1px),round(down,-50%,1px))}.toast,.prompt{left:round(down,50%,1px);transform:translateX(round(down,-50%,1px))}}
@media(max-width:800px){#hud{height:62px;align-items:flex-start;padding-top:8px}.hud-right{display:none}.hud-center{flex-direction:column;gap:0;align-items:flex-end}.choices{grid-template-columns:1fr}.dialogue{bottom:10px}.title-card{padding:20px}}