/* The Fourth Knock — Step 11 identity. One stylesheet replaces the six historical layers.
   Case-file noir: ink, cream paper, brass, rust. Barlow Condensed for labels, Newsreader for
   speech and prose, Courier Prime for typed time tags. The four-bar knock mark is the motif. */
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url('../assets/fonts/BarlowCondensed-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('../assets/fonts/BarlowCondensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('../assets/fonts/BarlowCondensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-weight: 400 700; font-style: normal; font-display: swap; src: url('../assets/fonts/Newsreader-var.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-weight: 400 700; font-style: italic; font-display: swap; src: url('../assets/fonts/Newsreader-Italic-var.woff2') format('woff2'); }
@font-face { font-family: 'Courier Prime'; font-weight: 400; font-display: swap; src: url('../assets/fonts/CourierPrime-400.woff2') format('woff2'); }
@font-face { font-family: 'Courier Prime'; font-weight: 700; font-display: swap; src: url('../assets/fonts/CourierPrime-700.woff2') format('woff2'); }

:root {
  --ink: #111920; --ink-2: #18232b; --ink-3: #22303a; --night: #0b1117;
  --paper: #efe4c8; --paper-2: #e2d3ae; --paper-3: #cdbb90; --paper-ink: #2a2620;
  --brass: #cda75f; --brass-2: #a5823f; --rust: #b3533b; --moss: #7d8a52; --storm: #2f4759; --mist: #aab7b4;
  --cream-dim: rgba(239, 228, 200, .64); --cream-faint: rgba(239, 228, 200, .34);
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --type: 'Courier Prime', 'Courier New', monospace;
  --c-aren: #93a35f; --c-mira: #d0673f; --c-ada: #d9ab4f; --c-elias: #7d9dbd; --c-victor: #a66f8f;
  --ease: cubic-bezier(.22, .72, .18, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); color: var(--paper); font-family: var(--serif); }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
kbd { font: 700 11px/1 var(--cond); letter-spacing: .06em; padding: 4px 6px 3px; border-radius: 3px; background: rgba(239, 228, 200, .12); border: 1px solid rgba(239, 228, 200, .28); color: var(--paper); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { font: 600 12px/1.2 var(--cond); letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
[hidden] { display: none !important; }
#game, #scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#scene { outline: none; }

/* The knock mark: three even strokes, a pause, one taller brass stroke. */
.knock-mark { display: inline-flex; align-items: flex-end; gap: 4px; transform: skewX(-12deg); }
.knock-mark i { display: block; width: 5px; height: 30px; background: var(--paper); border-radius: 1px; }
.knock-mark i:nth-child(4) { margin-left: 9px; height: 38px; background: var(--brass); }
.knock-mark.divider i { width: 3px; height: 14px; } .knock-mark.divider i:nth-child(4) { height: 18px; margin-left: 6px; }
.knock-mark.big i { width: 12px; height: 72px; } .knock-mark.big { gap: 10px; } .knock-mark.big i:nth-child(4) { height: 92px; margin-left: 24px; }

.wordmark { display: flex; align-items: center; gap: 14px; }
.wordmark-text { display: flex; flex-direction: column; font-family: var(--cond); font-weight: 700; line-height: .86; }
.wm-the { font-size: .28em; letter-spacing: .5em; color: var(--cream-dim); margin-bottom: .18em; }
.wm-fourth { font-size: 1em; letter-spacing: .02em; color: var(--paper); }
.wm-knock { font-size: 1em; letter-spacing: .02em; color: var(--brass); }
.wordmark.small { font-size: 26px; gap: 9px; } .wordmark.small .knock-mark i { width: 3px; height: 20px; } .wordmark.small .knock-mark i:nth-child(4) { height: 25px; margin-left: 5px; } .wordmark.small .knock-mark { gap: 3px; }
.wordmark.title { font-size: clamp(64px, 8.4vw, 124px); gap: 26px; } .wordmark.title .knock-mark i { width: 9px; height: 1.02em; } .wordmark.title .knock-mark i:nth-child(4) { height: 1.28em; margin-left: 16px; } .wordmark.title .knock-mark { gap: 8px; }
.wordmark.ending { font-size: clamp(56px, 7vw, 104px); justify-content: center; }
.wordmark.ending .knock-mark i { width: 8px; height: 1em; opacity: 0; transform: scaleY(.2); transform-origin: bottom; transition: opacity .18s, transform .22s var(--ease); }
.wordmark.ending .knock-mark i:nth-child(4) { height: 1.26em; margin-left: 15px; }
.wordmark.ending .knock-mark { gap: 7px; }
.wordmark.ending .wordmark-text { opacity: 0; transition: opacity 1.6s ease; }
#ending-panel[data-mark="1"] .knock-mark i:nth-child(1), #ending-panel[data-mark="2"] .knock-mark i:nth-child(-n+2), #ending-panel[data-mark="3"] .knock-mark i:nth-child(-n+3), #ending-panel[data-mark="4"] .knock-mark i { opacity: 1; transform: none; }
#ending-panel.title-visible .wordmark-text { opacity: 1; }

/* ---------- Exploration HUD: small, quiet, retreats whenever the story takes over ---------- */
.brand { position: fixed; top: 22px; left: 26px; z-index: 5; transition: opacity .6s; }
.room-label { margin-top: 8px; font: 600 11px var(--cond); letter-spacing: .24em; color: var(--cream-dim); }
.room-label b { color: var(--brass); font-weight: 600; }
#story-clock { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 10px; padding: 7px 14px 6px; background: rgba(12, 18, 24, .7); border: 1px solid rgba(205, 167, 95, .28); border-radius: 2px; transition: opacity .6s; }
#story-clock i { width: 1px; height: 12px; background: rgba(239, 228, 200, .3); }
#clock-time { font: 700 14px var(--type); color: var(--brass); }
#clock-beat { font: 600 11px var(--cond); letter-spacing: .22em; color: var(--cream-dim); }
.objective { position: fixed; top: 20px; right: 24px; z-index: 5; width: 262px; padding: 14px 16px 13px 18px; background: linear-gradient(180deg, #f1e7cd, #e6d8b5); color: var(--paper-ink); transform: rotate(.6deg); box-shadow: 0 10px 26px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .4) inset; transition: opacity .6s, transform .4s var(--ease); }
.objective .pin { position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3d78e, #9b7632); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.objective-top { display: flex; justify-content: space-between; }
.objective .eyebrow { color: #86662e; font-size: 11px; }
#objective-count { font: 700 11px var(--type); color: #86662e; }
#objective-text { margin: 7px 0 2px; font: 400 17px/1.32 var(--serif); }
.objective-track { display: none; }
.objective .rule { height: 2px; background: rgba(42, 38, 32, .12); margin-top: 9px; } .objective .rule i { display: block; height: 100%; width: 0; background: var(--rust); transition: width .8s var(--ease); }
.objective.fresh { animation: tag-arrive .7s var(--ease); }
@keyframes tag-arrive { 0% { transform: rotate(3deg) translateY(-14px); opacity: 0; } 100% { transform: rotate(.6deg); opacity: 1; } }
body > footer { position: fixed; left: 24px; bottom: 20px; z-index: 5; transition: opacity .6s; }
.controls { display: flex; gap: 14px; align-items: center; padding: 8px 12px; background: rgba(12, 18, 24, .62); border: 1px solid rgba(239, 228, 200, .1); border-radius: 3px; font: 600 12px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-dim); }
.controls > span, .controls > button { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0; transition: opacity .5s, max-width .5s; max-width: 260px; overflow: hidden; white-space: nowrap; }
.controls b { color: var(--brass); font: 700 12px var(--type); }
.controls-quiet .controls > .hint { opacity: 0; max-width: 0; }
#show-controls { position: fixed; right: 24px; bottom: 20px; z-index: 5; width: 34px; height: 34px; border-radius: 50%; background: rgba(12, 18, 24, .62); border: 1px solid rgba(239, 228, 200, .18); font: 700 15px var(--cond); color: var(--cream-dim); transition: opacity .6s; }
#controls-help { position: fixed; right: 24px; bottom: 64px; z-index: 40; display: grid; gap: 7px; padding: 16px 18px; background: #f0e6cc; color: var(--paper-ink); font: 500 14px var(--cond); letter-spacing: .06em; box-shadow: 0 14px 30px rgba(0, 0, 0, .4); }
#controls-help b { font: 700 12px var(--cond); letter-spacing: .24em; color: #86662e; text-transform: uppercase; }
#controls-help kbd { background: rgba(42, 38, 32, .08); border-color: rgba(42, 38, 32, .25); color: var(--paper-ink); }
body[data-quiet-hud=true] .brand, body[data-quiet-hud=true] .objective, body[data-quiet-hud=true] > footer, body[data-quiet-hud=true] #story-clock, body[data-quiet-hud=true] #show-controls, body[data-quiet-hud=true] #controls-help { opacity: 0; pointer-events: none; }
body[data-story=dawn] .objective { opacity: 0; }

#loading { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--night); font: 500 14px var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--cream-dim); }
#toast { position: fixed; left: 50%; top: 84px; z-index: 30; transform: translate(-50%, -10px); opacity: 0; padding: 8px 14px 8px 12px; background: var(--paper); color: var(--paper-ink); font: 600 13px var(--cond); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); transition: opacity .35s, transform .45s var(--ease); pointer-events: none; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast b { font-family: var(--type); color: var(--rust); margin-right: 8px; letter-spacing: 0; text-transform: none; }

/* ---------- In-world overlays placed by the runtime ---------- */
#overlay-layer { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#examine { position: fixed; z-index: 4; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 7px; background: var(--paper); color: var(--paper-ink); border: 0; border-radius: 2px; box-shadow: 0 8px 22px rgba(0, 0, 0, .38); animation: prompt-in .22s var(--ease); pointer-events: auto; }
#examine::after { content: ''; position: absolute; left: 50%; bottom: -16px; width: 1px; height: 16px; background: var(--paper); opacity: .8; }
#examine kbd { background: var(--ink); color: var(--brass); border: 0; font-size: 14px; padding: 6px 8px 5px; }
#examine > span { display: flex; flex-direction: column; text-align: left; font: 600 15px/1.1 var(--cond); letter-spacing: .04em; }
#examine small { font: 600 10px var(--cond); letter-spacing: .2em; color: #8a6b35; margin-top: 3px; }
@keyframes prompt-in { from { opacity: 0; transform: translate(-50%, calc(-100% + 8px)); } to { opacity: 1; transform: translate(-50%, -100%); } }
.nameplate { position: fixed; z-index: 2; transform: translateX(-50%); padding: 3px 7px 2px; background: rgba(12, 18, 24, .72); font: 600 10px var(--cond); letter-spacing: .22em; color: var(--cream-dim); display: flex; align-items: center; gap: 5px; pointer-events: none; transition: opacity .5s; }
.nameplate span { width: 5px; height: 5px; background: var(--c-aren); transform: rotate(45deg); }
#speaker-pin { position: fixed; width: 14px; height: 14px; margin: -26px 0 0 -7px; opacity: 0; transition: opacity .3s; }
#speaker-pin i { display: block; width: 10px; height: 10px; margin: auto; background: var(--pin, var(--brass)); transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(12, 18, 24, .55); animation: pin-bob 1.8s ease-in-out infinite; }
#speaker-pin.on { opacity: 1; }
@keyframes pin-bob { 50% { transform: translateY(-3px) rotate(45deg); } }
#markers .marker { position: fixed; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid var(--brass); box-shadow: 0 0 0 2px rgba(12, 18, 24, .4), 0 0 14px rgba(205, 167, 95, .45); opacity: .85; animation: marker-breathe 2.4s ease-in-out infinite; }
#markers .marker.done { border-color: rgba(239, 228, 200, .45); box-shadow: none; opacity: .45; animation: none; }
@keyframes marker-breathe { 50% { transform: scale(1.18); opacity: .55; } }
#knock-marks { position: fixed; transform: translate(-50%, -100%); opacity: 0; transition: opacity .6s; }
#knock-marks.on { opacity: 1; }
.knock-bars { display: flex; align-items: flex-end; gap: 9px; transform: skewX(-12deg); filter: drop-shadow(0 0 10px rgba(239, 228, 200, .35)); }
.knock-bars i { display: block; width: 7px; height: 46px; background: var(--paper); opacity: 0; transform: scaleY(.1); transform-origin: bottom; transition: transform .16s var(--ease), opacity .12s; }
.knock-bars i:nth-child(4) { margin-left: 22px; height: 60px; background: var(--brass); }
#knock-marks[data-count="1"] i:nth-child(1), #knock-marks[data-count="2"] i:nth-child(-n+2), #knock-marks[data-count="3"] i:nth-child(-n+3), #knock-marks[data-count="4"] i { opacity: 1; transform: none; }
#knock-marks.cold .knock-bars i { background: #cfe0e8; } #knock-marks.cold .knock-bars i:nth-child(4) { background: #9fb8c6; }
#knock-marks.cold .knock-bars { filter: drop-shadow(0 0 12px rgba(190, 220, 235, .4)); }

/* ---------- Story panels ---------- */
.story-panel { position: fixed; inset: 0; z-index: 12; }
#stage-backdrop { position: fixed; inset: 0; z-index: 11; background: radial-gradient(ellipse at 50% 55%, rgba(10, 15, 20, .45), rgba(8, 12, 16, .82)); backdrop-filter: blur(3px) saturate(.8); animation: fade-in .35s ease; }
@keyframes fade-in { from { opacity: 0; } }
.cinema-bar { position: fixed; left: 0; right: 0; height: 0; z-index: 44; background: #07090c; pointer-events: none; transition: height .7s var(--ease); }
.cinema-bar.top { top: 0; } .cinema-bar.bottom { bottom: 0; }
body[data-letterbox=true] .cinema-bar { height: 7.2vh; }
body[data-phase=ending] .cinema-bar, body[data-phase=intro] .cinema-bar { height: 0; }
.close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(42, 38, 32, .22); background: transparent; font: 400 22px/1 var(--serif); color: currentColor; opacity: .7; }
.close:hover { opacity: 1; }
.panel-hint { margin-top: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font: 600 11px var(--cond); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.panel-hint kbd { margin-left: 4px; }
.stamp-button { display: inline-flex; align-items: center; gap: 12px; margin-top: 16px; padding: 11px 16px 10px 18px; background: var(--ink); color: var(--paper); border: 0; border-radius: 2px; font: 700 15px var(--cond); letter-spacing: .14em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--rust); transition: transform .15s, box-shadow .15s, opacity .3s; }
.stamp-button:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--rust); }
.stamp-button:disabled { opacity: .35; box-shadow: none; cursor: default; }
.stamp-button kbd { background: rgba(239, 228, 200, .12); }
.text-button { background: none; border: 0; padding: 8px 0; font: 700 13px var(--cond); letter-spacing: .2em; text-transform: uppercase; color: currentColor; opacity: .75; border-bottom: 1px solid currentColor; }
.text-button:hover { opacity: 1; }

/* Title: the live house behind the wordmark. */
.title-screen { display: grid; align-items: center; padding: 0 8vw; background: linear-gradient(90deg, rgba(8, 12, 16, .88) 0%, rgba(8, 12, 16, .55) 38%, rgba(8, 12, 16, 0) 64%); }
.title-block { max-width: 560px; animation: title-in 1.6s var(--ease) both; }
@keyframes title-in { from { opacity: 0; transform: translateY(12px); } }
.intro-subtitle { margin: 26px 0 10px; font: 600 15px var(--cond); letter-spacing: .34em; text-transform: uppercase; color: var(--brass); }
.title-line { margin: 0 0 34px; font: italic 400 22px/1.45 var(--serif); color: var(--cream-dim); }
.title-begin { display: inline-flex; align-items: baseline; gap: 18px; padding: 15px 26px 14px 20px; background: var(--paper); color: var(--paper-ink); border: 0; border-radius: 2px; box-shadow: 5px 5px 0 var(--rust); transition: transform .2s var(--ease), box-shadow .2s; }
.title-begin span { font: 700 13px var(--type); color: var(--rust); }
.title-begin b { font: 700 20px var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.title-begin:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--rust); }
.audio-preview { display: flex; align-items: baseline; gap: 9px; margin-top: 26px; font: 600 13px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-dim); }
.audio-preview input { accent-color: var(--brass); }
.audio-preview small { font: 400 13px var(--serif); letter-spacing: 0; text-transform: none; opacity: .7; }
.intro-controls { margin-top: 14px; font: 500 12px var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--cream-faint); }

/* ---------- Dialogue grammar ---------- */
.dialogue-panel { pointer-events: none; }
.dialogue-panel button { pointer-events: auto; }
.dialogue-shell { position: absolute; pointer-events: auto; }
.dialogue-copy { position: relative; }
.dialogue-top { display: flex; align-items: baseline; gap: 12px; }
#speaker-name { font: 700 13px var(--cond); letter-spacing: .24em; text-transform: uppercase; color: var(--pin, var(--brass)); }
#dialogue-context { font: 600 11px var(--cond); letter-spacing: .18em; text-transform: uppercase; color: var(--cream-faint); }
#line-position { margin-left: auto; font: 400 11px var(--type); color: var(--cream-faint); }
#subtitle { margin: 8px 0 0; font: 400 23px/1.38 var(--serif); color: var(--paper); text-wrap: pretty; }
.dialogue-actions { display: flex; gap: 16px; align-items: center; margin-top: 12px; }
.dialogue-actions button { background: none; border: 0; padding: 2px 0; font: 600 11px var(--cond); letter-spacing: .2em; color: var(--cream-faint); }
.dialogue-actions .advance { display: inline-flex; gap: 7px; align-items: center; color: var(--brass); }
.dialogue-actions .advance b { font-size: 14px; animation: nudge 1.4s ease-in-out infinite; }
.dialogue-actions button:disabled { opacity: .3; }
#auto-lines[aria-pressed=true] { color: var(--brass); }
@keyframes nudge { 50% { transform: translateX(3px); } }
.line-progress { position: absolute; left: 0; right: 0; bottom: -10px; height: 1px; background: rgba(239, 228, 200, .1); }
.line-progress i { display: block; height: 100%; width: 0; background: var(--brass); opacity: .6; }
.dialogue-portrait { position: relative; overflow: hidden; }
.acting-portrait { position: relative; overflow: hidden; }
.portrait-region { position: absolute; background-repeat: no-repeat; }
.dlg-figures { position: absolute; inset: 0; display: none; }
.dlg-figure { position: absolute; bottom: 0; overflow: visible; transition: filter .35s, transform .5s var(--ease), opacity .45s; }
#evidence-insert { position: absolute; left: 50%; top: 11vh; width: min(440px, 38vw); transform: translate(-50%, -16px) rotate(-1.5deg); opacity: 0; transition: opacity .45s, transform .6s var(--ease); background: var(--paper); padding: 16px 16px 12px; box-shadow: 0 22px 40px rgba(0, 0, 0, .45); color: var(--paper-ink); }
#evidence-insert.on { opacity: 1; transform: translate(-50%, 0) rotate(-1.5deg); }
#evidence-insert svg { display: block; width: 100%; height: auto; }
#evidence-insert .ev-caption { margin-top: 8px; font: 700 12px var(--cond); letter-spacing: .2em; text-transform: uppercase; color: #86662e; }
.line-arrives #subtitle { animation: line-in .35s var(--ease); }
@keyframes line-in { from { opacity: 0; transform: translateY(5px); } }

/* 1. Talk: a lower-third strip; the speaker's bust stands on its ledge. */
.dialogue-panel[data-mode=talk] { background: linear-gradient(180deg, transparent 62%, rgba(7, 10, 13, .55)); }
[data-mode=talk] .dialogue-shell { left: 50%; bottom: 5.5vh; width: min(900px, 78vw); transform: translateX(-50%); display: grid; grid-template-columns: 150px 1fr; background: linear-gradient(180deg, rgba(17, 25, 32, .96), rgba(13, 19, 25, .96)); border-top: 2px solid var(--pin, var(--brass)); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
[data-mode=talk] .dialogue-portrait { width: 150px; height: 118px; align-self: end; margin-top: -58px; overflow: visible; }
[data-mode=talk] .dialogue-portrait .portrait-region { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
[data-mode=talk] .dialogue-copy { padding: 16px 26px 18px 6px; min-height: 104px; }
/* 2. Aren's aside: a torn notebook slip and a sepia world. */
.dialogue-panel[data-mode=aside] { background: none; }
[data-mode=aside] .dialogue-shell { left: 7vw; top: 15vh; width: min(520px, 42vw); padding: 22px 26px 20px 30px; background: repeating-linear-gradient(180deg, #f1e8cf 0 29px, #d9ccaa 29px 30px); color: var(--paper-ink); transform: rotate(-1.2deg); box-shadow: 0 18px 36px rgba(0, 0, 0, .4); clip-path: polygon(0 3%, 6% 0, 13% 2.5%, 21% .5%, 30% 2.8%, 40% .4%, 51% 2.4%, 62% .2%, 73% 2.6%, 84% .6%, 93% 2.2%, 100% 0, 100% 100%, 0 100%); }
[data-mode=aside] .dialogue-shell::before { content: ''; position: absolute; left: 16px; top: 0; bottom: 0; width: 1px; background: rgba(179, 83, 59, .45); }
[data-mode=aside] .dialogue-portrait { display: none; }
[data-mode=aside] #speaker-name::after { content: ', to himself'; color: #86662e; letter-spacing: .12em; }
[data-mode=aside] #speaker-name { color: #6f7b40; }
[data-mode=aside] #dialogue-context, [data-mode=aside] #line-position { display: none; }
[data-mode=aside] #subtitle { color: var(--paper-ink); font: italic 400 23px/1.3 var(--serif); }
[data-mode=aside] .dialogue-actions button { color: rgba(42, 38, 32, .5); } [data-mode=aside] .dialogue-actions .advance { color: #86662e; }
[data-mode=aside] .line-progress { display: none; }
/* 3. Incidental: a small caption hung above the speaker in the room. */
.dialogue-panel[data-mode=incidental] { background: none; }
[data-mode=incidental] .dialogue-shell { width: min(380px, 34vw); padding: 12px 16px 12px; background: rgba(13, 19, 25, .93); border-left: 2px solid var(--pin, var(--brass)); transform: translate(-50%, -100%); box-shadow: 0 12px 26px rgba(0, 0, 0, .42); }
[data-mode=incidental] .dialogue-shell::after { content: ''; position: absolute; left: 50%; bottom: -9px; border: 9px solid transparent; border-bottom: 0; border-top-color: rgba(13, 19, 25, .93); transform: translateX(-50%); }
[data-mode=incidental] .dialogue-portrait { display: none; }
[data-mode=incidental] #subtitle { font-size: 19px; }
[data-mode=incidental] #dialogue-context, [data-mode=incidental] #line-position, [data-mode=incidental] .line-progress { display: none; }
/* 4. Confront: two figures, the evidence between them. */
.dialogue-panel[data-mode=confront] { background: linear-gradient(180deg, rgba(8, 12, 16, .25), rgba(8, 12, 16, .78)); }
[data-mode=confront] .dlg-figures, [data-mode=gravity] .dlg-figures, [data-mode=accuse] .dlg-figures { display: block; }
[data-mode=confront] .dlg-figure { height: 70vh; width: 32vw; max-width: 460px; }
[data-mode=confront] .dlg-figure.left { left: 3vw; } [data-mode=confront] .dlg-figure.right { right: 3vw; }
[data-mode=confront] .dlg-figure .portrait-region { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); }
[data-mode=confront] .dlg-figure:not(.active) { filter: brightness(.48) saturate(.7); transform: translateY(12px) scale(.97); }
[data-mode=confront] .dialogue-shell { left: 50%; bottom: 6vh; width: min(640px, 46vw); transform: translateX(-50%); padding: 18px 24px 16px; background: rgba(13, 19, 25, .94); border-top: 2px solid var(--pin, var(--brass)); }
[data-mode=confront] .dialogue-portrait { display: none; }
/* 5. Gravity: one figure, the room withdrawn, larger words. */
.dialogue-panel[data-mode=gravity] { background: linear-gradient(90deg, rgba(6, 9, 12, .82), rgba(6, 9, 12, .35) 46%, rgba(6, 9, 12, .7)); }
[data-mode=gravity] .dlg-figure.left { display: none; }
[data-mode=gravity] .dlg-figure.right { left: 6vw; right: auto; height: 78vh; width: 34vw; max-width: 520px; }
[data-mode=gravity] .dlg-figure .portrait-region { filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .55)); }
[data-mode=gravity] .dialogue-shell { right: 7vw; bottom: 11vh; width: min(640px, 48vw); padding: 0; background: none; }
[data-mode=gravity] .dialogue-portrait { display: none; }
[data-mode=gravity] #subtitle { font-size: clamp(26px, 2.25vw, 36px); line-height: 1.36; text-shadow: 0 2px 16px rgba(0, 0, 0, .6); }
[data-mode=gravity] .line-progress { bottom: -14px; }
/* 6. Plain: nothing but the words, for the lines that must land alone. */
.dialogue-panel[data-mode=plain] { background: linear-gradient(180deg, transparent 55%, rgba(6, 9, 12, .72)); }
[data-mode=plain] .dialogue-shell { left: 50%; bottom: 10vh; width: min(760px, 70vw); transform: translateX(-50%); text-align: center; }
[data-mode=plain] .dialogue-top { justify-content: center; }
[data-mode=plain] #dialogue-context, [data-mode=plain] #line-position, [data-mode=plain] .line-progress { display: none; }
[data-mode=plain] .dialogue-portrait { display: none; }
[data-mode=plain] #subtitle { font-size: clamp(28px, 2.5vw, 40px); text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
[data-mode=plain] .dialogue-actions { justify-content: center; }
/* 7. Accuse: the room stays in view; evidence is recalled above it. */
.dialogue-panel[data-mode=accuse] { background: linear-gradient(180deg, rgba(6, 9, 12, .15), transparent 30%, transparent 58%, rgba(6, 9, 12, .7)); }
[data-mode=accuse] .dlg-figure { display: none; }
[data-mode=accuse] .dialogue-shell { left: 7vw; bottom: 9vh; width: min(700px, 56vw); padding: 0 0 0 20px; border-left: 2px solid var(--pin, var(--brass)); }
[data-mode=accuse] .dialogue-portrait { display: none; }
[data-mode=accuse] #subtitle { font-size: clamp(25px, 2.1vw, 33px); text-shadow: 0 2px 14px rgba(0, 0, 0, .65); }

/* ---------- Questioning, observation ---------- */
.stage-panel { display: grid; place-items: center; }
.stage-panel.side { justify-items: end; padding-right: 6vw; }
.interview { position: relative; display: grid; grid-template-columns: 260px 1fr; width: min(780px, 88vw); background: #f0e6cc; color: var(--paper-ink); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); animation: card-in .45s var(--ease); }
@keyframes card-in { from { opacity: 0; transform: translateY(14px) rotate(.6deg); } }
.interview-photo { position: relative; margin: 22px 0 22px 22px; height: 300px; background: linear-gradient(180deg, #33434e, #22303a); box-shadow: inset 0 0 0 6px #f7f0dc, 0 6px 14px rgba(0, 0, 0, .25); transform: rotate(-2deg); }
.interview-photo .acting-portrait { position: absolute; inset: 14px 14px 0; }
.interview-photo .clip { position: absolute; top: -12px; left: 50%; width: 16px; height: 38px; margin-left: -8px; border: 3px solid #8f8c83; border-radius: 8px; }
.interview-page { padding: 26px 30px 24px 34px; }
.interview-page h2, .observe-page h2, .evidence-note h2, .desk-index h2 { margin: 6px 0 12px; font: 600 34px/1.05 var(--serif); letter-spacing: -.01em; }
.interview-page .eyebrow, .observe-page .eyebrow, .evidence-note .eyebrow, .desk-index .eyebrow { color: #86662e; }
.topic-intro { margin: 0 0 8px; font: italic 400 16px var(--serif); color: #6b624f; }
#topic-list { display: grid; }
.topic-choice, #desk-clues button, .line-button { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: 100%; padding: 12px 2px 10px; background: none; border: 0; border-bottom: 1px solid rgba(42, 38, 32, .18); text-align: left; font: 400 20px var(--serif); color: var(--paper-ink); transition: color .2s, padding .2s; }
.topic-choice::before, #desk-clues button::before { content: '—'; color: var(--rust); margin-right: 10px; }
.topic-choice:hover, .topic-choice:focus-visible, #desk-clues button:hover, #desk-clues button:focus-visible, .line-button:hover { color: var(--rust); padding-left: 8px; outline: none; }
.topic-choice .tick, #desk-clues .tick { font: 700 12px var(--cond); letter-spacing: .16em; color: var(--moss); white-space: nowrap; }
.topic-choice.asked { color: #6b624f; }
.line-button.look { margin-top: 8px; font: 600 15px var(--cond); letter-spacing: .14em; text-transform: uppercase; color: #6b624f; }
.line-button kbd { background: rgba(42, 38, 32, .08); border-color: rgba(42, 38, 32, .25); color: var(--paper-ink); }
.interview .panel-hint kbd, .observe .panel-hint kbd, .evidence .panel-hint kbd, .desk-index .panel-hint kbd, .casefile .panel-hint kbd { background: rgba(42, 38, 32, .08); border-color: rgba(42, 38, 32, .25); color: var(--paper-ink); }
.observe { position: relative; display: grid; grid-template-columns: minmax(280px, 34vw) 1fr; width: min(1000px, 90vw); background: #f0e6cc; color: var(--paper-ink); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); animation: card-in .45s var(--ease); }
.observe-figure { position: relative; height: min(72vh, 620px); background: radial-gradient(ellipse at 50% 60%, #33434e, #1c262e); }
.observe-figure .acting-portrait { position: absolute; inset: 22px 18px 34px; }
.portrait-name { position: absolute; left: 18px; bottom: 12px; font: 700 12px var(--cond); letter-spacing: .24em; color: var(--paper); }
#observe-spots, .evidence-spots { position: absolute; inset: 0; }
.spot { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--brass); background: rgba(12, 18, 24, .55); color: var(--paper); font: 700 14px var(--cond); display: grid; place-items: center; box-shadow: 0 0 0 4px rgba(205, 167, 95, .18); animation: spot-breathe 2.2s ease-in-out infinite; }
.spot:hover, .spot:focus-visible, .spot.selected { background: var(--brass); color: var(--ink); outline: none; }
.spot.seen { animation: none; border-color: rgba(239, 228, 200, .6); background: rgba(12, 18, 24, .75); }
@keyframes spot-breathe { 50% { box-shadow: 0 0 0 9px rgba(205, 167, 95, 0); } }
.observe-page { padding: 28px 32px 26px; }
#observe-details { display: grid; }
#observe-details button { display: flex; align-items: baseline; gap: 10px; padding: 11px 2px 9px; background: none; border: 0; border-bottom: 1px solid rgba(42, 38, 32, .18); text-align: left; font: 400 19px var(--serif); color: var(--paper-ink); }
#observe-details button::before { content: attr(data-n); font: 700 12px var(--cond); color: var(--rust); width: 14px; }
#observe-details button.selected { color: var(--rust); }
#observe-description { min-height: 54px; margin: 14px 0 0; font: italic 400 18px/1.45 var(--serif); color: #4b453a; }

/* ---------- Evidence: look closer, then keep ---------- */
.evidence { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; width: min(1120px, 92vw); min-height: min(560px, 76vh); background: #f0e6cc; color: var(--paper-ink); box-shadow: 0 30px 70px rgba(0, 0, 0, .55); animation: card-in .45s var(--ease); }
.evidence-stage { position: relative; background: radial-gradient(ellipse at 50% 46%, #3c4a52 0%, #22303a 58%, #182229 100%); overflow: hidden; }
.evidence-stage::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(255, 223, 160, .14), transparent 60%); pointer-events: none; }
.evidence-art { position: absolute; inset: 7% 7% 9%; display: grid; place-items: center; }
.evidence-art svg { width: 100%; height: 100%; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .45)); }
.evidence-art .latch-art { width: 100%; height: 100%; }
.evidence-spots { inset: 7% 7% 9%; }
.kept-stamp { position: absolute; right: 9%; bottom: 10%; padding: 8px 16px 6px; border: 4px solid var(--rust); color: var(--rust); font: 700 38px var(--cond); letter-spacing: .22em; transform: rotate(-9deg) scale(1.6); opacity: 0; mix-blend-mode: multiply; background: rgba(240, 230, 204, .8); }
.kept-stamp.on { animation: stamp .42s var(--ease) forwards; }
@keyframes stamp { 0% { opacity: 0; transform: rotate(-9deg) scale(1.7); } 60% { opacity: 1; transform: rotate(-9deg) scale(.96); } 100% { opacity: .92; transform: rotate(-9deg) scale(1); } }
.evidence-note { padding: 30px 34px 26px; display: flex; flex-direction: column; }
.see-list { list-style: none; margin: 4px 0 0; padding: 0; counter-reset: see; }
.see-list li { position: relative; padding: 8px 0 8px 30px; border-bottom: 1px solid rgba(42, 38, 32, .14); font: 400 18px/1.4 var(--serif); animation: fade-in .4s ease; }
.see-list li b { display: block; font: 700 11px var(--cond); letter-spacing: .2em; text-transform: uppercase; color: #86662e; }
.see-list li::before { content: attr(data-n); position: absolute; left: 0; top: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--brass); font: 700 11px/20px var(--cond); text-align: center; }
.see-list li.pending { color: #8d8470; font-style: italic; }
.see-list li.key { background: linear-gradient(90deg, rgba(205, 167, 95, .22), transparent); }
.meaning { margin: 16px 0 0; font: 400 17px/1.5 var(--serif); color: #3a352c; white-space: pre-line; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s var(--ease); }
.meaning.on { opacity: 1; transform: none; }
.term-chip { display: inline-block; margin-right: 8px; padding: 3px 9px 2px; background: var(--ink); color: var(--brass); font: 700 14px var(--type); vertical-align: 2px; }
.evidence-note .stamp-button { align-self: flex-start; }
.evidence-note .panel-hint { margin-top: auto; padding-top: 14px; }
.desk-index { position: relative; width: min(470px, 40vw); padding: 28px 32px 22px; background: #f0e6cc; color: var(--paper-ink); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); animation: card-in .45s var(--ease); }
#desk-clues { display: grid; }

/* ---------- Case file ---------- */
.casefile { position: relative; width: min(1240px, 95vw); height: min(760px, 90vh); display: flex; flex-direction: column; background: #efe5c9; color: var(--paper-ink); box-shadow: 0 34px 80px rgba(0, 0, 0, .6); animation: card-in .45s var(--ease); }
.casefile-head { display: flex; align-items: flex-end; gap: 28px; padding: 22px 60px 0 34px; border-bottom: 2px solid var(--paper-ink); }
.cf-title h2 { margin: 4px 0 12px; font: 600 34px/1 var(--serif); }
.cf-title .eyebrow { color: #86662e; }
.notebook-tabs { display: flex; gap: 2px; margin-left: 12px; }
.notebook-tabs button { padding: 10px 16px 9px; background: rgba(42, 38, 32, .06); border: 0; font: 700 13px var(--cond); letter-spacing: .18em; text-transform: uppercase; color: #6b624f; }
.notebook-tabs button.selected { background: var(--paper-ink); color: var(--paper); }
.cf-count { margin-left: auto; display: flex; align-items: flex-end; gap: 10px; padding-bottom: 8px; }
.cf-count .acting-portrait { width: 58px; height: 58px; }
#notes-counter { font: 700 16px var(--type); color: var(--rust); }
.casefile-body { flex: 1; display: grid; grid-template-columns: 1.18fr .82fr; min-height: 0; }
.cf-page { position: relative; padding: 22px 34px 16px; overflow: auto; }
.cf-left { background: repeating-linear-gradient(180deg, transparent 0 33px, rgba(42, 38, 32, .07) 33px 34px); }
.cf-right { border-left: 1px solid rgba(42, 38, 32, .2); background: #e8dcbc; }
/* Step 15: the evening's timeline outgrows its column late in the case. A soft paper fade (and a thin, paper-toned
   scrollbar) shows there is more below instead of an entry sliced in half; the extra padding lets the last entry
   scroll clear of the fade. */
.casefile-body { position: relative; }
.casefile-body::after { content: ''; position: absolute; right: 12px; bottom: 0; width: calc(41% - 13px); height: 34px; background: linear-gradient(to bottom, rgba(232, 220, 188, 0), #e8dcbc 88%); pointer-events: none; }
.cf-right { padding-bottom: 42px; }
.cf-page { scrollbar-width: thin; scrollbar-color: rgba(42, 38, 32, .32) transparent; }
.cf-timeline-head .eyebrow { color: #86662e; }
.casefile-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 34px 14px; border-top: 1px solid rgba(42, 38, 32, .15); }
.casefile-foot .panel-hint { margin: 0; }
#deduction-selector { display: flex; gap: 6px; margin-bottom: 16px; }
#deduction-selector button { position: relative; min-width: 64px; padding: 9px 14px 7px; background: rgba(42, 38, 32, .07); border: 0; border-top: 3px solid transparent; font: 700 15px var(--type); color: #6b624f; }
#deduction-selector button.selected { background: var(--paper); border-top-color: var(--rust); color: var(--paper-ink); box-shadow: 0 -4px 10px rgba(0, 0, 0, .06); }
#deduction-selector button.filed::after { content: '✓'; margin-left: 6px; color: var(--moss); }
#deduction-selector button.locked { opacity: .45; }
.note-subject { font: 700 13px var(--cond); letter-spacing: .24em; text-transform: uppercase; color: #86662e; }
.note-title { margin: 4px 0 14px; font: 600 28px/1.1 var(--serif); }
.deduction { margin: 0 0 16px; font: 400 26px/1.95 var(--serif); }
.deduction-slot { display: inline-block; min-width: 118px; margin: 0 3px; padding: 1px 12px 0; background: rgba(205, 167, 95, .22); border: 0; border-bottom: 2px solid var(--brass-2); font: 700 17px/1.5 var(--type); color: var(--paper-ink); vertical-align: 2px; transition: background .2s, transform .2s; }
.deduction-slot.empty { color: #9a8d6d; }
.deduction-slot.selected { background: rgba(205, 167, 95, .5); outline: 1px dashed var(--paper-ink); outline-offset: 3px; }
.deduction-slot.wrong { animation: wrong .42s ease; background: rgba(179, 83, 59, .22); }
@keyframes wrong { 20% { transform: translateX(-5px) rotate(-1deg); } 45% { transform: translateX(5px) rotate(1deg); } 70% { transform: translateX(-2px); } }
.term-bank { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 0 4px; border-top: 1px dashed rgba(42, 38, 32, .3); }
.term-bank .label { width: 100%; font: 700 11px var(--cond); letter-spacing: .22em; text-transform: uppercase; color: #86662e; }
.clue-term { padding: 9px 14px 7px; background: var(--paper); border: 1px solid rgba(42, 38, 32, .28); font: 700 15px var(--type); color: var(--paper-ink); box-shadow: 2px 3px 0 rgba(42, 38, 32, .18); transform: rotate(-.8deg); transition: transform .15s, background .15s; }
.clue-term:nth-child(odd) { transform: rotate(.8deg); }
.clue-term:hover, .clue-term:focus-visible { background: #f8e7b5; transform: translateY(-2px) rotate(0); outline: none; }
.clue-term:disabled { opacity: .4; }
.margin-note { min-height: 44px; margin: 12px 0 0; padding-left: 14px; border-left: 2px solid var(--rust); font: italic 400 17px/1.45 var(--serif); color: #5a4a36; }
.margin-note.warn { color: var(--rust); animation: fade-in .3s ease; }
.case-actions { display: flex; align-items: center; gap: 20px; }
.filed-stamp { display: inline-block; margin-top: 10px; padding: 8px 16px 6px; border: 3px solid var(--moss); color: #5b6a38; font: 700 18px var(--cond); letter-spacing: .2em; text-transform: uppercase; transform: rotate(-2deg); }
.case-filed { margin: 6px 0 0; font: italic 400 18px/1.5 var(--serif); color: #4b453a; }
.missing { font: 400 17px/1.55 var(--serif); color: #5a4a36; }
.missing b { display: block; font: 700 12px var(--cond); letter-spacing: .22em; text-transform: uppercase; color: #86662e; margin-bottom: 6px; }
#notebook-page article { padding: 12px 0 12px 16px; border-left: 2px solid var(--rust); margin: 0 0 12px; background: rgba(255, 255, 255, .25); }
#notebook-page h3 { margin: 0 0 4px; font: 700 13px var(--cond); letter-spacing: .2em; text-transform: uppercase; color: #86662e; }
#notebook-page p { margin: 4px 0 0; font: 400 16px/1.5 var(--serif); }
#notebook-page .person { display: grid; grid-template-columns: 70px 1fr; gap: 14px; }
#notebook-page .person .acting-portrait { width: 70px; height: 70px; background: #d9cba7; }

/* The vertical timeline on the case file's right page. */
#case-timeline { position: relative; margin-top: 14px; padding-left: 64px; }
#case-timeline::before { content: ''; position: absolute; left: 50px; top: 4px; bottom: 4px; width: 2px; background: var(--paper-ink); opacity: .75; }
.tl-entry { position: relative; margin: 0 0 12px; font: 400 15px/1.4 var(--serif); animation: fade-in .4s ease; }
.tl-entry time { position: absolute; left: -64px; top: 1px; width: 48px; text-align: right; font: 700 12px var(--type); color: var(--paper-ink); }
.tl-entry::before { content: ''; position: absolute; left: -18px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 2px solid var(--paper-ink); }
.tl-entry.physical::before { background: var(--rust); border-color: var(--rust); border-radius: 1px; transform: rotate(45deg); }
.tl-entry.heard::before { background: var(--brass); border-color: var(--paper-ink); }
.tl-entry.physical { font-weight: 600; } .tl-entry.heard { font-weight: 600; }
.tl-entry small { display: block; font: 600 10px var(--cond); letter-spacing: .2em; text-transform: uppercase; color: #86662e; }
.tl-gap { position: relative; margin: -4px 0 12px; padding: 6px 10px; background: rgba(179, 83, 59, .12); border-left: 3px solid var(--rust); font: 700 12px var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--rust); }
.tl-empty { font: italic 400 15px var(--serif); color: #8d8470; }

/* ---------- Case board: payoffs and the whole-evening reconstruction ---------- */
#case-payoff { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 50%, rgba(10, 15, 20, .72), rgba(6, 9, 12, .94)); }
.board { width: min(1180px, 90vw); }
.board .eyebrow { display: block; margin-bottom: 26px; }
.board-track { position: relative; height: 230px; margin: 0 24px; }
.board-axis { position: absolute; left: 0; right: 0; top: 120px; height: 2px; background: rgba(239, 228, 200, .55); }
.board-tick { position: absolute; top: 112px; width: 1px; height: 18px; background: rgba(239, 228, 200, .45); }
.board-tick span { position: absolute; top: 24px; left: 0; transform: translateX(-50%); font: 700 12px var(--type); color: var(--cream-faint); white-space: nowrap; }
.board-band { position: absolute; top: 86px; height: 30px; background: rgba(205, 167, 95, .28); border: 1px solid var(--brass); transform-origin: left; animation: band-in .9s var(--ease) both; }
.board-band.rust { background: rgba(179, 83, 59, .3); border-color: var(--rust); }
.board-band.moss { background: rgba(125, 138, 82, .3); border-color: var(--moss); top: 134px; }
.board-band label { position: absolute; left: 0; bottom: 36px; white-space: nowrap; font: 600 17px var(--serif); color: var(--paper); }
.board-band.moss label { bottom: auto; top: 38px; }
@keyframes band-in { from { transform: scaleX(0); opacity: 0; } }
.board-pin { position: absolute; top: 82px; width: 2px; height: 76px; background: var(--paper); animation: fade-in .5s ease both; }
.board-pin.rust { background: var(--rust); } .board-pin.brass { background: var(--brass); }
.board-pin label { position: absolute; left: 8px; top: -30px; white-space: nowrap; font: 600 16px var(--serif); color: var(--paper); }
.board-pin label b { font: 700 13px var(--type); color: var(--brass); margin-right: 6px; }
.board-pin.low label { top: auto; bottom: -34px; }
#payoff-conclusion { margin: 36px 24px 0; font: 400 clamp(28px, 2.6vw, 40px) var(--serif); color: var(--paper); opacity: 0; transition: opacity .8s; }
#payoff-conclusion.on { opacity: 1; }

/* ---------- The first contradiction ---------- */
#aha-stage { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 55%, rgba(8, 12, 16, .55), rgba(5, 8, 11, .9)); }
.aha { position: relative; width: min(1100px, 88vw); text-align: center; }
.aha-kicker { display: block; margin-bottom: 30px; }
.aha-row { display: grid; grid-template-columns: 1fr 300px 1fr; align-items: center; gap: 12px; }
.aha-fact { margin: 0; opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .8s var(--ease); }
#aha-watch { transform: translateX(-40px); } #aha-knocks { transform: translateX(40px); }
.aha-object { height: 200px; display: grid; place-items: center; }
.aha-object svg { height: 200px; width: auto; }
.aha-fact figcaption b { display: block; font: 700 76px/1 var(--type); color: var(--paper); letter-spacing: -.02em; }
.aha-fact figcaption span { display: block; margin-top: 8px; font: 600 15px var(--cond); letter-spacing: .24em; text-transform: uppercase; color: var(--brass); }
.aha-fact figcaption small { display: block; margin-top: 4px; font: italic 400 16px var(--serif); color: var(--cream-dim); }
.aha-link { position: relative; height: 40px; }
.aha-link svg { width: 100%; height: 100%; overflow: visible; }
.aha-line { stroke: var(--paper); stroke-width: 3; fill: none; stroke-dasharray: 150; stroke-dashoffset: 150; transition: stroke-dashoffset .9s var(--ease), transform .35s var(--ease), opacity .4s; }
.aha-snap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.2); font: 700 54px var(--serif); color: var(--rust); opacity: 0; transition: transform .25s var(--ease), opacity .2s; }
#aha-stage h2 { margin: 42px 0 8px; font: 600 clamp(40px, 4vw, 60px) var(--serif); opacity: 0; transform: translateY(8px); transition: opacity .7s, transform .7s var(--ease); }
#aha-caution { margin: 0 auto; max-width: 640px; font: italic 400 22px/1.45 var(--serif); color: var(--cream-dim); opacity: 0; transition: opacity .7s .2s; }
.contradiction-stamp { position: absolute; right: 2%; bottom: -8px; padding: 9px 18px 7px; border: 3px solid var(--rust); color: var(--rust); font: 700 18px var(--cond); letter-spacing: .26em; transform: rotate(-6deg) scale(1.5); opacity: 0; }
#aha-stage[data-beat=watch] #aha-watch, #aha-stage[data-beat=knocks] .aha-fact, #aha-stage[data-beat=relationship] .aha-fact, #aha-stage[data-beat=realization] .aha-fact { opacity: 1; transform: none; }
#aha-stage[data-beat=relationship] .aha-line, #aha-stage[data-beat=realization] .aha-line { stroke-dashoffset: 0; }
#aha-stage[data-beat=realization] .aha-line.a { transform: translateY(-7px) rotate(-3deg); transform-origin: 4px 20px; stroke: var(--cream-faint); }
#aha-stage[data-beat=realization] .aha-line.b { transform: translateY(8px) rotate(4deg); transform-origin: 296px 20px; stroke: var(--cream-faint); }
#aha-stage[data-beat=realization] .aha-snap { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#aha-stage[data-beat=realization] h2, #aha-stage[data-beat=realization] #aha-caution { opacity: 1; transform: none; }
#aha-stage[data-beat=realization] .contradiction-stamp { animation: stamp .45s 1.1s var(--ease) forwards; }

/* ---------- Knocks, transitions, montage, Residuals, ending ---------- */
#knock-stage { pointer-events: none; }
#sound-caption { position: absolute; left: 50%; bottom: 10vh; transform: translateX(-50%); margin: 0; padding: 6px 14px; font: 600 13px var(--cond); letter-spacing: .24em; text-transform: uppercase; color: var(--cream-dim); background: rgba(6, 9, 12, .55); }
#sound-caption:empty { display: none; }
#transition-card { position: fixed; inset: 0; z-index: 46; display: grid; place-items: center; background: #080b0f; opacity: 0; transition: opacity .28s ease; pointer-events: none; }
#transition-card.on { opacity: 1; }
.tc-inner { display: grid; justify-items: center; gap: 14px; }
#transition-time { font: 700 15px var(--type); color: var(--brass); letter-spacing: .06em; }
#transition-place { margin: 0; font: 400 34px var(--serif); color: var(--paper); }
#montage-stage { pointer-events: none; background: linear-gradient(180deg, transparent 58%, rgba(6, 9, 12, .78)); }
.montage-copy { position: absolute; left: 7vw; bottom: 12vh; max-width: 640px; }
#montage-time { display: block; font: 700 clamp(46px, 4.4vw, 68px)/1 var(--type); color: var(--paper); letter-spacing: -.02em; }
#montage-time.tick { animation: tick-in .5s var(--ease); }
@keyframes tick-in { from { opacity: 0; transform: translateY(-8px); } }
#montage-caption { margin: 12px 0 0; font: italic 400 22px/1.4 var(--serif); color: var(--cream-dim); }
#residual-panel { pointer-events: none; }
.residual-caption { position: absolute; left: 50%; bottom: 13vh; transform: translateX(-50%); width: min(720px, 80vw); text-align: center; }
#residual-caption { margin: 0; font: italic 400 26px/1.45 var(--serif); letter-spacing: .02em; color: #dbe6ea; text-shadow: 0 0 18px rgba(170, 205, 220, .45), 0 2px 12px rgba(0, 0, 0, .6); transition: opacity .6s; }
#residual-caption::before, #residual-caption::after { content: ''; display: block; width: 60px; height: 1px; margin: 12px auto; background: rgba(219, 230, 234, .5); }
#residual-caption:empty { opacity: 0; }
#ending-panel { z-index: 50; display: grid; place-items: center; background: #06080b; opacity: 0; transition: opacity 1.4s ease; }
#ending-panel.visible { opacity: 1; }
#ending-title { display: grid; justify-items: center; gap: 44px; }
#restart-game { color: var(--cream-faint); opacity: 0; transition: opacity 1s 1s; }
#ending-panel.title-visible #restart-game { opacity: .8; }

/* ---------- Opening ---------- */
#opening-stage { z-index: 36; background: #07090c; overflow: hidden; }
.op-shot { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.op-shot.on { opacity: 1; }
.op-layer { position: absolute; will-change: transform; }
.op-layer img { display: block; width: 100%; height: 100%; object-fit: cover; }
.op-glow { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 206, 128, .55), rgba(255, 190, 110, 0) 70%); mix-blend-mode: screen; animation: glow-flicker 3.2s ease-in-out infinite; }
@keyframes glow-flicker { 0%, 100% { opacity: .85; } 40% { opacity: 1; } 55% { opacity: .72; } 70% { opacity: .95; } }
.op-rain { position: absolute; inset: -10% 0 0; pointer-events: none; opacity: .5; background-image: repeating-linear-gradient(104deg, transparent 0 22px, rgba(200, 222, 240, .16) 22px 23px, transparent 23px 61px); animation: rain-fall .55s linear infinite; }
@keyframes rain-fall { from { transform: translate3d(0, -6%, 0); } to { transform: translate3d(-2%, 4%, 0); } }
.op-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(4, 6, 9, .72)); pointer-events: none; }
.op-window { position: absolute; overflow: hidden; box-shadow: inset 0 0 0 14px #2a1b14, inset 0 0 0 18px #4a3022, 0 20px 40px rgba(0, 0, 0, .5); }
.op-window img { width: 100%; height: 100%; object-fit: cover; }
.op-window::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(97deg, transparent 0 16px, rgba(220, 235, 245, .22) 16px 17px, transparent 17px 44px); animation: rain-fall .7s linear infinite; }
.op-cutout { position: absolute; }
#opening-caption { position: absolute; left: 7vw; top: 10vh; z-index: 3; margin: 0; padding: 7px 12px 6px; background: rgba(239, 228, 200, .92); color: var(--paper-ink); font: 700 14px var(--type); letter-spacing: .04em; transform: rotate(-1deg); box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
#opening-caption:empty { display: none; }
#opening-subtitle { position: absolute; left: 50%; bottom: 9vh; z-index: 3; width: min(900px, 72vw); transform: translateX(-50%); margin: 0; text-align: center; font: italic 400 clamp(22px, 1.9vw, 30px)/1.42 var(--serif); color: var(--paper); text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }

@media (max-height: 820px) {
  #subtitle { font-size: 20px; } [data-mode=talk] .dialogue-shell { grid-template-columns: 124px 1fr; } [data-mode=talk] .dialogue-portrait { width: 124px; height: 98px; margin-top: -48px; }
  .evidence { min-height: 76vh; } .casefile { height: 92vh; } .deduction { font-size: 22px; line-height: 1.85; }
  .aha-object, .aha-object svg { height: 150px; } .aha-fact figcaption b { font-size: 60px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Interview: the questioning face-off — two figures, lighter than a confrontation. */
.dialogue-panel[data-mode=interview] { background: linear-gradient(180deg, rgba(8, 12, 16, .08), rgba(8, 12, 16, .7)); }
[data-mode=interview] .dlg-figures { display: block; }
[data-mode=interview] .dlg-figure { height: 62vh; width: 30vw; max-width: 420px; }
[data-mode=interview] .dlg-figure.left { left: 4vw; } [data-mode=interview] .dlg-figure.right { right: 4vw; }
[data-mode=interview] .dlg-figure .portrait-region { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
[data-mode=interview] .dlg-figure:not(.active) { filter: brightness(.55) saturate(.75); transform: translateY(10px) scale(.97); }
[data-mode=interview] .dialogue-shell { left: 50%; bottom: 6vh; width: min(620px, 44vw); transform: translateX(-50%); padding: 18px 24px 16px; background: rgba(13, 19, 25, .93); border-top: 2px solid var(--pin, var(--brass)); }
[data-mode=interview] .dialogue-portrait { display: none; }
.dlg-figure.enter { animation: figure-in .55s var(--ease) both; }
.dlg-figure.left.enter { animation-name: figure-in-left; }
@keyframes figure-in { from { opacity: 0; transform: translateX(26px); } }
@keyframes figure-in-left { from { opacity: 0; transform: translateX(-26px); } }

/* ---------- Step 11 controller surfaces ---------- */
/* Case vocabulary inked in brass when spoken. */
#subtitle .term { color: #e9c983; border-bottom: 1px solid rgba(205, 167, 95, .55); }
[data-mode=aside] #subtitle .term { color: #7a4f1d; border-bottom-color: rgba(122, 79, 29, .45); }
/* The time the knocks came, set small and typewritten in the corner of the listening frame. */
#knock-time { position: absolute; left: 6vw; top: 12vh; font: 700 20px var(--type); color: var(--cream-dim); letter-spacing: .04em; animation: fade-in 1.2s .4s ease both; }
#knock-time:empty { display: none; }
/* Side staging: the desk and the latch reconstruction keep the room in view on the left. */
#stage-backdrop.side { background: linear-gradient(90deg, rgba(8, 12, 16, 0) 30%, rgba(8, 12, 16, .55) 55%, rgba(8, 12, 16, .84)); backdrop-filter: none; }
.evidence.reconstruct { grid-template-columns: 1fr; width: min(470px, 36vw); min-height: 0; margin-left: auto; margin-right: 5vw; }
#clue-panel:has(.evidence.reconstruct) { justify-items: end; }
.evidence.reconstruct .evidence-stage { height: 190px; background: #d9cfb2; }
.evidence.reconstruct .evidence-stage::after { display: none; }
.evidence.reconstruct .evidence-art { inset: 10px 14px; display: grid; grid-template-rows: 1fr auto; }
.evidence.reconstruct .evidence-art svg { filter: none; }
.evidence.reconstruct .evidence-note { padding: 20px 26px 20px; }
.evidence.reconstruct .kept-stamp { font-size: 28px; right: 6%; bottom: 8%; }
.latch-steps { display: flex; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; counter-reset: step; }
.latch-steps li { flex: 1; padding: 5px 6px 4px; border-top: 3px solid rgba(42, 38, 32, .2); font: 600 11px/1.2 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: #6b624f; }
.latch-steps li.done { border-top-color: var(--moss); color: #4d5a2f; }
.latch-steps li.next { border-top-color: var(--rust); color: var(--rust); }
.stamp-button:disabled span { font-style: italic; }
.line-button.look.done { color: var(--moss); }
.missing ul { margin: 6px 0 0; padding-left: 20px; }
.missing li { margin: 3px 0; }
.board-band.low label { bottom: auto; top: 38px; }
#board-voice { margin: 18px 24px 0; min-height: 30px; font: italic 400 20px/1.45 var(--serif); color: var(--cream-dim); }
.board-track.cards { height: auto; display: flex; align-items: center; justify-content: center; gap: 34px; padding: 10px 0 0; }
.board-card { margin: 0; width: min(300px, 24vw); background: #f0e6cc; color: var(--paper-ink); box-shadow: 0 18px 36px rgba(0, 0, 0, .5); animation: card-drop .7s var(--ease) both; }
.board-card:nth-child(2) { transform: rotate(1.5deg); }
.board-card-art { height: 170px; background: radial-gradient(ellipse at 50% 46%, #3c4a52, #1c262e); display: grid; place-items: center; }
.board-card-art svg { width: 92%; height: 92%; }
.board-card figcaption { padding: 12px 16px 14px; }
.board-card figcaption b { display: block; font: 600 20px var(--serif); }
.board-card figcaption span { display: block; margin-top: 4px; font: italic 400 15px var(--serif); color: #5a4a36; }
.board-struck { position: relative; align-self: center; padding: 6px 10px; font: 600 26px var(--serif); color: var(--cream-dim); animation: fade-in .6s ease both; }
.board-struck::after { content: ''; position: absolute; left: -6px; right: -6px; top: 52%; height: 3px; background: var(--rust); transform: scaleX(0); transform-origin: left; animation: strike .5s .5s var(--ease) forwards; }
@keyframes strike { to { transform: scaleX(1); } }
@keyframes card-drop { from { opacity: 0; transform: translateY(-20px) rotate(-2deg); } }
/* Quick doorway transitions show only the place. */
#transition-card[data-quick=true] { background: rgba(8, 11, 15, .96); }
#transition-card[data-quick=true] #transition-time, #transition-card[data-quick=true] .knock-mark { display: none; }
#transition-card[data-quick=true] #transition-place { font-size: 22px; }
/* Opening: caption slides in; the painted porch dissolves into the playable one. */
#opening-caption.in { animation: caption-in .8s var(--ease) both; }
@keyframes caption-in { from { opacity: 0; transform: translateX(-12px) rotate(-1deg); } }
#opening-stage.leaving { opacity: 0; transition: opacity 1.3s ease; }
#opening-stage .op-layer { inset: -4%; }
.op-carriage { inset: -4% !important; background: linear-gradient(180deg, #2b1c15 0%, #3b2519 58%, #22160f 100%); }
.op-panel { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .0) 0 118px, rgba(0, 0, 0, .28) 118px 122px, rgba(255, 210, 150, .05) 122px 124px); }
.op-carriage .op-window { left: 47%; top: 9%; width: 44%; height: 62%; border-radius: 26px 26px 10px 10px; }
.op-carriage .op-window img { filter: saturate(.8) brightness(.9); }
.op-seat { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, #5d1f1f, #3d1415); box-shadow: 0 -8px 20px rgba(0, 0, 0, .45); }
#op-aren { left: 11%; bottom: 6%; width: 34%; height: 86%; z-index: 2; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)); }
.topic-choice > span:first-of-type, #desk-clues button > span:first-of-type { flex: 1; }
/* The evening's time sits under the wordmark, clear of the wall signs at the top of the rooms. */
#story-clock { left: 26px; top: 112px; transform: none; }
/* The watch's desk shadow belongs to the evidence card, not the contradiction beat. */
#aha-watch svg ellipse { display: none; }
.evidence.reconstruct .evidence-stage { height: 238px; }
/* Board labels never collide: bands label at their far end, pins can sit on a second tier. */
.board-band.moss label { left: auto; right: 0; }
.board-pin.t2 label { top: -62px; }
.board-pin.low.t2 label { top: auto; bottom: -64px; }
/* In the accusation the recalled evidence sits in the upper right, pinned like a board card,
   so the accused (framed by the fire) is never covered. */
[data-mode=accuse] #evidence-insert { left: auto; right: 5vw; top: 12vh; width: min(330px, 26vw); transform: translate(0, -16px) rotate(1.5deg); }
[data-mode=accuse] #evidence-insert.on { transform: translate(0, 0) rotate(1.5deg); }

.tl-entry time { left: -72px; width: 46px; }

/* Step 12: walked passages show a small place tag instead of the black time card. */
#passage-tag { position: fixed; left: 50%; top: 11vh; z-index: 30; transform: translate(-50%, -6px); display: flex; align-items: baseline; gap: 12px; padding: 6px 14px 5px; pointer-events: none; opacity: 0; transition: opacity .6s ease, transform .6s ease; background: linear-gradient(90deg, rgba(8, 11, 15, 0), rgba(8, 11, 15, .55) 18%, rgba(8, 11, 15, .55) 82%, rgba(8, 11, 15, 0)); }
#passage-tag.on { opacity: 1; transform: translate(-50%, 0); }
#passage-tag span { font: 700 13px var(--type); letter-spacing: .06em; color: var(--brass); }
#passage-tag b { font: 400 21px var(--serif); color: var(--paper); font-weight: 400; letter-spacing: .01em; }

/* Step 12: the opening plays in-engine; its stage only carries captions, subtitles and a vignette. */
#opening-stage.live { background: transparent; }
#opening-stage.live .op-shot, #opening-stage.live .op-rain { display: none; }
#opening-stage.live .op-vignette { background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(4, 6, 9, .55)); }

/* Step 13: the opening's motion graphics. A veil the shots drive for their motivated transitions
   (lightning white, tunnel black, a branch across the lens); typed caption cards over an ink rule
   that draws in the knock rhythm (three strokes, a pause, one); the HUD arriving after the move. */
#op-veil { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; background: #000; }
/* Step 13B: the typed card is a printed index card: painted laid paper, a fine inner rule, a real shadow. */
#opening-stage.live #opening-caption { display: flex; flex-direction: column; gap: 9px; min-height: 1.2em; padding: 13px 20px 13px 18px; font: 700 17px/1.2 var(--type); letter-spacing: .06em; color: #2a241b; background: linear-gradient(180deg, rgba(255, 252, 240, .45), rgba(255, 252, 240, 0) 45%), url('../assets/opening2d/paper.webp') 30% 40% / 460px auto, #efe3c4; border-radius: 1px; outline: 1px solid rgba(118, 88, 44, .3); outline-offset: -5px; box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 20px 34px -12px rgba(0, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .34); transform: rotate(-1.2deg); transition: opacity .7s ease, transform .7s ease; }
#opening-stage.live #opening-caption:empty { display: none; }
#opening-caption .op-type { white-space: pre; }
#opening-caption .op-type::after { content: ''; display: inline-block; width: .55em; height: 2px; margin-left: 2px; background: var(--paper-ink); vertical-align: -1px; animation: caret .5s steps(1) infinite; }
#opening-caption.typed .op-type::after { display: none; }
@keyframes caret { 50% { opacity: 0; } }
#opening-caption .op-rule { width: 132px; height: 8px; overflow: visible; }
#opening-caption .op-rule path { stroke: var(--paper-ink); stroke-width: 2.6; stroke-linecap: round; fill: none; stroke-dasharray: 50; stroke-dashoffset: 50; }
#opening-caption .op-rule path.last { stroke: var(--brass-2); stroke-width: 3.2; }
#opening-caption.typed .op-rule path { animation: ink .16s ease-out forwards; }
#opening-caption.typed .op-rule path:nth-child(1) { animation-delay: .05s; }
#opening-caption.typed .op-rule path:nth-child(2) { animation-delay: .33s; }
#opening-caption.typed .op-rule path:nth-child(3) { animation-delay: .62s; }
#opening-caption.typed .op-rule path:nth-child(4) { animation: ink .34s ease-out 1.29s forwards; }
@keyframes ink { to { stroke-dashoffset: 0; } }
#opening-stage.live #opening-caption.out { opacity: 0; transform: translateX(-10px) rotate(-1.2deg); }
@keyframes hud-in { from { opacity: 0; transform: translateY(-4px); } }
body[data-hud-arrive=late] #story-clock { animation: hud-in .8s ease .45s both; }
body[data-hud-arrive=late] .objective { animation: hud-in .9s ease 1.05s both; }
body[data-hud-arrive=late] .brand, body[data-hud-arrive=late] > footer, body[data-hud-arrive=late] #show-controls { animation: hud-in 1s ease 1.7s both; }