:root{--bg: #1a1a1a;--wall: #2c3e50;--hall: #ecf0f1;--room: #95a5a6;--door: #f1c40f;--panel-bg: #222;--reachable-glow: rgba(241, 196, 15, .4);--reachable-border: rgba(241, 196, 15, .8);--text: #f4f4f5;--muted: #9ca3af;--accent: #f1c40f;--danger: #e74c3c;--panel-width: 340px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}button{font:inherit;cursor:pointer;border:0;border-radius:8px;padding:10px 16px;background:#374151;color:var(--text);transition:filter .15s,opacity .15s}button:hover:not(:disabled){filter:brightness(1.25)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);color:#1a1a1a;font-weight:700}button.danger{background:var(--danger)}input{font:inherit;padding:10px 12px;border-radius:8px;border:1px solid #4b5563;background:#111827;color:var(--text)}.hidden{display:none!important}#app{display:flex;flex-direction:column;min-height:100vh}.screen{padding:24px;max-width:1100px;margin:0 auto;width:100%}.centred{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:70vh}h1{font-size:1.6rem;margin:0 0 4px}.muted{color:var(--muted);font-size:.9rem}.card{background:var(--panel-bg);border-radius:12px;padding:18px;border:1px solid #333}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.stack{display:flex;flex-direction:column;gap:12px}.error{color:var(--danger);font-size:.9rem;min-height:1.2em}.game-layout{display:flex;width:100%;height:100dvh;overflow:hidden;position:relative}.side-panel{width:var(--panel-width);height:100%;flex-shrink:0;padding:10px 12px;background:var(--panel-bg);overflow-y:auto;border-right:1px solid #333;transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:100}.side-panel.right{border-right:none;border-left:1px solid #333}.panel-heading{margin:0 0 6px;padding-bottom:4px;border-bottom:1px solid #444;text-align:center;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}.centre-panel{flex-grow:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px;overflow-y:auto;position:relative;z-index:1}.pull-tab{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:200;padding:18px 6px;border-radius:0 8px 8px 0;background:var(--panel-bg);border:1px solid #444;writing-mode:vertical-rl;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}.pull-tab.right{left:auto;right:0;border-radius:8px 0 0 8px}.drawer-backdrop{display:none}@media(max-width:900px){.pull-tab{display:block}.side-panel{position:absolute;top:0;height:100%;width:min(86vw,340px);box-shadow:5px 0 15px #00000080;touch-action:pan-y}.side-panel.left{left:0;transform:translate(-100%);border-right:4px solid #3498db}.side-panel.right{right:0;transform:translate(100%);border-left:4px solid #f1c40f}.show-left .side-panel.left,.show-right .side-panel.right{transform:translate(0)}.drawer-backdrop{display:none;position:absolute;inset:0;z-index:50}.show-left .drawer-backdrop,.show-right .drawer-backdrop{display:block}}.board-wrap{position:relative;flex:0 0 auto;width:100%;display:flex;justify-content:center;min-width:0}#board{--reserved: 318px;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr);aspect-ratio:var(--cols) / var(--rows);width:min(100%,calc((100dvh - var(--reserved)) * var(--cols) / var(--rows)));position:relative;background:var(--bg);border:3px solid #555;border-radius:6px;user-select:none}@media(max-width:900px){#board{--reserved: 240px;width:100%}}.cell{position:relative;display:flex;align-items:center;justify-content:center;overflow:visible}.cell.t-0{background:var(--wall)}.cell.t-1{background:var(--hall)}.cell.t-2{background:var(--room)}.cell.t-3{background:var(--door)}.cell.t-1,.cell.t-2,.cell.t-3{box-shadow:inset 0 0 0 .5px #00000014}#board.has-underlay .cell.t-0,#board.has-underlay .cell.t-1,#board.has-underlay .cell.t-2,#board.has-underlay .cell.t-3{background:transparent}.reachable:before{content:"";position:absolute;inset:0;background:var(--reachable-glow);border:2px solid var(--reachable-border);z-index:1;animation:pulse-reach 1.5s infinite ease-in-out;pointer-events:none}@keyframes pulse-reach{0%,to{opacity:.55}50%{opacity:1}}.reachable{cursor:pointer}.room-label{position:absolute;transform:translate(-50%,-50%);font-size:.62rem;font-weight:800;color:#16110ceb;text-shadow:0 0 2px rgba(255,252,245,.95),0 0 6px rgba(255,252,245,.7);text-transform:uppercase;letter-spacing:.03em;pointer-events:none;text-align:center;z-index:5;white-space:nowrap}.room-label.centre{color:#fffaf2e6;text-shadow:0 0 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.75)}.token-layer{position:absolute;inset:0;pointer-events:none;z-index:100}.token{position:absolute;display:flex;align-items:center;justify-content:center;font-size:clamp(.7rem,1.6vw,1.6rem);line-height:1;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 2px 4px rgba(0,0,0,.8));transition:transform .2s ease}.token.is-turn:after{content:"";position:absolute;inset:-8%;border-radius:50%;border:2px solid var(--accent);animation:pulse-turn 1.4s infinite ease-in-out}.token.is-out{filter:grayscale(1) opacity(.45)}.token.is-me{outline:2px solid var(--accent);outline-offset:-2px;border-radius:50%}@keyframes pulse-turn{0%,to{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}@media(prefers-reduced-motion:reduce){.token{transition:none}.token.is-turn:after{animation:none;opacity:.8}.reachable:before{animation:none}}.panel{display:flex;flex-direction:column;gap:12px}.status-line{background:var(--panel-bg);border-radius:10px;padding:12px 14px;border-left:4px solid var(--accent);font-size:.95rem}.seat-list{display:flex;flex-direction:column;gap:6px}.seat{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;background:#1f2937;font-size:.9rem}.seat .glyph{font-size:1.2rem}.seat.turn-entry{outline:2px solid var(--accent)}.seat.out{opacity:.45;text-decoration:line-through}.seat .tag{margin-left:auto;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.hand{display:flex;flex-wrap:wrap;gap:6px}.hand .card-chip{padding:5px 9px;border-radius:6px;background:#111827;border:1px solid #374151;font-size:.8rem}.hand .card-chip[data-type=suspect]{border-color:#c0392b}.hand .card-chip[data-type=weapon]{border-color:#8e44ad}.hand .card-chip[data-type=room]{border-color:#16a085}.log{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;font-size:.82rem}.log .entry{padding:5px 8px;border-radius:6px;background:#1f2937}.log .entry.refuted{border-left:3px solid var(--danger)}.log .entry.clear{border-left:3px solid #2ecc71}.case-file{position:absolute;left:50%;top:calc(var(--centre-y, 54%) - 32px);transform:translate(-50%,-50%);display:flex;z-index:60;pointer-events:none;transition:transform .5s cubic-bezier(.4,0,.2,1)}.case-file .case-card{width:40px;height:50px;margin-right:-5px;border-radius:4px;border:1px solid rgba(0,0,0,.5);background-size:cover;background-position:center;background-color:#2c3e50;box-shadow:0 2px 6px #0009;transition:margin .5s cubic-bezier(.4,0,.2,1)}.case-file.revealed{transform:translate(-50%,calc(-50% - 45px)) scale(2.5)}.case-file.revealed .case-card{margin-right:25px}.case-file.revealed .case-card:last-child{margin-right:0}.card-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:10px}.big-card{border-radius:8px;overflow:hidden;border:2px solid #555;background:#111 center / cover no-repeat;aspect-ratio:2 / 3;position:relative}.big-card[data-type=room]{border-color:#3498db}.big-card[data-type=weapon]{border-color:#f1c40f}.big-card[data-type=suspect]{border-color:#e74c3c}.big-card .caption{position:absolute;left:0;right:0;bottom:0;padding:5px 6px;font-size:.74rem;text-align:center;background:#000000b8}.stopwatches{display:flex;gap:2px;width:100%;max-width:640px;flex:0 0 auto}.stopwatch{flex:1 1 0;min-width:0;padding:6px 4px;background:var(--panel-bg);border:1px solid #333;text-align:center;font-size:.78rem;display:flex;flex-direction:column;gap:1px}.stopwatch:first-child{border-radius:8px 0 0 8px}.stopwatch:last-child{border-radius:0 8px 8px 0}.stopwatch.active{border-color:var(--accent);background:#2a2a1f}.stopwatch.mine{box-shadow:inset 0 0 0 1px var(--accent)}.stopwatch .who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stopwatch .clock{font-variant-numeric:tabular-nums;color:var(--muted)}.beer{display:inline-block;margin-left:3px;animation:shake 1.6s infinite ease-in-out}@keyframes shake{0%,88%,to{transform:rotate(0)}91%{transform:rotate(-14deg)}94%{transform:rotate(14deg)}97%{transform:rotate(-8deg)}}.prompt-pill{flex:0 0 auto;padding:8px 22px;border-radius:999px;border:2px solid #555;font-weight:700;font-size:.95rem;letter-spacing:.02em;text-align:center;color:var(--muted)}.prompt-pill.mine{color:var(--danger);border-color:var(--danger)}.prompt-pill.win{color:var(--accent);border-color:var(--accent)}.prompt-pill.waiting{color:var(--text);border-color:var(--accent);animation:breathe 2.6s ease-in-out infinite}@keyframes breathe{0%,to{box-shadow:0 0 color-mix(in srgb,var(--accent) 40%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 0%,transparent)}}.prompt-pill.waiting.closing{color:var(--danger);border-color:var(--danger);animation:breathe-closing 1s ease-in-out infinite}@keyframes breathe-closing{0%,to{box-shadow:0 0 color-mix(in srgb,var(--danger) 55%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--danger) 0%,transparent)}}@media(prefers-reduced-motion:reduce){.prompt-pill.waiting,.prompt-pill.waiting.closing{animation:none}}.info-roller{flex:0 0 auto;text-align:center;min-height:2.6em;line-height:1.3}.info-roller .now{color:var(--accent);font-size:.88rem}.info-roller .before{color:#6b7280;font-size:.8rem}.action-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}.dpad{display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(2,38px);gap:4px}.dpad .arrow{padding:0;background:#2563eb;font-size:1rem}.dpad .arrow:disabled{background:#374151}.dpad .arrow:nth-child(1){grid-column:2;grid-row:1}.dpad .arrow:nth-child(2){grid-column:1;grid-row:2}.dpad .arrow:nth-child(3){grid-column:2;grid-row:2}.dpad .arrow:nth-child(4){grid-column:3;grid-row:2}.accuse-here{position:absolute;left:50%;top:calc(var(--centre-y, 54%) + 2px);transform:translate(-50%);z-index:70;padding:7px 18px;font-weight:700;font-size:.82rem;box-shadow:0 2px 8px #0009}.accuse-here[hidden]{display:none}.leave-link{position:absolute;top:8px;left:10px;z-index:5;padding:5px 10px;font-size:.78rem;background:transparent;color:var(--muted)}.leave-link:hover{color:var(--text)}.delete-link{padding:5px 10px;font-size:.78rem;background:transparent;color:var(--muted)}.delete-link:hover:not(:disabled){color:var(--danger)}.delete-link:disabled{opacity:.5}.delete-link.corner{position:absolute;bottom:8px;left:10px;z-index:5}.delete-link[hidden]{display:none}.centre-panel .error{min-height:0}.centre-panel:empty{display:none}.notepad{margin-bottom:4px}.panel-tabs{display:flex;gap:2px;margin-bottom:8px}.panel-tabs .tab{flex:1;padding:5px 6px;font-size:.72rem;border-radius:6px;background:#1f2937;color:var(--muted)}.panel-tabs .tab.on{background:#374151;color:var(--text);font-weight:600}.mode-toggle{display:flex;gap:2px;justify-content:flex-end;margin-bottom:4px}.mode-toggle .mode{padding:2px 8px;font-size:.68rem;border-radius:5px;background:#1f2937;color:var(--muted)}.mode-toggle .mode.on{background:#16a34a;color:#f0fdf4;font-weight:600}.note-grid{display:flex;flex-direction:column;font-size:.74rem;--label-col: 60px}.note-row{display:grid;grid-template-columns:var(--label-col) repeat(auto-fit,minmax(0,1fr));align-items:stretch;border-bottom:1px solid #2b3340}.note-label{padding:4px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35;display:flex;align-items:center}.note-row.head{border-bottom:1px solid #4b5563}.note-row.head{overflow:visible;align-items:end}.note-row.head .note-head{overflow:visible;text-overflow:clip;position:relative}.note-head .turned{position:absolute;left:50%;bottom:2px;transform-origin:center bottom;transform:translate(-50%) translate(var(--head-nudge, 0px)) rotate(calc(-1 * var(--head-angle, 0deg)));white-space:nowrap}.note-head,.note-count{padding:4px 3px;text-align:center;font-weight:600;border-left:1px solid #2b3340;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35;display:flex;align-items:center;justify-content:center}.note-count{font-weight:400;color:var(--muted)}.note-row.section{display:block;background:#111827;border-bottom:1px solid #374151}.note-row.section .note-label{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:.65rem;padding:3px 6px}.note-row.solved .note-label{color:var(--accent);font-weight:700}.note-row.solved{background:#f1c40f12}.note-cell{position:relative;min-height:26px;border-left:1px solid #2b3340;cursor:pointer;display:flex;align-items:center;justify-content:center}.note-cell:hover{background:#ffffff0d}.mark{line-height:1;pointer-events:none}.mark.algo{font-size:.92rem}.mark.algo.sym-cross{color:var(--danger);font-weight:700}.mark.algo.sym-query{color:#6b7280}.mark.mine{position:absolute;top:0;left:1px;font-size:.58rem;color:#38bdf8;font-weight:700}.mark.mine.sym-flag{color:#f87171}.mark.algo.sym-card{font-size:.72rem}.mark.mine.sym-card{font-size:.5rem}.history{display:flex;flex-direction:column;gap:5px}.turn-entry{background:#1f2937;border-radius:6px;padding:5px 7px;font-size:.74rem}.turn-entry .headline{display:flex;align-items:baseline;gap:5px;margin-bottom:3px;flex-wrap:wrap}.turn-entry .round{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.68rem}.turn-entry .asker{font-weight:600}.turn-entry .claim{color:var(--muted)}.turn-entry .answers{display:flex;flex-wrap:wrap;gap:4px}.answer{border-radius:5px;padding:2px 7px;font-size:.72rem;background:#111827;color:var(--muted)}.answer.has-card{background:#e74c3c2e;color:#f5a29b}.turn-entry.accusation{border-left:3px solid var(--danger);border-radius:0 8px 8px 0}.turn-entry.accusation.correct{border-left-color:#2ecc71}.game-list{display:flex;flex-direction:column;gap:10px}.game-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;background:var(--panel-bg);border:1px solid #333}.game-row .who{color:var(--muted);font-size:.85rem}.game-row .spacer{margin-left:auto}.character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}.character{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 10px 14px;border-radius:10px;background:var(--panel-bg);border:2px solid transparent;cursor:pointer;color:var(--text);font:inherit;transition:opacity .15s ease,border-color .15s ease,box-shadow .15s ease}.character:hover:not(:disabled){border-color:var(--accent);filter:none}.character:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.character:disabled{opacity:.3;cursor:not-allowed}.character .glyph{font-size:2rem}.character .name{font-size:.82rem;text-align:center}.character.filled:disabled{opacity:1;cursor:default;border-color:var(--seat-color, var(--accent));background:color-mix(in srgb,var(--seat-color, var(--accent)) 14%,var(--panel-bg));box-shadow:0 0 0 1px color-mix(in srgb,var(--seat-color, var(--accent)) 35%,transparent),0 0 14px -4px var(--seat-color, var(--accent))}.character.mine:disabled{box-shadow:0 0 0 2px var(--seat-color, var(--accent)),0 0 18px -3px var(--seat-color, var(--accent))}.character .tag{position:absolute;top:5px;left:50%;transform:translate(-50%);white-space:nowrap;font-size:.62rem;font-weight:700;letter-spacing:.02em;padding:2px 7px;border-radius:999px;background:var(--seat-color, var(--accent));color:#10131a}.character.bot .tag{background:transparent;color:var(--seat-color, var(--accent));border:1px solid currentColor}.character .tag.vacant{background:transparent;color:var(--muted);font-weight:400}.character.open{border-style:dashed;border-color:#3a4553}.character.open:hover:not(:disabled){border-style:solid}.title-row{align-items:baseline}.edition{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--accent);border:1px solid currentColor;border-radius:999px;padding:2px 9px}.fill-zone{border-top:1px solid #333;padding-top:14px}.zone-label{margin:0 0 8px;color:var(--muted);font-size:.85rem}.bot-choices{display:flex;gap:8px;flex-wrap:wrap}.bot-choice{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:8px 12px;flex:0 0 190px;max-width:100%;border-radius:8px;border:1px solid #3a4553;background:var(--panel-bg);color:var(--text);font:inherit;cursor:pointer}.bot-choice:hover{border-color:var(--accent)}.bot-choice:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.bot-name{font-size:.92rem}.bot-blurb{font-size:.76rem;color:var(--muted)}.commit-bar{border-top:1px solid #333;padding-top:14px}.commit-bar .muted{font-size:.85rem}.seat-picker{border:1px solid #3a4553;border-radius:12px;background:var(--panel-bg);color:var(--text);padding:20px 22px;width:min(92vw,420px);box-shadow:0 18px 50px -12px #000c}.seat-picker::backdrop{background:#080a0eb8}.seat-picker h2{margin:0 0 14px;font-size:1.1rem}.seat-picker .bot-choices{flex-direction:column}.seat-picker .bot-choice{flex:0 0 auto;width:100%}.seat-picker-foot{justify-content:flex-end;margin-top:14px}.picker{border:1px solid #3a4553;border-radius:12px;background:var(--panel-bg);color:var(--text);padding:20px 22px;width:min(92vw,380px);max-height:86vh;overflow:auto;box-shadow:0 18px 50px -12px #000c}.picker::backdrop{background:#080a0eb8}.picker h3{margin:0 0 14px;text-align:center;font-size:1.15rem}.picker .warn{margin:-6px 0 14px;color:var(--accent);font-size:.82rem;text-align:center;line-height:1.4}.picker .field{display:block;margin-bottom:12px}.picker .field>span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:4px}.picker .field select{width:100%;padding:9px 10px;font-size:.95rem}.picker .field.fixed select{color:var(--accent);opacity:1;border-color:#4a4326;background:#f1c40f14;cursor:default}.picker .actions{margin-top:18px;gap:10px}.picker .actions button{flex:1;padding:10px;font-size:.95rem}.spinner{width:26px;height:26px;border-radius:50%;border:3px solid #374151;border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}