:root{--panel: rgba(17, 20, 24, .55);--panel-solid: rgba(17, 20, 24, .88);--text: #f4f6f8;--muted: #a7b0b9;--human: #ffffff;--zombie: #ff5a5a;--accent: #f2a33a;--ok: #dff3dc;--ok-edge: #8fcf86;--no: #f7dede;--no-edge: #e0a3a3;--font: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#1b1f24;color:var(--text);font-family:var(--font);user-select:none}#stage,#stage canvas{position:fixed;inset:0;display:block}#ui,#ui *{pointer-events:none}#ui button,#ui input,#ui .menu,#ui .overlay,#ui .chat-lines,#ui .menu *,#ui .overlay *,#ui .touch-zone{pointer-events:auto}.hud{position:fixed;inset:0}button{font-family:inherit}.btn{border:1px solid rgba(255,255,255,.18);background:#ffffff14;color:var(--text);padding:9px 14px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer}.btn:hover:not(:disabled){background:#ffffff29}.btn:disabled{opacity:.5;cursor:default}.btn.primary{background:var(--accent);border-color:var(--accent);color:#1b1f24}.btn.primary:hover:not(:disabled){background:#f6b257}.btn.danger{border-color:#e05a4a;color:#ffb3aa}.btn.big{width:100%;padding:13px;font-size:17px}.small-btn{padding:5px 10px;font-size:13px}.link{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 4px;text-decoration:underline}.link:hover{color:var(--text)}.panel{background:var(--panel-solid);border-radius:10px;padding:12px 14px}.menu{position:fixed;inset:0;display:flex;overflow-y:auto;background:#0f12168c;padding:16px}.menu-card{margin:auto;width:min(420px,100%);background:var(--panel-solid);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:14px}.menu-col{display:flex;flex-direction:column;gap:14px;min-width:0}.title{margin:0;font-size:44px;letter-spacing:3px;text-align:center;color:#7fb34d;font-weight:900}.tagline{margin:-6px 0 4px;text-align:center;color:var(--muted);font-size:14px}.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}.field input,.code,.chat-input{background:#ffffff14;border:1px solid rgba(255,255,255,.18);color:var(--text);border-radius:8px;padding:10px 12px;font-size:15px;font-family:inherit;outline:none}.field input:focus,.code:focus,.chat-input:focus{border-color:var(--accent)}.skins{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.skin{aspect-ratio:1;border-radius:8px;border:2px solid transparent;background:#ffffff0f;cursor:pointer;padding:2px;display:grid;place-items:center}.skin img{width:100%;height:100%;object-fit:contain}.skin.selected{border-color:var(--accent);background:#f2a33a26}.skin{position:relative}.skins.premium{grid-template-columns:repeat(10,1fr);gap:4px}.skin.locked img{opacity:.55}.skin.picked{border-color:#ffffff80}.skin-price{position:absolute;right:1px;bottom:1px;min-width:14px;padding:0 3px;border-radius:7px;background:#e8b923;color:#2a1f00;font-size:10px;font-weight:800;line-height:14px}.shop-head{display:flex;justify-content:space-between;align-items:center}.coins{display:inline-flex;align-items:center;gap:5px;color:#f2c230;font-weight:700}.coin{display:inline-block;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff2a8,#e8b923 55%,#a87b0c);border:1px solid #7a5a08}.coin.big{width:34px;height:34px;margin:4px 0;border-width:2px}.shop-buy{display:flex;justify-content:space-between;align-items:center;color:var(--text);font-size:14px}.shop-hint{font-size:12px}.account-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--text)}.account-card{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border-radius:10px;background:#ffffff0f}.account-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;color:var(--text);font-size:13px}.account-text .muted{font-size:12px}.provider-icon{width:22px;height:22px;flex:none}.account-card .provider-icon{width:28px;height:28px;padding:4px;border-radius:50%;background:#fff}.account-card .provider-icon.discord{color:#5865f2}.google-box{min-height:32px;color-scheme:normal}.btn.discord{display:inline-flex;align-items:center;gap:8px;background:#5865f2;border-color:#5865f2;color:#fff;text-decoration:none;border-radius:16px}.btn.discord .provider-icon{width:18px;height:18px}.btn.discord:hover{background:#4752c4}.servers{display:flex;flex-direction:column;gap:6px}.btn.server{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 14px}.server-play{font-size:18px;font-weight:700}.server-info{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;opacity:.8;max-width:100%}.server-name{white-space:nowrap}.server-map{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.server-map:before,.server-count:before{content:"·";margin-right:8px}.server-count{font-variant-numeric:tabular-nums}.row{display:flex;gap:8px}.row .btn{flex:1}.row .code{flex:1;min-width:0}.row.small{justify-content:center;gap:16px}.error{color:#ff8b7e;margin:0;font-size:14px;text-align:center}.help{font-size:13px;color:var(--muted);line-height:1.5}.help p{margin:0 0 8px}@media(max-height:560px)and (min-width:640px){.menu{padding:8px calc(8px + env(safe-area-inset-right)) 8px calc(8px + env(safe-area-inset-left))}.menu-card{width:min(820px,100%);flex-direction:row;gap:20px;padding:14px 18px}.menu-col{flex:1;gap:9px}.title{font-size:30px}.tagline{display:none}}.top-left{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}.top-buttons{display:flex;gap:6px}.code-panel{font-size:13px;padding:6px 10px;background:var(--panel)}.code-panel b{user-select:text;letter-spacing:1px}.phase{position:absolute;top:12px;left:50%;transform:translate(-50%);background:var(--panel);padding:7px 16px;border-radius:8px;font-size:16px;font-weight:600;white-space:nowrap}.phase.zombie{color:var(--zombie)}.feed{position:absolute;top:52px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:4px}.feed-line{background:var(--panel);padding:4px 10px;border-radius:6px;font-size:13px}.board{position:absolute;top:12px;right:12px;width:210px;text-align:right;font-size:13px;text-shadow:0 1px 2px rgba(0,0,0,.8)}.counts{font-size:20px;font-weight:700;margin-bottom:4px}.counts .zombies{color:var(--zombie)}.board-title{font-weight:700;text-decoration:underline;margin:4px 0}.board-row{display:flex;gap:6px;justify-content:flex-end;line-height:1.45}.board-row .rank{color:var(--muted)}.board-row .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}.board-row .score{min-width:40px;color:var(--muted)}.board-row.zombie .name{color:var(--zombie)}.board-row.me{font-weight:700}.board-row.me .name{text-decoration:underline}.score-panel{position:absolute;right:12px;bottom:12px;background:var(--panel);padding:8px 12px;border-radius:8px;text-align:right;font-size:14px;line-height:1.5}.slot-wrap{position:absolute;left:50%;bottom:14px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}.slot-row{display:flex;gap:10px;align-items:center;background:var(--panel);padding:8px 12px 8px 8px;border-radius:10px}.slot{width:64px;height:64px;border-radius:8px;border:2px solid rgba(255,255,255,.25);background:#00000040;position:relative;display:grid;place-items:center}.slot.filled{border-color:var(--accent)}.slot img{max-width:56px;max-height:56px}.slot .uses{position:absolute;right:4px;bottom:2px;font-size:12px;font-weight:700;text-shadow:0 1px 2px #000}.slot-name{font-weight:700;font-size:15px}.hints{display:flex;gap:10px;font-size:12px;color:var(--muted);margin-top:4px}.key{display:inline-block;min-width:18px;padding:0 5px;border-radius:4px;background:#ffffff29;color:var(--text);font-size:11px;font-weight:700;text-align:center;line-height:17px}.immunity{position:relative;align-self:stretch;height:16px;border-radius:8px;background:#00000073;overflow:hidden;font-size:11px;font-weight:700;display:grid;place-items:center}.immunity-fill{position:absolute;inset:0;background:#5cc8e8}.immunity span{position:relative;text-shadow:0 1px 2px #000}.ability{display:flex;gap:8px;align-items:center;font-size:14px;background:var(--panel)}.ability .cd{color:var(--muted)}.ability .ready{color:#8fcf86}.ability.red{border-left:3px solid #d8261c;margin-bottom:6px}.prompt{position:absolute;left:50%;bottom:110px;transform:translate(-50%);background:var(--panel);padding:5px 12px;border-radius:6px;font-size:14px;font-weight:600}.center-banner{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);text-align:center;animation:fade 3s ease forwards;text-shadow:0 2px 6px rgba(0,0,0,.8)}.center-banner .big-text{font-size:40px;font-weight:900;letter-spacing:1px}.center-banner .sub-text{font-size:17px;margin-top:6px}.center-banner.zombie .big-text{color:var(--zombie)}@keyframes fade{0%{opacity:0}8%{opacity:1}80%{opacity:1}to{opacity:0}}.round-end{position:absolute;top:90px;left:50%;transform:translate(-50%);min-width:360px}.round-title{font-size:26px;font-weight:900;text-align:center;margin-bottom:10px}.round-title.zombie{color:var(--zombie)}.round-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;font-size:14px}.col-title{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}.col-row{display:flex;justify-content:space-between;gap:10px}.muted{color:var(--muted)}.chat{position:absolute;left:12px;bottom:12px;width:330px;background:var(--panel);border-radius:10px;font-size:13px;overflow:hidden}.chat-head{display:flex;justify-content:space-between;align-items:center;padding:5px 10px;background:#00000040;font-weight:700;font-size:12px}.chat-lines{max-height:150px;overflow-y:auto;padding:6px 10px;line-height:1.4}.chat-line{word-wrap:break-word}.chat-line .chat-name{font-weight:700;color:#8fd0ff}.chat-line.zombie .chat-name{color:var(--zombie)}.chat-line.sys{color:#f2d66b}.chat-line.deny{color:#ff8b7e}.chat-input{width:calc(100% - 12px);margin:0 6px 6px;padding:7px 10px;font-size:13px}.overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:#00000059;padding:16px}.esc{display:flex;flex-direction:column;gap:10px;width:240px}.store{width:min(720px,100%);max-height:90vh;overflow-y:auto;overflow-x:hidden;background:#fff;color:#1d2228;border-radius:12px;padding:16px 18px}.store-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}.store-head h2{margin:0;font-size:20px;flex:1}.store-score{font-size:15px}.close{background:none;border:none;font-size:18px;cursor:pointer;color:inherit;padding:2px 8px}.store-note{margin:0 0 8px;color:#69737d;font-size:13px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px}.card{border-radius:10px;padding:10px 8px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;font-family:inherit;color:#1d2228}.card img{width:auto;height:auto;max-width:90%;max-height:40px;margin:4px 0}.card.ok{background:var(--ok);border:2px solid var(--ok-edge)}.card.ok:hover{background:#cdebc8}.card.no{background:var(--no);border:2px solid var(--no-edge);cursor:default;opacity:.85}.card-name{font-weight:700;font-size:14px}.card-price{font-weight:700;font-size:13px;color:#a06400}.card-desc{font-size:11px;color:#5d6670;line-height:1.3}.settings{width:min(420px,100%);display:flex;flex-direction:column;gap:12px}.settings h2{color:var(--text)}.slider,.check{display:flex;align-items:center;gap:12px;font-size:14px}.slider span{width:120px}.slider input{flex:1}.binds{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}.bind{display:flex;justify-content:space-between;align-items:center;font-size:13px}.frame-guide{position:fixed;top:0;left:50%;height:100vh;aspect-ratio:9 / 16;transform:translate(-50%);box-shadow:0 0 0 100vmax #0000008c;outline:2px dashed rgba(255,255,255,.55);pointer-events:none;z-index:4}.capture-bar{position:fixed;left:50%;bottom:14px;transform:translate(-50%);z-index:6;display:flex;align-items:center;gap:12px;font-size:13px;white-space:nowrap;padding:8px 12px;max-width:calc(100vw - 32px);overflow:hidden}.capture-tag{font-weight:800;letter-spacing:1px;color:#ff6b5a}.capture-tag.cam{color:#7fb34d}.capture-keys{display:flex;flex-direction:column;gap:4px;font-size:13px;border-top:1px solid rgba(255,255,255,.1);padding-top:10px}.debug{position:absolute;top:90px;left:12px;background:#0009;padding:8px 10px;border-radius:6px;font:12px/1.5 ui-monospace,Consolas,monospace}@media(max-width:760px){.board{width:150px;font-size:11px}.counts{font-size:15px}.chat{width:220px}.phase{font-size:13px;top:54px}.feed{top:92px}.slot-info .hints{display:none}}.minimap{position:absolute;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:var(--panel-solid)}.minimap canvas{display:block;width:100%;height:100%}.minimap.small{right:12px;bottom:80px;width:176px}.minimap.big{left:50%;top:50%;transform:translate(-50%,-50%);width:min(660px,88vw,calc(80vh * var(--aspect)));opacity:.94}.minimap-key{position:absolute;left:4px;top:4px;background:#111418b3}@media(max-width:760px){.minimap.small{width:132px;bottom:72px}}@media(max-width:480px),(max-height:500px){.minimap.small{display:none}}.touch{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-text-size-adjust:100%}.touch #stage{touch-action:none}.touch-zone{position:fixed;top:0;bottom:0;touch-action:none}.touch-zone.move{left:0;width:50%}.touch-zone.aim{right:0;width:50%}.stick{position:fixed;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:#ffffff14;display:grid;place-items:center}.stick.idle{opacity:.45;top:calc(100% - 96px - env(safe-area-inset-bottom))}.move .stick.idle{left:calc(96px + env(safe-area-inset-left))}.aim .stick.idle{left:calc(100% - 96px - env(safe-area-inset-right))}.knob{width:48px;height:48px;border-radius:50%;background:#ffffff8c}.aim .knob{background:#f2a33abf}.pads{position:fixed;right:calc(12px + env(safe-area-inset-right));bottom:calc(166px + env(safe-area-inset-bottom));display:flex;gap:8px}.pad{min-width:58px;height:42px;padding:0 10px;border-radius:21px;border:1px solid rgba(255,255,255,.3);background:#11141899;color:var(--text);font-size:13px;font-weight:700;touch-action:none}.pad.hot{background:var(--accent);border-color:var(--accent);color:#1b1f24}.rotate-hint{display:none}.touch .top-left{top:calc(8px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left))}.touch .board{top:calc(8px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));width:140px;font-size:11px}.touch .counts{font-size:14px}.touch .board-title,.touch .minimap.small,.touch .hints,.touch .chat-head{display:none}.touch .phase{top:calc(8px + env(safe-area-inset-top));font-size:13px;padding:5px 12px}.touch .feed{top:calc(44px + env(safe-area-inset-top))}.touch .feed-line{font-size:11px}.touch .score-panel{left:auto;right:calc(8px + env(safe-area-inset-right));bottom:auto;top:calc(116px + env(safe-area-inset-top));padding:4px 8px;font-size:11px;line-height:1.35;background:transparent;text-shadow:0 1px 2px rgba(0,0,0,.8)}.touch .slot-wrap{bottom:calc(8px + env(safe-area-inset-bottom))}.touch .slot-row{padding:4px 10px 4px 4px;gap:8px}.touch .slot{width:44px;height:44px}.touch .slot img{max-width:38px;max-height:38px}.touch .slot-name{font-size:13px}.touch .ability{font-size:12px;padding:6px 10px}.touch .ability .key{display:none}.touch .prompt{bottom:calc(70px + env(safe-area-inset-bottom));font-size:13px}.touch .chat{top:calc(48px + env(safe-area-inset-top));bottom:auto;left:calc(8px + env(safe-area-inset-left));width:230px;background:transparent;font-size:11px;text-shadow:0 1px 2px rgba(0,0,0,.9)}.touch .chat-lines{max-height:58px;padding:0 6px;border-radius:6px;background:#11141873;pointer-events:none}.touch .chat:not(.open) .chat-input{position:absolute;opacity:0;width:1px;height:1px;padding:0;border:0;margin:0}.touch .chat.open{background:var(--panel-solid)}.touch .chat-input{font-size:16px}.touch .center-banner .big-text{font-size:26px}.touch .center-banner .sub-text{font-size:13px}.touch .round-end{top:50px;min-width:0;width:min(360px,calc(100vw - 32px));padding:8px 10px}.touch .round-title{font-size:18px;margin-bottom:4px}.touch .round-cols{font-size:12px}.touch .store{max-height:calc(100dvh - 24px);padding:10px 12px}.touch .cards{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}.touch .card-desc,.touch .debug{display:none}@media(orientation:portrait){.touch .rotate-hint{display:grid;place-items:center;position:fixed;inset:0;z-index:20;padding:24px;text-align:center;background:#1b1f24;font-size:20px;font-weight:700;pointer-events:auto}}
