:root{color-scheme:dark;font-family:Arial,sans-serif;--ink:#edf2f4;--panel:rgba(16,24,29,.96);--line:rgba(191,219,224,.45);--accent:#a8c2c9;--gold:#d4a56c;--nav-height:68px;--desktop-bottom-safe:64px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#070b0d;color:var(--ink)}button{font:inherit;color:inherit}
#game{position:fixed;inset:0;width:100%;height:100dvh;padding-bottom:var(--desktop-bottom-safe);display:flex;flex-direction:column;overflow:hidden;background:#111}.scene{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}.background,.scene-art{position:absolute;inset:0;width:100%;height:100%}.background{object-fit:cover;object-position:center}.hidden{display:none!important}
.scene-art{display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(69,89,97,.58),transparent 32%),linear-gradient(130deg,#141d21,#253239 52%,#0b1114)}.scene-art::before{content:'';position:absolute;inset:14% 8% 16%;border:1px solid rgba(191,219,224,.16);box-shadow:inset 0 0 90px #080d10}.scene-art::after{content:attr(data-label);font-size:clamp(44px,8vw,112px);font-weight:800;letter-spacing:.12em;color:rgba(223,236,239,.07)}.scene-art.lab{background:radial-gradient(circle at 30% 40%,rgba(97,128,134,.55),transparent 28%),linear-gradient(135deg,#10181c,#263b40 55%,#080d10)}.scene-art.home{background:radial-gradient(circle at 25% 35%,rgba(88,105,112,.38),transparent 22%),linear-gradient(120deg,#090d0f,#182226 65%,#050708)}
.topbar,.bottombar{position:relative;z-index:5;display:flex;align-items:center;flex-shrink:0;backdrop-filter:blur(5px)}.topbar{min-height:68px;padding:12px clamp(14px,3vw,44px);justify-content:space-between;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(8,13,16,.94),rgba(8,13,16,.58))}.topbar strong{display:block;font-size:clamp(13px,1.5vw,20px);letter-spacing:.08em}.topbar span{display:block;margin-top:4px;color:#b8c3c7;font-size:12px}.topbar button{border:1px solid var(--line);border-radius:6px;background:rgba(25,36,42,.82);padding:10px 14px;cursor:pointer}.top-actions{display:flex;gap:8px;align-items:center}.topbar .reset-progress{border-color:rgba(214,174,124,.62);color:#efd3ae;background:rgba(64,43,27,.72)}
.bottombar{z-index:10;width:min(900px,calc(100vw - 24px));min-height:60px;margin:0 auto max(8px,env(safe-area-inset-bottom));justify-content:center;gap:clamp(4px,2vw,26px);padding:6px 10px;background:linear-gradient(0deg,rgba(8,13,16,.99),rgba(8,13,16,.94));border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 34px rgba(0,0,0,.72)}.bottombar button{min-width:clamp(74px,13vw,150px);min-height:44px;border:1px solid rgba(191,219,224,.34);border-radius:6px;background:rgba(26,38,44,.9);font-weight:700;letter-spacing:.04em;cursor:pointer}.bottombar button:hover,.topbar button:hover{background:rgba(63,83,92,.86)}#case-count,.badge{display:inline-grid;place-items:center;min-width:21px;height:21px;margin-left:5px;border-radius:50%;background:#9db7bf;color:#172228;font-size:12px}.badge.alert{background:var(--gold);color:#21170c}
.objective{position:absolute;z-index:4;left:clamp(12px,2vw,28px);top:14px;max-width:min(500px,75vw);padding:9px 13px;border:1px solid rgba(191,219,224,.34);border-radius:7px;background:rgba(10,17,20,.84);box-shadow:0 8px 24px rgba(0,0,0,.3);pointer-events:none}.objective small{display:block;margin-bottom:3px;color:#9fb2b8;font-size:10px;letter-spacing:.13em}.objective strong{font-size:13px}
#hotspots{position:absolute;inset:0;z-index:3}.hotspot{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);min-width:48px;min-height:48px;border:1px solid transparent;border-radius:10px;background:transparent;cursor:pointer;transition:.18s}.hotspot:hover,.hotspot:focus-visible,.hotspot.reveal{outline:none;border-color:rgba(217,239,243,.92);background:rgba(185,218,224,.13);box-shadow:0 0 24px rgba(184,219,226,.36),inset 0 0 18px rgba(184,219,226,.14)}.hotspot.found::after{content:'✓';position:absolute;right:5px;top:5px;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:rgba(22,35,41,.93);border:1px solid var(--accent);font-weight:bold}.hotspot-label{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);padding:6px 9px;white-space:nowrap;border-radius:5px;background:rgba(8,13,16,.88);opacity:0;pointer-events:none}.hotspot:hover .hotspot-label,.hotspot.reveal .hotspot-label{opacity:1}
.lab-results{z-index:6;display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:14px;align-content:center;padding:120px max(6vw,70px) 110px;pointer-events:none}.lab-results .hotspot{position:relative;left:auto;top:auto;width:auto;height:110px;min-width:0;border:1px solid rgba(191,219,224,.72);background:rgba(12,22,27,.9);box-shadow:0 10px 30px rgba(0,0,0,.38);pointer-events:auto}.lab-results .hotspot:hover,.lab-results .hotspot:focus-visible{background:rgba(48,72,81,.95);transform:translateY(-2px)}.lab-results .hotspot-label{inset:0;display:grid;place-items:center;transform:none;padding:16px;text-align:center;white-space:normal;opacity:1;background:transparent;font-weight:700;letter-spacing:.03em}.lab-results .hotspot.found{opacity:.68}.lab-results .hotspot.found::after{right:8px;top:8px}
.modal,.ending{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:12px;background:rgba(3,7,9,.72);backdrop-filter:blur(4px)}.card,.ending-card{position:relative;width:min(940px,94vw);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;padding:30px 30px 34px;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:0 24px 70px #000}.close{position:absolute;right:12px;top:8px;border:0;background:transparent;font-size:30px;cursor:pointer}.kicker,.ending-card>small{font-size:12px;letter-spacing:.13em;color:#a9bac0;text-transform:uppercase}.card h1,.ending-card h1{margin:8px 38px 12px 0;font-size:clamp(22px,4vw,32px)}.card p,.ending-card p{line-height:1.55;color:#d7e0e3}.primary{margin-top:15px;width:100%;min-height:48px;border:1px solid #b7cbd0;border-radius:6px;background:#b7cbd0;color:#152126;font-weight:700;cursor:pointer}.primary[disabled]{opacity:.55;cursor:default}
.case-list,.message-list{display:grid;gap:8px;margin-top:15px}.case-item,.message{width:100%;padding:12px;text-align:left;color:inherit;border:0;border-left:3px solid #91abb2;background:rgba(255,255,255,.05);cursor:pointer}.case-item:hover,.message:hover{background:rgba(255,255,255,.09)}.case-item strong,.message strong{display:block}.case-item small,.message small{color:#aab9be}.empty{padding:22px;text-align:center;color:#abb9bd;border:1px dashed var(--line)}
.lab-report-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}.lab-report{display:grid;grid-template-columns:1fr auto;gap:5px 12px;min-height:76px;padding:13px;text-align:left;border:1px solid rgba(191,219,224,.42);border-radius:7px;background:#17262c;cursor:pointer}.lab-report:hover{background:#294049}.lab-report small{grid-column:1/3;color:#9eb2b8}.lab-report strong{font-size:15px}.lab-report span{color:#d7b57f}.lab-report.found{opacity:.7;border-color:#6f9380}.lab-report.found span{color:#a8c9b4}
.timeline{margin-top:18px;padding:14px;border:1px solid rgba(191,219,224,.22);border-radius:8px}.timeline h2{margin:0 0 10px;font-size:17px}.timeline-row{display:grid;grid-template-columns:72px 1fr auto;gap:12px;padding:8px 0;border-top:1px solid rgba(191,219,224,.12)}.timeline-row:first-of-type{border-top:0}.timeline-row b{color:#d9b47d}.timeline-row small{color:#9fb0b5}
.board-workspace{display:grid;gap:16px}.board-controls{display:grid;grid-template-columns:1fr auto;gap:5px 16px;align-items:center;padding:14px;border:1px solid #9db7bf;border-radius:8px;background:#132229}.board-controls strong{font-size:13px;letter-spacing:.08em}.board-controls span{grid-column:1;color:#c7d3d7;font-size:13px}.compare-action{grid-column:2;grid-row:1/3;min-width:190px;min-height:52px;padding:10px 16px;border:1px solid #d5e2e5;border-radius:6px;background:#b7cbd0;color:#152126;font-weight:800;letter-spacing:.05em;cursor:pointer}.compare-action[disabled]{opacity:.38;cursor:default}.clue-deck{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.board-clue{display:grid;grid-template-columns:auto 1fr auto;gap:6px 10px;align-items:center;min-height:70px;padding:11px;text-align:left;border:1px solid rgba(191,219,224,.32);border-radius:7px;background:rgba(255,255,255,.04);cursor:pointer}.board-clue:hover{background:rgba(255,255,255,.08)}.board-clue.selected{border-color:#e0b978;background:rgba(197,151,75,.16)}.board-clue small{color:#93a9af}.board-clue strong{font-size:14px}.board-clue span{font-size:12px;color:#afc0c5}.board-result{display:none;padding:13px;border:1px solid #b77b70;border-radius:7px;background:rgba(137,62,49,.16);color:#f0d5cf}.board-result:not(:empty){display:block}.board-result.success{border-color:#79a88e;background:rgba(61,116,82,.18);color:#d3eadb}.conclusions{display:grid;gap:8px}.conclusions h2{margin:2px 0 4px;font-size:17px}.conclusions article{padding:12px;border-left:3px solid #8fb0b8;background:rgba(255,255,255,.04)}.conclusions article p{margin:5px 0 0;font-size:13px}
.phone-shell{overflow:hidden;border:1px solid rgba(191,219,224,.28);border-radius:10px;background:#0e171b}.phone-tabs{padding:12px 16px;border-bottom:1px solid rgba(191,219,224,.2);font-size:12px;letter-spacing:.1em}.message{margin:0;border-left:0;border-bottom:1px solid rgba(191,219,224,.14)}.message.unread strong::before{content:'• ';color:#e1b26f}.message-open h2{margin-bottom:4px}.message-open h3{margin-top:0;color:#b9cbd0}.back,.route,.accuse{min-height:38px;padding:7px 12px;border:1px solid var(--line);border-radius:5px;background:#263a42;color:inherit;cursor:pointer}
.map-grid,.suspect-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.location,.suspect{position:relative;min-height:145px;padding:15px;border:1px solid rgba(191,219,224,.25);border-radius:8px;background:rgba(255,255,255,.035)}.location.locked{opacity:.48}.location.current{border-color:#d1b17d}.location h2,.suspect h2{margin:7px 0}.location p,.suspect p{font-size:14px}.map-pin{position:absolute;right:12px;top:10px;color:#9ebbc2}.accusation-box{padding:16px;border:1px solid var(--gold);border-radius:8px;background:rgba(104,72,35,.2)}.accusation-box h2{margin-top:0}.suspect button{width:100%}
.ending{z-index:40;background:#050708}.ending-card{width:min(760px,92vw);text-align:center;background:radial-gradient(circle at 50% 15%,#27343a,#0b1114 55%,#050708)}.ending-card p{font-size:17px}.ending-card .time-mark{display:inline-block;margin:6px 0 12px;padding:6px 10px;border:1px solid var(--line);color:#d7b57f}.ending-card .last-line{font-size:20px;color:#f0d7b3}.ending-card .credit{margin-top:18px;color:#89999e;font-size:13px}
.toast{position:fixed;z-index:50;left:50%;bottom:calc(var(--nav-height) + 34px);transform:translate(-50%,20px);opacity:0;padding:10px 18px;border:1px solid var(--line);border-radius:6px;background:rgba(13,21,25,.96);transition:.22s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
.help-steps{display:grid;gap:12px;margin:18px 0;padding-left:24px;line-height:1.45}.help-note{padding:12px;border-left:3px solid var(--gold);background:rgba(212,165,108,.09)}
@media (orientation:portrait){
 :root{--mobile-top:112px;--mobile-scene:56.25vw;--nav-height:122px;--desktop-bottom-safe:0px}
 .topbar{min-height:var(--mobile-top);padding:9px 10px;align-content:center;align-items:flex-start;gap:7px;flex-wrap:wrap}.topbar>div:first-child{width:100%}.topbar strong{font-size:13px}.topbar span{margin-top:2px;font-size:10px}.top-actions{width:100%;display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:5px}.topbar button{min-height:38px;padding:7px 5px;font-size:11px}
 .background,.scene-art{inset:0;height:100%;object-fit:cover}.scene-art::before{inset:7%}.scene-art::after{font-size:9vw}
 #hotspots{inset:0}.hotspot{min-width:44px;min-height:44px}.hotspot-label{bottom:2px;padding:4px 6px;font-size:11px;opacity:0}.hotspot.reveal .hotspot-label,.hotspot:focus .hotspot-label{opacity:1}
 .objective{top:9px;left:10px;right:10px;max-width:none}.objective strong{font-size:12px}
 .bottombar{width:calc(100vw - 16px);min-height:var(--nav-height);margin-bottom:max(6px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:7px}.bottombar button{min-width:0;min-height:48px;font-size:12px}
 .modal,.ending{padding:0;align-items:stretch}.card,.ending-card{width:100vw;max-height:100dvh;height:100dvh;border:0;border-radius:0;padding:54px 16px 24px}.close{position:fixed;right:12px;top:7px;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:#17262c}.card h1,.ending-card h1{font-size:24px}.primary{min-height:52px}.toast{bottom:calc(var(--nav-height) + 16px);width:calc(100vw - 32px);text-align:center}
}
@media (hover:none) and (pointer:coarse){:root{--desktop-bottom-safe:0px}}
@media (max-width:650px){.map-grid,.suspect-grid,.clue-deck,.lab-report-list{grid-template-columns:1fr}.board-controls{grid-template-columns:1fr}.board-controls span,.compare-action{grid-column:1;grid-row:auto}.compare-action{width:100%}.topbar .reset-progress{padding:8px;font-size:11px}}
@media (max-height:640px) and (orientation:landscape){:root{--nav-height:58px}.topbar{min-height:54px;padding-top:7px;padding-bottom:7px}.topbar span{display:none}.objective{top:8px;padding:6px 10px}.bottombar{padding:5px}.bottombar button{min-height:44px}.card{max-height:90dvh;padding:22px}}
@media (max-height:720px) and (orientation:landscape){.lab-results{padding-top:100px;padding-bottom:100px;gap:9px}.lab-results .hotspot{height:88px}}
