:root{--bg:#05060f;--panel:#0b0e1fdd;--line:#1a2140;--text:#d8e6ff;--dim:#6b7aa8;--cyan:#00f0ff;--pink:#ff3ec8;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--hud:44px}*{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%}html,body{height:100%;overscroll-behavior:none}body{position:fixed;inset:0;width:100%;background:var(--bg);color:var(--text);overflow:hidden;font-family:SF Mono,SFMono-Regular,ui-monospace,Menlo,Consolas,monospace;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}#stage{position:fixed;inset:0;padding:calc(var(--hud) + var(--sat) + 6px) calc(8px + var(--sar)) calc(8px + var(--sab)) calc(8px + var(--sal))}#arena{width:100%;height:100%;display:flex;align-items:center;justify-content:center}canvas#game{image-rendering:pixelated;background:#070917;box-shadow:0 0 60px #00f0ff14,inset 0 0 120px #000;border:1px solid var(--line);border-radius:6px}#hud{position:fixed;top:0;left:0;right:0;height:calc(var(--hud) + var(--sat));padding:var(--sat) calc(12px + var(--sar)) 0 calc(12px + var(--sal));display:flex;align-items:center;gap:10px;background:linear-gradient(#0b0e1f,#0b0e1fcc);border-bottom:1px solid var(--line);z-index:5}#logo{font-weight:700;letter-spacing:.22em;font-size:13px;color:var(--cyan);text-shadow:0 0 12px var(--cyan);white-space:nowrap}#chips{display:flex;gap:6px;flex:1;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}#chips::-webkit-scrollbar{display:none}.chip{display:flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid var(--line);border-radius:20px;font-size:11px;white-space:nowrap;background:#070917}.chip .dot{width:9px;height:9px;border-radius:2px;flex:none}.chip.me{border-color:#3a4a7f}.chip.dead{opacity:.38}.chip .sc{color:var(--dim)}#status{font-size:10px;color:var(--dim);white-space:nowrap;display:flex;align-items:center;gap:6px}#statdot{width:8px;height:8px;border-radius:50%;background:#f43;box-shadow:0 0 8px #f43;flex:none}#statdot.on{background:#2f5;box-shadow:0 0 8px #2f5}button{font-family:inherit;font-size:12px;letter-spacing:.12em;color:var(--cyan);background:#0a1428;border:1px solid #14406a;border-radius:6px;padding:10px 18px;cursor:pointer;text-transform:uppercase;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:active{transform:translateY(1px)}button:hover:not(:disabled){background:#10305a;box-shadow:0 0 14px #00f0ff44}button:disabled{opacity:.35;cursor:default}button.big{font-size:15px;padding:14px 34px}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;padding:calc(var(--sat) + 10px) calc(var(--sar) + 10px) calc(var(--sab) + 10px) calc(var(--sal) + 10px);background:#05060fb8;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px 28px;display:flex;flex-direction:column;gap:16px;align-items:center;min-width:290px;max-width:100%;max-height:100%;overflow-y:auto;box-shadow:0 0 40px #00f0ff18}.title{font-size:30px;font-weight:700;letter-spacing:.3em;color:var(--cyan);text-shadow:0 0 18px var(--cyan),0 0 60px var(--cyan);padding-left:.3em}.title .p{color:var(--pink);text-shadow:0 0 18px var(--pink),0 0 60px var(--pink)}.sub{font-size:11px;color:var(--dim);letter-spacing:.18em;text-transform:uppercase}input#nick{font-family:inherit;font-size:16px;text-align:center;letter-spacing:.1em;color:var(--text);background:#070917;border:1px solid #22305c;border-radius:6px;padding:12px 14px;width:230px;outline:none}input#nick:focus{border-color:var(--cyan);box-shadow:0 0 12px #00f0ff33}#roster{display:flex;flex-direction:column;gap:6px;width:100%;max-height:38vh;overflow-y:auto}.rrow{display:flex;align-items:center;gap:10px;font-size:13px;padding:8px 10px;background:#070917;border:1px solid var(--line);border-radius:6px}.rrow .dot{width:12px;height:12px;border-radius:3px;flex:none}.rrow .hostb{margin-left:auto;font-size:9px;color:var(--pink);letter-spacing:.15em}.hint{font-size:10px;color:var(--dim);text-align:center;line-height:1.8}#bigmsg{font-size:min(44px,9vw);font-weight:700;letter-spacing:.2em;text-shadow:0 0 30px currentColor;text-align:center}#submsg{font-size:13px;color:var(--dim);letter-spacing:.15em;text-align:center}.hidden{display:none!important}#copybtn{font-size:10px;padding:6px 10px}#toast{position:fixed;bottom:calc(18px + var(--sab));left:50%;transform:translate(-50%);background:#0a1428;border:1px solid #14406a;max-width:90vw;color:var(--cyan);font-size:11px;padding:9px 16px;border-radius:20px;z-index:20;letter-spacing:.1em;opacity:0;transition:opacity .3s;pointer-events:none;text-align:center}#countnum{font-size:110px;font-weight:700;color:var(--cyan);text-shadow:0 0 40px var(--cyan);z-index:8;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}#tapzones{position:fixed;inset:0;z-index:7;display:flex;pointer-events:none}#tapzones div{flex:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(24px + var(--sab));font-size:12px;color:#6b7aa877;letter-spacing:.2em}@media(max-width:640px){.title{font-size:24px}#logo{display:none}}