:root{--sand: #e8c98a;--ink: #2b2333;--panel: rgba(34, 28, 46, .92);--accent: #ffd740;--accent2: #40c4ff;--good: #69f0ae;--bad: #ff5252;font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{margin:0;height:100%;width:100%;overflow:hidden;background:#1a1422;color:#fff;-webkit-user-select:none;user-select:none}#game{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.hidden{display:none!important}.screen{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:none}.panel{pointer-events:auto;background:var(--panel);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:3px solid rgba(255,255,255,.12);border-radius:22px;padding:30px 34px;width:min(440px,92vw);box-shadow:0 24px 60px #00000080;text-align:center;animation:pop .25s ease}@keyframes pop{0%{transform:translateY(14px) scale(.97);opacity:0}}.title{font-size:40px;letter-spacing:2px;margin:0 0 18px;line-height:.95;text-shadow:0 4px 0 rgba(0,0,0,.35)}.title span{display:block;font-size:22px;color:var(--accent);letter-spacing:8px}h2{margin:0 0 16px;font-size:28px}.field{display:block;text-align:left;margin-bottom:16px}.field span{font-size:13px;opacity:.7;text-transform:uppercase;letter-spacing:1px}input{width:100%;margin-top:6px;padding:13px 14px;font-size:17px;border-radius:12px;border:2px solid rgba(255,255,255,.18);background:#0000004d;color:#fff;outline:none}input:focus{border-color:var(--accent2)}.btn{cursor:pointer;border:none;border-radius:12px;padding:13px 18px;font-size:17px;font-weight:700;color:var(--ink);background:#d9d2e6;transition:transform .08s ease,filter .15s ease;width:100%}.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(2px)}.btn-primary{background:linear-gradient(180deg,#ffe17a,var(--accent));box-shadow:0 5px #b9952a}.btn-primary:active{box-shadow:0 1px #b9952a}.btn-small{width:auto;padding:9px 14px;font-size:14px}.or{position:relative;margin:16px 0;opacity:.6;font-size:13px}.or:before,.or:after{content:"";position:absolute;top:50%;width:40%;height:1px;background:#fff3}.or:before{left:0}.or:after{right:0}.join-row{display:flex;gap:10px}.join-row input{text-transform:uppercase;letter-spacing:6px;text-align:center;font-weight:700}.join-row .btn{width:auto;padding-inline:22px}.error{color:var(--bad);min-height:18px;margin:12px 0 0;font-weight:700}.controls-hint,.hint{margin-top:16px;font-size:12.5px;opacity:.7;line-height:1.5}.controls-hint b{color:var(--accent)}.link{background:none;border:none;color:#ffffffb3;cursor:pointer;margin-top:14px;font-size:14px}.link:hover{color:#fff}.code-box{background:#0000004d;border-radius:14px;padding:14px;margin-bottom:16px}.code-label{font-size:12px;opacity:.6;text-transform:uppercase;letter-spacing:2px}.code{font-size:42px;font-weight:800;letter-spacing:10px;color:var(--accent);margin:4px 0 12px}.player-list{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:8px}.player-list li{display:flex;align-items:center;gap:10px;background:#ffffff0f;border-radius:10px;padding:10px 12px;font-size:16px}.swatch{width:16px;height:16px;border-radius:4px;flex:none}.tag{margin-left:auto;font-size:11px;text-transform:uppercase;letter-spacing:1px;opacity:.8}.hud{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none}.hud-top{position:absolute;top:16px;left:50%;transform:translate(-50%);text-align:center}.timer{font-size:34px;font-weight:800;padding:4px 18px;background:#00000073;border-radius:12px;letter-spacing:2px}.timer.low{color:var(--bad);animation:blink 1s steps(2,start) infinite}@keyframes blink{50%{opacity:.45}}.leaderboard{position:absolute;top:14px;right:14px;width:196px;background:#0006;border-radius:12px;padding:8px 10px;font-size:13px}.leaderboard .lb-row{display:flex;align-items:center;gap:7px;padding:3px 0}.leaderboard .lb-row b{margin-left:auto}.leaderboard .me{color:var(--accent)}.hud-bottom{position:absolute;bottom:18px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:18px;background:#0000006b;padding:12px 20px;border-radius:16px}.gauge{display:flex;flex-direction:column;gap:4px}.gauge-label{font-size:11px;letter-spacing:1px;opacity:.75}.bar{width:160px;height:14px;background:#ffffff29;border-radius:8px;overflow:hidden}.fill{height:100%;width:100%;border-radius:8px;transition:width .1s linear}.fill.hp{background:linear-gradient(90deg,#ff5252,#69f0ae)}.fill.ammo{background:linear-gradient(90deg,#ffd740,#40c4ff)}.score-box{text-align:center;font-size:11px;letter-spacing:1px;opacity:.85}.score-box b{font-size:26px;color:var(--accent)}.powerups{position:absolute;bottom:92px;left:50%;transform:translate(-50%);display:flex;gap:8px}.pu-chip{font-size:12px;font-weight:700;padding:5px 10px;border-radius:20px;background:#00000080;border:2px solid currentColor}.scoreboard{position:fixed;top:0;right:0;bottom:0;left:0;z-index:15;display:flex;align-items:center;justify-content:center;background:#0a0710b3;pointer-events:none}.scoreboard table{border-collapse:collapse;background:var(--panel);border-radius:16px;overflow:hidden;min-width:460px;font-size:16px}.scoreboard th,.scoreboard td{padding:12px 18px;text-align:left}.scoreboard thead{background:#ffffff14;text-transform:uppercase;font-size:12px;letter-spacing:1px}.scoreboard tbody tr:nth-child(2n){background:#ffffff0a}.scoreboard td.num{text-align:right;font-variant-numeric:tabular-nums}.winner-banner{font-size:30px;font-weight:800;margin-bottom:18px;color:var(--accent);text-shadow:0 4px 0 rgba(0,0,0,.35)}.final-scores{text-align:left;margin:0 0 18px;padding-left:26px}.final-scores li{padding:7px 0;font-size:17px}.final-scores .swatch{display:inline-block;vertical-align:middle;margin-right:8px}.conn{position:fixed;top:12px;left:12px;z-index:30;font-size:12px;font-weight:700;padding:5px 11px;border-radius:20px;background:#00000080}.conn-good{color:var(--good)}.conn-bad{color:var(--bad)}.fx-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:12;pointer-events:none;overflow:hidden}.dmg{position:absolute;font-weight:800;font-size:22px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.7);transform:translate(-50%,-50%);animation:floatUp .85s ease-out forwards}.dmg.crit{color:var(--accent);font-size:28px}.dmg.heal{color:var(--good)}@keyframes floatUp{to{transform:translate(-50%,-160%);opacity:0}}html,body{touch-action:none}.tagline{margin:-8px 0 18px;font-size:14px;opacity:.8}.btn.big{font-size:20px;padding:16px}.btn.big small{font-weight:600;font-size:13px;opacity:.7}.btn-row{display:flex;gap:10px;margin-top:12px}.btn-row .btn{flex:1}#host-controls{display:flex;flex-direction:column;gap:10px}.btn:disabled{opacity:.4;cursor:not-allowed}.icon-btn{position:fixed;top:10px;right:12px;z-index:30;border:none;border-radius:10px;background:#00000080;color:#fff;font-size:18px;width:38px;height:38px;cursor:pointer}.icon-btn:hover{background:#000000b3}.loading{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#1a1422;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .4s ease}.loading.hidden{display:none!important}.loading-tank{position:relative;width:70px;height:50px;animation:rumble .25s linear infinite}.loading-body{position:absolute;bottom:0;width:70px;height:34px;border-radius:8px;background:var(--accent)}.loading-barrel{position:absolute;top:6px;left:50%;width:10px;height:30px;background:#2b2730;border-radius:3px}@keyframes rumble{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.loading-text{letter-spacing:2px;font-size:14px;opacity:.8;text-transform:uppercase}.modal,.reconnect{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;align-items:center;justify-content:center;background:#0a0710b3;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.modal.hidden,.reconnect.hidden{display:none!important}.howto-goal{text-align:left;opacity:.85;line-height:1.5}.howto-keys{width:100%;margin:14px 0;border-collapse:collapse}.howto-keys td{padding:7px 6px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08)}.howto-keys td:first-child{width:42%;color:var(--accent)}.howto-mobile{font-size:13px;opacity:.7;margin-bottom:16px}.reconnect-card{background:var(--panel);border-radius:16px;padding:28px 34px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}.spinner{width:34px;height:34px;border:4px solid rgba(255,255,255,.2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hitmarker{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1.4);font-size:30px;font-weight:900;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.8);opacity:0;pointer-events:none}.hitmarker.show{animation:hitmark .28s ease-out}@keyframes hitmark{0%{opacity:1;transform:translate(-50%,-50%) scale(.7)}to{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}#touch-controls{display:none}body.touch #touch-controls{display:block}body.touch .controls-hint{display:none}#joystick{position:absolute;left:24px;bottom:30px;width:130px;height:130px;border-radius:50%;background:#ffffff14;border:2px solid rgba(255,255,255,.18);pointer-events:auto;touch-action:none}#joy-knob{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#ffd740d9;box-shadow:0 4px 10px #0006}.touch-buttons{position:absolute;right:24px;bottom:30px;display:flex;gap:16px;align-items:flex-end;pointer-events:none}.touch-btn{pointer-events:auto;touch-action:none;border:none;border-radius:50%;color:var(--ink);font-weight:800;font-size:14px;box-shadow:0 5px #0000004d}.touch-btn.fire{width:96px;height:96px;background:linear-gradient(180deg,#ff7a7a,var(--bad));color:#fff}.touch-btn.dash{width:70px;height:70px;background:linear-gradient(180deg,#ffe17a,var(--accent))}.touch-btn:active{transform:translateY(3px);box-shadow:0 2px #0000004d}@media (max-width: 560px){.panel{padding:22px 20px;border-radius:18px}.title{font-size:32px}.leaderboard{width:142px;font-size:11px}.hud-bottom{gap:10px;padding:8px 12px;bottom:10px}.bar{width:92px}.timer{font-size:26px}.score-box b{font-size:20px}}