:root{--bg:#1b1f2a;--panel:#262c3b;--line:#3a4258;--text:#f4f6fb;--muted:#9aa3b8;--accent:#ffb000;--danger:#ff5a5f;--radius:14px;--sat:env(safe-area-inset-top);--sar:env(safe-area-inset-right);--sab:env(safe-area-inset-bottom);--sal:env(safe-area-inset-left)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);height:100%;color:var(--text);overscroll-behavior:none;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:fixed;inset:0;overflow:hidden}#app{height:100dvh;position:fixed;inset:0}#scene{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}#ui{pointer-events:none;position:absolute;inset:0}#ui>*{pointer-events:auto}[hidden]{display:none!important}.screen{padding:calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal));flex-direction:column;gap:14px;display:flex;position:absolute;inset:0;overflow-y:auto}.home{text-align:center;background:#1b1f2ad1;justify-content:safe center;align-items:center}.home>*{width:min(420px,100%)}.lobby{background:#1b1f2adb;gap:0;padding-bottom:0;overflow:hidden}.lobby>*{flex:none}.lobby>.lobby-head{margin-bottom:12px}.logo{letter-spacing:1px;white-space:nowrap;margin:0 0 8px;font-size:clamp(28px,9vw,56px);font-weight:900}.logo span{color:var(--accent)}.field{text-align:left;color:var(--muted);flex-direction:column;gap:6px;font-size:14px;display:flex}input{font:inherit;border-radius:var(--radius);border:2px solid var(--line);min-height:52px;color:var(--text);background:#11141c;outline:none;padding:12px 16px;font-size:18px}input:focus{border-color:var(--accent)}.btn{font:inherit;border-radius:var(--radius);background:var(--line);min-height:52px;color:var(--text);cursor:pointer;touch-action:manipulation;border:0;padding:0 20px;font-size:17px;font-weight:700}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:var(--accent);color:#1b1f2a}.btn.ghost{border:2px solid var(--line);background:0 0}.btn.big{width:100%;min-height:60px;font-size:19px}.or{color:var(--muted);font-size:14px}.step{flex-direction:column;gap:12px;display:flex}.join-row{gap:10px;display:flex}.back{min-height:48px;color:var(--muted);border:0}.join-row input{letter-spacing:6px;text-align:center;text-transform:uppercase;flex:1;min-width:0;font-weight:800}.error{color:var(--danger);min-height:1.2em;margin:0}.head-actions{flex:none;gap:6px;display:flex}.head-actions .btn{white-space:nowrap;min-height:48px;padding:0 10px;font-size:15px}.lobby-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.code-box{flex-direction:column;display:flex}.code-box .label{color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-size:12px}.code-box .code{letter-spacing:4px;color:var(--accent);font-size:clamp(26px,8vw,34px);font-weight:900}.lobby-body{overscroll-behavior:contain;grid-template-columns:1fr;align-content:start;gap:12px;min-height:0;padding-bottom:12px;display:grid;overflow-y:auto;flex:auto!important}@media (min-width:700px){.lobby-body{grid-template-columns:1fr 1.3fr 1fr}}.panel{background:var(--panel);border-radius:var(--radius);padding:12px 14px}.panel h2{color:var(--muted);justify-content:space-between;margin:0 0 10px;font-size:15px;font-weight:700;display:flex}.players ul{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.players li{align-items:center;gap:8px;font-size:16px;display:flex}.players li.away{opacity:.5}.tag{background:var(--line);border-radius:99px;padding:2px 8px;font-size:12px}.tag.host{background:var(--accent);color:#1b1f2a}.avatar-grid{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.avatar-btn{aspect-ratio:1;min-height:48px;color:var(--muted);cursor:pointer;background:#11141c;border:3px solid #0000;border-radius:12px;padding:0;font-size:16px;font-weight:800;overflow:hidden}.avatar-btn img{object-fit:cover;width:100%;height:100%;display:block}.avatar-btn.selected{border-color:var(--accent)}.setting{justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;display:flex}.stepper{align-items:center;gap:8px;display:flex}.stepper .btn{min-width:48px;min-height:48px;padding:0}.stepper output{text-align:center;min-width:28px;font-size:20px;font-weight:800}.segmented{gap:6px;display:flex}.segmented .btn{min-height:48px;padding:0 12px;font-size:15px}.segmented .btn.active{background:var(--accent);color:#1b1f2a}.segmented .btn.active:disabled{opacity:1}.host-note{color:var(--muted);margin:0;font-size:13px}.lobby-foot{padding:10px 16px calc(10px + var(--sab));border-top:1px solid var(--line);background:#1b1f2a;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 -16px;display:flex}.lobby-foot .hint{text-align:center;color:var(--muted);flex:100%;order:-1;margin:0;font-size:14px}.lobby-foot .hint:empty{display:none}.turn-tip{text-align:center;border-radius:var(--radius);background:var(--panel);color:var(--muted);pointer-events:none;margin-bottom:8px;padding:6px 12px;font-size:13px;display:none}@media (pointer:coarse) and (orientation:landscape){.turn-tip{display:block}}.install-btn{min-height:48px}.install-btn:focus-visible,.install-sheet .btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.install-sheet{z-index:120;background:#0009;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.sheet-card{background:var(--panel);border-radius:var(--radius);flex-direction:column;gap:12px;width:min(420px,100%);max-height:100%;padding:18px 18px 16px;display:flex;overflow-y:auto}.sheet-card h2{margin:0;font-size:20px}.sheet-body{flex-direction:column;gap:8px;font-size:16px;line-height:1.4;display:flex}.sheet-body p,.sheet-body ol{margin:0}.sheet-body ol{padding-left:22px}.sheet-body .muted{color:var(--muted);font-size:14px}.lobby-foot .start{flex:1;min-width:140px}@media (max-width:699px) and (orientation:landscape) and (max-height:500px){.lobby-body{grid-template-columns:1fr 1fr}}.lobby-foot .start{min-width:170px}#ui>.game-hud{pointer-events:none;position:absolute;inset:0}.blackout{color:var(--muted);text-align:center;background:#05060a;justify-content:center;align-items:center;padding:24px;font-size:22px;font-weight:800;display:flex;position:absolute;inset:0}.top-pill{top:calc(8px + var(--sat));white-space:nowrap;background:#0000008c;border-radius:99px;align-items:center;gap:10px;padding:6px 14px;font-size:16px;font-weight:800;display:flex;position:absolute;left:50%;transform:translate(-50%)}.top-pill .timer{font-variant-numeric:tabular-nums;color:var(--accent)}.counts{top:calc(10px + var(--sat));left:calc(12px + var(--sal));background:#00000073;border-radius:10px;padding:4px 10px;font-size:13px;position:absolute}.banner{top:calc(56px + var(--sat));text-align:center;background:#0009;border-radius:12px;max-width:80%;padding:8px 16px;font-weight:800;position:absolute;left:50%;transform:translate(-50%)}.banner:empty{display:none}.results{pointer-events:auto;width:min(420px,90%);max-height:70%;position:absolute;top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%)}.results ul{margin:0;padding:0;list-style:none}.results li{border-bottom:1px solid var(--line);justify-content:space-between;gap:12px;padding:6px 0;display:flex}.results li.me{color:var(--accent)}.status-overlay{top:calc(10px + var(--sat));z-index:50;background:#000000bf;border-radius:99px;padding:8px 16px;font-weight:700;position:absolute;left:50%;transform:translate(-50%)}.toast{bottom:calc(20px + var(--sab));border:2px solid var(--line);z-index:60;text-align:center;background:#11141c;border-radius:12px;max-width:90%;padding:10px 16px;position:absolute;left:50%;transform:translate(-50%)}#ui>.toast{pointer-events:none}.fatal{z-index:100;text-align:center;background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;display:flex;position:absolute;inset:0}.rejoining{z-index:90;text-align:center;background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;display:flex;position:absolute;inset:0}.rejoining h2{margin:0}.rejoining .code{letter-spacing:.2em;color:var(--accent);margin:0;font-size:28px;font-weight:800}.rejoining .note{color:var(--muted);margin:0}.update-prompt{z-index:110;text-align:center;width:100%;font:inherit;color:var(--text);background:var(--bg);cursor:pointer;border:0;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:24px;display:flex;position:absolute;inset:0}.update-prompt h2{margin:0}.update-prompt p{color:var(--accent);margin:0;font-weight:700}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.status-overlay{align-items:center;gap:12px;display:flex}.status-overlay .cancel{min-height:36px;padding:0 12px;font-size:14px}#ui>.status-overlay{pointer-events:auto}#ui>.status-overlay.in-game{top:calc(52px + var(--sat))}#ui>.touch-layer{pointer-events:none;position:absolute;inset:0}.stick-base{opacity:0;background:#ffffff1f;border:2px solid #ffffff59;border-radius:50%;width:120px;height:120px;margin:-60px 0 0 -60px;transition:opacity .1s;position:absolute}.stick-base.active{opacity:1}.stick-knob{background:#ffffff8c;border-radius:50%;width:56px;height:56px;margin:-28px 0 0 -28px;position:absolute;top:50%;left:50%}.ctl-right{right:calc(18px + var(--sar));bottom:calc(18px + var(--sab));flex-direction:column;align-items:flex-end;gap:14px;display:flex;position:absolute}.ctl-btn{pointer-events:auto;color:#fff;width:72px;height:72px;font:inherit;touch-action:none;background:#00000059;border:2px solid #ffffff80;border-radius:50%;font-size:13px;font-weight:800}.ctl-btn.fire{background:#ff5a5f8c;width:88px;height:88px;font-size:15px}.ctl-btn.reload{letter-spacing:0;width:64px;height:64px;padding:0;font-size:11px}.ctl-btn.taunt{letter-spacing:0;background:#aa78ff8c;width:64px;height:64px;padding:0;font-size:11px}.crosshair{width:24px;height:24px;margin:-12px 0 0 -12px;transition:transform 80ms;position:absolute;top:50%;left:50%}.crosshair:before,.crosshair:after{content:"";background:#fff;position:absolute;box-shadow:0 0 0 1px #000000bf}.crosshair:before{width:2px;height:24px;top:0;left:11px}.crosshair:after{width:24px;height:2px;top:11px;left:0}.flash-hit .crosshair{transform:scale(1.4)}.flash-hit .crosshair:before,.flash-hit .crosshair:after{background:#ff9a3c}.game-hud.flash-penalty:after,.game-hud.flash-hurt:after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 120px #ff3c3c99}.game-hud.flash-hurt-strong:after{content:"";pointer-events:none;background:radial-gradient(#0000 35%,#ff00008c 100%);animation:.45s ease-out both hurt-pulse;position:absolute;inset:0;box-shadow:inset 0 0 90px 28px #ff1414f2}.game-hud.flash-hurt-strong{animation:.25s linear both hit-shake}#app:has(.game-hud.flash-hurt-strong) #scene{animation:.25s linear both hit-shake}@keyframes hurt-pulse{0%{opacity:1}60%{opacity:.85}to{opacity:0}}@keyframes hit-shake{0%,to{transform:translate(0)}15%{transform:translate(-6px,3px)}30%{transform:translate(5px,-4px)}45%{transform:translate(-4px,-3px)}60%{transform:translate(4px,3px)}80%{transform:translate(-2px,1px)}}@media (prefers-reduced-motion:reduce){.game-hud.flash-hurt-strong{animation:none}#app:has(.game-hud.flash-hurt-strong) #scene{animation:none}}.hit-marker{pointer-events:none;--arm:5px;--len:9px;width:28px;height:28px;margin:-14px 0 0 -14px;position:absolute}.hit-marker.kill{--arm:7px;--len:13px}.hit-marker i{left:calc(50% - 1.5px);top:calc(50% - var(--len) / 2);width:3px;height:var(--len);background:#fff;border-radius:1px;position:absolute;box-shadow:0 0 0 1px #000000d9}.hit-marker.kill i{background:#ff3b3b}.hit-marker i:first-child{transform:translate(calc(var(--arm) * -1), calc(var(--arm) * -1)) rotate(-45deg)}.hit-marker i:nth-child(2){transform:translate(var(--arm), calc(var(--arm) * -1)) rotate(45deg)}.hit-marker i:nth-child(3){transform:translate(calc(var(--arm) * -1), var(--arm)) rotate(45deg)}.hit-marker i:nth-child(4){transform:translate(var(--arm), var(--arm)) rotate(-45deg)}.hit-marker.live{animation:.25s ease-out .12s both marker-fade}@keyframes marker-fade{0%{opacity:1}to{opacity:0}}.hit-pop{pointer-events:none;letter-spacing:1px;color:#fff;text-shadow:-1px -1px #000,1px -1px #000,-1px 1px #000,1px 1px #000,0 2px 6px #0009;font-size:22px;font-weight:900;animation:.6s ease-out both hit-pop-float;position:absolute;transform:translate(-50%,-50%)}@keyframes hit-pop-float{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,calc(-50% - 40px))}}.elim-banner{top:calc(96px + var(--sat));pointer-events:none;text-align:center;overflow-wrap:anywhere;background:#c81e1ed9;border-radius:12px;max-width:80%;padding:8px 18px;font-weight:800;position:absolute;left:50%;transform:translate(-50%)}.elim-banner[hidden]{display:none}@media (prefers-reduced-motion:reduce){.hit-marker.live,.hit-pop{animation:none}}.vitals{left:calc(14px + var(--sal));bottom:calc(14px + var(--sab));pointer-events:none;background:#00000073;border-radius:12px;flex-direction:column;gap:6px;padding:8px 10px;display:flex;position:absolute}.hp-row{font-variant-numeric:tabular-nums;align-items:center;gap:8px;font-size:13px;font-weight:800;display:flex}.hp-bar{background:#fff3;border-radius:5px;width:140px;height:10px;overflow:hidden}.hp-fill{background:#4cd964;height:100%}.pips,.hearts{gap:6px;display:flex}.pip,.heart{box-sizing:border-box;border:2px solid #fff9;border-radius:50%;width:12px;height:12px}.pip.filled{background:#ffd23c;border-color:#ffd23c}.heart.filled{background:#ff5a5f;border-color:#ff5a5f}.reload-bar{background:#fff3;border-radius:2px;width:140px;height:4px;overflow:hidden}.reload-fill{background:#fff;width:0;height:100%}.rotate-prompt{z-index:90;text-align:center;background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;font-size:20px;font-weight:800;display:flex;position:absolute;inset:0}.rotate-icon{font-size:56px}.ctl-prop{right:calc(18px + 72px + 14px + var(--sar));bottom:calc(18px + var(--sab));grid-template-rows:repeat(2,64px);grid-template-columns:repeat(2,64px);align-items:end;gap:12px;display:grid;position:absolute}.ctl-prop .disguise{grid-area:1/1}.ctl-prop .unhide{grid-area:1/2}.ctl-prop .rotate{grid-area:2/1}.ctl-prop .lock{grid-area:2/2}.ctl-btn.prop{letter-spacing:0;width:64px;height:64px;padding:0;font-size:11px}.ctl-btn.prop.disguise{background:#50c8ff8c;font-size:10px}.ctl-btn.prop.lock.on{color:#222;background:#ffc400a6}.ctl-btn.wait{opacity:.4}#ui>.notice{color:#fff;pointer-events:none;background:#0009;border-radius:12px;padding:8px 14px;font:700 14px system-ui,-apple-system,sans-serif;position:absolute;top:22%;left:50%;transform:translate(-50%)}.vitals .chip{color:#fff;background:#00000073;border-radius:10px;margin:6px 6px 0 0;padding:2px 8px;font:700 12px system-ui,-apple-system,sans-serif;display:inline-block}.vitals .chip.locked{color:#222;background:#ffc400d9}.vitals .keys-hint{opacity:.75;margin-top:4px;font-size:11px}.game-hud .mute-btn{top:calc(8px + var(--sat));right:calc(12px + var(--sar));color:#fff;pointer-events:auto;touch-action:manipulation;background:#00000073;border:2px solid #ffffff80;border-radius:50%;width:48px;height:48px;padding:0;font-size:22px;position:absolute}.game-hud .mute-btn.on{background:#ff5a5f8c}.sound .setting{cursor:pointer;min-height:48px;margin-bottom:4px}.sound input{min-height:0;accent-color:var(--accent);background:0 0;border:0;padding:0}.sound input[type=checkbox]{flex:none;width:28px;height:28px}.sound input[type=range]{flex:1;max-width:170px;height:28px}.test-sound{width:100%;min-height:48px;margin:8px 0 4px;font-size:16px}
