:root{
  --bg:#0b0710;
  --panel:#171020;
  --ink:#f7f1ff;
  --muted:#b8a9c7;
  --gold:#f3c45b;
  --purple:#9d5cff;
  --pink:#ff4fa6;
  --cyan:#56e2ff;
  --red:#ff5d5d;
  --green:#6ef0a9;
  --line:rgba(255,255,255,.1);
  --corridor:#d4b083;
  --corridor-deep:#c69b67;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 0%,#27153a 0,#0b0710 42%,#050308 100%);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
.app-shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{height:72px;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(8,5,13,.88);backdrop-filter:blur(16px);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-weight:900;color:#120b1d;background:linear-gradient(135deg,var(--gold),#fff2ae);box-shadow:0 0 24px rgba(243,196,91,.25)}
.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--gold);font-weight:800}.brand h1{font-size:20px;margin:2px 0 0;letter-spacing:.04em}.top-actions{display:flex;gap:8px}.icon-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:#fff;font-size:20px}
main{flex:1}.screen{display:none}.screen.active{display:block}
.home-screen{max-width:1180px;margin:0 auto;padding:30px 18px 38px}.hero-card{min-height:320px;border:1px solid rgba(255,255,255,.12);border-radius:28px;background:linear-gradient(135deg,rgba(36,23,53,.96),rgba(18,11,29,.96));display:grid;grid-template-columns:1.25fr .75fr;overflow:hidden;position:relative;box-shadow:0 20px 80px rgba(0,0,0,.35)}
.hero-copy{padding:42px;position:relative;z-index:2}.pill{display:inline-flex;padding:8px 12px;border:1px solid rgba(243,196,91,.35);background:rgba(243,196,91,.08);color:#ffe8a6;border-radius:999px;font-weight:800;font-size:12px}.hero-copy h2{font-size:clamp(34px,5vw,68px);line-height:.96;margin:18px 0 16px;max-width:800px}.hero-copy p{color:var(--muted);font-size:17px;line-height:1.6;max-width:720px}.case-preview{margin-top:18px;padding:14px 16px;border-left:4px solid var(--pink);background:rgba(255,79,166,.08);border-radius:12px;font-weight:700}
.hero-art{display:grid;place-items:center;position:relative;min-height:300px}.hero-art img{width:min(92%,390px);position:relative;z-index:2;filter:drop-shadow(0 24px 30px rgba(0,0,0,.4));object-fit:contain}.hero-glow{position:absolute;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(157,92,255,.45),rgba(255,79,166,.08) 58%,transparent 70%);filter:blur(8px)}
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.setup-card{background:linear-gradient(180deg,rgba(31,21,44,.95),rgba(18,12,26,.95));border:1px solid var(--line);border-radius:20px;padding:20px}.setup-card.wide{grid-column:1/-1}.setup-card h3{margin:0 0 14px}.option-row{display:flex;gap:10px;align-items:center;padding:10px 0;color:#e7dff1}.stepper{display:flex;align-items:center;gap:12px}.stepper button{width:42px;height:42px;border:0;border-radius:12px;background:#342446;color:#fff;font-size:24px}.stepper strong{font-size:24px;min-width:34px;text-align:center}.setup-card small{display:block;margin-top:8px;color:var(--muted)}
.avatar-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.avatar-card{appearance:none;-webkit-appearance:none;border:2px solid transparent;background:#120c1a;border-radius:16px;padding:10px;text-align:center;transition:.2s;color:#f8f1ff}.avatar-card:hover{transform:translateY(-2px);border-color:rgba(157,92,255,.5)}.avatar-card.selected{border-color:var(--gold);box-shadow:0 0 0 3px rgba(243,196,91,.08)}.avatar-card img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:12px;background:radial-gradient(circle at 50% 25%,#352247,#140d1c)}.avatar-card span{display:block;font-size:12px;font-weight:900;margin-top:8px;color:#fff7cb;text-shadow:0 1px 0 rgba(0,0,0,.55)}
.primary-btn{border:0;border-radius:13px;padding:12px 18px;color:#160c1e;background:linear-gradient(135deg,var(--gold),#fff0a5);font-weight:900;letter-spacing:.02em;box-shadow:0 10px 24px rgba(243,196,91,.18)}.primary-btn:disabled,.secondary-btn:disabled,.danger-btn:disabled{opacity:.42;filter:grayscale(.35)}.primary-btn.mega{display:block;width:min(520px,100%);margin:22px auto 0;padding:17px;font-size:18px}.tiny-note{text-align:center;color:var(--muted);font-size:12px}
.game-screen{padding:10px}.game-layout{display:grid;grid-template-columns:230px minmax(0,1fr) 285px;gap:10px;max-width:1720px;margin:0 auto;align-items:start}.side-panel,.board-zone{border:1px solid var(--line);background:rgba(18,12,26,.92);border-radius:18px}.side-panel{padding:14px;overflow:auto;max-height:calc(100vh - 104px)}.board-zone{padding:10px;min-height:calc(100vh - 104px)}.panel-title{font-size:11px;letter-spacing:.16em;color:var(--gold);font-weight:900;margin:3px 0 12px}.panel-title.with-gap{margin-top:16px}.case-box{margin-top:12px;padding:12px;border-radius:14px;background:#24172f;border:1px solid rgba(255,255,255,.08);font-size:13px;line-height:1.45}.case-box strong{display:block;color:#fff;margin-bottom:4px}.asset-card{margin-top:12px;padding:10px;border-radius:14px;background:#120c1a;border:1px solid rgba(255,255,255,.08)}.asset-card img{display:block;width:100%;border-radius:10px}
.players-panel{display:grid;gap:10px}.player-row{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:9px;background:#120c1a;border-radius:13px;border:1px solid transparent;transition:.18s;color:#fff;text-align:left;width:100%;position:relative}.player-row.active{border-color:var(--player-accent,var(--gold));background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.04)), #21152c;box-shadow:inset 4px 0 0 var(--player-accent,var(--gold))}.player-row.clickable:hover{transform:translateY(-1px);border-color:rgba(157,92,255,.6)}.player-row img{width:48px;height:48px;border-radius:10px;object-fit:contain;background:radial-gradient(circle at 50% 25%,#352247,#140d1c)}.player-name{font-weight:800;font-size:13px;color:var(--player-accent,var(--ink))}.player-meta{font-size:11px;color:var(--muted)}.player-badge{font-size:10px;font-weight:900;color:#140d1c;background:var(--player-accent,var(--gold));padding:5px 7px;border-radius:999px}
.board-main{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:10px;align-items:start;height:100%}.board-wrap{display:grid;place-items:center;min-width:0}.board{position:relative;width:min(100%,calc((100vh - 160px) * 17 / 13),1120px);aspect-ratio:17/13;display:grid;grid-template-columns:repeat(17,1fr);grid-template-rows:repeat(13,1fr);gap:0;background:#151013;border:8px solid #2e1e3d;border-radius:18px;box-shadow:0 30px 60px rgba(0,0,0,.4),inset 0 0 50px rgba(157,92,255,.08);overflow:hidden}
.board-side-ui{display:grid;gap:10px;align-content:start}.play-card,.move-hint{border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#120c1a;padding:12px}.play-card strong{display:block;font-size:28px;margin-top:2px}.dice-card{display:grid;gap:10px;justify-items:center;text-align:center}.dice{width:64px;height:64px;border-radius:16px;background:#fff;color:#110b18;display:grid;place-items:center;font-size:34px;font-weight:1000;box-shadow:0 0 30px rgba(255,255,255,.12)}.dice.rolling{animation:shake .42s infinite}@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(8deg) scale(1.05)}75%{transform:rotate(-8deg) scale(.96)}}.move-hint{font-size:12px;color:#d9f7ff;font-weight:700;line-height:1.45;min-height:120px}
.cell{position:relative;min-width:0;min-height:0;border:1px solid rgba(0,0,0,.08);display:grid;place-items:center;padding:0;margin:0;outline:none;background:#120c13}.cell.walkable:hover{filter:brightness(1.05)}.cell.corridor{background:linear-gradient(135deg,var(--corridor),var(--corridor-deep))}.cell.door-cell{background:linear-gradient(135deg,#f0daa8,#c68f53);box-shadow:inset 0 0 0 2px rgba(69,42,19,.35)}.cell.move-option{outline:3px solid rgba(243,196,91,.95);outline-offset:-3px;z-index:3}.cell.move-option::after{content:'';position:absolute;width:32%;height:32%;border-radius:50%;background:rgba(243,196,91,.95);box-shadow:0 0 12px rgba(243,196,91,.35)}
.cell.wall-top{border-top:5px solid #0c090d}.cell.wall-right{border-right:5px solid #0c090d}.cell.wall-bottom{border-bottom:5px solid #0c090d}.cell.wall-left{border-left:5px solid #0c090d}
.room-label{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:4px 6px;pointer-events:none;z-index:4;text-shadow:0 1px 1px rgba(0,0,0,.45)}.room-label b{font-size:clamp(8px,.95vw,14px);letter-spacing:.05em;color:#fff}.room-label span{font-size:clamp(6px,.7vw,9px);color:rgba(255,255,255,.82);margin-top:2px}
.token{position:absolute;width:74%;height:74%;border-radius:50%;z-index:7;display:grid;place-items:center;border:2px solid rgba(255,255,255,.92);background:radial-gradient(circle at 50% 30%,#352247,#140d1c);box-shadow:0 4px 12px rgba(0,0,0,.45);transition:transform .25s,opacity .25s}.token img{width:96%;height:96%;border-radius:50%;object-fit:contain}.token.stack0{transform:translate(-13%,-13%)}.token.stack1{transform:translate(13%,-13%)}.token.stack2{transform:translate(-13%,13%)}.token.stack3{transform:translate(13%,13%)}.token.stack4{transform:scale(.74)}
.suspect-marker{position:absolute;width:42%;height:42%;border-radius:50%;z-index:6;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,#ffffff,#d6c9f9 45%,#5d4180 100%);color:#281539;font-size:clamp(10px,1vw,16px);font-weight:1000;border:2px solid rgba(255,255,255,.8);box-shadow:0 4px 12px rgba(0,0,0,.35)}.suspect-marker.s0{transform:translate(-20%,-18%)}.suspect-marker.s1{transform:translate(20%,-18%)}.suspect-marker.s2{transform:translate(-20%,20%)}.suspect-marker.s3{transform:translate(20%,20%)}
.notebook{display:grid;gap:10px}.notebook-section{background:#120c1a;border-radius:13px;padding:10px;border:1px solid rgba(255,255,255,.06)}.notebook-section h4{font-size:12px;margin:0 0 7px;color:#fff}.clue-item{font-size:11px;line-height:1.35;padding:7px;border-left:3px solid var(--cyan);background:rgba(86,226,255,.06);margin:6px 0;border-radius:6px}.clue-item.true{border-left-color:var(--green)}.clue-item.false{border-left-color:var(--red)}.clue-item.unknown{border-left-color:var(--cyan)}.card-chip{display:inline-block;font-size:10px;padding:5px 7px;border-radius:999px;background:#2a1b36;margin:3px 3px 0 0;color:#f2eaff}
.suspect-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.suspect-mini{background:#120c1a;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:8px;text-align:center;transition:.18s}.suspect-mini:hover{transform:translateY(-1px);border-color:rgba(157,92,255,.6)}.suspect-mini img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:10px;background:radial-gradient(circle at 50% 25%,#352247,#140d1c)}.suspect-mini b{display:block;font-size:12px;margin-top:7px;color:#fff}.suspect-mini small{display:block;color:#d8cfe4;font-size:10px;margin-top:3px;line-height:1.35}
.modal-root{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(4,2,7,.72);backdrop-filter:blur(8px);--modal-accent:#9d5cff;--modal-bg1:#261733;--modal-bg2:#120c1a;--modal-border:rgba(255,255,255,.14);--modal-title:#fff}.modal-root.open{display:flex}.modal{width:min(760px,100%);max-height:min(88vh,760px);overflow:auto;border-radius:22px;border:1px solid var(--modal-border);background:linear-gradient(180deg,var(--modal-bg1),var(--modal-bg2));box-shadow:0 32px 100px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03);padding:22px;position:relative}.modal::before{content:'';position:absolute;left:0;right:0;top:0;height:7px;border-radius:22px 22px 0 0;background:linear-gradient(90deg,var(--modal-accent),transparent 90%)}.modal.center{text-align:center}.modal h2{margin:0 0 8px;font-size:clamp(24px,4vw,40px);color:var(--modal-title)}.modal p{color:#d7cbdf;line-height:1.55}.modal .primary-btn{background:linear-gradient(135deg,var(--modal-accent),#fff0a5);color:#130d1a;box-shadow:0 12px 24px rgba(0,0,0,.24)}.modal .secondary-btn{border-color:var(--modal-border);background:rgba(17,12,22,.72)}.modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}.secondary-btn,.danger-btn{border-radius:12px;padding:11px 16px;font-weight:850;border:1px solid var(--line);color:#fff;background:#2a1b36}.danger-btn{background:#4a1b26;border-color:#7c2b3e}.suspect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.suspect-card{background:#120c1a;border:2px solid transparent;border-radius:14px;padding:9px;text-align:center;color:#fff}.suspect-card:hover{border-color:var(--modal-accent)}.suspect-card img{width:100%;aspect-ratio:1/1;border-radius:10px;object-fit:contain;background:radial-gradient(circle at 50% 25%,#352247,#140d1c)}.suspect-card b{display:block;font-size:12px;margin-top:6px}.suspect-card small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.card-list{display:grid;gap:8px}.bonus-card{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;background:#120c1a;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px}.bonus-card strong{display:block;font-size:13px}.bonus-card small{color:var(--muted)}.bonus-card button{white-space:nowrap}.modal-note{font-size:12px;color:#a995bb;margin-top:12px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;z-index:140;background:#0f0a15;color:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 15px;box-shadow:0 12px 30px rgba(0,0,0,.4);transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
footer{min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 18px;color:#8f819c;font-size:11px;border-top:1px solid var(--line)}footer a{color:#d9cae7;text-decoration:none}
@media(max-width:1240px){.game-layout{grid-template-columns:220px minmax(0,1fr) 250px}.board-main{grid-template-columns:minmax(0,1fr) 185px}.avatar-picker{grid-template-columns:repeat(3,1fr)}}
@media(max-width:980px){.game-layout{grid-template-columns:1fr;gap:8px}.board-zone{order:1;min-height:auto}.right-panel{order:2;max-height:none}.left-panel{order:3;max-height:none}.board-main{grid-template-columns:1fr}.board-side-ui{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}.move-hint{min-height:unset}.board{width:min(100%,calc((100vh - 320px) * 17 / 13),960px)}.suspect-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.topbar{height:60px;padding:8px 10px}.brand-mark{width:38px;height:38px}.brand h1{font-size:14px}.eyebrow{font-size:8px}.icon-btn{width:36px;height:36px}.home-screen{padding:16px 10px}.hero-card{grid-template-columns:1fr;min-height:0}.hero-copy{padding:24px 20px 8px}.hero-copy h2{font-size:40px}.hero-copy p{font-size:14px}.hero-art{min-height:220px}.hero-art img{width:230px}.setup-grid{grid-template-columns:1fr}.setup-card.wide{grid-column:auto}.avatar-picker{grid-template-columns:repeat(2,1fr)}.game-screen{padding:6px}.side-panel,.board-zone{border-radius:14px}.side-panel{padding:10px}.board-zone{padding:8px}.board-side-ui{grid-template-columns:1fr;gap:8px}.board{width:min(100%,calc((100vh - 310px) * 17 / 13));max-width:100%}.dice{width:54px;height:54px;font-size:30px}.play-card strong{font-size:22px}.primary-btn{padding:10px 12px;font-size:12px}.modal{padding:17px}.suspect-grid{grid-template-columns:repeat(2,1fr)}.suspect-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}footer{display:none}}