*{margin:0;padding:0;box-sizing:border-box}:root{--space-black: #0a0a0f;--space-dark: #12121a;--space-deep: #1a1a2e;--nebula-purple: #7B68EE;--nebula-pink: #FF6B9D;--stellar-cyan: #00D4FF;--stellar-teal: #40E0D0;--star-gold: #FFD700;--cosmic-white: #E8E8FF;--ui-bg: rgba(18, 18, 26, .85);--ui-border: rgba(123, 104, 238, .3);--ui-glow: rgba(0, 212, 255, .4);--font-display: "Orbitron", sans-serif;--font-mono: "Space Mono", monospace}html,body,#root{width:100%;height:100%;overflow:hidden;background:var(--space-black);font-family:var(--font-mono);color:var(--cosmic-white)}.game-container{position:relative;width:100vw;height:100vh;overflow:hidden;background:radial-gradient(ellipse at center,var(--space-deep) 0%,var(--space-black) 70%)}.starfield-bg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.starfield-bg:before,.starfield-bg:after{content:"";position:absolute;top:0;left:0;width:200%;height:200%;background-image:radial-gradient(2px 2px at 20px 30px,var(--cosmic-white),transparent),radial-gradient(2px 2px at 40px 70px,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 90px 40px,var(--stellar-cyan),transparent),radial-gradient(2px 2px at 160px 120px,var(--cosmic-white),transparent),radial-gradient(1px 1px at 230px 80px,var(--nebula-purple),transparent),radial-gradient(2px 2px at 300px 200px,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 350px 150px,var(--stellar-cyan),transparent),radial-gradient(2px 2px at 420px 90px,var(--cosmic-white),transparent);background-size:500px 300px;animation:drift 60s linear infinite}.starfield-bg:after{background-size:700px 500px;animation:drift 90s linear infinite reverse;opacity:.5}@keyframes drift{0%{transform:translate(0)}to{transform:translate(-500px,-300px)}}.nebula-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;background:radial-gradient(ellipse at 20% 80%,rgba(123,104,238,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(0,212,255,.1) 0%,transparent 40%),radial-gradient(ellipse at 60% 60%,rgba(255,107,157,.08) 0%,transparent 35%);animation:nebulaPulse 15s ease-in-out infinite alternate}@keyframes nebulaPulse{0%{opacity:.6}to{opacity:1}}.game-canvas-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}.game-canvas-container canvas{display:block}.ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.game-header{position:absolute;top:20px;left:50%;transform:translate(-50%);text-align:center;pointer-events:none}.game-title{font-family:var(--font-display);font-size:1.8rem;font-weight:700;letter-spacing:4px;color:var(--cosmic-white);text-shadow:0 0 10px var(--stellar-cyan),0 0 20px rgba(0,212,255,.5);margin-bottom:4px}.game-subtitle{font-size:.75rem;letter-spacing:2px;color:var(--nebula-purple);opacity:.8}.player-count{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:20px;font-size:.85rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto}.player-count:before{content:"";width:8px;height:8px;background:var(--stellar-cyan);border-radius:50%;box-shadow:0 0 8px var(--stellar-cyan);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.9)}}.chat-container{position:absolute;bottom:20px;left:50%;transform:translate(-50%);width:90%;max-width:500px;pointer-events:auto}.chat-input-wrapper{position:relative;display:flex;align-items:center}.chat-input{width:100%;padding:14px 50px 14px 20px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:25px;color:var(--cosmic-white);font-family:var(--font-mono);font-size:.9rem;outline:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.chat-input::placeholder{color:#e8e8ff66}.chat-input:focus{border-color:var(--stellar-cyan);box-shadow:0 0 0 3px #00d4ff26,0 0 20px #00d4ff33}.chat-send-btn{position:absolute;right:8px;width:36px;height:36px;background:linear-gradient(135deg,var(--stellar-cyan),var(--nebula-purple));border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.chat-send-btn:hover{transform:scale(1.1);box-shadow:0 0 15px var(--stellar-cyan)}.chat-send-btn svg{width:16px;height:16px;fill:#fff}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--space-black);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.loading-spinner{width:60px;height:60px;border:3px solid var(--space-deep);border-top:3px solid var(--stellar-cyan);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{font-family:var(--font-display);font-size:1.2rem;letter-spacing:3px;color:var(--stellar-cyan);animation:flicker 2s ease-in-out infinite}@keyframes flicker{0%,to{opacity:1}50%{opacity:.5}}.connection-status{position:absolute;top:20px;left:20px;display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:20px;font-size:.75rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto}.connection-status.connected .status-dot{background:#4ade80;box-shadow:0 0 8px #4ade80}.connection-status.disconnected .status-dot{background:#f87171;box-shadow:0 0 8px #f87171}.status-dot{width:8px;height:8px;border-radius:50%;transition:all .3s ease}.instructions{position:absolute;bottom:80px;left:50%;transform:translate(-50%);text-align:center;font-size:.75rem;color:#e8e8ff80;letter-spacing:1px;pointer-events:none}.instructions kbd{display:inline-block;padding:2px 6px;background:#7b68ee33;border:1px solid var(--ui-border);border-radius:4px;font-family:var(--font-mono);margin:0 2px}