:root {
  color-scheme: dark;
  --ink: #f3ecd8;
  --muted: #aeb8b9;
  --dim: #6f7f83;
  --night: #050b0f;
  --panel: rgba(8, 18, 23, 0.94);
  --panel-soft: rgba(12, 25, 31, 0.88);
  --brass: #c5a767;
  --brass-light: #ead7a0;
  --cyan: #8dcbd4;
  --danger: #ce7869;
  --line: rgba(218, 203, 165, 0.2);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--night);
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--night); }
body { overflow: hidden; }
button, select { font: inherit; }
button { color: inherit; }
button:focus-visible, select:focus-visible { outline: 2px solid var(--brass-light); outline-offset: 3px; }

.app-shell { min-height: 100dvh; background: radial-gradient(circle at 40% 0%, #152a31, #050b0f 55%); }
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 68px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 22px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(4, 11, 15, 0.98), rgba(4, 11, 15, 0.82)); backdrop-filter: blur(16px);
}
.wordmark { display: flex; align-items: center; gap: 12px; border: 0; background: none; cursor: pointer; text-align: left; padding: 0; }
.wordmark-mark { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--brass); color: var(--brass-light); font: 600 13px/1 "Cormorant Garamond", serif; transform: rotate(45deg); }
.wordmark-mark::first-line { transform: rotate(-45deg); }
.wordmark b { display: block; font: 600 18px/1 "Cormorant Garamond", serif; letter-spacing: .02em; }
.wordmark small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.icon-button, .notebook-button { border: 1px solid var(--line); background: rgba(255,255,255,.025); padding: 9px 12px; border-radius: 4px; cursor: pointer; transition: .2s ease; }
.icon-button:hover, .notebook-button:hover, .icon-button[aria-pressed="true"] { border-color: rgba(197,167,103,.7); background: rgba(197,167,103,.12); }
.notebook-button { position: relative; border-color: rgba(197,167,103,.55); color: var(--brass-light); }
.notebook-button b { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: white; font-size: 11px; }
.sound-panel { position: absolute; top: 59px; right: 16px; width: min(330px, calc(100vw - 32px)); padding: 16px; border: 1px solid rgba(197,167,103,.4); background: rgba(5,14,19,.98); box-shadow: 0 20px 60px #000; }
.sound-panel[hidden] { display: none; }
.sound-panel label { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 12px; margin: 8px 0; color: var(--muted); font-size: 12px; }
.sound-panel input { width: 100%; accent-color: var(--brass); }
.sound-panel p { margin: 13px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--dim); font-size: 10px; }
.sound-panel .ambience-status { color: var(--cyan); letter-spacing: .04em; }
kbd { padding: 1px 5px; border: 1px solid var(--line); border-bottom-color: rgba(234,215,160,.5); border-radius: 3px; background: rgba(255,255,255,.05); color: var(--brass-light); font: 600 10px/1.4 ui-monospace, monospace; }

#game-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; padding-top: 68px; height: 100dvh; }
.scene { container-type: size; display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden; background: #03080b; }
.scene-stage { position: relative; width: min(100cqw, calc(100cqh * 16 / 9)); aspect-ratio: 16 / 9; overflow: hidden; background: #091217; box-shadow: 0 0 80px rgba(0,0,0,.45); }
.scene-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; animation: revealScene .75s ease both; }
.scene-stage[data-image-status="loading"] .scene-image { opacity: .42; filter: saturate(.72) blur(1px); }
@keyframes revealScene { from { opacity: .25; transform: scale(1.012); filter: blur(4px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
.scene-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.1), transparent 42%, rgba(0,0,0,.78)), radial-gradient(circle, transparent 44%, rgba(1,6,9,.62)); }
.atmosphere { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.scene-overlays { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.scene-overlays[hidden] { display: none; }
.scene-authored-overlay { position: absolute; left: var(--overlay-x); top: var(--overlay-y); width: var(--overlay-w); height: var(--overlay-h); pointer-events: none; }
.scene-stage[data-effect-status="fallback"]::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .72; mix-blend-mode: screen; background-image: radial-gradient(circle at 18% 22%, rgba(255,224,142,.9) 0 2px, transparent 3px), radial-gradient(circle at 73% 38%, rgba(255,240,194,.72) 0 2px, transparent 3px), radial-gradient(circle at 43% 67%, rgba(218,245,255,.72) 0 1px, transparent 3px), radial-gradient(circle at 88% 76%, rgba(255,220,133,.68) 0 2px, transparent 3px); background-size: 127px 151px, 173px 137px, 113px 191px, 211px 163px; animation: fallbackMotes 12s linear infinite; }
.scene-stage[data-effect-status="fallback"][data-effect="none"]::before { display: none; }
.scene-stage[data-effect-status="fallback"][data-effect*="rain"]::before { opacity: .58; background: repeating-linear-gradient(104deg, transparent 0 22px, rgba(192,225,240,.7) 23px 24px, transparent 25px 45px); animation: fallbackRain .8s linear infinite; }
.scene-stage[data-effect-status="fallback"][data-effect="lightning"]::before { background: rgba(203,235,255,.22); animation: fallbackLightning 4.8s steps(1,end) infinite; }
.scene-stage[data-effect-status="fallback"][data-burst]::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle, rgba(255,230,143,.68), rgba(255,205,83,.18) 24%, transparent 58%); animation: fallbackBurst 1.35s ease-out both; }
@keyframes fallbackMotes { to { background-position: 24px -70px, -32px -95px, 18px -55px, -21px -82px; } }
@keyframes fallbackRain { to { background-position: -42px 90px; } }
@keyframes fallbackLightning { 0%, 8%, 11%, 100% { opacity: .08; } 9%, 10% { opacity: .7; } }
@keyframes fallbackBurst { from { opacity: 0; transform: scale(.35); } 25% { opacity: 1; } to { opacity: 0; transform: scale(1.35); } }
.scene-status { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 24px; background: rgba(2,8,12,.56); backdrop-filter: blur(3px); }
.scene-status[hidden] { display: none; }
.scene-status-card { display: grid; justify-items: center; gap: 11px; min-width: min(330px, 80%); padding: 20px 24px; border: 1px solid rgba(197,167,103,.42); background: rgba(5,14,19,.94); box-shadow: 0 18px 60px rgba(0,0,0,.5); text-align: center; }
.scene-status-card p { margin: 0; color: var(--muted); font-size: 12px; }
.scene-status-card button { padding: 8px 12px; border: 1px solid var(--brass); border-radius: 3px; background: rgba(197,167,103,.12); cursor: pointer; }
.scene-status-spinner { width: 24px; height: 24px; border: 2px solid rgba(197,167,103,.24); border-top-color: var(--brass-light); border-radius: 50%; animation: sceneSpin .75s linear infinite; }
.scene-status[data-status="error"] .scene-status-spinner { border-radius: 3px; border-color: var(--danger); animation: none; transform: rotate(45deg) scale(.65); }
@keyframes sceneSpin { to { transform: rotate(360deg); } }
.hotspots { position: absolute; inset: 0; }
.hotspot { position: absolute; overflow: visible; border: 1px solid transparent; background: transparent; cursor: pointer; border-radius: 8px; color: transparent; transition: .2s ease; }
.hotspot[data-type="inspect"] { z-index: 2; }
.hotspot[data-type="puzzle"] { z-index: 3; }
.hotspot[data-type="inspect"] { cursor: zoom-in; }
.hotspot[data-type="talk"] { cursor: help; }
.hotspot[data-type="navigate"] { cursor: alias; }
.hotspot[data-type="puzzle"] { cursor: pointer; }
.hotspot::after { content: attr(aria-label); position: absolute; z-index: 12; left: 50%; bottom: -31px; transform: translateX(-50%) translateY(4px); white-space: nowrap; color: var(--ink); background: rgba(4,11,15,.94); border: 1px solid var(--line); padding: 5px 8px; border-radius: 3px; box-shadow: 0 5px 18px rgba(0,0,0,.45); font-size: 11px; opacity: 0; pointer-events: none; transition: .16s ease; }
.hotspot[data-label-above="true"]::after { top: -31px; bottom: auto; }
.hotspot::before { content: attr(data-icon); position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 27px; height: 27px; transform: translate(-50%,-50%) scale(.84); border: 1px solid currentColor; border-radius: 50%; background: rgba(4,11,15,.88); color: var(--brass-light); font-size: 13px; opacity: 0; transition: .16s ease; }
.hotspot:hover, .hotspot:focus-visible, .show-hotspots .hotspot { border-color: rgba(234,215,160,.9); background: rgba(141,203,212,.11); box-shadow: inset 0 0 24px rgba(141,203,212,.12), 0 0 0 1px rgba(0,0,0,.4); }
.hotspot[data-type="talk"]:hover, .hotspot[data-type="talk"]:focus-visible, .show-hotspots .hotspot[data-type="talk"] { background: rgba(197,167,103,.13); }
.hotspot[data-type="navigate"]:hover, .hotspot[data-type="navigate"]:focus-visible, .show-hotspots .hotspot[data-type="navigate"] { background: rgba(104,153,169,.13); }
.hotspot[data-type="puzzle"]:hover, .hotspot[data-type="puzzle"]:focus-visible, .show-hotspots .hotspot[data-type="puzzle"] { background: rgba(206,120,105,.13); }
.hotspot:hover::after, .hotspot:focus-visible::after, .show-hotspots .hotspot::after, .hotspot:hover::before, .hotspot:focus-visible::before, .show-hotspots .hotspot::before { opacity: 1; transform: translateX(-50%) translateY(0); }
.hotspot:hover::before, .hotspot:focus-visible::before, .show-hotspots .hotspot::before { transform: translate(-50%,-50%) scale(1); }
.hotspot[data-type="navigate"] { border-radius: 50%; }
.hotspot[data-seen="true"] { border-style: dashed; }
.hotspot[data-one-shot-pickup="true"][data-claim-status="collected"] { border-color: rgba(151,205,177,.42); background: rgba(62,112,88,.08); box-shadow: inset 0 0 20px rgba(62,112,88,.08); }
.hotspot[data-one-shot-pickup="true"][data-claim-status="collected"]::before { content: "✓"; border-color: rgba(178,225,198,.76); color: #b2e1c6; opacity: .72; transform: translate(-50%,-50%) scale(.9); }
.hotspot-claim-status { position: absolute; z-index: 13; top: -10px; right: -10px; width: max-content; max-width: 120px; padding: 4px 7px; border: 1px solid rgba(178,225,198,.58); border-radius: 20px; background: rgba(6,24,20,.94); box-shadow: 0 4px 15px rgba(0,0,0,.42); color: #b2e1c6; font-size: 9px; font-weight: 650; letter-spacing: .08em; line-height: 1; text-transform: uppercase; pointer-events: none; }
.hotspot[data-guided="true"] { z-index: 14; border: 2px solid #fff0a8; background: radial-gradient(circle, rgba(255,241,171,.48), rgba(197,167,103,.15) 52%, transparent 78%); box-shadow: 0 0 12px 4px rgba(255,224,132,.76), 0 0 38px 15px rgba(217,174,81,.38), inset 0 0 22px rgba(255,240,174,.46); animation: guidePulse 1.25s ease-in-out infinite; }
.hotspot[data-guided="true"]::before { content: "✦"; width: 30px; height: 30px; border-color: #fff0a8; color: #fff0a8; opacity: 1; transform: translate(-50%,-50%) scale(1); }
.hotspot[data-guided="true"]::after { content: attr(data-guide-label); opacity: 1; transform: translateX(-50%) translateY(0); }
.guide-sparkles { position: absolute; inset: -18px; overflow: visible; pointer-events: none; }
.guide-sparkles i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff3b4; box-shadow: 0 0 9px 3px rgba(255,224,132,.9); animation: guideSparkle 1.6s ease-in-out infinite; }
.guide-sparkles i:nth-child(1) { left: 8%; top: 18%; animation-delay: -.2s; }
.guide-sparkles i:nth-child(2) { right: 5%; top: 9%; animation-delay: -.75s; }
.guide-sparkles i:nth-child(3) { left: 15%; bottom: 3%; animation-delay: -1.15s; }
.guide-sparkles i:nth-child(4) { right: 8%; bottom: 15%; animation-delay: -.45s; }
@keyframes guidePulse { 50% { filter: brightness(1.22); box-shadow: 0 0 18px 7px rgba(255,232,148,.9), 0 0 52px 23px rgba(217,174,81,.48), inset 0 0 28px rgba(255,245,195,.62); } }
@keyframes guideSparkle { 0%, 100% { opacity: .18; transform: translateY(5px) scale(.65); } 45% { opacity: 1; transform: translateY(-5px) scale(1.25); } }
.onboarding-hint { position: absolute; z-index: 8; left: 50%; top: 18px; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 30px); transform: translateX(-50%); padding: 9px 12px; border: 1px solid rgba(197,167,103,.55); background: rgba(4,11,15,.92); box-shadow: 0 10px 35px rgba(0,0,0,.45); color: var(--muted); font-size: 11px; }
.onboarding-hint b { color: var(--brass-light); white-space: nowrap; }
.onboarding-hint[hidden] { display: none; }
.scene-caption { position: absolute; left: 30px; bottom: 26px; max-width: min(610px, 72%); text-shadow: 0 2px 14px #000; pointer-events: none; }
.eyebrow, .panel-label { margin: 0 0 8px; color: var(--brass-light); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.scene-caption h1 { margin: 0; font: 600 clamp(34px, 4.2vw, 64px)/.95 "Cormorant Garamond", serif; }
.scene-caption > p:last-child { margin: 10px 0 0; color: rgba(242,238,221,.8); font-size: 13px; line-height: 1.55; }
.finale-button, .accusation-button { position: absolute; z-index: 8; right: 28px; bottom: 30px; border: 1px solid var(--brass); background: rgba(84,39,27,.92); padding: 15px 18px; border-radius: 3px; cursor: pointer; box-shadow: 0 10px 50px #000; }
.accusation-button { background: rgba(42,69,70,.94); }
.finale-button span, .accusation-button span, .primary-button span { margin-left: 18px; }

.side-panel { position: relative; z-index: 4; display: flex; flex-direction: column; gap: 24px; padding: 25px 20px 17px; overflow-y: auto; background: var(--panel); border-left: 1px solid var(--line); box-shadow: -18px 0 60px rgba(0,0,0,.3); }
.current-task { border-left: 2px solid var(--brass); padding: 3px 0 3px 13px; color: var(--ink); font: 500 18px/1.25 "Cormorant Garamond", serif; }
.route-list { display: grid; gap: 7px; }
.route-list button { display: flex; justify-content: space-between; width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255,255,255,.02); cursor: pointer; text-align: left; color: var(--muted); }
.route-list button:hover { color: var(--ink); border-color: rgba(197,167,103,.55); }
.inventory { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.inventory-item { min-height: 82px; padding: 8px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255,255,255,.025); color: var(--muted); font-size: 10px; text-align: center; }
.inventory-item img { width: 44px; height: 44px; object-fit: contain; display: block; margin: 0 auto 5px; }
.empty-state { color: var(--dim); font-size: 12px; font-style: italic; }
.side-panel footer { margin-top: auto; display: flex; justify-content: space-between; gap: 10px; color: var(--dim); font-size: 10px; }
.side-panel footer button { border: 0; background: none; padding: 0; color: var(--dim); cursor: pointer; text-decoration: underline; }

.intro-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center start; overflow: hidden; }
.intro-screen[hidden] { display: none; }
.intro-image, .intro-scrim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-image { animation: introDrift 18s ease-out both; }
.intro-video { animation: none; }
@keyframes introDrift { from { transform: scale(1.08); } to { transform: scale(1); } }
.intro-scrim { background: linear-gradient(90deg, rgba(2,8,12,.93) 0%, rgba(2,8,12,.77) 46%, rgba(2,8,12,.25)), linear-gradient(0deg, rgba(1,6,9,.75), transparent 60%); }
.intro-card { position: relative; width: min(670px, 42vw, calc(100vw - 46px)); margin-left: clamp(22px, 3vw, 58px); padding: 34px 38px; border: 1px solid rgba(224,206,158,.34); background: rgba(5,14,19,.76); backdrop-filter: blur(13px); box-shadow: 0 28px 90px rgba(0,0,0,.55); }
.intro-ornament { margin: 20px 0 4px; color: var(--cyan); font: italic 500 18px/1 "Cormorant Garamond", serif; }
.intro-card h1 { margin: 0 0 20px; max-width: 560px; font: 600 clamp(48px, 6vw, 82px)/.84 "Cormorant Garamond", serif; letter-spacing: -.03em; }
.intro-body { max-width: 590px; color: rgba(240,236,219,.83); font: 500 18px/1.48 "Cormorant Garamond", serif; }
.intro-body p { margin: 0 0 10px; }
.intro-task { margin: 19px 0; padding: 12px 14px; border-left: 2px solid var(--brass); background: rgba(0,0,0,.2); color: var(--brass-light); font-size: 12px; }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.primary-button { border: 1px solid var(--brass); background: linear-gradient(135deg, #806b3d, #4a3b21); padding: 14px 18px; border-radius: 2px; cursor: pointer; font-weight: 600; box-shadow: 0 12px 35px rgba(0,0,0,.35); }
.primary-button:hover { filter: brightness(1.16); }
.intro-video-toggle { border: 1px solid rgba(224,206,158,.48); background: rgba(5,14,19,.72); color: var(--paper); padding: 13px 16px; border-radius: 2px; cursor: pointer; font: inherit; }
.intro-video-toggle:hover { border-color: var(--brass); background: rgba(128,107,61,.3); }
.intro-note { color: var(--dim); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

.notebook-drawer { position: fixed; z-index: 80; top: 0; right: 0; width: min(620px, 94vw); height: 100dvh; transform: translateX(102%); transition: transform .28s ease; background: #101b1c; border-left: 1px solid var(--brass); box-shadow: -30px 0 80px rgba(0,0,0,.6); }
.notebook-drawer.open { transform: translateX(0); }
.notebook-header { display: flex; align-items: center; justify-content: space-between; padding: 25px 28px 18px; border-bottom: 1px solid var(--line); }
.notebook-header h2 { margin: 0; font: 600 38px/1 "Cormorant Garamond", serif; }
.close-button { border: 1px solid var(--line); background: transparent; width: 36px; height: 36px; border-radius: 50%; font-size: 23px; cursor: pointer; }
.notebook-tabs { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); }
.notebook-tabs button { border: 0; border-right: 1px solid var(--line); background: rgba(255,255,255,.02); padding: 13px 4px; color: var(--muted); cursor: pointer; }
.notebook-tabs button.active { color: var(--brass-light); box-shadow: inset 0 -2px var(--brass); }
.notebook-content { height: calc(100dvh - 157px); overflow-y: auto; padding: 25px 28px 60px; }
.drawer-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.62); backdrop-filter: blur(3px); }
.note-card { padding: 16px 0; border-bottom: 1px solid var(--line); }
.note-card h3 { margin: 0 0 6px; font: 600 24px/1 "Cormorant Garamond", serif; }
.note-card p { margin: 5px 0; color: var(--muted); line-height: 1.55; font-size: 13px; }
.note-card .tag { color: var(--brass-light); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.note-card.locked { opacity: .38; }
.note-card.done h3 { text-decoration: line-through; color: var(--muted); }
.person-card { display: grid; grid-template-columns: 112px 1fr; gap: 18px; }
.person-card img { width: 112px; height: 142px; object-fit: cover; filter: saturate(.82); border: 1px solid var(--line); }

.modal { width: min(760px, calc(100vw - 32px)); max-height: min(86vh, 850px); overflow-y: auto; padding: 0; border: 1px solid rgba(221,200,146,.46); border-radius: 4px; color: var(--ink); background: #0c181d; box-shadow: 0 28px 110px #000; }
.modal::backdrop { background: rgba(1,6,9,.76); backdrop-filter: blur(7px); }
.modal-close { position: sticky; float: right; top: 16px; right: 16px; z-index: 2; margin: 16px; background: rgba(5,13,17,.85); }
.modal-hero { width: 100%; max-height: 330px; object-fit: cover; display: block; border-bottom: 1px solid var(--line); }
.modal-hero.item-detail-image { height: min(48vh, 430px); max-height: 430px; padding: 30px; object-fit: contain; background: radial-gradient(circle, rgba(197,167,103,.12), rgba(3,9,12,.95) 64%); }
.observation-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-bottom: 1px solid var(--line); background: var(--line); }
.observation-comparison-item { min-width: 0; margin: 0; background: #071116; }
.observation-comparison-frame { aspect-ratio: 4 / 3; overflow: hidden; background: radial-gradient(circle, rgba(197,167,103,.11), rgba(3,9,12,.96) 68%); }
.observation-comparison-frame img { display: block; width: 100%; height: 100%; object-fit: var(--comparison-fit, cover); object-position: var(--comparison-position, center); }
.observation-comparison-item figcaption { min-height: 42px; padding: 11px 14px; border-top: 1px solid rgba(221,200,146,.18); color: var(--brass-light); font-size: 10px; font-weight: 700; letter-spacing: .09em; line-height: 1.45; text-align: center; text-transform: uppercase; }
.evidence-graphic { margin: 0; color: #f7ebc7; }
.evidence-route-frame { position: relative; min-height: 250px; overflow: hidden; border-bottom: 1px solid rgba(221,200,146,.42); background: radial-gradient(circle at 76% 44%, color-mix(in srgb, var(--evidence-accent) 34%, transparent), transparent 27%), linear-gradient(135deg, #e7d7ad 0 2%, #121c20 2% 98%, #e7d7ad 98%); box-shadow: inset 0 0 42px rgba(0,0,0,.72); }
.evidence-frame-title { position: absolute; z-index: 2; left: 4%; top: 6%; padding: 3px 7px; border-left: 2px solid #d9bd77; color: #ffe6a4; background: rgba(5,14,19,.74); font-size: clamp(7px, 1.4cqw, 11px); font-weight: 800; letter-spacing: .18em; line-height: 1.2; text-transform: uppercase; }
.evidence-route-values { position: absolute; z-index: 2; left: 4%; right: 4%; top: 24%; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 3%; }
.evidence-route-step { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; min-width: 0; padding: 4% 8%; border: 1px solid rgba(244,220,160,.65); background: rgba(6,16,20,.84); box-shadow: 0 5px 16px rgba(0,0,0,.38), inset 0 0 12px color-mix(in srgb, var(--evidence-accent) 22%, transparent); }
.evidence-route-step + .evidence-route-step::before { content: "◆"; position: absolute; left: -10%; top: 50%; transform: translate(-50%,-50%); color: #d9bd77; font-size: .55em; }
.evidence-route-step small { overflow: hidden; color: #d9bd77; font-size: clamp(6px, 1.45cqw, 11px); font-weight: 800; letter-spacing: .12em; text-overflow: ellipsis; text-transform: uppercase; }
.evidence-route-step b { justify-self: end; color: #fff6dd; font: 700 clamp(18px, 6.8cqw, 48px)/.8 "Cormorant Garamond", serif; text-shadow: 0 0 12px rgba(255,229,164,.32); }
.evidence-subject { position: absolute; z-index: 1; right: 4%; bottom: 5%; display: flex; align-items: end; gap: 10px; height: 42%; }
.evidence-subject-figure { position: relative; display: block; width: clamp(36px, 9cqw, 74px); height: 100%; filter: drop-shadow(0 5px 7px rgba(0,0,0,.64)); }
.evidence-subject-head { position: absolute; z-index: 3; left: 34%; top: 5%; width: 30%; aspect-ratio: .82; border-radius: 47% 47% 43% 43%; background: #c99c76; }
.evidence-subject-head::before { content: ""; position: absolute; inset: -18% -24% 28%; border-radius: 48% 48% 34% 34%; border-bottom: 4px solid #101315; background: #101315; box-shadow: -5px 10px 0 -2px #101315, 5px 10px 0 -2px #101315; }
.evidence-subject-torso { position: absolute; left: 18%; right: 18%; bottom: 0; height: 66%; clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%); background: linear-gradient(90deg, color-mix(in srgb, var(--evidence-accent) 72%, #061113), var(--evidence-accent) 53%, color-mix(in srgb, var(--evidence-accent) 68%, #061113)); }
.evidence-subject-arm { position: absolute; z-index: 2; right: 2%; top: 51%; width: 48%; height: 14%; transform: rotate(-18deg); transform-origin: left center; border-radius: 20px; background: var(--evidence-accent); }
.evidence-subject-cuff { position: absolute; z-index: 4; right: 4%; top: 42%; width: 19%; height: 13%; transform: rotate(-18deg); border: 2px solid #f1f4ee; background: repeating-linear-gradient(90deg, #bfc6c7 0 3px, #56646a 3px 5px); box-shadow: 0 0 7px rgba(239,248,248,.75); }
.evidence-subject-label { display: grid; max-width: 165px; margin-bottom: 2%; padding: 5px 7px; border-right: 2px solid var(--evidence-accent); background: rgba(5,14,19,.84); text-align: right; text-shadow: 0 1px 5px #000; }
.evidence-subject-label b { color: #fff0c6; font-size: clamp(7px, 1.5cqw, 12px); letter-spacing: .13em; text-transform: uppercase; }
.evidence-subject-label small { color: #d5e4df; font-size: clamp(5px, 1.05cqw, 9px); letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.scene-evidence-graphic { width: 100%; height: 100%; min-height: 0; border: 0; background: transparent; box-shadow: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.65)); container-type: inline-size; }
.scene-evidence-graphic .evidence-route-values { top: 20%; }
.scene-evidence-graphic .evidence-route-step { grid-template-columns: 1fr; justify-items: center; padding: 3% 5%; }
.scene-evidence-graphic .evidence-route-step small { font-size: clamp(7px, 1.7cqw, 11px); }
.scene-evidence-graphic .evidence-route-step b { justify-self: center; font-size: clamp(20px, 6.8cqw, 48px); }
.scene-evidence-graphic .evidence-subject { right: 1%; bottom: 0; height: 39%; }
.scene-evidence-graphic .evidence-subject-label { max-width: 94px; }
.puzzle-result-evidence { container-type: inline-size; }
.modal-body { padding: 27px 32px 34px; }
.modal-body h2 { margin: 0 0 12px; font: 600 38px/1 "Cormorant Garamond", serif; }
.modal-body > p { color: var(--muted); line-height: 1.65; }
.modal-eyebrow { color: var(--brass-light); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.reward-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.reward-chip { padding: 6px 9px; border: 1px solid rgba(197,167,103,.35); border-radius: 20px; color: var(--brass-light); background: rgba(197,167,103,.08); font-size: 10px; }
.dialogue-layout { display: grid; grid-template-columns: 170px 1fr; min-height: 420px; }
.dialogue-portrait { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); }
.dialogue-panel { padding: 28px; }
.dialogue-response { min-height: 112px; padding: 18px; margin: 16px 0; border-left: 2px solid var(--brass); background: rgba(255,255,255,.025); color: var(--ink); font: italic 500 18px/1.5 "Cormorant Garamond", serif; }
.choice-list { display: grid; gap: 8px; }
.choice-list button, .puzzle-button { border: 1px solid var(--line); background: rgba(255,255,255,.025); padding: 12px 13px; border-radius: 3px; cursor: pointer; text-align: left; }
.choice-list button:hover, .puzzle-button:hover { border-color: var(--brass); background: rgba(197,167,103,.08); }
.choice-list button.seen { color: var(--muted); border-style: dashed; }
.choice-list button.seen::after { content: "Replay"; float: right; color: var(--dim); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.dialogue-transcript { margin-top: 17px; border-top: 1px solid var(--line); padding-top: 12px; }
.dialogue-transcript summary { cursor: pointer; color: var(--muted); font-size: 11px; }
.transcript-entry { padding: 12px 0; border-bottom: 1px solid var(--line); }
.transcript-entry b { display: block; margin-bottom: 5px; color: var(--brass-light); font-size: 11px; }
.transcript-entry p { margin: 0; color: var(--muted); font: italic 500 15px/1.45 "Cormorant Garamond", serif; }
.puzzle-controls { display: grid; gap: 13px; margin: 20px 0; }
.sequence-display { min-height: 52px; padding: 13px; border: 1px dashed rgba(197,167,103,.45); color: var(--brass-light); letter-spacing: .12em; text-align: center; }
.sequence-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.puzzle-button.tone-low { border-bottom: 4px solid #708c91; }
.puzzle-button.tone-mid { border-bottom: 4px solid var(--brass); }
.puzzle-button.tone-high { border-bottom: 4px solid var(--cyan); }
.puzzle-button.pressed { transform: translateY(2px); filter: brightness(1.35); }
.puzzle-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.puzzle-actions button { padding: 10px 13px; border: 1px solid var(--line); background: transparent; border-radius: 3px; cursor: pointer; }
.puzzle-actions .submit { border-color: var(--brass); background: rgba(197,167,103,.14); }
.hint-box { padding: 13px; margin-top: 14px; border-left: 2px solid var(--cyan); background: rgba(141,203,212,.07); color: #c5dfe2; font-size: 12px; line-height: 1.5; }
.dial-row, .accusation-row { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; }
.dial-control { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; border: 1px solid var(--line); background: #101f25; }
.dial-control button { height: 42px; border: 0; background: rgba(255,255,255,.025); color: var(--brass-light); cursor: pointer; }
.dial-control button:hover { background: rgba(197,167,103,.12); }
.dial-value { text-align: center; color: var(--ink); letter-spacing: .1em; }
.combine-card[aria-pressed="true"], .evidence-card[aria-pressed="true"], .suspect-card[aria-pressed="true"] { border-color: var(--brass); background: rgba(197,167,103,.14); box-shadow: inset 3px 0 var(--brass); }
.accusation-group { margin: 20px 0; padding: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.018); }
.accusation-group legend { padding: 0 7px; color: var(--brass-light); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.card-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.suspect-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.evidence-card, .suspect-card { min-height: 58px; padding: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--muted); cursor: pointer; text-align: left; }
.suspect-card { text-align: center; color: var(--ink); }
.lead-update { margin-top: 18px; padding: 12px 14px; border-left: 2px solid var(--cyan); background: rgba(141,203,212,.07); color: #c5dfe2; font-size: 12px; }
.lead-update b { display: block; margin-bottom: 4px; color: var(--cyan); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.result-copy { margin-top: 13px; padding: 12px 14px; border-left: 2px solid var(--brass); background: rgba(197,167,103,.08); color: var(--brass-light); font-size: 12px; line-height: 1.55; }
.locked-message { padding: 15px; border: 1px solid rgba(206,120,105,.4); background: rgba(206,120,105,.08); color: #edb9ad; }
.ending { position: relative; min-height: min(78vh, 700px); display: grid; align-content: end; overflow: hidden; }
.ending > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ending > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ending::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3,9,12,.98), rgba(3,9,12,.05) 78%); }
.ending-copy { position: relative; z-index: 1; padding: 38px; max-width: 650px; }
.ending-copy h2 { margin: 0 0 12px; font: 600 47px/.95 "Cormorant Garamond", serif; }
.ending-copy p { color: rgba(243,236,216,.84); line-height: 1.58; }
.ending-evidence-panels { position: absolute; z-index: 2; top: 24px; right: 24px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; width: min(600px, calc(100% - 48px)); }
.ending-evidence-panel { min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgba(231,208,151,.55); background: rgba(5,14,19,.94); box-shadow: 0 12px 34px rgba(0,0,0,.58); }
.ending-evidence-panel img { position: static; display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: var(--evidence-fit, cover); object-position: var(--evidence-position, center); background: #071116; }
.ending-evidence-panel figcaption { display: grid; gap: 2px; min-height: 48px; padding: 8px 10px; border-top: 1px solid rgba(231,208,151,.28); }
.ending-evidence-panel figcaption b { color: #ffe6aa; font-size: 9px; letter-spacing: .09em; line-height: 1.35; text-transform: uppercase; }
.ending-evidence-panel figcaption span { color: rgba(232,237,226,.8); font-size: 9px; line-height: 1.35; }
.ending[data-evidence-panels="true"] .ending-copy { max-width: 100%; padding-top: 340px; }

.toast-region { position: fixed; z-index: 130; left: 22px; top: 88px; display: grid; gap: 8px; pointer-events: none; }
.toast { max-width: 360px; padding: 11px 14px; border: 1px solid var(--line); border-left: 3px solid var(--brass); background: rgba(6,16,20,.94); box-shadow: 0 10px 35px rgba(0,0,0,.5); color: var(--ink); font-size: 12px; animation: toastIn .25s ease both; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-12px); } }

@media (max-width: 1100px) {
  #game-main { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .scene { width: 100%; aspect-ratio: 16 / 9; }
  .scene-stage { width: 100%; }
  .side-panel { position: static; min-height: 0; max-height: none; align-content: start; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); padding: 14px; border-left: 0; border-top: 1px solid var(--line); }
  .side-panel footer { display: none; }
  .intro-screen { place-items: center; }
  .intro-card { width: min(670px, calc(100vw - 46px)); margin: 0; }
  .icon-button span { display: none; }
}

@media (max-width: 620px) {
  .intro-screen { place-items: start center; overflow-y: auto; padding: 14px 0; }
  .intro-card { align-self: start; padding: 24px 22px; }
  .intro-card h1 { margin-bottom: 14px; font-size: clamp(40px, 12vw, 48px); line-height: .9; }
  .intro-body { font-size: 16px; line-height: 1.38; }
  .intro-task { margin: 14px 0; }
  .topbar { height: 60px; padding: 0 10px; }
  #game-main { padding-top: 60px; }
  .wordmark small, .notebook-button span { display: none; }
  .scene-caption { left: 16px; max-width: calc(100% - 32px); }
  .scene-caption > p:last-child { display: none; }
  .onboarding-hint { align-items: flex-start; width: calc(100% - 22px); }
  .side-panel { grid-template-columns: 1fr 1fr; }
  .side-panel section:nth-child(3) { display: none; }
  .card-choice-grid, .suspect-grid { grid-template-columns: 1fr; }
  .dialogue-layout { grid-template-columns: 1fr; }
  .dialogue-portrait { height: 220px; }
  .observation-comparison { grid-template-columns: 1fr; }
  .evidence-route-frame { min-height: 220px; }
  .evidence-subject-label { display: none; }
  .modal-body { padding: 23px 20px 27px; }
  .dial-row, .accusation-row { grid-template-columns: 1fr; gap: 5px; }
  .ending[data-evidence-panels="true"] { display: block; }
  .ending-evidence-panels { position: relative; top: auto; right: auto; grid-template-columns: 1fr; width: auto; padding: 18px 18px 0; }
  .ending-evidence-panel img { aspect-ratio: 16 / 7.4; }
  .ending[data-evidence-panels="true"] .ending-copy { padding-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .scene-stage[data-effect-status="fallback"]::before { animation: none; }
}