*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0a0a0a;--bg-secondary: #1a1a1a;--bg-game: #2a2a2a;--text-primary: #ffffff;--text-secondary: #b0b0b0;--accent-red: #ff0040;--accent-green: #00ff88;--accent-blue: #00ccff;--accent-yellow: #ffaa00;--neon-glow: 0 0 20px currentColor;--neon-glow-strong: 0 0 40px currentColor, 0 0 60px currentColor}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 50%,rgba(255,0,64,.1) 0%,transparent 50%),radial-gradient(circle at 80% 50%,rgba(0,255,136,.1) 0%,transparent 50%),radial-gradient(circle at 50% 100%,rgba(0,204,255,.1) 0%,transparent 50%);pointer-events:none;z-index:-1}.container{max-width:1200px;margin:0 auto;padding:20px;min-height:100vh;display:flex;flex-direction:column}header{text-align:center;margin-bottom:30px}h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;background:linear-gradient(45deg,var(--accent-red),var(--accent-green),var(--accent-blue));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:var(--neon-glow);margin-bottom:20px;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.mode-toggle{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.mode-btn{padding:12px 24px;border:2px solid var(--accent-blue);background:transparent;color:var(--accent-blue);border-radius:25px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.mode-btn:hover{background:var(--accent-blue);color:var(--bg-primary);box-shadow:var(--neon-glow);transform:translateY(-2px)}.mode-btn.active{background:var(--accent-blue);color:var(--bg-primary);box-shadow:var(--neon-glow-strong)}main{flex:1;display:flex;flex-direction:column;gap:30px}.game-area{background:var(--bg-secondary);border-radius:20px;padding:40px 20px;min-height:400px;display:flex;align-items:center;justify-content:center;border:2px solid transparent;position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}.game-area:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(45deg,var(--accent-red),var(--accent-green),var(--accent-blue));border-radius:20px;z-index:-1;opacity:.5;animation:borderRotate 3s linear infinite}@keyframes borderRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.game-content{text-align:center;position:relative;z-index:1}.screen{display:none;animation:fadeIn .3s ease;position:relative;z-index:5}.screen.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.screen h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:20px;font-weight:700}.screen p{font-size:1.2rem;color:var(--text-secondary);margin-bottom:30px}.result-time{font-size:clamp(3rem,6vw,5rem);font-weight:800;color:var(--accent-green);text-shadow:var(--neon-glow-strong);margin:20px 0;animation:resultPop .5s ease}@keyframes resultPop{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.result-message{font-size:1.3rem;margin:20px 0;font-weight:600}.new-top-badge{display:block;font-size:1.1rem;color:var(--accent-yellow);margin-top:10px;animation:bounce .6s ease}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.retry-btn{padding:15px 30px;border:none;background:linear-gradient(45deg,var(--accent-green),var(--accent-blue));color:var(--bg-primary);border-radius:25px;cursor:pointer;font-size:1.1rem;font-weight:600;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;box-shadow:var(--neon-glow);position:relative;z-index:10;pointer-events:auto}.retry-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:var(--neon-glow-strong)}.stats-panel{background:var(--bg-secondary);border-radius:15px;padding:20px;border:1px solid rgba(255,255,255,.1)}.current-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}.stat-item{text-align:center;padding:15px;background:var(--bg-game);border-radius:10px;border:1px solid rgba(255,255,255,.05)}.stat-label{display:block;font-size:.9rem;color:var(--text-secondary);margin-bottom:5px;text-transform:uppercase;letter-spacing:1px}.stat-value{display:block;font-size:1.5rem;font-weight:700;color:var(--accent-blue)}.leaderboard-section{background:var(--bg-secondary);border-radius:15px;padding:20px;border:1px solid rgba(255,255,255,.1)}.leaderboard-section h2{text-align:center;margin-bottom:20px;font-size:1.8rem;color:var(--accent-yellow)}.leaderboard-tabs{display:flex;gap:10px;justify-content:center;margin-bottom:20px}.tab-btn{padding:8px 16px;border:1px solid var(--accent-yellow);background:transparent;color:var(--accent-yellow);border-radius:15px;cursor:pointer;font-size:.9rem;transition:all .3s ease}.tab-btn:hover,.tab-btn.active{background:var(--accent-yellow);color:var(--bg-primary)}.leaderboard{max-height:300px;overflow-y:auto}.leaderboard-item{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;margin-bottom:8px;background:var(--bg-game);border-radius:8px;border:1px solid rgba(255,255,255,.05);transition:all .3s ease}.leaderboard-item:hover{transform:translate(5px);border-color:var(--accent-blue)}.leaderboard-rank{font-weight:700;color:var(--accent-yellow);font-size:1.1rem;width:30px}.leaderboard-time{font-weight:600;color:var(--accent-green);font-size:1.1rem}.leaderboard-date{font-size:.8rem;color:var(--text-secondary)}.empty-leaderboard{text-align:center;color:var(--text-secondary);padding:40px;font-style:italic}footer{display:flex;justify-content:center;gap:20px;margin-top:30px;flex-wrap:wrap}.sound-btn,.clear-btn{padding:10px 20px;border:1px solid var(--text-secondary);background:transparent;color:var(--text-secondary);border-radius:20px;cursor:pointer;font-size:.9rem;transition:all .3s ease}.sound-btn:hover,.clear-btn:hover{border-color:var(--accent-red);color:var(--accent-red)}.clear-btn:hover{background:var(--accent-red);color:var(--text-primary)}.game-area.waiting{background:linear-gradient(135deg,var(--bg-secondary),#ff004020)}.game-area.ready{background:linear-gradient(135deg,var(--bg-secondary),#00ff8820);animation:readyPulse .5s ease}@keyframes readyPulse{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}.game-area.too-early{background:linear-gradient(135deg,var(--bg-secondary),#ff004030)}.timer-setup{margin:30px 0;padding:20px;background:var(--bg-game);border-radius:15px;border:1px solid rgba(0,255,136,.3)}.timer-setup label{display:block;font-size:1rem;color:var(--accent-green);margin-bottom:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px}.timer-input-group{display:flex;flex-direction:column;gap:8px;align-items:center}.timer-input{padding:10px 15px;border:2px solid var(--accent-green);background:var(--bg-secondary);color:var(--text-primary);border-radius:8px;font-size:1.1rem;font-weight:600;width:120px;text-align:center;transition:all .3s ease}.timer-input:focus{outline:none;box-shadow:0 0 15px #00ff8880;border-color:var(--accent-blue)}.timer-hint{font-size:.85rem;color:var(--text-secondary);font-style:italic}.timer-display{font-size:1.5rem;font-weight:700;color:var(--accent-blue);padding:8px 16px;border:2px solid var(--accent-blue);border-radius:10px;background:#00ccff1a;box-shadow:0 0 10px #00ccff4d;animation:timerPulse 1s ease-in-out infinite}@keyframes timerPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.view-scores-btn{margin-top:15px;padding:10px 20px;border:2px solid var(--accent-yellow);background:transparent;color:var(--accent-yellow);border-radius:20px;cursor:pointer;font-size:.95rem;font-weight:600;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.view-scores-btn:hover{background:var(--accent-yellow);color:var(--bg-primary);box-shadow:var(--neon-glow)}.top-scores-panel{margin-top:20px;padding:20px;background:var(--bg-game);border:2px solid var(--accent-yellow);border-radius:15px;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.top-scores-panel h3{text-align:center;color:var(--accent-yellow);margin-bottom:15px;font-size:1.3rem}.top-scores-list{list-style:none;max-height:300px;overflow-y:auto}.top-score-item{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;margin-bottom:8px;background:var(--bg-secondary);border-radius:8px;border-left:4px solid var(--accent-yellow);transition:all .2s ease}.top-score-item:hover{background:#ffaa001a;transform:translate(5px)}.top-score-item .rank{color:var(--accent-yellow);font-weight:700;font-size:1.1rem;min-width:40px}.top-score-item .score{color:var(--accent-green);font-weight:700;font-size:1.2rem;flex:1;text-align:center}.top-score-item .date{color:var(--text-secondary);font-size:.85rem;min-width:100px;text-align:right}@media(max-width:768px){.container{padding:10px}.game-area{min-height:300px;padding:30px 15px}.screen h2{font-size:clamp(1.5rem,5vw,2.5rem)}.screen p{font-size:1rem}.result-time{font-size:clamp(2rem,8vw,4rem)}.retry-btn{padding:15px 40px;font-size:1.1rem;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;min-height:50px;min-width:150px;width:auto;box-shadow:var(--neon-glow-strong)}.retry-btn:active{transform:scale(.95)}.mode-btn{padding:10px 20px;font-size:.9rem;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}.current-stats{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px}.stat-item{padding:10px}.stat-value{font-size:1.2rem}.leaderboard-section h2{font-size:1.3rem}.leaderboard{max-height:250px}.sound-btn,.clear-btn{padding:8px 16px;font-size:.8rem}.timer-display{font-size:1.2rem}}@media(max-width:480px){h1{font-size:2rem}.mode-toggle{flex-direction:column;width:100%}.mode-btn{width:100%}.game-area{padding:20px 10px;min-height:300px}.result-time{font-size:2.5rem}.retry-btn{padding:20px 50px;font-size:1.3rem;min-height:60px;min-width:90%;display:block;margin:20px auto;width:90%}.timer-setup{margin:20px 0;padding:15px}.timer-input{width:100px;padding:8px 12px}.view-scores-btn{margin-top:10px;padding:8px 16px;font-size:.85rem}.top-scores-panel{margin-top:15px;padding:15px}.top-score-item{flex-wrap:wrap;gap:8px}.top-score-item .date{width:100%;text-align:left}}@media(hover:none){.mode-btn,.retry-btn,.tab-btn,.sound-btn,.clear-btn,.game-select-btn,.stop-btn,.view-scores-btn{min-height:44px;min-width:44px}}.game-select{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}.game-select-btn{padding:12px 24px;border:2px solid var(--accent-green);background:transparent;color:var(--accent-green);border-radius:25px;cursor:pointer;font-size:1rem;font-weight:700;transition:all .3s ease;letter-spacing:1px}.game-select-btn:hover{background:var(--accent-green);color:var(--bg-primary);box-shadow:var(--neon-glow);transform:translateY(-2px)}.game-select-btn.active{background:var(--accent-green);color:var(--bg-primary);box-shadow:var(--neon-glow-strong)}.reaction-modes{margin-bottom:30px}.boxcatch{display:flex;flex-direction:column;gap:30px}.boxcatch-area{cursor:default}.catch-box{position:absolute;width:clamp(46px,15%,74px);aspect-ratio:1 / 1;border:none;border-radius:12px;background:linear-gradient(135deg,var(--accent-green),var(--accent-blue));box-shadow:var(--neon-glow-strong);cursor:pointer;z-index:6;padding:0;transition:transform .05s ease;touch-action:manipulation}.catch-box:hover{transform:scale(1.05)}.catch-box:active{transform:scale(.92)}.boxcatch-controls{display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap}.difficulty-badge{padding:8px 18px;border:2px solid var(--accent-green);border-radius:20px;font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:.95rem}.stop-btn{padding:10px 24px;border:2px solid var(--accent-red);background:transparent;color:var(--accent-red);border-radius:20px;cursor:pointer;font-size:.95rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;transition:all .3s ease}.stop-btn:hover{background:var(--accent-red);color:var(--text-primary);box-shadow:var(--neon-glow)}.boxcatch-stats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}