:root { color-scheme: dark; font-family: Georgia, 'Times New Roman', serif; background: #10110e; color: #e5decb; --ink: #e5decb; --muted: #bdb69e; --gold: #d0bd8d; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; background: #10110e; }
button { font: inherit; color: inherit; cursor: pointer; border: 1px solid #b9ac8555; background: #191a15eb; min-height: 44px; padding: 11px 14px; transition: background .16s, border-color .16s; border-radius: 0; touch-action: manipulation; }
button:hover { background: #343529; border-color: var(--gold); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
button:disabled { opacity: .5; cursor: wait; }
[hidden] { display: none !important; }
#stage { width: min(100vw, 56.25dvh); height: min(100dvh, 177.778vw); position: relative; overflow: hidden; background: #151611; isolation: isolate; }
#scene, .veil, #curtain { position: absolute; inset: 0; }
#scene { background-size: cover; background-position: center; }
.veil { pointer-events: none; background: linear-gradient(#0c0e0beb 0%, #0c0e0b66 20%, transparent 35%, transparent 56%, #0c0e0be8 76%, #0c0e0b 100%); z-index: 1; }
header { position: absolute; top: env(safe-area-inset-top, 0px); left: 0; right: 0; padding: 15px 20px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; z-index: 4; }
.wordmark, .eyebrow, .edition, nav, .advisory, #body-label, .motion-choice, #orientation, .title-rule, .hotspot, #hint { font-family: 'Courier New', monospace; }
.wordmark { letter-spacing: .18em; font-size: 10px; }
nav { display: flex; gap: 2px; font-size: 11px; }
nav button { border: 0; padding: 8px; background: transparent; }
#clue-count { color: var(--gold); margin-left: 3px; }
#orientation { position: absolute; z-index: 2; top: calc(70px + env(safe-area-inset-top, 0px)); left: 24px; right: 24px; font-size: 11px; line-height: 1.7; color: var(--muted); }
#chapter { letter-spacing: .16em; color: var(--gold); }
#objective { margin-top: 5px; max-width: 36ch; }
#sequence { display: flex; list-style: none; gap: 8px; padding: 0; margin: 12px 0 0; }
#sequence li { width: 32px; height: 29px; display: grid; place-items: center; border-bottom: 1px solid #b9ac8566; color: var(--muted); }
#sequence li.filled { background: #cabc91; color: #1b1d16; border-color: #cabc91; }
#caption { position: absolute; bottom: env(safe-area-inset-bottom, 0px); left: 0; right: 0; padding: 22px 24px 24px; z-index: 3; }
.eyebrow { color: var(--gold); font-size: 11px; letter-spacing: .13em; line-height: 1.6; }
#line { font-size: clamp(17px, 2.55dvh, 23px); line-height: 1.38; margin: 10px 0 12px; max-width: 34ch; text-wrap: pretty; }
#body-label { color: var(--muted); font-size: 11px; letter-spacing: .06em; line-height: 1.6; }
#actions { margin-top: 17px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#actions button { font-size: 13px; line-height: 1.3; min-height: 46px; }
#actions button:only-child, #actions .wide { grid-column: 1 / -1; }
.primary { border-color: #d0bd8d; background: #d0bd8d; color: #1b1c16; }
.primary:hover { background: #e4d5ae; color: #14150f; }
.door-choice { text-align: left; display: flex; align-items: center; gap: 10px; }
.door-choice b { font: 11px 'Courier New', monospace; color: var(--gold); border-right: 1px solid #b9ac8544; padding-right: 10px; }
.door-choice small { display: block; font: 10px 'Courier New', monospace; color: var(--muted); margin-top: 4px; }
#welcome { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; padding: 15% 8% 7%; background: linear-gradient(#0c0e0b65, #0c0e0b15 60%, #0c0e0bc9); }
#stage:has(#welcome:not([hidden])) header, #stage:has(#welcome:not([hidden])) #caption, #stage:has(#welcome:not([hidden])) #orientation { visibility: hidden; }
.edition { color: var(--muted); letter-spacing: .1em; font-size: 10px; line-height: 1.6; }
h1 { font-size: clamp(34px, 5.6dvh, 56px); line-height: 1; margin: 26px 0 20px; letter-spacing: -.055em; font-weight: normal; }
.title-rule { width: 100%; display: flex; justify-content: space-between; border-top: 1px solid #b9ac8566; padding-top: 12px; font-size: 9px; color: var(--gold); }
#welcome p { color: var(--ink); font-size: clamp(20px, 3dvh, 28px); line-height: 1.45; margin: 28px 0 0; }
#welcome-actions { margin-top: auto; width: 100%; display: grid; gap: 8px; }
#begin { width: 100%; font-size: 15px; }
#new-game { font-size: 12px; background: #11130cd9; }
.advisory { font-size: 11px; color: var(--muted); line-height: 1.8; margin-top: 18px; }
.motion-choice { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 11px; color: var(--muted); line-height: 1.5; min-height: 28px; }
.motion-choice input { width: 16px; height: 16px; accent-color: var(--gold); }
#hotspots { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hotspot { position: absolute; transform: translate(-50%, -50%); width: 44px; height: 44px; padding: 0; background: #16180ed9; border: 1px solid #d0bd8daa; pointer-events: auto; font-size: 12px; }
.hotspot.clue { width: 88px; padding: 0 8px; font-size: 11px; letter-spacing: .02em; }
#curtain { z-index: 6; background: #10110e; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
#stage.busy #curtain { opacity: 1; pointer-events: auto; }
#stage.busy #hotspots { visibility: hidden; }
#error { position: absolute; top: 35%; left: 20px; right: 20px; padding: 20px; background: #251e18; z-index: 9; font: 13px/1.6 'Courier New', monospace; border: 1px solid var(--gold); }
dialog { width: min(92vw, 440px); max-height: 88dvh; padding: 0; background: #d6ccb1; color: #2c2e23; border: 1px solid #b7ab8d; box-shadow: 0 20px 80px #000c; }
dialog::backdrop { background: #080a07dc; }
.dialog-inner { padding: 28px; display: flex; flex-direction: column; max-height: calc(88dvh - 2px); }
dialog .eyebrow { color: #61614a; }
h2 { font-weight: normal; font-size: 29px; margin: 14px 0 20px; flex-shrink: 0; }
h2:focus { outline: none; }
#dialog-body { font-size: 17px; line-height: 1.6; overflow-y: auto; min-height: 0; scrollbar-color: #7b785b #d6ccb1; }
#dialog-body section { border-top: 1px solid #6b674d55; padding: 15px 0 5px; }
#dialog-body h3 { font: 10px 'Courier New', monospace; color: #585b42; letter-spacing: .08em; margin: 0 0 8px; }
#dialog-body p { margin: 0 0 12px; }
#dialog-body .observation { font-size: 14px; font-style: italic; color: #55553f; }
#close-note { width: 100%; margin-top: 18px; background: #303527; color: #e5decb; border-color: #303527; flex-shrink: 0; }
#hint { width: 100%; margin-top: 14px; font-size: 12px; background: transparent; color: #303527; border-color: #6b674d88; flex-shrink: 0; }
@media (max-height: 680px) { #caption { padding: 14px 20px 18px; } #line { font-size: 17px; margin: 6px 0; } #actions { margin-top: 10px; gap: 6px; } #actions button { min-height: 44px; font-size: 12px; padding: 8px 10px; } #orientation { top: 62px; } #welcome { padding-top: 11%; } #welcome p { margin-top: 18px; font-size: 21px; } h1 { margin: 20px 0 16px; } .advisory { margin-top: 10px; } }
@media (max-width: 350px) { header { padding-left: 12px; padding-right: 12px; } #caption { padding-left: 16px; padding-right: 16px; } #orientation { left: 16px; right: 16px; } .wordmark { font-size: 9px; } nav { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { button, #curtain { transition: none; } }
#stage.reduced #curtain { transition: none; }