@import"https://fonts.googleapis.com/css2?family=Bungee&family=Chakra+Petch:wght@400;600;700&display=swap";:root{--ink: #092231;--text: #e9f8ff;--panel: rgba(11, 42, 58, .82);--line: rgba(122, 235, 255, .5);--accent: #ff9f1c;--accent-strong: #ff6f00;--danger: #ff6b6b}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Chakra Petch,Trebuchet MS,sans-serif;color:var(--text);background:radial-gradient(circle at 20% 12%,#2db6e8 0%,transparent 38%),radial-gradient(circle at 88% 84%,#ffb154 0%,transparent 34%),linear-gradient(140deg,#13364d,#1c6b92 48%,#d17834)}.scene{position:relative;max-width:1040px;margin:0 auto;padding:28px 16px 32px}.aura{position:absolute;filter:blur(50px);opacity:.35;pointer-events:none}.aura-left{width:220px;height:220px;left:-70px;top:-30px;background:#00d0ff;animation:drift 5.6s ease-in-out infinite}.aura-right{width:250px;height:250px;right:-90px;bottom:8px;background:#ff8b2b;animation:drift 6.6s ease-in-out infinite reverse}@keyframes drift{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-14px) scale(1.06)}}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px}.topbar h1{margin:0;font-family:Bungee,Impact,sans-serif;letter-spacing:1px;color:#fdf2da;font-size:clamp(2rem,6vw,3.1rem)}.pill{margin:0;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#114761b8;font-weight:700}.pill.disconnected{background:#8e242cbf;border-color:#ff7b7bb3}.error{margin:16px 0;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,139,139,.6);background:#7a1322a6;color:#ffe8e8}.panel-stack{margin-top:14px}.card{position:relative;border:1px solid var(--line);background:var(--panel);border-radius:18px;box-shadow:0 20px 38px #08142459;padding:20px}.card h2{margin:0 0 8px;font-size:1.6rem}.card p{margin:0 0 14px;line-height:1.35}.button-row{display:flex;gap:10px;flex-wrap:wrap}.join-row{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}input{border:1px solid rgba(120,223,245,.7);background:#05182485;color:var(--text);border-radius:10px;padding:10px 12px;min-width:180px;font-size:1rem;letter-spacing:1px}button{font:inherit}.button{border:1px solid rgba(120,223,245,.8);background:#0a354adb;color:var(--text);padding:10px 16px;border-radius:10px;cursor:pointer;font-weight:700}.button:hover{transform:translateY(-1px)}.button:disabled{cursor:not-allowed;opacity:.65}.button-primary{border-color:#ffc264f2;background:linear-gradient(160deg,var(--accent),var(--accent-strong));color:#1f1200}.code{font-family:Bungee,Impact,sans-serif;font-size:clamp(2rem,7vw,3.2rem);letter-spacing:4px;color:#ffdf99}.hud-row{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px}.score{margin:0;font-family:Bungee,Impact,sans-serif;font-size:clamp(1.4rem,5vw,2.2rem);letter-spacing:1px}.phase{margin:0;font-weight:700;font-size:1rem}canvas{width:100%;height:auto;border-radius:14px;border:1px solid rgba(122,235,255,.35);background:#102439}.controls{margin:10px 0 14px;color:#d0ebff;font-weight:600}.overlay{position:absolute;top:98px;right:34px;bottom:98px;left:34px;border-radius:14px;background:#071826e0;border:1px solid rgba(122,235,255,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px}.overlay h3{margin:0;font-size:clamp(1.5rem,4vw,2.1rem)}.hidden{display:none}@media(max-width:720px){.scene{padding:16px 10px 20px}.card{padding:14px}.overlay{top:74px;right:12px;bottom:86px;left:12px}}