/* Cinematic 16:9 composition. HUD and characters share the same image canvas. */
:root{--gw:min(100vw,177.7778dvh);--gh:min(100dvh,56.25vw);--ex:calc((100vw - var(--gw))/2);--ey:calc((100dvh - var(--gh))/2);--red:#a73c32;--paper:#d2c4a3}
body{background:#020403;font-family:'Songti SC','STSong','SimSun',serif}#game{position:fixed;left:var(--ex);top:var(--ey);width:var(--gw);height:var(--gh);overflow:hidden;box-shadow:0 0 100px #000}.screen{width:100%;height:100%}#play{isolation:isolate}#stageFrame{position:absolute;inset:0;height:100%;background:#050705}#stage{width:100%;height:100%;aspect-ratio:16/9}#sceneImage{object-fit:contain}.vignette{background:linear-gradient(#0007,transparent 28%,transparent 65%,#0008),radial-gradient(ellipse,transparent 55%,#0005)}
.hud{position:absolute;inset:0 0 auto;z-index:8;height:14%;border:0;background:linear-gradient(#050805a8,transparent);padding:20px 3%;align-items:flex-start;gap:8px;pointer-events:none}.hud button{pointer-events:auto;font-size:13px;letter-spacing:.15em;text-shadow:0 2px 5px #000}.hud .brand{display:none}.hud #menu{order:3;margin-left:4px}.hud #sound{order:2}.scene-caption{order:0;margin:0 auto 0 0;display:block;line-height:1.6;letter-spacing:.12em;border-left:2px solid #a8a798;padding-left:12px}.scene-caption small{display:block;font-size:clamp(11px,1.3vw,19px);color:#cecdbf}.scene-caption strong{display:inline;font-size:clamp(14px,1.6vw,24px)}#sceneNo{display:none}.scene-corner{top:15%;bottom:auto!important;left:3%;font-size:clamp(10px,.85vw,13px);color:#b3b5a7;max-width:45%}
.bottom-hud{position:absolute;bottom:0;left:0;right:0;z-index:12;height:9%;min-height:0;padding:8px 2% 8px 23%;border-top:1px solid #c2b38e30;background:linear-gradient(90deg,#02060500,#020605d9 22%,#020605e8);gap:8px}.bottom-hud button{padding:6px 10px;font-size:13px;border-color:transparent;letter-spacing:.1em}.bottom-hud button:hover{border-color:#ad756359;background:#391a1466}.case-tools{margin-left:auto}.navigation{gap:0}#objective{font-size:12px;margin:auto;color:#aaa99a;max-width:27%;letter-spacing:.08em}.case-tools span{font-size:11px}
.character-sprite{clip-path:polygon(4% 100%,7% 91%,12% 80%,14% 72%,9% 64%,8% 50%,8% 34%,13% 23%,23% 13%,34% 5%,47% 1%,61% 2%,70% 7%,77% 14%,82% 22%,84% 31%,83% 38%,89% 48%,91% 58%,91% 69%,94% 79%,95% 88%,99% 100%);object-fit:contain;object-position:bottom;pointer-events:none;filter:brightness(.8) saturate(.78);user-select:none}#scenePortrait{position:absolute;left:0;bottom:0;width:23%;height:38%;z-index:11;object-position:left bottom;opacity:.96}.panel-portrait{display:none}body:has(#panel[open]) #scenePortrait,body:has(#dialogue[open]) #scenePortrait{visibility:hidden}
.hotspot{border:0;border-radius:0}.hotspot:hover,.hotspot:focus-visible{border:1px solid #d8a09065;background:#7c35211a}.hotspot::before{width:24px;height:24px;content:'';border:1px solid #ded7bd;border-radius:50%;box-shadow:0 0 0 4px #e0c7a030,0 0 18px #bd4e3940;font-size:0!important}.observing .hotspot{outline:1px solid #c65a484f;background:#a8423010}.observing .hotspot::before{border-color:#ffc3af;box-shadow:0 0 0 4px #e96b5240,0 0 16px #c35949aa}.hotspot span{bottom:auto;top:0;left:50%;transform:translate(-50%,-125%);padding:3px 12px;background:linear-gradient(90deg,transparent,#120906dd 25%,#120906dd 75%,transparent);border-bottom:1px solid #ab5446a0;letter-spacing:.1em;font-size:13px}
#dialogue{position:fixed;left:var(--ex);right:auto;top:auto;bottom:calc(var(--ey) + var(--gh)*.035);margin:0;width:var(--gw);max-width:none;height:calc(var(--gh)*.15);min-height:100px;padding:0 11% 0 22%;border:0;border-top:1px solid #b29c774d;background:linear-gradient(90deg,transparent 2%,#040605dd 22%,#040605e8 90%,#040605c0);overflow:visible;box-shadow:0 -15px 50px #0002}#dialogue::backdrop{background:#0000000d}.dialogue-copy{position:relative;height:100%;padding:12px 0}#speaker{border-left:2px solid #a73529;padding-left:14px;margin-bottom:8px;font-size:17px;letter-spacing:.2em;color:#d6d3c3}#dialogueText{font-size:clamp(16px,1.45vw,23px);line-height:1.65;min-height:0;margin:0 90px 0 14px;text-shadow:0 2px 5px #000}#nextLine{position:absolute;right:0;bottom:8px;padding:4px 8px;font-size:12px;min-width:80px;color:#bcb7a3}.dialogue-portrait{left:0;bottom:calc(var(--gh)*-.035);width:23%;height:calc(var(--gh)*.39);max-height:none;mask-image:none}.dialogue-brand{position:absolute;right:3%;bottom:12px;font:28px var(--serif);transform:rotate(-7deg);color:#d3d2c3}.dialogue-brand small{display:block;font:7px var(--sans);letter-spacing:.2em;margin-top:3px}
dialog{background:#0a0e0deF;border-color:#aea08055;box-shadow:0 12px 70px #0009}dialog::backdrop{background:#0009;backdrop-filter:blur(6px)}#panel{width:min(1180px,90vw);max-height:82dvh}.panel-head{padding:15px 24px;background:#0b0f0eeb;border-bottom:1px solid #aa977537}.panel-head h2{font-size:22px;letter-spacing:.1em}.panel-head .eyebrow{font-size:9px;letter-spacing:.18em}.panel-head button{color:#d1cbb9}#panelBody{padding:20px 24px}.paper,.roster{background:#c7bea7;color:#282821}.item-card{background:linear-gradient(140deg,#b7b29809,#04070688);border-color:#ad9b7340}.item-card:hover{border-color:#b37b5d;background:#6e43211a}.item-card strong{font-size:19px}.primary{letter-spacing:.12em}button.primary{background:#773126;color:#efddc5;border-color:#9d5642}button.primary:hover{background:#8e3b2e;color:#fff2d7}.zoom-viewport{background:#020403}.roster button{font-family:var(--serif)}
#panel[data-kind="closeup"]{position:fixed;top:calc(var(--ey) + var(--gh)*.115);left:calc(var(--ex) + var(--gw)*.245);margin:0;width:calc(var(--gw)*.715);height:calc(var(--gh)*.66);max-height:none;overflow:visible;background:#060a08b8}#panel[data-kind="closeup"] .panel-head{height:48px;padding:5px 14px;background:#040706bb}#panel[data-kind="closeup"] .panel-head h2{font-size:16px}#panel[data-kind="closeup"] .panel-head .eyebrow{display:none}#panel[data-kind="closeup"] #panelBody{height:calc(100% - 48px);padding:0}.inspect-layout{display:grid;grid-template-columns:minmax(0,1fr) 22%;height:100%;gap:12px}.inspect-main{background:#0008;min-height:0}.inspect-main>.closeup-art{width:100%;height:100%;max-height:none;margin:0;object-fit:contain}.clue-rail{padding:12px 12px 8px 0;overflow:auto}.clue-rail h3{font-size:13px;color:#bfb59f;letter-spacing:.14em;margin:0 0 12px;border-left:2px solid #794533;padding-left:8px}.clue-thumb{display:block;padding:3px;margin:0 0 9px;width:100%;text-align:left;border:1px solid #9e97783b;background:#040706c0}.clue-thumb img{display:block;width:100%;height:calc(var(--gh)*.105);object-fit:cover;opacity:.75}.clue-thumb span{font:11px var(--serif);padding:3px;display:block}.clue-thumb.active{border-color:#a85945}.clue-thumb:hover img{opacity:1}#panel[data-kind="closeup"] .panel-portrait{display:block;position:fixed;left:var(--ex);bottom:var(--ey);width:calc(var(--gw)*.23);height:calc(var(--gh)*.38)}
.title-screen{padding:5% 9%;background:linear-gradient(90deg,#020605ec,#0206059e 42%,#0206050d),url('assets/chapter01/street.jpg') center/cover}.title-copy h1{font-size:clamp(70px,9vw,150px);letter-spacing:.15em;color:#e3dfce}.title-negative{display:none}.title-copy .english{font-size:12px;letter-spacing:.45em}.title-copy .muted{font-size:12px;line-height:1.9;color:#a9aea3}.chapter-label{margin:24px 0}.chapter-label h2{font-size:23px}.title-footer{bottom:3%;font-size:10px}.title-copy .eyebrow{font-size:11px}.film-edge{opacity:.4}.end-screen{background:radial-gradient(ellipse at center,#18201a,#020403 65%)}#toast{top:calc(var(--ey) + var(--gh)*.15);right:calc(var(--ex) + 25px);background:#11170fe8;border-color:#a9523d;font-family:var(--serif)}
@media(max-width:900px){.bottom-hud{flex-wrap:nowrap;padding-left:21%;height:10%}.bottom-hud button{padding:5px;font-size:11px}#objective{display:none}.scene-caption{padding-left:8px}.hud{padding:12px 2%;height:15%}.scene-corner{display:none}.navigation kbd{display:none}.case-tools{gap:3px}.scene-caption small{font-size:11px}.scene-caption strong{font-size:14px}#dialogue{min-height:75px;padding-left:23%;padding-right:10%}#speaker{font-size:13px;margin-bottom:3px}#dialogueText{font-size:14px;margin-right:50px}.dialogue-copy{padding:5px 0}.dialogue-brand{font-size:20px}.clue-rail{padding:6px 6px 0 0}.clue-rail h3{font-size:10px}.clue-thumb span{font-size:9px}.clue-thumb{margin-bottom:5px}#panel[data-kind="closeup"] .panel-head{height:35px}#panel[data-kind="closeup"] #panelBody{height:calc(100% - 35px)}}
@media(max-height:650px){.chapter-label{margin:12px 0}.title-copy h1{font-size:70px}.start-actions{margin:15px 0}.title-footer{font-size:9px}.title-copy .muted{font-size:10px}}
/* Match the sprite element to the source ratio before applying its contour mask. */
#scenePortrait{width:calc(var(--gh)*.316667);height:calc(var(--gh)*.38)}.dialogue-portrait{width:calc(var(--gh)*.325);height:calc(var(--gh)*.39)}#panel[data-kind="closeup"] .panel-portrait{width:calc(var(--gh)*.316667);height:calc(var(--gh)*.38)}
.hud #observe{order:1;border-bottom:1px solid #8d3e2c88}.hud #observe kbd{font-size:10px}.hud #observe[aria-pressed="true"]{color:#f2baa1;border-bottom-color:#c66f51}.navigation{margin-right:auto}
.comparison-guided{grid-template-columns:minmax(0,1.8fr) minmax(330px,1fr);gap:22px}.comparison-intro{font-size:14px;margin-bottom:12px;color:#c5c5b4}.comparison-toolbar{display:flex;align-items:center;gap:18px;margin-bottom:16px}.comparison-toolbar button{font-size:13px;padding:7px 14px;border-color:#ad7c5766}.comparison-toolbar .muted{font-size:12px}.matching-card{border-left:2px solid #a35e42;background:#a39a7010;padding:12px 14px;min-height:65px;font:14px/1.7 var(--serif);margin-top:12px;color:#dfd2b7}.matching-card.mismatch{border-color:#ce6554}.match-roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;height:auto;max-height:50vh;padding:6px;align-content:start}.match-roster button{padding:7px 3px;font-size:12px;white-space:nowrap;text-align:center;border-bottom:1px solid #58594425}.match-roster .selected{outline:2px solid #8a372a;outline-offset:-2px;background:#a7462926}.comparison-names>h3{margin-bottom:8px}.comparison-names>button{font-size:12px;padding:5px 12px;margin-bottom:9px}.comparison-actions{display:flex;align-items:center;justify-content:space-between;position:sticky;bottom:-20px;padding:14px 0 6px;background:#0a0e0df5;border-top:1px solid #a8996940;gap:15px;z-index:3}.comparison-actions .photo-counter{font-size:13px;margin:0}.comparison-actions button{font-size:13px;padding:9px 16px}.photo-inscription{padding:20px;min-height:310px;background:repeating-linear-gradient(0deg,transparent,transparent 24px,#65624d12 25px),#c7bea6}.photo-inscription h3{font-size:21px;margin-bottom:7px}.inscription-note{font-size:12px;line-height:1.7}.photo-inscription h4{font-weight:400;margin:12px 0 6px;font-size:12px;color:#655b47}.signature-row{display:flex;gap:8px;flex-wrap:wrap}.signature-row span{font:13px var(--serif);border-bottom:1px solid #6e624655;padding:3px 0}.teacher-signature{color:#8b8069}.photo-inscription button{margin-top:16px;font-size:13px;padding:7px 14px}.read-inscription{display:block;width:100%;padding:8px;font-size:13px;border-color:#aa775077;background:#452c1755}#panel[data-kind="comparison"] .panel-head{padding:12px 24px}#panel[data-kind="comparison"] #panelBody{padding-top:14px}
@media(max-width:900px){.comparison-guided{grid-template-columns:1fr}.match-roster{grid-template-columns:repeat(3,1fr);max-height:none}.comparison-toolbar{flex-wrap:wrap;gap:5px}.comparison-actions{bottom:-18px}.comparison-actions button{font-size:12px}.photo-inscription{min-height:0}}
/* Inspection rhythm and small environmental cues. */
#stage[data-scene="street"]::after{content:'';position:absolute;inset:-10%;pointer-events:none;background:repeating-linear-gradient(103deg,transparent 0 90px,#d9e5dd10 91px,transparent 92px 147px);animation:rain-drift .9s linear infinite;opacity:.48;z-index:1}.powered[data-scene="studio"]::before{content:'';position:absolute;left:35.4%;top:25%;width:.45%;height:36%;background:#ad302a;box-shadow:0 0 25px 5px #b0232460;opacity:.7;pointer-events:none;z-index:1}#effect{z-index:7}#effect.visible{background:none}#effect img{width:100%;height:100%;object-fit:contain}.case-notes{margin-bottom:24px}.case-notes>h3{font-size:15px;color:#c3b391}.connection-card{border-left:2px solid #785644;padding:12px 16px;margin:10px 0;background:#a0957110}.connection-card h3{font-size:17px;margin-bottom:5px}.connection-card p{font-size:14px;color:#b9b9a9;margin-bottom:8px}.note-references{display:flex;gap:8px;flex-wrap:wrap}.note-references button,.related-evidence button{font-size:11px;border:0;border-bottom:1px solid #b5956540;padding:4px 0;color:#d1b795}.related-evidence{border-top:1px solid #89775355;margin-top:18px;padding:12px 0}.related-evidence summary{cursor:pointer;font-size:14px;color:#b7ad95}.related-evidence p{font-size:14px;margin:10px 0}.evidence-observation{margin-top:12px;color:#d2b58f;font-size:15px}.evidence-observation button{font-size:13px;padding:7px 12px}.object-drag{position:relative;max-width:850px;margin:auto;overflow:hidden;background:#050705}.object-drag>img{display:block;width:100%;max-height:52vh;object-fit:contain;transition:transform .18s ease-out;pointer-events:none}.object-grip{position:absolute;padding:8px 18px;left:40%;top:56%;border:1px solid #c3b58e60;color:#d2c7a5;background:#0a100dbb;font-size:13px;cursor:grab;touch-action:none;user-select:none}.curtain-object .object-grip{left:55%;top:40%}.object-grip:active{cursor:grabbing}.pulling .object-grip{border-color:#d49b70;box-shadow:0 0 18px #a1653033}.pulling>img{transition:none}.power-note-foot{margin-top:24px;font-size:14px;opacity:.7}.develop-photo img{transition:opacity .15s,filter .2s,transform 1s}.develop-photo::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent,#8d978411,transparent);mix-blend-mode:screen}.recall-line{max-width:750px;padding:10px 0;border-bottom:1px solid #8d866329}.recall-line p{margin:5px 0;font-size:17px}#nextLine{min-width:90px}.photographic-switches .switch:focus-visible{outline:1px solid #d1b383}.connection-card{animation:appear .3s ease-out}@keyframes rain-drift{from{transform:translate(0,-15px)}to{transform:translate(-4px,15px)}}@media(prefers-reduced-motion:reduce){#stage::after{animation:none!important}.develop-photo img{transition:none}}
/* Physical controls are bound to the full object, with visible keyboard equivalents. */
.object-drag{width:min(100%,760px);outline:none;cursor:grab;touch-action:none;user-select:none;isolation:isolate}.object-drag:focus-visible{outline:1px solid #d1b383;outline-offset:4px}.object-drag.pulling{cursor:grabbing}.object-art{position:relative;aspect-ratio:16/9;overflow:hidden;transition:transform .2s ease-out}.object-art img{width:100%;display:block;pointer-events:none}.drawer-object .object-art{aspect-ratio:576/328}.drawer-object .object-art img{position:absolute;width:107.64%;max-width:none;height:auto;top:-24.39%;left:0}.object-grip{pointer-events:none;left:39%;top:69%;font-size:12px;opacity:.7;border:0;background:#070b09a8;padding:5px 10px}.object-drag:hover .object-grip,.object-drag:focus-visible .object-grip{opacity:1}.curtain-object .object-grip{left:54%;top:43%}.pull-meter{display:block;position:absolute;bottom:0;left:0;width:calc(var(--pull,0)*100%);height:2px;background:#c0a17a}.gesture-guide{text-align:center;font-size:12px;letter-spacing:.07em;color:#b5ac98;margin:13px 0}.pulling .object-art{transition:none}.drawer-revealed{position:relative;overflow:hidden;aspect-ratio:580/328;width:min(100%,760px);margin:auto}.drawer-revealed img{position:absolute;width:106.9%;max-width:none;height:auto;left:-6.9%;top:-24.39%}.mirror-frame{position:relative;overflow:hidden;width:100%;aspect-ratio:1268/480;background:#000}.mirror-frame img,.inspect-main .mirror-frame .closeup-art{position:absolute;top:0;left:0;display:block;width:100%;height:auto;max-height:none;margin:0}.mirror-frame .mirror-ghost{z-index:2}.mirror-frame.blink::after{content:'';position:absolute;inset:0;background:#000;z-index:3}#panel[data-kind="mirror"]{width:min(1100px,90vw)}.quiet-inspect{display:block;margin:15px auto 0;font-size:13px;border:0;border-bottom:1px solid #99815c}.evidence-caption{font-size:13px;color:#aca994;margin:15px 0}.evidence-caption summary{cursor:pointer}.evidence-caption p{line-height:1.8;max-width:680px}.item-card .inventory-thumb{height:150px;object-fit:contain;background:#020403}.item-card strong{margin-top:10px}.panel-head .eyebrow:empty{display:none}.inspect-main .mirror-frame{top:50%;transform:translateY(-50%)}
@media(prefers-reduced-motion:reduce){.object-art{transition:none}}

/* A single alpha-cutout portrait is shared by scene and dialogue. */
#scenePortrait{position:fixed;left:var(--ex);bottom:var(--ey);width:calc(var(--gh)*.31);height:calc(var(--gh)*.40);z-index:11;object-fit:cover;object-position:center top;clip-path:none;mask-image:linear-gradient(#000 94%,transparent);filter:brightness(.92) saturate(.9) drop-shadow(6px 0 8px #0005);opacity:1;visibility:visible!important;pointer-events:none;animation:none;transform:none;transition:filter .2s}
#scenePortrait[data-mode="speaking"]{filter:brightness(1) saturate(.92) drop-shadow(6px 0 8px #0005)}
#dialogue{animation:none!important;transform:none!important}#panel{animation:none!important;transform:none!important}#panelBody{animation:evidence-settle .28s ease-out}#scenePortrait[hidden]{display:none!important}
@keyframes evidence-settle{from{opacity:.2}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#scenePortrait{transition:none}#panelBody{animation:none}}
/* The script's delayed clue cue rewards lingering, without marking an answer. */
.hotspot.key:hover::before,.hotspot.key:focus-visible::before{animation:clue-breath 1.8s ease-in-out .8s infinite}.hotspot.key:not(:hover):not(:focus-visible)::before{animation:none}@keyframes clue-breath{50%{border-color:#d6836d;box-shadow:0 0 0 4px #c3714d25,0 0 18px #b6594440}}
@media(prefers-reduced-motion:reduce){.hotspot.key:hover::before,.hotspot.key:focus-visible::before{animation:none;border-color:#d6836d}}
.door-sequence{position:relative;aspect-ratio:1268/714;overflow:hidden;background:#020403;max-width:1000px;margin:auto}.door-sequence>img{display:block;width:100%;height:100%;object-fit:contain}.door-sequence .door-handle-piece{position:absolute;inset:0;clip-path:inset(19% 38% 23% 39%);animation:locked-handle .35s ease-in-out}.door-key-tray{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:15px auto 0;max-width:1000px;border-left:2px solid #b6955f;padding-left:16px}.door-key-tray p{margin:0}.door-key{position:absolute;left:15%;top:82%;width:70px;height:20px;background:linear-gradient(0deg,#58442b,#cfb576,#6b522d);border-radius:3px;filter:drop-shadow(2px 3px 3px #0008);transform-origin:100% 50%;z-index:2}.door-key::before{content:'';position:absolute;width:26px;height:26px;border:6px solid #b39a61;border-radius:50%;left:-20px;top:-3px}.door-key::after{content:'';position:absolute;width:17px;height:10px;right:3px;bottom:-7px;background:#a88a50}.door-key.inserting{animation:key-to-lock .6s ease-in-out forwards}.door-key.turning{animation:none;left:calc(54.7% - 70px);top:calc(57.5% - 10px);transform:rotate(80deg);transition:transform .25s}.door-fade{position:absolute;inset:0;z-index:3;background:black;opacity:0;transition:opacity 1s}.door-fade.active{opacity:1}.unfinished-records{font-size:15px;line-height:2;color:#bdb7a4;margin-bottom:24px}.chapter-reveal>.eyebrow{animation:chapter-line .6s both}.chapter-reveal>h1{animation:chapter-line 1s .5s both}.chapter-reveal>.ending-count{animation:chapter-line .8s 1.2s both}.chapter-reveal>p:not(.eyebrow):not(.ending-count){animation:chapter-line .8s 1.7s both}.chapter-reveal>button{animation:chapter-line .8s 2.5s both}@keyframes locked-handle{25%,75%{transform:translateX(2px)}50%{transform:translateX(-2px)}}@keyframes key-to-lock{to{left:calc(54.7% - 70px);top:calc(57.5% - 10px)}}@keyframes chapter-line{from{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.door-handle-piece{animation:none!important}.door-key.inserting{animation:none;left:calc(54.7% - 70px);top:calc(57.5% - 10px)}.door-key.turning{transition:none}}

#start .start-actions{display:flex;flex-wrap:wrap;gap:8px;max-width:620px}#start .start-actions button{font-size:14px;padding:8px 14px}.entry-missing{max-height:18vh;overflow:auto;font-size:12px;color:var(--muted)}.unfinished-records li{margin:12px 0}#progress{white-space:nowrap}

.collection-link{display:inline-block;color:#d9d0b4;padding:12px 20px;border:1px solid #686953;text-decoration:none}.collection-link:hover{background:#343a2e}