:root{--ink:#fff;--panel:#10141cd1;--accent:#ff2d6f;font-family:system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);background:#9fd3ff;margin:0;overflow:hidden}canvas{display:block}#hud{pointer-events:none;text-shadow:0 1px 3px #0009;position:fixed;inset:0}#crosshair{width:22px;height:22px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#crosshair:before,#crosshair:after{content:"";background:#fff;position:absolute;box-shadow:0 0 2px #000c}#crosshair:before{width:2px;height:22px;top:0;left:10px}#crosshair:after{width:22px;height:2px;top:10px;left:0}#crosshair.hit{animation:.18s ease-out hit}@keyframes hit{0%{filter:drop-shadow(0 0 4px var(--accent));transform:translate(-50%,-50%)rotate(45deg)scale(1.4)}to{transform:translate(-50%,-50%)rotate(0)scale(1)}}.hud-top{gap:12px;display:flex;position:absolute;top:16px;left:50%;transform:translate(-50%)}.stat{background:var(--panel);text-align:center;font-variant-numeric:tabular-nums;border-radius:10px;min-width:96px;padding:6px 14px;font-size:24px;font-weight:700}.stat .label,.ammo .label{letter-spacing:.08em;text-transform:uppercase;opacity:.7;font-size:11px;font-weight:600;display:block}.stat.urgent{color:#ffd34d;animation:1s infinite pulse}@keyframes pulse{50%{transform:scale(1.06)}}.hud-bottom{align-items:center;gap:12px;display:flex;position:absolute;bottom:20px;right:20px}#paint-swatch{border:3px solid #fff;border-radius:50%;width:28px;height:28px;box-shadow:0 1px 4px #00000080}.ammo{background:var(--panel);font-variant-numeric:tabular-nums;border-radius:10px;padding:6px 14px;font-size:30px;font-weight:800}.ammo .label.inline{margin-left:4px;font-size:14px;display:inline}#reload-bar{visibility:hidden;background:#ffffff26;border-radius:2px;height:4px;margin-top:4px;overflow:hidden}#reload-bar.active{visibility:visible}#reload-bar div{background:#ffd34d;width:0;height:100%}#popups{position:absolute;top:44%;left:50%}.popup{white-space:nowrap;font-size:22px;font-weight:800;animation:.9s ease-out forwards rise;position:absolute;transform:translate(-50%)}.popup.bullseye{color:#ffd600;font-size:28px}.popup.inner{color:#ff6b6b}@keyframes rise{0%{opacity:1;translate:var(--dx) 0}to{opacity:0;translate:var(--dx) -70px}}#overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0a0e168c;place-items:center;padding:16px;display:grid;position:fixed;inset:0}#overlay[hidden]{display:none}.panel{background:var(--panel);text-align:center;border-radius:16px;width:100%;max-width:460px;padding:28px 32px;line-height:1.5}.panel h1{margin:0 0 8px}.panel .logo{width:min(320px,100%);height:auto}.panel .big{font-size:44px}#play{color:#fff;background:var(--accent);cursor:pointer;border:0;border-radius:999px;margin:18px 0 14px;padding:12px 36px;font-size:18px;font-weight:700}#play:disabled{opacity:.5;cursor:default}#play:not(:disabled):hover{filter:brightness(1.1)}.controls{opacity:.8;margin:0;padding:0;font-size:13px;list-style:none}kbd{background:#ffffff26;border-radius:4px;padding:0 6px;font:600 12px ui-monospace,monospace;display:inline-block}.viewer-ui{background:var(--panel);border-radius:12px;width:min(240px,100vw - 32px);padding:14px 16px;font-size:14px;line-height:1.6;position:fixed;top:16px;left:16px}.viewer-ui h1{margin:0 0 6px;font-size:18px}.viewer-ui label{display:block}.viewer-ui a{color:#9fd3ff}.viewer-ui .row{gap:6px;margin:4px 0;display:flex}.viewer-ui ul{font-variant-numeric:tabular-nums;margin:8px 0;padding:0;list-style:none}.viewer-ui li{opacity:.85;justify-content:space-between;display:flex}.swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:24px;height:24px}.swatch.on{border-color:#fff}.links{margin:12px 0 0;font-size:13px}.links a{color:#9fd3ff}.hud-left{flex-direction:column;gap:4px;font-size:13px;font-weight:600;display:flex;position:absolute;bottom:20px;left:20px}.hud-left span{background:var(--panel);opacity:.55;border-radius:8px;padding:3px 10px 3px 4px}.hud-left span.on{opacity:1;outline:2px solid var(--accent)}.hud-left kbd{margin-right:6px}#banner{text-align:center;opacity:0;pointer-events:none;width:100%;font-size:40px;font-weight:900;position:absolute;top:30%}#banner.show{animation:1.6s ease-out banner}@keyframes banner{0%{opacity:0;transform:scale(1.3)}15%{opacity:1;transform:scale(1)}80%{opacity:1}to{opacity:0}}#hud.dead:after{content:"";background:radial-gradient(#0000 40%,#ff2d6f59);position:absolute;inset:0}.online{margin:0 0 14px}.online .or{opacity:.7;text-transform:uppercase;letter-spacing:.08em;margin:0 0 8px;font-size:13px}.online .fields{gap:8px;display:flex}.online input{min-width:0;color:var(--ink);font:inherit;background:#00000040;border:2px solid #ffffff2e;border-radius:10px;flex:1;padding:10px 12px}.online input:focus{border-color:var(--accent);outline:none}button.secondary{color:#1b1530;cursor:pointer;background:#2dd4ff;border:0;border-radius:999px;margin-top:10px;padding:10px 28px;font-size:16px;font-weight:700}button.secondary:disabled{opacity:.5;cursor:default}#net-status{min-height:1.5em;margin:8px 0 0;font-size:14px}#net-status.error{color:#ff8fab}#waiting{text-align:center;width:100%;font-size:18px;font-weight:700;position:absolute;top:96px}#waiting[hidden]{display:none}#feed{text-align:right;margin:0;padding:0;font-size:14px;font-weight:600;list-style:none;position:absolute;top:16px;right:16px}#feed li{background:var(--panel);border-radius:8px;margin-bottom:4px;padding:3px 10px;animation:6s forwards feed}#feed li.me{outline:2px solid var(--accent)}@keyframes feed{0%,85%{opacity:1}to{opacity:0}}#scoreboard{background:var(--panel);border-radius:14px;width:min(460px,100vw - 32px);padding:16px 20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#scoreboard[hidden]{display:none}#scoreboard h2{margin:0 0 10px;font-size:18px}#scoreboard table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}#scoreboard th{text-transform:uppercase;letter-spacing:.08em;opacity:.7;text-align:right;font-size:11px}#scoreboard th:first-child,#scoreboard td:first-child{text-align:left}#scoreboard td{text-align:right;padding:4px 0;font-weight:600}#scoreboard tr.me td{color:#ffd34d}#scoreboard .swatch-dot{border-radius:50%;width:10px;height:10px;margin-right:8px;display:inline-block}#overlay{padding-top:max(16px, env(safe-area-inset-top));padding-bottom:max(16px, env(safe-area-inset-bottom));align-items:start;overflow-y:auto}.panel{margin:auto 0}.touch-hint{opacity:.85;font-size:14px;display:none}body.touch .touch-hint{display:block}body.touch .controls{display:none}@media (max-width:520px){.panel{padding:20px 18px}.online .fields{flex-direction:column}.panel .big{font-size:34px}}@media (max-height:500px){.panel{padding:14px 18px;line-height:1.35}.panel .logo{width:220px}#play{margin:10px 0 8px;padding:10px 30px}}@media (max-width:700px),(max-height:500px){.hud-top{top:max(8px, env(safe-area-inset-top));gap:6px}.stat{min-width:64px;padding:4px 8px;font-size:17px}.stat .label{font-size:9px}.ammo{padding:4px 10px;font-size:22px}#feed{font-size:12px;top:60px}#banner{font-size:28px}}body.touch .hud-left{display:none}body.touch .hud-bottom{top:64px;bottom:auto;right:max(12px, env(safe-area-inset-right))}body.touch #feed{top:120px}#touch{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:fixed;inset:0}#touch[hidden]{display:none}#look-zone{position:absolute;inset:0 0 0 40%}#stick-zone{position:absolute;inset:0 60% 0 0}#stick{pointer-events:none;opacity:0;background:#00000026;border:3px solid #ffffff59;border-radius:50%;width:120px;height:120px;margin:-60px 0 0 -60px;position:absolute;top:70%;left:18%}#stick.active{opacity:1}#stick-knob{background:#ffffffb3;border-radius:50%;width:52px;height:52px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tbtn{color:#fff;letter-spacing:.04em;touch-action:none;background:#10141c8c;border:3px solid #fff9;border-radius:50%;width:58px;height:58px;font:800 13px system-ui,sans-serif;position:absolute}.tbtn.down{background:#ff2d6fbf}.tbtn.fire{width:92px;height:92px;right:max(22px, env(safe-area-inset-right));bottom:max(26px, env(safe-area-inset-bottom));background:#ff2d6fcc;border-color:#fff;font-size:16px}#t-jump{right:calc(max(22px, env(safe-area-inset-right)) + 104px);bottom:max(22px, env(safe-area-inset-bottom))}#t-reload{right:calc(max(22px, env(safe-area-inset-right)) + 96px);bottom:calc(max(22px, env(safe-area-inset-bottom)) + 76px)}#t-weapon{right:calc(max(22px, env(safe-area-inset-right)) + 18px);bottom:calc(max(22px, env(safe-area-inset-bottom)) + 108px)}.tbtn.small{width:44px;height:44px;left:max(12px, env(safe-area-inset-left));top:max(12px, env(safe-area-inset-top));font-size:14px}#rotate-hint{text-align:center;background:var(--panel);pointer-events:none;padding:12px;font-size:20px;font-weight:800;display:none;position:fixed;inset:auto 0 40%}@media (orientation:portrait){body.touch.playing #rotate-hint{display:block}}