:root { color-scheme: dark; --ink:#e9edf4; --muted:#9faab8; --line:#b6c6da39; --amber:#eab36a; --red:#d85659; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-width:320px; min-height:100dvh; overflow:hidden; background:#070c14; color:var(--ink); font-family:"Microsoft YaHei","Noto Serif CJK SC",serif; }
button { font:inherit; cursor:pointer; }
.game { position:relative; width:100%; max-width:1280px; height:100dvh; margin:auto; overflow:hidden; background:#07101b url('assets/dock-night.png') center/cover no-repeat; isolation:isolate; }
.game[data-scene="warehouse"]{background-image:url('assets/warehouse-night.png')}
.game[data-scene="archive"]{background-image:url('assets/archive-night.png')}
.game::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#06101ccc 0%,transparent 52%,#090d14a6 100%),linear-gradient(0deg,#050811e8 0%,transparent 46%); z-index:-1; }
.rain { position:absolute; inset:-30% 0 0; z-index:2; pointer-events:none; opacity:.32; background-image:repeating-linear-gradient(108deg, transparent 0 36px, #d8eaff99 37px 38px, transparent 39px 74px); background-size:150px 120px; animation:rain 1.05s linear infinite; }
@keyframes rain { to { transform:translate(-20px,120px); } }
.title-screen { position:absolute; inset:0; z-index:5; display:grid; align-content:center; justify-items:center; padding:clamp(24px,7vw,80px); text-align:center; background:radial-gradient(circle at 50% 42%,#14233e80,transparent 43%),#05091272; transition:opacity .45s ease,transform .45s ease; }
.title-screen.leave { opacity:0; transform:scale(1.035); pointer-events:none; }
.eyebrow { margin:0 0 14px; color:#d6b27c; font:700 11px/1.4 Consolas,monospace; letter-spacing:.2em; }
h1,h2 { margin:0; font-weight:900; letter-spacing:.07em; }
h1 { font-size:clamp(40px,8vw,84px); text-shadow:0 6px 30px #000; }
.tagline { margin:20px 0 34px; color:#d5dce7; font-size:clamp(14px,2vw,18px); line-height:1.9; }
.title-actions { display:grid; gap:10px; width:min(280px,100%); }
.primary,.secondary { min-height:48px; border:1px solid transparent; border-radius:3px; transition:transform .2s, background .2s; }
.primary { background:var(--amber); color:#19130f; font-weight:900; letter-spacing:.08em; box-shadow:0 10px 30px #0006; }
.primary:hover { background:#f5cc89; transform:translateY(-2px); }
.secondary { border-color:#d6deea75; background:#101b2c9e; color:#e6eaf0; }
.secondary:hover { background:#1a2a42; }
.warning { margin:44px 0 0; color:#c4cbd6a6; font-size:11px; }
.play-screen { position:absolute; inset:0; z-index:3; pointer-events:auto; }
.topbar { position:absolute; z-index:8; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:14px clamp(14px,3vw,34px); background:linear-gradient(#050914d5,transparent); }
.icon-button { width:40px; height:40px; border:1px solid var(--line); border-radius:50%; background:#111d2ab5; color:#e7edf5; font-size:18px; }
.case-title { text-align:center; text-shadow:0 2px 8px #000; }
.case-title span { display:block; color:#b6c1d0; font:10px Consolas,monospace; letter-spacing:.15em; }.case-title b{font-size:14px;}
.status { position:absolute; z-index:7; top:74px; left:clamp(13px,3vw,34px); display:flex; gap:1px; border:1px solid var(--line); background:#07101ac7; backdrop-filter:blur(8px); }
.status div { min-width:58px; padding:7px 10px; border-right:1px solid var(--line); text-align:center; }.status div:last-child{border:0}.status span{display:block;color:#9aa8b9;font-size:10px}.status b{color:#e9be7d;font:700 16px Consolas,monospace;}
.save-status { position:absolute; z-index:7; top:132px; left:clamp(13px,3vw,34px); margin:0; padding:4px 7px; border-left:2px solid #79b68a; background:#07101ab8; color:#b8cfbf; font-size:10px; }.save-status.unavailable{border-left-color:#d98c70;color:#e5b9a7}
.character { position:absolute; z-index:3; right:clamp(-120px,2vw,12px); bottom:-12px; width:min(54vw,650px); max-height:88%; object-fit:contain; object-position:bottom right; filter:drop-shadow(-12px 8px 25px #000b); transition:opacity .35s, transform .35s; }.character.hidden{opacity:0;transform:translateX(60px)}
.hotspots{position:absolute;z-index:11;inset:0;pointer-events:none}.hotspot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);max-width:min(190px,42vw);padding:8px 11px;border:1px solid #f0c875;background:#111d2de8;color:#fff6d9;font-size:12px;box-shadow:0 0 0 4px #f0c87522,0 5px 15px #0008;pointer-events:auto;animation:hotspot-pulse 1.5s ease-in-out infinite}.hotspot::before{content:'';display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#f3c36c}.hotspot.collected{border-color:#75b896;background:#11271fd9;color:#c7ebd4;animation:none}.hotspot.collected::before{background:#75b896}@keyframes hotspot-pulse{50%{box-shadow:0 0 0 9px #f0c8750d,0 5px 15px #0008}}
.vignette { position:absolute; z-index:4; inset:0; pointer-events:none; box-shadow:inset 0 0 130px 35px #000b; }
.scene-flash { position:absolute; z-index:9; inset:0; pointer-events:none; opacity:0; background:#e6f5ff; }.scene-flash.on{animation:flash .35s ease-out;}@keyframes flash{0%,25%{opacity:.8}100%{opacity:0}}
.dialogue { position:absolute; z-index:10; left:50%; bottom:max(18px,env(safe-area-inset-bottom)); width:min(880px,calc(100% - 28px)); min-height:170px; padding:20px 24px 18px; transform:translateX(-50%); border:1px solid #cad7e55c; background:linear-gradient(125deg,#080d17ef,#152333ed); box-shadow:0 18px 50px #0009; backdrop-filter:blur(12px); pointer-events:auto; }
.speaker { margin:0 0 8px; color:var(--amber); font-size:14px; font-weight:900; letter-spacing:.1em; }.dialogue-text { min-height:52px; margin:0; font-size:clamp(15px,2vw,18px); line-height:1.75; text-shadow:0 2px 2px #000; }
.choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; margin-top:16px; }.choice { padding:12px 14px; border:1px solid #9cacc069; background:#132236d9; color:#eef4fb; text-align:left; font-size:13px; transition:.18s; }.choice:hover{border-color:#e6b672;background:#213652;transform:translateY(-1px)}.choice::before{content:'›';display:inline-block;margin-right:8px;color:var(--amber);font-size:18px;line-height:10px}
.advance { position:absolute; right:18px; bottom:12px; border:0; background:transparent; color:#c8d3df; font-size:12px; }.advance span{color:var(--amber);font-size:22px;vertical-align:-2px}.full{width:100%;margin-top:9px}
.primary:disabled{cursor:not-allowed;opacity:.58;filter:saturate(.55)}
.overlay { position:absolute; z-index:20; inset:0; display:grid; place-items:center; padding:20px; background:#01050ab8; backdrop-filter:blur(8px); }.modal{position:relative;width:min(520px,100%);max-height:80dvh;overflow:auto;padding:34px 28px 28px;border:1px solid #c6d4e66b;background:#0d1725;box-shadow:0 20px 70px #000}.modal h2{font-size:28px}.modal.compact{width:min(350px,100%);text-align:center}.close{position:absolute;right:12px;top:8px;border:0;background:none;color:#d9e1e9;font-size:28px}.modal ul{margin:20px 0 0;padding:0;list-style:none}.modal li{margin-top:8px;padding:12px;border-left:2px solid var(--amber);background:#152337;color:#dbe4ee;font-size:14px;line-height:1.6}.modal .empty{border-left-color:#627183;color:#9aa6b5}
@media (max-width:600px) { .game{background-position:57% center}.character{width:86vw;right:-100px;opacity:.83}.hotspot{padding:7px 8px;font-size:11px}.status{top:69px}.status div{min-width:52px;padding:6px 7px}.dialogue{min-height:195px;padding:16px 17px 15px}.dialogue-text{min-height:58px}.choices{grid-template-columns:1fr;gap:6px;margin-top:11px}.choice{padding:9px 11px}.warning{margin-top:28px}.rain{opacity:.23} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} }

/* 首页：雨夜侦探事务所的机密案件档案。 */
.title-screen{display:grid;place-items:center;padding:clamp(22px,5vw,70px);background:linear-gradient(90deg,#02060bd6,#0c1723a6 48%,#02060bcc),radial-gradient(circle at 50% 42%,#14233e80,transparent 43%)}
.title-screen::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;background-image:linear-gradient(#b8c7d41a 1px,transparent 1px),linear-gradient(90deg,#b8c7d41a 1px,transparent 1px);background-size:32px 32px}.title-screen::after{content:"";position:absolute;inset:18px;border:1px solid #c9d7e136;pointer-events:none}
.case-file{position:relative;z-index:1;width:min(590px,100%);padding:clamp(25px,5vw,54px);border:1px solid #d5dfeb5c;background:linear-gradient(125deg,#0b1422ee,#111c2bd9);box-shadow:0 24px 80px #000c,inset 0 0 0 4px #ffffff05;text-align:left;clip-path:polygon(0 0,96% 0,100% 4%,100% 100%,4% 100%,0 96%);pointer-events:auto}
.file-topline{display:flex;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid #cddbe039;color:#aebdcb;font-size:11px}.file-topline b{color:#e4b973;letter-spacing:.14em}.archive-mark{position:absolute;z-index:0;right:8%;top:8%;color:#b2c1cf10;font:900 clamp(100px,22vw,300px) Consolas,monospace;letter-spacing:-.15em;transform:rotate(-11deg);user-select:none}
.case-file .eyebrow{margin:22px 0 14px}.case-file .tagline{margin:20px 0 26px}.case-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 25px;padding:12px 0;border-top:1px solid #cddbe027;border-bottom:1px solid #cddbe027}.case-facts div{min-width:0}.case-facts dt{color:#8595a7;font:10px Consolas,monospace}.case-facts dd{margin:5px 0 0;color:#d7e1ea;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.case-facts .risk{color:#db7777}.text-button{padding:7px;border:0;background:transparent;color:#aebdce;text-decoration:underline;text-underline-offset:4px;font-size:12px}.text-button:hover{color:#ecd095}.case-file .warning{margin:12px 0 0}.menu-status{margin:13px 0 0;color:#80b993;font:10px Consolas,monospace}.case-file button{touch-action:manipulation}
.briefing ol{margin:18px 0;padding-left:22px;color:#d9e3ed;font-size:14px;line-height:1.8}.briefing li+li{margin-top:7px}
@media (max-width:600px){.case-file{padding:25px 22px}.case-facts{grid-template-columns:1fr 1fr}.case-facts div:last-child{grid-column:span 2}}