:root{--bg-primary: #05050f;--bg-secondary: #0a0a1f;--bg-card: rgba(10, 10, 31, .85);--bg-glass: rgba(10, 10, 31, .45);--glass-border: rgba(0, 240, 255, .15);--neon-cyan: #00f0ff;--neon-magenta: #ff00aa;--neon-green: #39ff14;--neon-yellow: #ffe600;--neon-purple: #b026ff;--text-primary: #e0e0ff;--text-secondary: #8888aa;--text-dim: #555577;--lepton-color: #00f0ff;--quark-color: #ff00aa;--top-quark-color: #ffe600;--font-display: "Orbitron", monospace;--font-body: "Inter", sans-serif;--gap-sm: .5rem;--gap-md: 1rem;--gap-lg: 2rem;--glow-cyan: 0 0 10px rgba(0, 240, 255, .5), 0 0 30px rgba(0, 240, 255, .2);--glow-magenta: 0 0 10px rgba(255, 0, 170, .5), 0 0 30px rgba(255, 0, 170, .2);--transition-fast: .15s ease;--transition-base: .25s ease}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased}#app{width:100%;height:100%;position:relative}#game-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.hud{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;display:none}.hud.active{display:block}.hud__top{display:flex;justify-content:space-between;padding:var(--gap-md)}.hud__player-info{background:var(--bg-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);box-shadow:inset 0 0 15px #00f0ff0d;border-radius:12px;padding:8px 24px;pointer-events:auto;display:flex;flex-direction:column;align-items:center;min-width:140px;transition:box-shadow var(--transition-base)}.hud__player-info:hover{box-shadow:inset 0 0 25px #00f0ff1a}.hud__player-info--opponent{border-color:#ff00aa26;box-shadow:inset 0 0 15px #ff00aa0d}.hud__player-info--opponent:hover{box-shadow:inset 0 0 25px #ff00aa1a}.hud__label{font-family:var(--font-display);font-size:.75rem;color:var(--text-secondary);letter-spacing:3px;text-transform:uppercase;margin-bottom:4px}.hud__value{font-family:var(--font-display);font-size:2.2rem;font-weight:900;color:var(--neon-cyan);text-shadow:var(--glow-cyan);line-height:1}.hud__player-info--opponent .hud__value{color:var(--neon-magenta);text-shadow:var(--glow-magenta)}.hud__particles{position:absolute;bottom:100px;left:50%;transform:translate(-50%);display:flex;gap:var(--gap-sm);pointer-events:auto}.particle-btn{background:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--text-dim);border-radius:16px;padding:10px 16px;color:var(--text-primary);font-family:var(--font-display);font-size:.8rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:all var(--transition-base) cubic-bezier(.175,.885,.32,1.275);min-width:90px;position:relative;overflow:hidden}.particle-btn:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:inherit;filter:brightness(2);opacity:0;transition:opacity var(--transition-fast);pointer-events:none}.particle-btn:hover,.particle-btn.selected{transform:translateY(-8px) scale(1.05)}.particle-btn:hover:before,.particle-btn.selected:before{opacity:.1}.particle-btn--lepton{border-color:var(--lepton-color)}.particle-btn--lepton:hover,.particle-btn--lepton.selected{box-shadow:0 0 15px #00f0ff66;background:#00f0ff1a}.particle-btn--quark{border-color:var(--quark-color)}.particle-btn--quark:hover,.particle-btn--quark.selected{box-shadow:0 0 15px #f0a6;background:#ff00aa1a}.particle-btn--top-quark{border-color:var(--top-quark-color)}.particle-btn--top-quark:hover,.particle-btn--top-quark.selected{box-shadow:0 0 15px #ffe60066;background:#ffe6001a}.particle-btn__icon{font-size:1.5rem}.particle-btn--lepton .particle-btn__icon{color:var(--lepton-color)}.particle-btn--quark .particle-btn__icon{color:var(--quark-color)}.particle-btn--top-quark .particle-btn__icon{color:var(--top-quark-color)}.particle-btn__name{font-size:.6rem;text-transform:uppercase;letter-spacing:1px}.particle-btn__cooldown{font-size:.65rem;color:var(--text-dim)}.particle-btn.on-cooldown{opacity:.4;cursor:not-allowed}.hud__skills{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:var(--gap-sm);pointer-events:auto}.skill-btn{background:var(--bg-glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--neon-purple);border-radius:50%;width:56px;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);color:var(--text-primary)}.skill-btn:hover{box-shadow:0 0 20px #b026ff80;transform:scale(1.1);background:#b026ff26}.skill-btn:disabled{opacity:.3;cursor:not-allowed}.skill-btn__icon{font-size:1.3rem}.skill-btn__cost{font-family:var(--font-display);font-size:.5rem;color:var(--neon-purple)}.lobby{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;background:radial-gradient(ellipse at center,var(--bg-secondary) 0%,var(--bg-primary) 70%)}.lobby.hidden{display:none}.lobby__title{font-family:var(--font-display);font-size:clamp(2.5rem,8vw,5rem);font-weight:900;text-align:center;line-height:1.1;background:linear-gradient(135deg,var(--neon-cyan),var(--neon-magenta));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 20px rgba(0,240,255,.3));margin-bottom:var(--gap-md);animation:titlePulse 3s ease-in-out infinite}@keyframes titlePulse{0%,to{filter:drop-shadow(0 0 20px rgba(0,240,255,.3))}50%{filter:drop-shadow(0 0 40px rgba(0,240,255,.6))}}.lobby__subtitle{font-family:var(--font-display);font-size:.9rem;color:var(--text-secondary);letter-spacing:4px;text-transform:uppercase;margin-bottom:var(--gap-lg)}.lobby__form{display:flex;flex-direction:column;gap:var(--gap-md);align-items:center}.lobby__input{background:var(--bg-glass);border:1px solid rgba(0,240,255,.3);border-radius:8px;padding:12px 20px;font-family:var(--font-body);font-size:1rem;color:var(--text-primary);outline:none;width:280px;text-align:center;transition:border-color var(--transition-fast)}.lobby__input:focus{border-color:var(--neon-cyan);box-shadow:0 0 15px #00f0ff33}.lobby__input::placeholder{color:var(--text-dim)}.lobby__btn{background:linear-gradient(135deg,var(--neon-cyan),var(--neon-magenta));border:none;border-radius:8px;padding:14px 48px;font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--bg-primary);cursor:pointer;letter-spacing:2px;transition:all var(--transition-fast)}.lobby__btn:hover{transform:scale(1.05);box-shadow:0 0 30px #00f0ff66,0 0 60px #f0a3}.lobby__btn:active{transform:scale(.98)}.lobby__status{margin-top:var(--gap-md);font-size:.85rem;color:var(--neon-cyan);font-family:var(--font-display);letter-spacing:1px;min-height:1.5em}@media(max-width:480px){.hud__particles{bottom:80px;gap:4px}.particle-btn{min-width:70px;padding:6px 8px;font-size:.65rem}.skill-btn{width:48px;height:48px}.hud__top{padding:var(--gap-sm)}}