@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap";:root{--bg-dark: #0f0f23;--bg-medium: #1a1a2e;--bg-light: #16213e;--primary: #00ff88;--secondary: #ff00ff;--accent: #00ffff;--warning: #ffff00;--danger: #ff4444;--text: #ffffff;--text-dim: #888899;--pixel-red: #ff6b6b;--pixel-orange: #ffa94d;--pixel-yellow: #ffd43b;--pixel-green: #69db7c;--pixel-blue: #4dabf7;--pixel-purple: #da77f2;--border-pixel: 4px}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}html,body,#root{height:100%;width:100%}body{font-family:VT323,monospace;background:var(--bg-dark);color:var(--text);overflow-x:hidden;background-image:radial-gradient(ellipse at top,#1a1a3e 0%,transparent 50%),radial-gradient(ellipse at bottom,#0a0a1a 0%,transparent 50%);min-height:100vh}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,rgba(0,0,0,.15),rgba(0,0,0,.15) 1px,transparent 1px,transparent 2px);pointer-events:none;z-index:1000}.pixel-btn{font-family:"Press Start 2P",cursive;font-size:14px;padding:16px 32px;background:var(--primary);color:var(--bg-dark);border:none;cursor:pointer;position:relative;text-transform:uppercase;transition:all .1s;image-rendering:pixelated;box-shadow:inset -4px -4px #0000004d,inset 4px 4px #ffffff4d,0 4px #00994d,0 8px #00000080}.pixel-btn:hover{transform:translateY(-2px);box-shadow:inset -4px -4px #0000004d,inset 4px 4px #ffffff4d,0 6px #00994d,0 10px #00000080}.pixel-btn:active{transform:translateY(4px);box-shadow:inset -4px -4px #0000004d,inset 4px 4px #ffffff4d,0 0 #00994d}.pixel-btn.secondary{background:var(--secondary);box-shadow:inset -4px -4px #0000004d,inset 4px 4px #ffffff4d,0 4px #909,0 8px #00000080}.pixel-btn.accent{background:var(--accent);box-shadow:inset -4px -4px #0000004d,inset 4px 4px #ffffff4d,0 4px #099,0 8px #00000080}.pixel-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.pixel-input{font-family:VT323,monospace;font-size:24px;padding:16px 20px;background:var(--bg-dark);color:var(--primary);border:4px solid var(--primary);outline:none;text-align:center;letter-spacing:4px;text-transform:uppercase;box-shadow:inset 4px 4px #00000080}.pixel-input:focus{border-color:var(--accent);color:var(--accent);animation:inputGlow .5s infinite alternate}@keyframes inputGlow{0%{box-shadow:inset 4px 4px #00000080,0 0 10px var(--accent)}to{box-shadow:inset 4px 4px #00000080,0 0 20px var(--accent)}}.pixel-card{background:var(--bg-medium);padding:32px;position:relative;border:4px solid var(--primary);box-shadow:8px 8px #00ff884d,inset 0 0 50px #00ff880d}.pixel-card.secondary{border-color:var(--secondary);box-shadow:8px 8px #ff00ff4d,inset 0 0 50px #ff00ff0d}.title-arcade{font-family:"Press Start 2P",cursive;font-size:clamp(24px,5vw,48px);text-align:center;color:var(--primary);text-shadow:4px 4px 0px var(--secondary),8px 8px 0px rgba(0,0,0,.5);animation:titleFloat 3s ease-in-out infinite}@keyframes titleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.subtitle-arcade{font-family:VT323,monospace;font-size:clamp(18px,3vw,28px);text-align:center;color:var(--accent);letter-spacing:4px;text-transform:uppercase}.app-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;position:relative;z-index:1}.stars{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle 2s infinite}@keyframes twinkle{0%,to{opacity:.3}50%{opacity:1}}.lobby-container{display:flex;flex-direction:column;align-items:center;gap:40px;max-width:600px;width:100%}.lobby-buttons{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}.room-code-display{font-family:"Press Start 2P",cursive;font-size:clamp(32px,8vw,64px);color:var(--warning);letter-spacing:8px;padding:20px 40px;background:var(--bg-dark);border:4px solid var(--warning);text-shadow:0 0 20px var(--warning);animation:codeGlow 1s infinite alternate}@keyframes codeGlow{0%{box-shadow:0 0 10px var(--warning)}to{box-shadow:0 0 30px var(--warning)}}.waiting-room{display:flex;flex-direction:column;align-items:center;gap:30px;width:100%;max-width:800px}.players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;width:100%}.player-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px;background:var(--bg-light);border:3px solid var(--primary);text-align:center}.player-card.host{border-color:var(--warning);box-shadow:0 0 20px #ffff004d}.player-avatar{width:60px;height:60px;background:var(--primary);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:32px}.player-name{font-family:"Press Start 2P",cursive;font-size:12px;color:var(--text)}.host-badge{font-size:10px;color:var(--warning);font-family:"Press Start 2P",cursive}.game-toggle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}.game-toggle{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;background:var(--bg-dark);border:2px solid var(--text-dim);color:var(--text-dim);cursor:pointer;transition:all .15s;font-family:VT323,monospace}.game-toggle:hover{border-color:var(--accent);color:var(--accent)}.game-toggle.active{border-color:var(--primary);color:var(--primary);background:#00ff881a}.game-toggle-icon{font-size:28px}.game-toggle-name{font-size:14px;text-align:center}.game-container{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:1000px}.game-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:15px 25px;background:var(--bg-medium);border:3px solid var(--accent)}.game-title{font-family:"Press Start 2P",cursive;font-size:16px;color:var(--accent)}.game-timer{font-family:"Press Start 2P",cursive;font-size:24px;color:var(--warning)}.game-area{width:100%;min-height:400px;background:var(--bg-light);border:4px solid var(--primary);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;position:relative;overflow:hidden}.reaction-target{width:150px;height:150px;background:var(--pixel-red);border:4px solid var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:60px;transition:transform .1s;animation:targetPulse .5s infinite}.reaction-target:hover{transform:scale(1.1)}@keyframes targetPulse{0%,to{box-shadow:0 0 20px var(--pixel-red)}50%{box-shadow:0 0 40px var(--pixel-red)}}.reaction-waiting{font-family:"Press Start 2P",cursive;font-size:24px;color:var(--text-dim);text-align:center}.reaction-result{font-family:"Press Start 2P",cursive;font-size:32px;color:var(--primary)}.memory-grid{display:grid;gap:10px;justify-content:center}.memory-tile{width:80px;height:80px;background:var(--bg-dark);border:3px solid var(--text-dim);cursor:pointer;transition:all .2s}.memory-tile.active{background:var(--primary);border-color:var(--primary);box-shadow:0 0 30px var(--primary)}.memory-tile.correct{background:var(--pixel-green);border-color:var(--pixel-green)}.memory-tile.wrong{background:var(--pixel-red);border-color:var(--pixel-red)}.memory-tile:hover:not(.active):not(.correct):not(.wrong){border-color:var(--accent)}.math-problem{font-family:"Press Start 2P",cursive;font-size:clamp(32px,8vw,64px);color:var(--text);text-shadow:4px 4px 0px var(--bg-dark);margin-bottom:30px}.math-answers{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;width:100%;max-width:400px}.math-answer-btn{font-family:"Press Start 2P",cursive;font-size:20px;padding:20px;background:var(--bg-medium);color:var(--text);border:3px solid var(--accent);cursor:pointer;transition:all .1s}.math-answer-btn:hover{background:var(--accent);color:var(--bg-dark);transform:scale(1.05)}.math-answer-btn.correct{background:var(--pixel-green);border-color:var(--pixel-green)}.math-answer-btn.wrong{background:var(--pixel-red);border-color:var(--pixel-red)}.color-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;max-width:350px}.color-btn{width:150px;height:120px;border:4px solid rgba(255,255,255,.3);cursor:pointer;transition:all .1s}.color-btn.red{background:var(--pixel-red)}.color-btn.blue{background:var(--pixel-blue)}.color-btn.green{background:var(--pixel-green)}.color-btn.yellow{background:var(--pixel-yellow)}.color-btn:hover{transform:scale(1.05)}.color-btn.flash{filter:brightness(1.8);box-shadow:0 0 50px currentColor}.color-sequence{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;justify-content:center}.sequence-dot{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.5)}.type-word{font-family:"Press Start 2P",cursive;font-size:clamp(24px,6vw,48px);color:var(--accent);text-transform:uppercase;letter-spacing:4px;margin-bottom:30px;text-shadow:0 0 20px var(--accent)}.type-input{font-size:28px;width:100%;max-width:400px;text-transform:uppercase}.type-score{font-family:"Press Start 2P",cursive;font-size:20px;color:var(--primary);margin-top:20px}.no-select{-webkit-user-select:none;user-select:none}.aim-target{width:60px;height:60px;background:#f443;border:3px solid var(--pixel-red);border-radius:50%;display:flex;align-items:center;justify-content:center;animation:targetAppear .2s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 0 15px #ff6b6b80;cursor:crosshair}.aim-inner{width:12px;height:12px;background:var(--pixel-red);border-radius:50%}.aim-cross-v,.aim-cross-h{position:absolute;background:var(--pixel-red);opacity:.6}.aim-cross-v{width:2px;height:100%}.aim-cross-h{width:100%;height:2px}.aim-target:hover{background:#f446;box-shadow:0 0 25px var(--pixel-red);transform:translate(-50%,-50%) scale(1.1)!important}@keyframes targetAppear{0%{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}.scoreboard{width:100%;max-width:600px}.scoreboard-header{display:grid;grid-template-columns:50px 1fr 100px;padding:15px 20px;background:var(--primary);color:var(--bg-dark);font-family:"Press Start 2P",cursive;font-size:12px}.score-row{display:grid;grid-template-columns:50px 1fr 100px;padding:15px 20px;background:var(--bg-medium);border:2px solid var(--bg-light);border-top:none;align-items:center}.score-row:nth-child(odd){background:var(--bg-light)}.score-rank{font-family:"Press Start 2P",cursive;font-size:16px;color:var(--warning)}.score-name{font-family:VT323,monospace;font-size:24px}.score-points{font-family:"Press Start 2P",cursive;font-size:16px;color:var(--primary);text-align:right}.score-row.winner{border:3px solid var(--warning);background:linear-gradient(90deg,rgba(255,215,0,.2),transparent)}.results-container{display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center}.winner-trophy{font-size:100px;animation:trophyBounce 1s infinite}@keyframes trophyBounce{0%,to{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-20px) rotate(5deg)}}.winner-name{font-family:"Press Start 2P",cursive;font-size:clamp(24px,5vw,40px);color:var(--warning);text-shadow:4px 4px 0px var(--secondary)}.winner-subtitle{font-family:VT323,monospace;font-size:28px;color:var(--accent)}.countdown{font-family:"Press Start 2P",cursive;font-size:clamp(80px,20vw,150px);color:var(--warning);text-shadow:8px 8px 0px var(--secondary),16px 16px 0px rgba(0,0,0,.5);animation:countdownPulse .5s infinite}@keyframes countdownPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.countdown-text{font-family:"Press Start 2P",cursive;font-size:20px;color:var(--text-dim);margin-top:20px}.game-progress{display:flex;gap:10px;margin-bottom:20px}.progress-dot{width:16px;height:16px;background:var(--bg-dark);border:2px solid var(--text-dim)}.progress-dot.completed{background:var(--primary);border-color:var(--primary)}.progress-dot.current{background:var(--warning);border-color:var(--warning);animation:currentPulse .5s infinite alternate}@keyframes currentPulse{0%{box-shadow:0 0 5px var(--warning)}to{box-shadow:0 0 15px var(--warning)}}.game-message{font-family:"Press Start 2P",cursive;font-size:18px;padding:20px 30px;background:var(--bg-medium);border:3px solid var(--accent);text-align:center;animation:messageSlide .3s ease-out}@keyframes messageSlide{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:600px){.pixel-btn{font-size:10px;padding:14px 24px;min-height:48px}.pixel-btn:active{transform:translateY(2px);filter:brightness(.9)}.lobby-buttons{flex-direction:column;width:100%}.lobby-buttons .pixel-btn{width:100%}.memory-tile{width:70px;height:70px;min-width:48px;min-height:48px}.memory-tile:active{transform:scale(.95)}.color-btn{width:120px;height:100px;min-width:48px;min-height:48px}.color-btn:active{filter:brightness(1.3)}.math-answers{grid-template-columns:1fr}.math-answer-btn{min-height:56px;font-size:18px}.math-answer-btn:active{transform:scale(.98)}.aim-target{width:70px;height:70px}.aim-target:active{transform:translate(-50%,-50%) scale(.9)!important}.reaction-target{width:120px;height:120px}.type-input{font-size:22px;padding:14px}.leaderboard-tab{padding:14px 10px;font-size:9px}.game-area{min-height:350px;padding:20px}}.loading-dots{display:flex;gap:10px;justify-content:center}.loading-dot{width:15px;height:15px;background:var(--primary);animation:loadingBounce .6s infinite alternate}.loading-dot:nth-child(2){animation-delay:.2s}.loading-dot:nth-child(3){animation-delay:.4s}@keyframes loadingBounce{0%{transform:translateY(0)}to{transform:translateY(-15px)}}.leaderboard-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease}.leaderboard-modal{width:90%;max-width:500px;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;position:relative}.leaderboard-close{position:absolute;top:10px;right:15px;background:none;border:none;color:var(--text-dim);font-size:24px;cursor:pointer;transition:color .2s}.leaderboard-close:hover{color:var(--pixel-red)}.leaderboard-tabs{display:flex;gap:10px;margin-bottom:20px}.leaderboard-tab{flex:1;padding:12px;background:var(--bg-dark);border:2px solid var(--text-dim);color:var(--text-dim);font-family:"Press Start 2P",cursive;font-size:10px;cursor:pointer;transition:all .2s}.leaderboard-tab:hover{border-color:var(--accent);color:var(--accent)}.leaderboard-tab.active{border-color:var(--primary);color:var(--primary);background:#00ff881a}.leaderboard-list{overflow-y:auto;max-height:400px}.leaderboard-row{display:grid;grid-template-columns:50px 1fr 80px;padding:12px 15px;background:var(--bg-light);border-bottom:1px solid var(--bg-dark);align-items:center}.leaderboard-row:nth-child(odd){background:var(--bg-medium)}.leaderboard-row.top-three{background:linear-gradient(90deg,rgba(255,215,0,.1),transparent)}.leaderboard-rank{font-family:"Press Start 2P",cursive;font-size:12px;color:var(--warning)}.leaderboard-name{font-family:VT323,monospace;font-size:22px;color:var(--text)}.leaderboard-score{font-family:"Press Start 2P",cursive;font-size:12px;color:var(--primary);text-align:right}.leaderboard-loading,.leaderboard-empty{text-align:center;padding:40px;font-family:VT323,monospace;font-size:24px;color:var(--text-dim)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
