:root{--cyan:#00f0ff;--magenta:#ff2bd6;--bg:#05060f}*{box-sizing:border-box}html,body{overscroll-behavior:none;touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:var(--bg);color:#dff;-webkit-user-select:none;user-select:none;height:100%;margin:0;font-family:Segoe UI,system-ui,sans-serif;overflow:hidden}canvas#scene{width:100%;height:100%;display:block;position:fixed;inset:0}.hidden{display:none!important}.overlay{z-index:10;text-align:center;background:radial-gradient(circle at 50% 40%,#0a1432bf,#03030af2);flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex;position:fixed;inset:0}#click{cursor:pointer;background:#03030a99}h1{letter-spacing:.15em;color:var(--cyan);text-shadow:0 0 12px var(--cyan), 0 0 40px var(--cyan);margin:0;font-size:clamp(2rem,min(8vw,11vh),5.5rem);font-weight:900}h1 span{color:var(--magenta);text-shadow:0 0 12px var(--magenta), 0 0 40px var(--magenta)}h2{color:var(--cyan);text-shadow:0 0 14px var(--cyan);letter-spacing:.1em}.sub{opacity:.7;letter-spacing:.08em;margin:0 0 18px}.help{opacity:.5;margin-top:24px;font-size:.85rem}.panel{background:#050a19b3;border:1px solid #00f0ff66;border-radius:10px;flex-direction:column;align-items:center;gap:12px;min-width:320px;padding:26px 34px;display:flex;box-shadow:0 0 30px #00f0ff26,inset 0 0 30px #00f0ff0d}button,input{font:inherit;letter-spacing:.1em;border:2px solid var(--cyan);color:var(--cyan);text-transform:uppercase;background:0 0;border-radius:6px;width:100%;padding:12px 22px;font-weight:700}button{cursor:pointer;text-shadow:0 0 8px var(--cyan);transition:all .15s;box-shadow:0 0 12px #00f0ff59}button:hover{background:var(--cyan);color:#001018;text-shadow:none;box-shadow:0 0 25px var(--cyan)}button:disabled{opacity:.4;cursor:wait}button.small{width:auto;padding:8px 14px;font-size:.8rem}button.ghost{color:#99a;box-shadow:none;text-shadow:none;border-color:#667}#btn-join{border-color:var(--magenta);color:var(--magenta);text-shadow:0 0 8px var(--magenta);box-shadow:0 0 12px #ff2bd659}#btn-join:hover{background:var(--magenta);color:#180014;box-shadow:0 0 25px var(--magenta)}input{text-align:center;color:#fff;border-color:#556;outline:none;font-size:1.4rem}input:focus{border-color:var(--magenta);box-shadow:0 0 12px #ff2bd680}.or{opacity:.4;font-size:.8rem}.label{opacity:.6;letter-spacing:.2em;text-transform:uppercase;font-size:.8rem}#room-code{letter-spacing:.25em;color:#fff;text-shadow:0 0 14px var(--cyan);padding-left:.25em;font-family:ui-monospace,monospace;font-size:3.4rem;font-weight:900}#status{color:#ff6b8a;min-height:1.4em;margin:10px 0 0}#status.ok{color:#7dffb0}#hud{pointer-events:none;z-index:5;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:var(--cyan);box-shadow:0 0 6px var(--cyan);position:absolute}#crosshair:before{width:2px;height:22px;top:0;left:10px;-webkit-mask:linear-gradient(#000 0 7px,#0000 7px 15px,#000 15px);mask:linear-gradient(#000 0 7px,#0000 7px 15px,#000 15px)}#crosshair:after{width:22px;height:2px;top:10px;left:0;-webkit-mask:linear-gradient(90deg,#000 0 7px,#0000 7px 15px,#000 15px);mask:linear-gradient(90deg,#000 0 7px,#0000 7px 15px,#000 15px)}#hitmarker{opacity:0;border:3px solid #fff;width:30px;height:30px;transition:opacity .25s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(45deg);box-shadow:0 0 10px #fff}#hitmarker.on{opacity:1;transition:none}#damage{opacity:0;transition:opacity .4s;position:absolute;inset:0;box-shadow:inset 0 0 160px 40px #ff143ce6}#damage.on{opacity:1;transition:none}#scoreboard{letter-spacing:.15em;background:#05081499;border:1px solid #00f0ff59;border-radius:8px;align-items:baseline;gap:18px;padding:8px 24px;font-size:1.2rem;font-weight:800;display:flex;position:absolute;top:18px;left:50%;transform:translate(-50%)}#scoreboard b{font-size:2rem}#scoreboard .me{color:var(--cyan);text-shadow:0 0 10px var(--cyan)}#scoreboard .opp{color:var(--magenta);text-shadow:0 0 10px var(--magenta)}#roomtag{opacity:.55;letter-spacing:.1em;font-size:.85rem;position:absolute;top:18px;right:20px}#health{width:280px;position:absolute;bottom:28px;left:28px}#health .bar{border:2px solid var(--cyan);background:#00000080;border-radius:4px;height:16px;margin-top:6px;box-shadow:0 0 10px #00f0ff66}#hp-fill{background:linear-gradient(90deg, #00ffa6, var(--cyan));width:100%;height:100%;box-shadow:0 0 10px var(--cyan);transition:width .15s}#hp-fill.low{background:linear-gradient(90deg,#ff1744,#ff7a00);box-shadow:0 0 10px #ff1744}#message{letter-spacing:.15em;text-shadow:0 0 16px;opacity:0;white-space:nowrap;font-size:2rem;font-weight:900;transition:opacity .4s;position:absolute;top:22%;left:50%;transform:translate(-50%)}#message.on{opacity:1;transition:none}.touch-only,.tbtn,#stick{display:none}body.touch .touch-only{display:inline}body.touch .desktop-only,body.touch #roomtag{display:none}body.touch .tbtn{display:flex}body.touch #stick:not(.hidden){display:block}.tbtn{border:3px solid var(--magenta);color:var(--magenta);letter-spacing:.08em;pointer-events:auto;touch-action:none;background:#ff2bd61f;border-radius:50%;justify-content:center;align-items:center;font-size:.8rem;font-weight:800;position:absolute;box-shadow:0 0 14px #ff2bd680}#btn-fire{right:max(24px, env(safe-area-inset-right));width:104px;height:104px;bottom:36px}#btn-jump{border-color:var(--cyan);width:70px;height:70px;color:var(--cyan);background:#00f0ff1a;font-size:.65rem;bottom:30px;right:148px;box-shadow:0 0 14px #00f0ff80}.tbtn.down{background:#ffffff4d}#stick{background:#00f0ff14;border:2px solid #00f0ff99;border-radius:50%;width:120px;height:120px;margin:-60px 0 0 -60px;position:absolute}#knob{width:52px;height:52px;box-shadow:0 0 14px var(--cyan);background:#00f0ff80;border-radius:50%;margin:-26px 0 0 -26px;position:absolute;top:50%;left:50%}body.touch #health{width:150px;top:18px;bottom:auto;left:14px}body.touch #scoreboard{padding:4px 14px;font-size:.9rem;top:10px}body.touch #scoreboard b{font-size:1.4rem}body.touch .panel{width:min(92vw,340px);min-width:0;padding:18px}body.touch #room-code{font-size:2.6rem}body.touch #message{font-size:1.2rem;top:18%}@media (height<=520px){.overlay{justify-content:safe center;gap:4px;overflow-y:auto}h1{font-size:2rem}.sub{margin:0 0 6px;font-size:.8rem}.panel{gap:8px;padding:12px 20px}button,input{padding:8px 16px}input{font-size:1.1rem}.help{margin-top:6px;font-size:.75rem}#room-code{font-size:2rem!important}h2{margin:4px 0}}