:root{color-scheme:dark;--cyan:#2ee7ff;--pink:#ff2b8a;--ink:#090611;--panel:rgba(10,8,25,.82)}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--ink);color:#f7f5ff;font-family:Inter,system-ui,sans-serif}#arena{position:fixed;inset:0}#arena:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 52%,transparent 35%,rgba(3,1,9,.72) 100%)}.hud{position:fixed;z-index:4;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:22px 28px;pointer-events:none}.brand{font-weight:800;font-size:25px;letter-spacing:-1px;line-height:.8;text-shadow:0 0 20px rgba(46,231,255,.4)}.brand span{color:var(--cyan)}.brand strong{color:var(--pink)}.brand small{display:block;margin-top:9px;font-size:8px;letter-spacing:3px;color:#aaa6be}.score{font:26px 'Press Start 2P',monospace;padding:9px 18px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(8,5,19,.62);box-shadow:0 8px 30px rgba(0,0,0,.25)}.score i{color:#746d8f;font-style:normal;margin:0 12px}.connection{justify-self:end;display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:11px;letter-spacing:1px;text-transform:uppercase;background:rgba(8,5,19,.58);border-radius:999px}#connection-dot{width:7px;height:7px;border-radius:50%;background:#d44;box-shadow:0 0 10px #d44}.connected #connection-dot{background:#42ef9b;box-shadow:0 0 10px #42ef9b}.game-message{position:fixed;z-index:3;top:105px;left:50%;transform:translateX(-50%);font:12px 'Press Start 2P',monospace;text-align:center;text-shadow:0 3px 12px #000;white-space:nowrap}.player-card{position:fixed;z-index:3;bottom:58px;display:flex;flex-direction:column;gap:5px;padding:12px 16px;border-radius:12px;background:var(--panel);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);min-width:160px}.player-card span{font-size:9px;letter-spacing:2px;color:#8b87a4}.player-card strong{font-size:13px}.player-card.left{left:24px;border-left:3px solid var(--cyan)}.player-card.right{right:24px;text-align:right;border-right:3px solid var(--pink)}.icon-button{position:fixed;z-index:6;right:27px;top:67px;width:40px;height:40px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:var(--panel);color:#fff;font-size:18px;cursor:pointer}dialog{width:min(470px,calc(100% - 32px));border:1px solid rgba(255,255,255,.18);border-radius:24px;padding:0;color:#fff;background:linear-gradient(145deg,rgba(21,14,44,.98),rgba(7,5,18,.98));box-shadow:0 30px 100px #000}dialog::backdrop{background:rgba(3,1,8,.72);backdrop-filter:blur(10px)}dialog form{padding:40px;display:grid;gap:20px}.dialog-brand{font-size:42px;font-weight:800;letter-spacing:-3px}.dialog-brand span{color:var(--pink)}dialog p{color:#aaa6be;line-height:1.6;margin:0;font-size:14px}label{display:grid;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#aaa6be}input{width:100%;padding:15px 16px;border-radius:11px;border:1px solid #38324c;background:#0b0917;color:#fff;font:600 16px Inter;outline:none}input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(46,231,255,.12)}button{font:700 12px Inter;letter-spacing:.3px}.primary{padding:16px;border:0;border-radius:11px;background:linear-gradient(90deg,var(--cyan),#67f1cf);color:#07101a;cursor:pointer}.error{color:#ff7cae!important;min-height:1.4em}.room-panel{position:fixed;z-index:7;right:25px;top:114px;width:210px;padding:18px;display:grid;gap:12px;border:1px solid rgba(255,255,255,.15);border-radius:16px;background:var(--panel);backdrop-filter:blur(18px);box-shadow:0 20px 50px rgba(0,0,0,.35)}.room-panel[hidden]{display:none}.room-panel div{display:flex;justify-content:space-between;align-items:center}.room-panel small{color:#8b87a4;font-size:9px;letter-spacing:1.5px}.room-panel button{padding:10px;border:1px solid #37314e;border-radius:9px;background:#151126;color:#fff;cursor:pointer}.touch-controls{display:none;position:fixed;z-index:5;bottom:105px;left:50%;transform:translateX(-50%);gap:12px}.touch-controls button{width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:var(--panel);color:#fff;font-size:22px;touch-action:none}footer{position:fixed;z-index:3;left:0;right:0;bottom:14px;text-align:center;color:#77728f;font-size:10px;letter-spacing:.6px;pointer-events:none}footer span{margin:0 8px;color:#3a3550}@media(pointer:coarse),(max-width:720px){.touch-controls{display:flex}.hud{padding:14px}.brand small,.connection span:last-child,footer{display:none}.score{font-size:18px}.player-card{bottom:20px;min-width:125px}.game-message{top:80px;font-size:9px}.icon-button{right:14px;top:57px}}