@import"https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@700;900&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0a0a0f;--surface: #111118;--border: #2a2a3a;--accent: #00cfff;--accent2: #ff8800;--danger: #ff3333;--success: #44ee88;--text: #e0e0e8;--muted: #555566;--font-mono: "Share Tech Mono", "Courier New", monospace;--font-head: "Orbitron", monospace}body{background:var(--bg);color:var(--text);font-family:var(--font-mono);min-height:100vh;margin:0;overflow-x:hidden}.screen{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.btn{display:inline-block;padding:10px 24px;border:2px solid var(--border);background:transparent;color:var(--text);font-family:var(--font-mono);font-size:14px;cursor:pointer;letter-spacing:1px;transition:all .15s;text-transform:uppercase}.btn:hover{border-color:var(--accent);color:var(--accent)}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{border-color:var(--accent);color:var(--accent)}.btn-primary:hover{background:var(--accent);color:#000}.btn-secondary{border-color:var(--accent2);color:var(--accent2)}.btn-secondary:hover{background:var(--accent2);color:#000}.btn-danger{border-color:var(--danger);color:var(--danger)}.btn-danger:hover{background:var(--danger);color:#fff}.btn-outline{border-color:var(--muted);color:var(--muted)}.btn-outline:hover{border-color:var(--text);color:var(--text)}.btn-small{padding:6px 14px;font-size:12px}.btn-group{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.title-wrapper{display:flex;flex-direction:column;align-items:center;gap:32px;max-width:480px;width:100%}.game-title{font-family:var(--font-head);font-size:52px;font-weight:900;text-align:center;line-height:1.1;color:var(--accent);text-shadow:0 0 30px rgba(0,207,255,.6),0 0 60px rgba(0,207,255,.2);letter-spacing:4px}.game-title span{color:var(--accent2);text-shadow:0 0 30px rgba(255,136,0,.6)}.mode-title{font-family:var(--font-head);font-size:36px;letter-spacing:4px;color:var(--accent)}.title-form{display:flex;flex-direction:column;gap:16px;width:100%;align-items:center}.title-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;width:100%;max-width:280px}.title-form input,.join-row input,.room-wrapper input{background:var(--surface);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:16px;padding:10px 12px;outline:none;width:100%;transition:border-color .2s}.title-form input:focus,.join-row input:focus,.room-wrapper input:focus{border-color:var(--accent)}.controls-help{background:var(--surface);border:1px solid var(--border);padding:16px 24px;width:100%}.controls-help h3{font-size:11px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;margin-bottom:10px}.keytable{width:100%;border-collapse:collapse;font-size:13px}.keytable td{padding:4px 8px}.keytable td:first-child{color:var(--accent);font-weight:700;white-space:nowrap;width:80px}.ws-status{font-size:11px;color:var(--muted);letter-spacing:1px}.room-wrapper,.practice-wrapper{display:flex;flex-direction:column;gap:20px;max-width:780px;width:100%}.room-wrapper h2,.practice-wrapper h2{font-family:var(--font-head);color:var(--accent);letter-spacing:3px;text-align:center}.room-actions{display:flex;flex-direction:column;gap:12px}.join-row{display:flex;gap:8px}.join-row input{flex:1;text-transform:uppercase}.room-id-box{background:var(--surface);border:1px solid var(--border);padding:12px 16px;display:flex;align-items:center;gap:12px;font-size:15px}.room-id-box strong{color:var(--accent);font-size:20px;letter-spacing:3px}.player-list{padding:8px 0;font-size:14px;color:var(--success)}.player-list div:before{content:"▸ "}.room-status{font-size:12px;color:var(--muted)}.room-btns{display:flex;gap:10px;flex-wrap:wrap}.practice-categories{display:flex;flex-direction:column;gap:18px}.practice-section{background:var(--surface);border:1px solid var(--border);padding:16px}.practice-section h3{margin-bottom:12px;font-size:12px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}.practice-grid{justify-content:flex-start}.game-wrapper{width:100%;max-width:1000px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px}.game-topbar{display:flex;gap:10px;width:100%;max-width:1000px;justify-content:flex-end}.canvas-container{position:relative;display:flex;justify-content:center;width:100%;max-width:1000px;overflow:hidden}#game-canvas{display:block;image-rendering:pixelated;max-width:100%;height:auto}.countdown-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:96px;font-weight:900;color:var(--accent);background:#0000008c;text-shadow:0 0 40px var(--accent);pointer-events:none;animation:countdownPulse .3s ease}@keyframes countdownPulse{0%{transform:scale(1.4);opacity:0}to{transform:scale(1);opacity:1}}.result-wrapper{display:flex;flex-direction:column;align-items:center;gap:28px;max-width:400px;width:100%;text-align:center}.result-label{font-family:var(--font-head);font-size:44px;font-weight:900;letter-spacing:4px;animation:fadeInUp .4s ease}@keyframes fadeInUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.result-stats{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--border);padding:20px 32px;font-size:18px;min-width:240px}.result-stats p{color:var(--text)}.result-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}body:after{content:"";position:fixed;inset:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);pointer-events:none;z-index:9999}@media (max-width: 700px){.game-title{font-size:40px}.btn{width:100%}.practice-grid{justify-content:center}}