:root{--bg: #0f172a;--panel: rgba(17, 24, 39, .86);--panel-2: rgba(30, 41, 59, .9);--text: #f8fafc;--muted: #94a3b8;--accent: #ff4d6d;--accent-2: #ffd166;--green: #4ade80;--blue: #38bdf8;--radius: 18px;--font-display: "Fredoka", "Nunito", system-ui, sans-serif;--font-body: "Nunito", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-body)}#game{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}#ui{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}#ui>*{pointer-events:auto}h1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:.5px}button{font-family:var(--font-display);font-weight:600;font-size:16px;border:0;border-radius:999px;padding:10px 18px;cursor:pointer;color:#111;background:var(--accent-2);transition:transform .08s,filter .15s}button:hover{filter:brightness(1.08);transform:translateY(-1px)}button:active{transform:translateY(1px) scale(.98)}button.primary{background:var(--accent);color:#fff;font-size:20px;padding:14px 28px;box-shadow:0 6px #b91c3c}button.primary:active{box-shadow:0 2px #b91c3c}button.ghost{background:#ffffff1a;color:var(--text)}button.small{font-size:13px;padding:6px 12px}button.danger{background:#ef4444;color:#fff}button:disabled{opacity:.5;cursor:not-allowed;transform:none}input[type=text],select{font-family:var(--font-body);font-size:16px;padding:10px 14px;border-radius:12px;border:2px solid rgba(255,255,255,.15);background:#0000004d;color:var(--text);outline:none}input[type=text]:focus,select:focus{border-color:var(--blue)}select option{color:#111}.hidden{display:none!important}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:24px}.panel{background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius);padding:24px;box-shadow:0 20px 60px #00000080;border:1px solid rgba(255,255,255,.08)}.title{font-size:64px;color:#fff;text-shadow:0 6px 0 #b91c3c,0 12px 30px rgba(0,0,0,.6);transform:rotate(-3deg)}.title span{color:var(--accent-2)}.subtitle{color:var(--muted);font-size:16px;margin-top:4px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:12px}.stack{display:flex;flex-direction:column;gap:8px}.grow{flex:1}.muted{color:var(--muted)}.label{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700}#menu{justify-content:space-between;align-items:stretch}#menu .builder{width:360px;max-height:100%;overflow:auto}#menu .actions{width:320px;align-self:center}.part-row{display:grid;grid-template-columns:90px 36px 1fr 36px;align-items:center;gap:6px}.part-row .val{text-align:center;font-family:var(--font-display);font-weight:600;text-transform:capitalize;background:#ffffff0f;border-radius:10px;padding:6px}.part-row button{padding:6px 0;font-size:16px}.swatches{display:flex;flex-wrap:wrap;gap:6px}.swatch{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer}.swatch.sel{border-color:#fff;transform:scale(1.15)}.color-row{display:grid;grid-template-columns:90px 1fr;align-items:start;gap:6px;margin-top:4px}.color-row input[type=color]{width:32px;height:26px;border:0;background:none;padding:0;cursor:pointer}.lobby-list{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow:auto;min-width:520px}.lobby-item{display:grid;grid-template-columns:1fr auto auto auto;gap:12px;align-items:center;background:var(--panel-2);border-radius:12px;padding:10px 14px}.lobby-item .name{font-family:var(--font-display);font-size:18px}.pill{font-size:12px;padding:3px 10px;border-radius:999px;background:#ffffff1a;font-weight:700}.pill.live{background:var(--green);color:#052e16}#lobby .panel{width:min(1100px,96vw);height:min(720px,92vh);display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:auto 1fr auto;gap:14px;overflow:auto}@media(max-width:820px){#lobby .panel{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;height:auto;max-height:94vh}#lobby .head,#lobby .foot{grid-column:1;flex-wrap:wrap}.players{grid-template-columns:1fr}#menu{flex-direction:column;overflow:auto;align-items:center;gap:16px}#menu .builder,#menu .actions{width:min(420px,94vw)}.lobby-list{min-width:0;width:90vw}}#lobby .head{grid-column:1 / -1;display:flex;align-items:center;gap:14px}#lobby .code{font-family:var(--font-display);font-size:28px;letter-spacing:4px;background:#00000059;padding:4px 14px;border-radius:12px;cursor:pointer}.players{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;align-content:start;overflow:auto}.player-card{display:flex;align-items:center;gap:10px;background:var(--panel-2);border-radius:12px;padding:8px 10px}.player-card .avatar{width:34px;height:34px;border-radius:50%;border:3px solid #fff2}.player-card .pname{font-family:var(--font-display);font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-card .crown{color:var(--accent-2)}.settings{display:grid;grid-template-columns:110px 1fr;gap:8px 10px;align-items:center;align-content:start}.chat{display:flex;flex-direction:column;background:#0000004d;border-radius:12px;overflow:hidden}.chat .log{flex:1;overflow:auto;padding:10px;font-size:14px;display:flex;flex-direction:column;gap:4px}.chat .log .sys{color:var(--muted);font-style:italic}.chat .log b{color:var(--blue)}.chat form{display:flex;gap:6px;padding:8px}.chat input{flex:1}#lobby .foot{grid-column:1 / -1;display:flex;gap:12px;align-items:center}.vote{background:#7c2d12;border:2px solid #fb923c;border-radius:12px;padding:10px 14px;display:flex;gap:12px;align-items:center}.voice{display:flex;gap:8px;align-items:center}.mic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:18px;padding:0}.mic.on{background:var(--green)}.mic.off{background:#475569;color:#fff}#hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}#hud>*{pointer-events:none}.hud-top{position:absolute;top:16px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}.timer{font-family:var(--font-display);font-size:40px;font-weight:700;text-shadow:0 3px 0 #0008}.timer.low{color:var(--accent);animation:pulse .6s infinite alternate}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.12)}}.role{font-family:var(--font-display);font-size:26px;font-weight:700;padding:6px 18px;border-radius:999px;background:#00000080}.role.it{background:var(--accent)}.role.frozen{background:#7dd3fc;color:#082f49}.role.infected{background:#84cc16;color:#1a2e05}.role.king{background:#ffd166;color:#3b2a00}.hud-bottom{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:16px}.tool{background:#0000008c;border-radius:16px;padding:10px 16px;display:flex;align-items:center;gap:10px;min-width:200px}.tool .icon{font-size:34px}.tool .tname{font-family:var(--font-display);font-weight:600}.tool .key{font-size:12px;color:var(--muted)}.hud-left{position:absolute;left:16px;top:16px;font-size:14px;background:#00000073;border-radius:12px;padding:8px 12px}.hud-right{position:absolute;right:16px;top:16px;display:flex;flex-direction:column;gap:6px;align-items:flex-end}.feed{position:absolute;right:16px;top:70px;display:flex;flex-direction:column;gap:4px;align-items:flex-end}.feed div{background:#00000080;padding:4px 10px;border-radius:8px;font-size:14px;animation:fadein .2s}@keyframes fadein{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:none}}.banner{position:absolute;top:28%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:72px;font-weight:700;text-shadow:0 6px 0 #0008,0 0 40px #000;animation:bannerIn .5s;pointer-events:none}@keyframes bannerIn{0%{transform:translate(-50%,-50%) scale(2);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.crosshair{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);opacity:.7}.blind{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle,#ff4d6d 0,#ffd166,#38bdf8 60%,#a855f7);opacity:0;transition:opacity .2s;mix-blend-mode:normal}.scoreboard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--panel);border-radius:var(--radius);padding:18px 24px;min-width:420px}.scoreboard table{width:100%;border-collapse:collapse}.scoreboard td,.scoreboard th{padding:6px 10px;text-align:left}.scoreboard tr.me{background:#ffffff14}.game-chat{position:absolute;left:16px;bottom:20px;width:360px;display:flex;flex-direction:column;gap:6px}.game-chat .log{display:flex;flex-direction:column;gap:2px;font-size:14px;max-height:160px;overflow:hidden}.game-chat .log div{background:#00000073;padding:3px 8px;border-radius:6px;width:fit-content;max-width:100%}.game-chat input{pointer-events:auto}.help{position:absolute;right:16px;bottom:20px;font-size:12px;color:var(--muted);background:#0006;padding:8px 10px;border-radius:10px;line-height:1.5}.help b{color:#fff}#results .panel{min-width:520px;text-align:center}#results table{width:100%;margin:12px 0;border-collapse:collapse}#results td{padding:8px 10px}#results tr:first-child td{font-size:20px;color:var(--accent-2);font-family:var(--font-display)}.toasts{position:absolute;bottom:24px;right:24px;display:flex;flex-direction:column;gap:8px}.toast{background:#1e293b;border-left:4px solid var(--accent);padding:10px 14px;border-radius:10px;box-shadow:0 10px 30px #0006;animation:fadein .2s;max-width:360px}.toast.ok{border-color:var(--green)}.conn{position:absolute;left:12px;bottom:10px;font-size:12px;color:var(--muted)}.menu-card{width:min(480px,94vw)}#outfit.left{justify-content:flex-start}#outfit .builder{width:380px;max-height:92vh;overflow:auto}.rules{display:flex;flex-direction:column;gap:8px;background:var(--panel-2);border-radius:12px;padding:10px}.rules-head{display:flex;align-items:center;gap:8px}.rules .settings{grid-template-columns:120px 1fr}.tool-toggles{display:flex;flex-wrap:wrap;gap:6px}.tool-toggle{font-size:12px;padding:4px 9px;border-radius:999px;background:#ffffff12;opacity:.5}.tool-toggle.on{background:#ffffff29;opacity:1}.tool-toggle:disabled{cursor:default}.ballot{display:flex;flex-direction:column;gap:8px;align-items:center;margin-top:6px}.ballot-options{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.ballot-option{font-size:13px;padding:8px 14px;border-radius:999px;background:#ffffff14}.ballot-option.on{background:var(--accent);color:#08131f;font-weight:700}.settings-card{width:min(720px,94vw);max-height:92vh}.settings-body{overflow:auto;max-height:62vh;padding-right:6px}.tabs{display:flex;gap:6px}.tabs button.active{background:var(--accent-2);color:#111}.setting-row{display:grid;grid-template-columns:220px 1fr auto;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}.setting-row input[type=range]{width:100%;accent-color:var(--accent)}.bind-row{grid-template-columns:220px 150px 150px}button.key{min-width:140px}button.key.listening{background:var(--accent);color:#fff;animation:pulse .5s infinite alternate}.chip{position:absolute;top:14px;left:50%;transform:translate(-50%);background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:8px 14px;display:flex;gap:10px;align-items:center;font-size:14px;border:1px solid rgba(255,255,255,.1)}.chip .code-sm{font-family:var(--font-display);letter-spacing:3px;background:#00000059;padding:2px 8px;border-radius:8px}.role.practice{background:var(--green);color:#052e16;font-size:18px}.role.out{background:#64748b}.hud-top .sub{font-size:13px}.hint{position:absolute;bottom:90px;left:50%;transform:translate(-50%);font-size:14px;color:var(--muted)}#hud .hud-top{top:60px}.emotes{position:absolute;left:50%;bottom:110px;transform:translate(-50%);background:var(--panel);border-radius:var(--radius);padding:12px 16px;animation:fadein .15s}.emotes h3{margin:0 0 8px;font-size:16px}.emotes h3 .muted{font-size:12px;font-weight:400;margin-left:8px}.emotes .grid{display:flex;gap:8px}.emotes .emote{display:flex;flex-direction:column;align-items:center;gap:2px;width:72px;padding:8px 4px;border-radius:10px;background:#ffffff0f;font-size:13px;position:relative}.emotes .emote .icon{font-size:30px;line-height:1.1}.emotes .emote .num{position:absolute;top:4px;left:6px;font-size:11px;font-weight:700;color:var(--accent, #ffd166)}.presets{display:flex;flex-wrap:wrap;gap:6px}.menu-card .stats{font-size:13px;background:#ffffff0d;border-radius:10px;padding:8px 10px}.screen button:focus-visible,.screen input:focus-visible,.screen select:focus-visible{outline:3px solid #ffd166;outline-offset:2px}.indicators{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.ind{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:2px;transition:opacity .2s;will-change:transform}.ind .arrow{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:16px solid var(--accent);filter:drop-shadow(0 2px 2px #0008)}.ind .tag{font-family:var(--font-display);font-weight:700;font-size:12px;padding:2px 8px;border-radius:999px;background:#0000008c;color:#fff;white-space:nowrap}.ind[data-kind=threat] .arrow{border-bottom-color:var(--accent)}.ind[data-kind=threat] .tag{background:var(--accent)}.ind[data-kind=target] .arrow{border-bottom-color:var(--green)}.ind[data-kind=target] .tag{background:var(--green);color:#052e16}.ind[data-kind=frozen] .arrow{border-bottom-color:#7dd3fc}.ind[data-kind=frozen] .tag{background:#7dd3fc;color:#082f49}.tutorial{position:absolute;right:16px;top:120px;width:300px;background:#00000073;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:14px;padding:10px 12px;font-size:13px;pointer-events:none}.tutorial.done{width:auto;padding:8px 14px}.tutorial .t-head{font-family:var(--font-display);font-weight:700;font-size:15px;margin-bottom:6px;color:var(--accent-2)}.tutorial .t-row{display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:center;padding:3px 0;color:#e2e8f0}.tutorial .t-row.ok{color:var(--muted);text-decoration:line-through}.tutorial .t-row.ok .t-box{background:var(--green);color:#052e16}.tutorial .t-row.flash{animation:tflash .8s}@keyframes tflash{0%{background:#4ade8059}to{background:transparent}}.tutorial .t-box{width:18px;height:18px;border-radius:5px;background:#ffffff26;display:grid;place-items:center;font-size:12px;font-weight:700}.tutorial .t-key{font-size:11px;color:var(--muted);background:#ffffff14;padding:1px 6px;border-radius:6px}#ui.photo #hud,#ui.photo .chip,#ui.photo .indicators,#ui.photo .tutorial,#ui.photo .conn{visibility:hidden}.help-card{width:min(760px,94vw);max-height:92vh}.help-body{overflow:auto;max-height:72vh;display:flex;flex-direction:column;gap:14px;padding-right:6px}.help-section h3{margin-bottom:6px;color:var(--accent-2)}.help-row{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:start;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px}.help-row .kbd{font-family:var(--font-display);font-weight:700;background:#ffffff1a;border-radius:8px;padding:2px 8px;text-align:center}#ui:has(.screen:not(.hidden)) .tutorial,#ui:has(.screen:not(.hidden)) .indicators{display:none}.hitflash{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;animation:hitflash .45s ease-out forwards}@keyframes hitflash{0%{opacity:.9}to{opacity:0}}