@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--primary-bg: #0A0E27;--secondary-bg: #1A1F3A;--accent-primary: #00D9FF;--accent-secondary: #FF006E;--success: #39FF14;--warning: #FFD60A;--text-primary: #FFFFFF;--text-secondary: #B8C5D6}body{margin:0;padding:0;overflow:hidden;font-family:Rajdhani,system-ui,sans-serif;background-color:var(--primary-bg);color:var(--text-primary)}canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0}#ui-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.ui-container{display:grid;grid-template-columns:250px 1fr 250px;grid-template-rows:1fr auto;gap:20px;padding:20px;height:100vh;pointer-events:none}.ui-container>*{pointer-events:auto}.panel{background:#1a1f3ae6;border:2px solid var(--accent-primary);border-radius:10px;padding:20px;backdrop-filter:blur(10px);box-shadow:0 0 20px #00d9ff4d}.left-panel{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:20px}.game-title{font-family:Orbitron,sans-serif;font-size:32px;font-weight:900;text-align:center;color:var(--accent-primary);text-shadow:0 0 20px var(--accent-primary);animation:neonPulse 2s ease-in-out infinite}@keyframes neonPulse{0%,to{text-shadow:0 0 20px var(--accent-primary)}50%{text-shadow:0 0 30px var(--accent-primary),0 0 40px var(--accent-primary)}}.stat-box{display:flex;flex-direction:column;gap:5px}.stat-box label{font-size:14px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:2px}.stat-value{font-family:Orbitron,sans-serif;font-size:28px;font-weight:700;color:var(--text-primary)}.stat-box.highlight .stat-value{color:var(--success)}.pulse{animation:pulseAnim .3s ease-out}@keyframes pulseAnim{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.new-high-score{animation:highScoreFlash .5s ease-in-out 4}@keyframes highScoreFlash{0%,to{color:var(--success)}50%{color:var(--warning)}}.right-panel{grid-column:3;grid-row:1;display:flex;flex-direction:column;gap:20px}.preview-box{display:flex;flex-direction:column;gap:10px}.preview-box label{font-size:14px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:2px}.next-pieces-container,.hold-piece-container{display:flex;flex-direction:column;gap:10px;min-height:60px}.piece-preview{padding:10px;background:#0000004d;border-radius:5px}.preview-grid{width:100%;aspect-ratio:1}.preview-cell{width:100%;height:100%;border-radius:2px;transition:all .2s}.empty-hold{color:var(--text-secondary);text-align:center;padding:20px;font-style:italic}.controls-hint{margin-top:auto}.controls-hint h3{font-size:14px;color:var(--text-secondary);margin-bottom:10px;text-transform:uppercase;letter-spacing:2px}.control-item{display:flex;align-items:center;gap:10px;margin:5px 0;font-size:14px}.key{background:#00d9ff33;border:1px solid var(--accent-primary);border-radius:3px;padding:2px 8px;font-family:Orbitron,monospace;font-size:12px;min-width:50px;text-align:center}.bottom-bar{grid-column:1 / -1;grid-row:2;display:flex;justify-content:space-between;align-items:center;background:#1a1f3ae6;border:2px solid var(--accent-primary);border-radius:10px;padding:15px 30px;backdrop-filter:blur(10px)}.button-group{display:flex;gap:10px}.game-button{background:#00d9ff1a;border:2px solid var(--accent-primary);border-radius:5px;padding:10px 15px;color:var(--accent-primary);cursor:pointer;transition:all .3s;font-size:16px}.game-button:hover{background:#00d9ff4d;box-shadow:0 0 15px var(--accent-primary);transform:scale(1.05)}.game-button:active{transform:scale(.95)}.status-indicator{font-family:Orbitron,sans-serif;font-size:18px;font-weight:700;padding:8px 20px;border-radius:20px;text-transform:uppercase;letter-spacing:2px}.status-indicator.playing{background:#39ff1433;border:2px solid var(--success);color:var(--success)}.status-indicator.paused{background:#ffd60a33;border:2px solid var(--warning);color:var(--warning)}.status-indicator.game-over{background:#ff006e33;border:2px solid var(--accent-secondary);color:var(--accent-secondary)}#menu-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#0a0e27f2;display:flex;justify-content:center;align-items:center;z-index:100;backdrop-filter:blur(10px)}.menu-container{text-align:center;max-width:500px;padding:40px;background:#1a1f3ae6;border:3px solid var(--accent-primary);border-radius:20px;box-shadow:0 0 40px #00d9ff80}.menu-title{font-family:Orbitron,sans-serif;font-size:64px;font-weight:900;color:var(--accent-primary);text-shadow:0 0 30px var(--accent-primary);margin-bottom:30px;animation:neonPulse 2s ease-in-out infinite}.menu-high-score{display:flex;justify-content:space-between;padding:15px;background:#0000004d;border-radius:10px;margin-bottom:30px;font-size:18px}.score-value{font-family:Orbitron,sans-serif;font-weight:700;color:var(--success)}.menu-button{width:100%;padding:15px 30px;font-family:Orbitron,sans-serif;font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:2px;background:var(--accent-primary);color:var(--primary-bg);border:none;border-radius:10px;cursor:pointer;transition:all .3s;margin:10px 0}.menu-button:hover{background:var(--accent-secondary);box-shadow:0 0 30px var(--accent-secondary);transform:scale(1.05)}.menu-button:active{transform:scale(.95)}.menu-button.secondary{background:#00d9ff33;border:2px solid var(--accent-primary);color:var(--accent-primary)}.controls-details{margin:30px 0;text-align:left}.controls-details summary{cursor:pointer;padding:10px;background:#0000004d;border-radius:5px;user-select:none}.controls-details summary:hover{background:#00d9ff1a}.controls-list{padding:20px;background:#0003;border-radius:5px;margin-top:10px}.controls-list div{padding:5px 0;font-size:16px}.menu-footer{margin-top:30px;color:var(--text-secondary);font-size:14px}.hint{margin-top:10px;font-style:italic;opacity:.7;animation:hintFade 2s ease-in-out infinite}@keyframes hintFade{0%,to{opacity:.7}50%{opacity:.3}}#gameover-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#0a0e27f2;display:none;justify-content:center;align-items:center;z-index:100;backdrop-filter:blur(10px);animation:slideUp .4s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.gameover-container{text-align:center;max-width:500px;padding:40px;background:#1a1f3ae6;border:3px solid var(--accent-secondary);border-radius:20px;box-shadow:0 0 40px #ff006e80}.gameover-title{font-family:Orbitron,sans-serif;font-size:48px;font-weight:900;color:var(--accent-secondary);text-shadow:0 0 20px var(--accent-secondary);margin-bottom:20px}.high-score-badge{font-size:24px;color:var(--warning);text-shadow:0 0 15px var(--warning);margin-bottom:20px;animation:badgePulse 1s ease-in-out infinite}@keyframes badgePulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.final-stats{background:#0000004d;border-radius:10px;padding:20px;margin:20px 0}.stat-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:16px}.stat-row:last-child{border-bottom:none}.stat-big{font-family:Orbitron,sans-serif;font-size:32px;font-weight:700;color:var(--accent-primary)}.button-group-vertical{display:flex;flex-direction:column;gap:10px;margin:20px 0}.touch-controls{display:none;position:fixed;bottom:20px;left:0;right:0;justify-content:space-between;padding:0 20px;z-index:50;pointer-events:none}.touch-controls>*{pointer-events:auto}.touch-dpad,.touch-actions{display:flex;gap:10px}.touch-btn{width:60px;height:60px;background:#00d9ff4d;border:2px solid var(--accent-primary);border-radius:10px;color:var(--accent-primary);font-size:24px;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;user-select:none}.touch-btn:active,.touch-btn.active{background:#00d9ff99;transform:scale(.95)}@media (max-width: 1024px){.ui-container{grid-template-columns:200px 1fr 200px}.panel{padding:15px}.game-title{font-size:24px}}@media (max-width: 768px){.ui-container{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto;gap:10px;padding:10px}.left-panel{grid-column:1;grid-row:1;flex-direction:row;justify-content:space-around}.right-panel{grid-column:1;grid-row:4;flex-direction:row}.bottom-bar{grid-column:1;grid-row:3}.game-title,.controls-hint{display:none}.stat-box{flex:1}.stat-value{font-size:20px}.touch-controls{display:flex}}