@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;500;700&display=swap";:root{--color-bg: #06060f;--color-surface: #0d0d1a;--color-border: #1a1a3e;--color-accent: #00ffcc;--color-accent-dim: #00aa88;--color-health: #00ff66;--color-xp: #aa88ff;--color-danger: #ff4444;--color-text: #e0e0ff;--color-text-dim: #8080a0;--font-display: "Orbitron", monospace;--font-body: "Rajdhani", sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);overflow:hidden}#game-container{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0}#game-container canvas{display:block}.ui-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:10}.ui-overlay>*{pointer-events:auto}.menu-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:radial-gradient(ellipse at center,#0d0d2a,#06060f 70%);position:relative;overflow:hidden;padding:1rem;box-sizing:border-box}.menu-logo-container{display:flex;flex-direction:column;align-items:center;margin-bottom:.5rem}.menu-title-underline{width:120px;height:2px;background:linear-gradient(90deg,transparent,var(--color-accent),transparent);margin-bottom:.8rem}.menu-version{position:fixed;bottom:12px;left:12px;right:12px;font-family:var(--font-display);font-size:.5rem;color:var(--color-text-dim);letter-spacing:.2em;opacity:.4;text-align:center}.callsign-container{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin-bottom:1.5rem}.callsign-label{font-family:var(--font-display);font-size:.6rem;color:var(--color-text-dim);letter-spacing:.3em}.callsign-input{margin-bottom:0}.mech-select{display:flex;flex-direction:column;align-items:center;margin-bottom:1.5rem}.mech-select-label{font-family:var(--font-display);font-size:.6rem;color:var(--color-text-dim);letter-spacing:.3em;margin-bottom:.8rem}.mech-options{display:flex;gap:12px}.mech-card{--mech-color: #00ffcc;display:flex;flex-direction:column;align-items:center;padding:.6rem .5rem;width:80px;background:var(--color-surface);border:1px solid var(--color-border);cursor:pointer;transition:all .2s}.mech-card:hover{border-color:var(--mech-color);transform:translateY(-2px)}.mech-card.selected{border-color:var(--mech-color);box-shadow:0 0 20px color-mix(in srgb,var(--mech-color) 30%,transparent),inset 0 0 20px color-mix(in srgb,var(--mech-color) 10%,transparent)}.mech-preview{width:40px;height:40px;image-rendering:pixelated;margin-bottom:.4rem}.mech-name{font-family:var(--font-display);font-size:.55rem;color:var(--mech-color);letter-spacing:.1em}.mech-desc{font-family:var(--font-body);font-size:.6rem;color:var(--color-text-dim);margin-top:.2rem}.menu-screen:before{content:"";position:absolute;top:50%;left:50%;width:600px;height:600px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(0,255,204,.05) 0%,transparent 70%);pointer-events:none}.menu-title{font-family:var(--font-display);font-size:clamp(2rem,10vw,4rem);font-weight:900;color:var(--color-accent);text-shadow:0 0 40px rgba(0,255,204,.3),0 0 80px rgba(0,255,204,.1);letter-spacing:.15em;margin-bottom:.5rem}.menu-subtitle{font-family:var(--font-body);font-size:clamp(.65rem,2.5vw,1.2rem);color:var(--color-text-dim);margin-bottom:2rem;letter-spacing:.15em;text-transform:uppercase}.menu-input{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);font-family:var(--font-body);font-size:1.2rem;padding:.8rem 1.5rem;width:min(300px,90vw);text-align:center;margin-bottom:1.5rem;outline:none;transition:border-color .2s;box-sizing:border-box}.menu-input:focus{border-color:var(--color-accent);box-shadow:0 0 20px #00ffcc1a}.menu-button{font-family:var(--font-display);font-size:clamp(.85rem,2.5vw,1.1rem);font-weight:700;padding:.8rem 1.5rem;background:transparent;border:2px solid var(--color-accent);color:var(--color-accent);cursor:pointer;letter-spacing:.1em;transition:all .2s;text-transform:uppercase;white-space:nowrap}.menu-button:hover{background:#00ffcc1a;box-shadow:0 0 30px #0fc3;transform:scale(1.02)}.menu-mode-buttons{display:flex;gap:.75rem;margin-bottom:2rem;max-width:90vw;flex-wrap:wrap;justify-content:center}.solo-button{flex:1;border-color:#f80;color:#f80}.solo-button:hover{background:#ff88001a;box-shadow:0 0 30px #f803}.multi-button{flex:1;border-color:#0cf;color:#0cf}.multi-button:hover{background:#00ccff1a;box-shadow:0 0 30px #0cf3}.hud{position:fixed;bottom:20px;left:20px;right:20px;display:flex;align-items:flex-end;gap:12px;pointer-events:none}.hud-bars{display:flex;flex-direction:column;gap:6px;flex:1;max-width:400px;min-width:0}@media(max-width:500px){.hud{bottom:12px;left:10px;right:10px;gap:8px}.hud-bars{max-width:60%}.hud-stats{gap:10px}.hud-stat-value{font-size:1rem}}.hud-bar{height:20px;background:#0a0a1ecc;border:1px solid var(--color-border);position:relative;overflow:hidden}.hud-bar-fill{height:100%;transition:width .2s}.hud-bar-fill.health{background:linear-gradient(90deg,var(--color-health),#00cc44)}.hud-bar-fill.xp{background:linear-gradient(90deg,var(--color-xp),#cc66ff)}.hud-bar-label{position:absolute;top:0;left:8px;height:100%;display:flex;align-items:center;font-family:var(--font-display);font-size:.6rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);letter-spacing:.1em}.hud-stats{display:flex;gap:20px;font-family:var(--font-display);font-size:.8rem;color:var(--color-text-dim)}.hud-stat-value{color:var(--color-accent);font-size:1.2rem;font-weight:700}.hud-stat-label{font-family:var(--font-display);font-size:.6rem;color:var(--color-text-dim);letter-spacing:.1em}.timer-icon{margin-right:.3em;font-size:.9em}.level-up-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:level-up-appear .3s ease-out;overflow-y:auto;padding:16px 0}@keyframes level-up-appear{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.level-up-header{display:flex;flex-direction:column;align-items:center;margin-bottom:1rem}@media(min-width:700px){.level-up-header{margin-bottom:2rem}}.level-up-title{font-family:var(--font-display);font-size:2rem;color:var(--color-xp);text-shadow:0 0 30px rgba(170,136,255,.4),0 0 60px rgba(170,136,255,.2);letter-spacing:.25em;animation:title-pulse 2s ease-in-out infinite}@keyframes title-pulse{0%,to{text-shadow:0 0 30px rgba(170,136,255,.4)}50%{text-shadow:0 0 50px rgba(170,136,255,.6),0 0 80px rgba(170,136,255,.3)}}.level-up-level{font-family:var(--font-display);font-size:.7rem;color:var(--color-text-dim);letter-spacing:.3em;margin-top:.5rem}.level-up-options{display:flex;flex-direction:column;gap:12px;width:100%;max-width:700px;padding:0 16px;box-sizing:border-box}@media(min-width:700px){.level-up-options{flex-direction:row;justify-content:center;gap:20px;padding:0}}.level-up-card{--card-glow: #00ffcc;background:linear-gradient(180deg,#0d0d1af2,#06060ffa);border:1px solid var(--color-border);padding:1rem 1rem .8rem;width:auto;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);text-align:center;position:relative;overflow:hidden}@media(min-width:700px){.level-up-card{width:210px;padding:1.5rem 1.2rem 1.2rem}}.level-up-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--card-glow);opacity:.6}.level-up-card:hover{border-color:var(--card-glow);transform:translateY(-8px);box-shadow:0 12px 40px color-mix(in srgb,var(--card-glow) 25%,transparent)}.level-up-card:hover:before{opacity:1;height:3px;box-shadow:0 0 15px var(--card-glow)}.level-up-badge{display:inline-block;font-family:var(--font-display);font-size:.5rem;letter-spacing:.2em;padding:.2rem .6rem;margin-bottom:.8rem;border:1px solid}.level-up-badge.category-weapon{color:#4f8;border-color:#4f86;background:#44ff8814}.level-up-badge.category-passive{color:#8af;border-color:#8af6;background:#88aaff14}.level-up-badge.category-ultimate{color:#fa4;border-color:#ffaa4480;background:#ffaa441a;animation:ultimate-glow 1.5s ease-in-out infinite}@keyframes ultimate-glow{0%,to{box-shadow:none}50%{box-shadow:0 0 10px #ffaa444d}}.level-up-card h3{font-family:var(--font-display);font-size:.85rem;color:var(--color-accent);margin-bottom:.5rem;letter-spacing:.05em}.stack-level{color:#fc0;font-size:.7rem;margin-left:.3rem;opacity:.9}.level-up-card.category-ultimate h3{color:#fa4}.level-up-card p{font-size:.85rem;color:var(--color-text-dim);line-height:1.4}.level-up-hint{font-family:var(--font-body);font-size:.8rem;color:var(--color-text-dim);margin-top:1.5rem;letter-spacing:.1em;opacity:.6}.spectator-overlay{position:fixed;top:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;z-index:15;pointer-events:none;padding-top:60px}.spectator-banner{font-family:var(--font-display);font-size:1.2rem;color:var(--color-danger);letter-spacing:.3em;text-shadow:0 0 20px rgba(255,68,68,.5);margin-bottom:8px;animation:spectator-pulse 2s ease-in-out infinite}@keyframes spectator-pulse{0%,to{opacity:.7}50%{opacity:1}}.spectator-controls{display:flex;align-items:center;gap:16px;pointer-events:auto}.spectator-name{font-family:var(--font-body);font-size:1rem;color:var(--color-primary);letter-spacing:.1em;min-width:100px;text-align:center}.spectator-arrow{background:#00ffcc1a;border:1px solid rgba(0,255,204,.3);color:var(--color-primary);font-size:1.2rem;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}.spectator-arrow:hover{background:#0fc3;border-color:#0fc9}.game-over-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20}.game-over-title{font-family:var(--font-display);font-size:3rem;color:var(--color-danger);text-shadow:0 0 40px rgba(255,68,68,.4);margin-bottom:.5rem}.game-over-subtitle{font-family:var(--font-body);font-size:1rem;color:var(--color-text-dim);margin-bottom:2rem;letter-spacing:.1em}.game-over-stats{display:flex;gap:40px;margin-bottom:2rem}.game-over-stat{text-align:center}.game-over-stat-label{font-family:var(--font-display);font-size:.7rem;color:var(--color-text-dim);letter-spacing:.15em;text-transform:uppercase}.game-over-stat-value{font-family:var(--font-display);font-size:2rem;color:var(--color-accent);font-weight:700}.deploy-again-button{border-color:#f80;color:#f80}.deploy-again-button:hover{background:#ff88001a;box-shadow:0 0 30px #f803}.share-url{display:flex;flex-direction:column;align-items:center;margin-bottom:2rem;gap:.5rem}.share-label{font-family:var(--font-display);font-size:.6rem;color:var(--color-text-dim);letter-spacing:.2em;text-transform:uppercase}.share-url-box{display:flex;align-items:center;gap:.8rem;background:var(--color-surface);border:1px solid var(--color-border);padding:.5rem 1rem;cursor:pointer;transition:border-color .2s;font-family:var(--font-body);font-size:1rem;color:var(--color-accent)}.share-url-box:hover{border-color:var(--color-accent)}.copy-button{background:transparent;border:1px solid var(--color-accent-dim);color:var(--color-accent-dim);font-family:var(--font-display);font-size:.6rem;padding:.3rem .6rem;cursor:pointer;letter-spacing:.1em;transition:all .2s}.copy-button:hover{color:var(--color-accent);border-color:var(--color-accent)}.lobby-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:radial-gradient(ellipse at center,#0d0d2a,#06060f 70%)}.lobby-title{font-family:var(--font-display);font-size:2rem;color:var(--color-accent);text-shadow:0 0 30px rgba(0,255,204,.3);letter-spacing:.2em;margin-bottom:2rem}.lobby-players{display:flex;flex-direction:column;gap:.8rem;margin-bottom:2rem;min-width:250px}.lobby-player{display:flex;align-items:center;gap:.8rem;background:var(--color-surface);border:1px solid var(--color-border);padding:.8rem 1.2rem;font-family:var(--font-body);font-size:1.1rem;color:var(--color-text)}.lobby-player-local{border-color:var(--color-accent);box-shadow:0 0 15px #00ffcc26}.lobby-player-you{margin-left:auto;font-family:var(--font-display);font-size:.55rem;color:var(--color-accent);letter-spacing:.2em;opacity:.7}.lobby-player-dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 8px #00ffcc80}.lobby-status{font-family:var(--font-display);font-size:1rem;letter-spacing:.15em}.lobby-countdown{color:var(--color-accent);text-shadow:0 0 20px rgba(0,255,204,.3)}.lobby-waiting{color:var(--color-text-dim)}.start-game-button{margin-top:1.5rem;padding:.8rem 2.5rem;font-family:var(--font-display);font-size:1.2rem;letter-spacing:.15em;color:#000;background:var(--color-accent);border:none;cursor:pointer;text-transform:uppercase;transition:all .2s}.start-game-button:hover{transform:scale(1.05);box-shadow:0 0 20px #0fc6}.menu-multiplayer-info{display:flex;flex-direction:column;align-items:center;gap:.3rem;margin-bottom:1.5rem}.multiplayer-badge{font-family:var(--font-display);font-size:.7rem;color:var(--color-accent);letter-spacing:.2em;padding:.3rem 1rem;border:1px solid var(--color-accent-dim);background:#00ffcc0d}.multiplayer-hint{font-family:var(--font-body);font-size:.9rem;color:var(--color-text-dim)}.player-count{position:fixed;top:20px;right:20px;font-family:var(--font-display);font-size:.8rem;color:var(--color-accent-dim);letter-spacing:.1em;background:#0a0a1eb3;padding:.3rem .8rem;border:1px solid var(--color-border)}.room-code-display{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:1.5rem;padding:1rem 2rem;background:#00ffcc08;border:1px solid var(--color-border)}.room-code-label{font-family:var(--font-display);font-size:.6rem;color:var(--color-text-dim);letter-spacing:.3em;text-transform:uppercase}.room-code-value{font-family:var(--font-display);font-size:2.5rem;font-weight:900;color:var(--color-accent);letter-spacing:.4em;text-shadow:0 0 30px rgba(0,255,204,.4)}.share-button{font-family:var(--font-display);font-size:.7rem;font-weight:700;padding:.5rem 1.5rem;background:transparent;border:1px solid var(--color-accent-dim);color:var(--color-accent);cursor:pointer;letter-spacing:.15em;transition:all .2s;text-transform:uppercase}.share-button:hover{background:#00ffcc1a;border-color:var(--color-accent);box-shadow:0 0 20px #0fc3}.lobby-player-count{font-family:var(--font-display);font-size:.8rem;color:var(--color-text-dim);letter-spacing:.15em;margin-bottom:1rem}.notifications{position:fixed;top:60px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;z-index:30;pointer-events:none}.notification{font-family:var(--font-display);font-size:.8rem;letter-spacing:.1em;background:#0a0a1ed9;padding:.4rem 1.2rem;border:1px solid var(--color-border);animation:notification-slide-in .3s ease-out,notification-fade-out .5s ease-in 2.5s}@keyframes notification-slide-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes notification-fade-out{0%{opacity:1}to{opacity:0}}.menu-error{font-family:var(--font-display);font-size:.8rem;color:var(--color-danger);background:#ff44441a;border:1px solid rgba(255,68,68,.3);padding:.5rem 1.5rem;margin-bottom:1rem;letter-spacing:.1em}.menu-join-link{font-family:var(--font-body);font-size:.9rem;color:var(--color-text-dim);cursor:pointer;transition:color .2s}.menu-join-link:hover{color:var(--color-text)}.join-link-text{color:#0cf;text-decoration:underline;text-underline-offset:3px}.join-code-container{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin-bottom:1.5rem}.join-code-label{font-family:var(--font-display);font-size:.7rem;color:var(--color-text-dim);letter-spacing:.3em}.join-code-input{background:var(--color-surface);border:2px solid var(--color-border);color:var(--color-accent);font-family:var(--font-display);font-size:2.5rem;font-weight:900;padding:.5rem 1rem;width:220px;text-align:center;letter-spacing:.4em;outline:none;text-transform:uppercase;transition:border-color .2s}.join-code-input:focus{border-color:#0cf;box-shadow:0 0 30px #00ccff26}.join-code-input::placeholder{color:var(--color-border);font-weight:400}.menu-button:disabled{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none}.menu-button:disabled:hover{background:transparent;transform:none;box-shadow:none}.lobby-hint{font-family:var(--font-body);font-size:.9rem;color:var(--color-text-dim);margin-bottom:1.5rem}.pause-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:15;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.pause-content{text-align:center}.pause-title{font-family:var(--font-display);font-size:2.5rem;color:var(--color-accent);text-shadow:0 0 40px rgba(0,255,204,.4);letter-spacing:.3em;margin-bottom:1rem}.pause-message{font-family:var(--font-body);font-size:1.2rem;color:var(--color-text-dim);letter-spacing:.1em}.mute-button{position:fixed;bottom:20px;right:20px;font-family:var(--font-display);font-size:.6rem;font-weight:700;padding:.4rem .8rem;background:#0a0a1ecc;border:1px solid var(--color-border);color:var(--color-text-dim);cursor:pointer;letter-spacing:.15em;transition:all .2s;z-index:50;pointer-events:auto}.mute-button:hover{border-color:var(--color-accent-dim);color:var(--color-accent)}.timer{position:fixed;top:20px;left:50%;transform:translate(-50%);font-family:var(--font-display);font-size:1.2rem;color:var(--color-text-dim);letter-spacing:.2em;background:#0a0a1eb3;padding:.4rem 1.2rem;border:1px solid var(--color-border)}