:root{--ink:#3b2a1e;--ink-soft:#6b5640;--parchment:#fbf1dc;--parchment-2:#f0dcb2;--parchment-3:#ead7ae;--leather:#6e4222;--leather-dark:#2a1a10;--cream:#fff3d6;--gold:#f2c14e;--guilty:#b8441c;--innocent:#3f6fb5;--night:#2c3570;--ok:#2f7d4f;--radius:16px;--font-display:"Fredoka", system-ui, sans-serif;--font-body:"Nunito", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0}body{color:var(--ink);font-family:var(--font-body);background:#86b552;overflow:hidden}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed}:focus-visible{outline:3px solid var(--gold);outline-offset:2px}#scene{position:fixed;inset:0}#scene canvas{display:block}#ui{pointer-events:none;position:fixed;inset:0}#ui>*{pointer-events:auto}.sr{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.panel{background:var(--parchment);border-radius:var(--radius);box-shadow:0 4px 0 var(--ink);border:3px solid #5a3a1f}.panel-head{background:var(--leather);color:var(--cream);border-radius:12px 12px 0 0;justify-content:space-between;align-items:center;gap:8px;padding:9px 14px;display:flex}.panel-head h2{font:600 17px/1.2 var(--font-display);margin:0}.leather{background:var(--leather);color:var(--cream);border:3px solid var(--ink);box-shadow:0 4px 0 var(--leather-dark);border-radius:18px}.btn{border:2.5px solid var(--ink);background:var(--parchment-2);min-height:40px;color:var(--ink);box-shadow:0 3px 0 var(--ink);border-radius:12px;justify-content:center;align-items:center;gap:6px;padding:0 14px;font-size:14px;font-weight:800;display:inline-flex}.btn:hover:not(:disabled){filter:brightness(1.04)}.btn:active:not(:disabled){box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}.btn:disabled{opacity:.55;box-shadow:none}.btn.primary{background:var(--leather);color:var(--cream);font-family:var(--font-display);font-size:17px;font-weight:600}.btn.guilty{background:var(--guilty);color:#fff}.btn.innocent{background:var(--innocent);color:#fff}.btn.small{min-height:32px;box-shadow:0 2px 0 var(--ink);border-width:2px;padding:0 10px;font-size:12px}.btn.on{background:var(--ink);color:#f6d98a}.icon-btn{background:var(--parchment);width:46px;height:46px;color:var(--ink);box-shadow:0 3px 0 var(--ink);border:3px solid #5a3a1f;border-radius:50%;justify-content:center;align-items:center;padding:0;display:inline-flex}.icon-btn.on{background:var(--ink);color:var(--gold)}.icon-btn.alert{background:var(--guilty);color:#fff}input[type=text],select{height:42px;color:var(--ink);font:600 15px var(--font-body);background:#fffaf0;border:2px solid #5a3a1f;border-radius:10px;min-width:0;padding:0 12px}.chip{white-space:nowrap;border-radius:999px;align-items:center;gap:5px;padding:2px 9px;font-size:11px;font-weight:800;display:inline-flex}.chip.dark{background:var(--ink);color:#f6d98a}.chip.info{color:#23456f;background:#d6e4f5}.chip.warn{color:#8a3412;background:#f8d9c4}.chip.dead{color:#5a5048;background:#e2dccf}.chip.ok{color:#1f5a33;background:#d5ecd9}.home{flex-direction:column;gap:14px;width:min(440px,100vw - 32px);padding:26px 28px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.home h1{font:700 64px/1 var(--font-display);text-align:center;margin:0}.home .tagline{text-align:center;color:var(--ink-soft);margin:0;font-weight:700}.home label{font-size:13px;font-weight:800}.row{align-items:center;gap:8px;display:flex}.row>input{flex:1}.stack{flex-direction:column;gap:8px;display:flex}.error-banner{background:var(--guilty);color:#fff;border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink);z-index:20;border-radius:12px;padding:8px 16px;font-weight:800;position:fixed;top:96px;left:50%;transform:translate(-50%)}.me-card{flex-direction:column;gap:6px;width:300px;padding:12px 14px;display:flex;position:absolute;top:16px;left:16px}.me-card .name{font:600 20px var(--font-display)}.phase-banner{flex-direction:column;gap:6px;width:min(480px,100vw - 680px);min-width:300px;padding:10px 18px 12px;display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%)}.phase-banner h1{font:600 21px/1.15 var(--font-display);flex:1;margin:0}.phase-banner p{color:#f3dfb8;margin:0;font-size:14px;font-weight:600}.timer{background:var(--cream);color:var(--ink);font:700 18px var(--font-display);font-variant-numeric:tabular-nums;border-radius:999px;padding:3px 12px}.bar{background:var(--ink);border-radius:999px;height:8px;overflow:hidden}.bar>div{background:var(--gold);height:100%;transition:width .25s linear}.top-right{gap:8px;display:flex;position:absolute;top:16px;right:16px}.roster{flex-direction:column;width:320px;max-height:calc(100vh - 380px);display:flex;position:absolute;top:76px;right:16px}.roster ul{margin:0;padding:4px 0;list-style:none;overflow-y:auto}.roster li{border-bottom:1px solid #e6d1a6;align-items:center;gap:8px;padding:6px 12px;display:flex}.roster li.dead .pname{opacity:.65;text-decoration:line-through}.roster .dot{border:2px solid var(--ink);border-radius:50%;flex:none;width:20px;height:20px;position:relative}.roster .dot.speaking{box-shadow:0 0 0 3px #57c27a}.roster .pname{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:14px;font-weight:800;overflow:hidden}.roster .tags{flex-wrap:wrap;justify-content:flex-end;gap:4px;display:flex}.roster .count{background:var(--guilty);color:#fff;min-width:22px;height:22px;font:700 12px/22px var(--font-display);text-align:center;border-radius:999px;padding:0 6px}.trial{width:320px;position:absolute;bottom:16px;right:16px}.trial .body{flex-direction:column;gap:10px;padding:12px 14px 14px;display:flex}.meter{background:var(--parchment-3);border:1.5px solid #5a3a1f;border-radius:999px;height:12px;overflow:hidden}.meter>div{height:100%}.chat{flex-direction:column;width:420px;height:320px;display:flex;position:absolute;bottom:16px;left:16px;overflow:hidden}.chat .tabs{background:var(--parchment-3);border-bottom:2px solid #5a3a1f;gap:6px;padding:8px 10px;display:flex}.chat .log{flex-direction:column;flex:1;gap:6px;padding:10px 14px;font-size:14px;line-height:1.35;display:flex;overflow-y:auto}.chat .log p{overflow-wrap:anywhere;margin:0}.chat .log .sys{color:var(--ink-soft);font-style:italic}.chat form{background:#f6e7c6;border-top:2px solid #5a3a1f;gap:8px;padding:8px 10px;display:flex}.chat form input{flex:1}.chat .hint{color:var(--ink-soft);background:#f6e7c6;border-top:2px solid #5a3a1f;padding:8px 12px;font-size:13px;font-weight:700}.voice-bar{flex-wrap:wrap;align-items:center;gap:10px;max-width:560px;padding:10px 14px;display:flex;position:absolute;bottom:16px;left:452px;right:352px}.voice-bar .label{font:600 16px var(--font-display)}.voice-bar .rooms{flex-wrap:wrap;flex:1;gap:6px;display:flex}.room-chip{color:var(--cream);background:#4b2f19;border:2px solid #3b2a1e;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800}.room-chip.talk{background:#2f7d4f}.room-chip.listen{background:#3f6fb5}.voice-bar select{max-width:180px;height:36px;font-size:13px}.voice-bar .note{color:#f3dfb8;width:100%;margin:0;font-size:12px;font-weight:700}.overlay{background:#0f12308c;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.role-card{border-width:4px;border-radius:26px;width:min(420px,100%);overflow:hidden;box-shadow:0 8px #0f1230}.role-card .stripe{height:14px}.role-card .body{text-align:center;flex-direction:column;align-items:center;gap:12px;padding:20px 28px 26px;display:flex}.role-card .kicker{letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-size:13px;font-weight:800}.role-card h1{font:700 54px/1 var(--font-display);margin:0}.role-card .gloss{color:var(--ink-soft);font-weight:800}.role-card p{margin:0;font-size:16px;line-height:1.45}.emblem{background:var(--parchment-2);border:4px solid var(--ink);border-radius:50%;justify-content:center;align-items:center;width:140px;height:140px;display:flex}.win-box{background:var(--parchment-2);border:2px dashed #5a3a1f;border-radius:14px;width:100%;padding:10px 14px;font-weight:700}.end-card{width:min(520px,100%)}.end-card .body{flex-direction:column;gap:12px;padding:18px 22px 22px;display:flex}.end-card ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;margin:0;padding:0;list-style:none;display:grid}.end-card li{align-items:center;gap:8px;font-weight:700;display:flex}.lobby-card{width:340px;position:absolute;top:76px;right:16px}.lobby-card .body{flex-direction:column;gap:10px;padding:14px;display:flex}.code{font:700 34px/1 var(--font-display);letter-spacing:.12em}.toast{text-align:center;max-width:min(560px,100vw - 32px);font:600 18px/1.3 var(--font-display);padding:12px 18px;animation:.25s ease-out toast-in;position:absolute;top:150px;left:50%;transform:translate(-50%)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){.toast{animation:none}.bar>div{transition:none}}