:root{--bg: #0f1117;--bg-2: #171a23;--panel: #1d212c;--panel-2: #232838;--line: #2c3244;--ink: #e8eaf0;--ink-dim: #9aa2b6;--gold: #d9b46a;--danger: #e05252;--radius: 14px;--maxw: 460px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;background:radial-gradient(120% 80% at 50% -10%,#1a1f2e 0%,var(--bg) 55%);color:var(--ink);font-family:Iowan Old Style,Palatino Linotype,Georgia,serif;min-height:100dvh;-webkit-font-smoothing:antialiased}@layer base{button:not(:disabled),[role=button],summary,a{cursor:pointer}}button{cursor:pointer}#app{max-width:var(--maxw);margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom))}button{font-family:inherit;color:inherit;border:none;background:none}a{color:var(--gold);text-decoration:none}.menu-head{text-align:center;padding:22px 0 8px}.brand{font-size:30px;font-weight:700;letter-spacing:.5px}.brand span{color:var(--gold)}.tagline{color:var(--ink-dim);font-size:15px;line-height:1.5;margin:10px auto 0;max-width:340px}.tagline b{color:var(--ink)}.progress-line{text-align:center;color:var(--gold);font-size:13px;letter-spacing:1px;text-transform:uppercase;margin:14px 0 18px}.case-list{display:grid;gap:12px}.case-card{text-align:left;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;transition:transform .08s ease,border-color .15s ease}.case-card:active{transform:scale(.99)}.case-card.solved{opacity:.72;border-color:#34503a}.case-no{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-dim)}.case-title{font-size:19px;font-weight:700;margin:3px 0 5px}.case-meta{font-size:13px;color:var(--ink-dim)}.case-meta .diff{color:var(--gold);text-transform:capitalize}.case-status{margin-top:9px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gold)}.solved .case-status{color:#6fce8a}.menu-foot{text-align:center;color:var(--ink-dim);font-size:12px;margin-top:24px;line-height:1.6}.play-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px}.icon-btn{color:var(--ink-dim);font-size:15px;padding:6px 4px}.play-title{flex:1;text-align:center;font-weight:700;font-size:17px}.clock{font-variant-numeric:tabular-nums;color:var(--gold);font-size:15px;min-width:46px;text-align:right}.case-file{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;padding:12px 14px;margin-bottom:16px}.file-line{font-size:13px;color:var(--ink)}.file-line .k{display:inline-block;width:58px;color:var(--ink-dim);text-transform:uppercase;font-size:11px;letter-spacing:1px}.file-blurb{font-size:14px;line-height:1.55;color:var(--ink-dim);margin:10px 0 6px}.file-hook{font-size:13px;font-style:italic;color:var(--gold);margin:0}.board{--size: 6;display:grid;grid-template-columns:repeat(var(--size),1fr);gap:2px;background:var(--line);border:2px solid var(--line);border-radius:12px;overflow:hidden;aspect-ratio:1;box-shadow:0 10px 30px #0006}.cell{background:var(--bg-2);display:flex;align-items:center;justify-content:center;font-size:clamp(20px,8vw,34px);position:relative;transition:background .1s ease}.cell.box-r{box-shadow:inset -2px 0 0 var(--line)}.cell.box-b{box-shadow:inset 0 -2px 0 var(--line)}.cell.box-r.box-b{box-shadow:inset -2px 0 0 var(--line),inset 0 -2px 0 var(--line)}.cell.given{background:#12151d}.cell.given .pawn{filter:none}.cell.peer{background:#20242f}.cell.match{background:#2a2f1f}.cell.selected{background:#33384a;box-shadow:inset 0 0 0 2px var(--gold)}.cell.conflict{background:#3a1e22}.cell.conflict .pawn{animation:shake .25s}.cell .pawn{line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}.cell:not(.given):not(.spotlight) .pawn{outline:none}.cell:not(.given) .pawn:after{content:""}.cell.spotlight{background:radial-gradient(circle at 50% 45%,rgba(217,180,106,.16),transparent 70%)}.cell.spotlight.selected{background:#33384a}.spot-mark{opacity:.4;font-size:.7em;animation:pulse 2.4s ease-in-out infinite}.cell.reveal-flash{animation:flash .6s ease-out}@keyframes pulse{0%,to{opacity:.28}50%{opacity:.6}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}@keyframes flash{0%{box-shadow:inset 0 0 0 2px var(--gold),0 0 40px 10px #d9b46ab3;background:#d9b46a66}to{box-shadow:inset 0 0 0 0 transparent}}.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}.suspect{background:var(--panel);border:1px solid var(--line);border-bottom:3px solid var(--c, var(--line));border-radius:10px;padding:9px 4px 7px;display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;transition:transform .06s ease,background .12s ease}.suspect:active{transform:scale(.95)}.suspect.done{opacity:.35}.sus-emoji{font-size:24px;line-height:1}.sus-name{font-size:10px;color:var(--ink-dim);letter-spacing:.3px}.sus-left{position:absolute;top:4px;right:6px;font-size:10px;color:var(--ink-dim);font-variant-numeric:tabular-nums}.suspect.erase{border-bottom-color:var(--line)}.play-hint{text-align:center;color:var(--ink-dim);font-size:12px;margin:14px 0 0;line-height:1.5}.reveal{position:fixed;inset:0;background:#06080cd1;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .3s ease;z-index:20}.reveal-card{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--gold);border-radius:18px;padding:26px 22px 22px;max-width:360px;width:100%;text-align:center;box-shadow:0 20px 60px #0009;animation:rise .35s cubic-bezier(.2,.8,.3,1)}.reveal-tag{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--gold)}.reveal-culprit{font-size:72px;line-height:1.1;margin:12px 0;animation:pop .5s cubic-bezier(.2,.9,.3,1.4) both}.reveal-line{font-size:18px;line-height:1.55;margin:6px 0 14px}.reveal-time{color:var(--ink-dim);font-size:13px;margin-bottom:18px}.reveal-actions{display:grid;gap:9px}.btn{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px;font-size:15px;font-weight:600}.btn-primary{background:var(--gold);color:#1a150a;border-color:var(--gold)}@keyframes fade{0%{opacity:0}}@keyframes rise{0%{transform:translateY(16px);opacity:0}}@keyframes pop{0%{transform:scale(.3);opacity:0}}