:root{--bg-dark: #0a0a0a;--bg-panel: #1a1a2e;--neon-pink: #ff00ff;--neon-cyan: #00ffff;--neon-yellow: #ffff00;--neon-green: #00ff00;--piece-I: #00ffff;--piece-O: #ffff00;--piece-T: #aa00ff;--piece-S: #00ff00;--piece-Z: #ff0000;--piece-J: #0000ff;--piece-L: #ff8800;--text-primary: #ffffff;--text-secondary: #888888;--border-glow: 0 0 10px var(--neon-cyan)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Press Start 2P",cursive;background-color:var(--bg-dark);color:var(--text-primary);overflow:hidden}html,body,#root{width:100%;height:100%}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:9999}.game-container{width:100%;height:100%;display:flex;flex-direction:column;background:linear-gradient(135deg,var(--bg-dark) 0%,#1a0a2e 100%)}.game-header{padding:20px;text-align:center;border-bottom:3px solid var(--neon-cyan);box-shadow:var(--border-glow);background:#00ffff0d}.header-top{display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap}.game-header h1{font-size:24px;letter-spacing:2px;text-shadow:0 0 10px var(--neon-cyan),0 0 20px var(--neon-pink);color:var(--neon-cyan);margin:0}.header-status{display:flex;gap:20px;align-items:center;font-size:10px}.status-indicator{padding:6px 12px;border-radius:3px;font-weight:700;text-shadow:0 0 5px currentColor;border:2px solid currentColor}.status-indicator.online{color:var(--neon-green);background:#00ff001a}.status-indicator.offline{color:var(--neon-yellow);background:#ffff001a}.user-info{color:var(--neon-pink);background:#ff00ff1a;padding:6px 12px;border-radius:3px;border:2px solid var(--neon-pink);text-shadow:0 0 5px var(--neon-pink)}.game-layout{display:flex;flex:1;padding:20px;gap:20px;overflow:hidden}.game-main{flex:1;display:flex;justify-content:center;align-items:center}.game-sidebar{display:flex;flex-direction:column;gap:20px;min-width:250px}.title{font-size:32px;text-align:center;margin-bottom:40px;color:var(--neon-cyan);text-shadow:0 0 10px var(--neon-cyan),0 0 20px var(--neon-pink);letter-spacing:2px}.level-select-container{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px}.level-select-box{background:var(--bg-panel);border:3px solid var(--neon-cyan);padding:30px;border-radius:0;box-shadow:var(--border-glow),inset 0 0 20px #00ffff1a;max-width:500px;width:100%}.level-label{text-align:center;color:var(--neon-yellow);font-size:14px;margin-bottom:20px;text-shadow:0 0 5px var(--neon-yellow)}.level-buttons{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:20px}.level-button{padding:15px;font-size:12px;font-family:"Press Start 2P",cursive;background:#00ffff1a;border:2px solid var(--neon-cyan);color:var(--neon-cyan);cursor:pointer;transition:all .2s;text-shadow:0 0 5px var(--neon-cyan)}.level-button:hover{background:#0ff3;box-shadow:0 0 10px var(--neon-cyan)}.level-button.active{background:var(--neon-cyan);color:var(--bg-dark);box-shadow:0 0 20px var(--neon-cyan);font-weight:700}.level-info{text-align:center;margin-bottom:20px;color:var(--text-secondary);font-size:12px}.level-display{color:var(--neon-yellow);text-shadow:0 0 5px var(--neon-yellow);font-weight:700}.start-button{width:100%;padding:15px;font-size:14px;font-family:"Press Start 2P",cursive;background:linear-gradient(135deg,var(--neon-pink),var(--neon-cyan));border:2px solid var(--neon-pink);color:var(--bg-dark);cursor:pointer;margin-bottom:20px;box-shadow:0 0 20px var(--neon-pink);transition:all .2s;font-weight:700;text-transform:uppercase}.start-button:hover{box-shadow:0 0 30px var(--neon-pink),inset 0 0 10px #ff00ff4d}.controls-info{font-size:10px;color:var(--text-secondary);text-align:center;line-height:1.6}.controls-info p{margin:5px 0}.menu-leaderboard{margin-top:40px;width:100%;max-width:600px}.tetris-board{display:grid;grid-template-rows:repeat(20,1fr);gap:1px;background-color:#00000080;border:3px solid var(--neon-cyan);padding:2px;aspect-ratio:10 / 20;max-width:100%;max-height:100%;box-shadow:var(--border-glow),inset 0 0 20px #00ffff1a}.board-row{display:grid;grid-template-columns:repeat(10,1fr);gap:1px}.board-cell{aspect-ratio:1;border:1px solid rgba(0,255,255,.2);background-color:#00ffff0d;box-shadow:inset 0 0 2px #00000080;animation:cellPulse 2s ease-in-out infinite}@keyframes cellPulse{0%,to{box-shadow:inset 0 0 2px #00000080}50%{box-shadow:inset 0 0 4px #00ffff1a}}.score-panel{display:flex;flex-direction:column;gap:15px;background:var(--bg-panel);border:3px solid var(--neon-cyan);padding:20px;border-radius:0;box-shadow:var(--border-glow),inset 0 0 20px #00ffff1a}.score-item{display:flex;flex-direction:column;gap:8px;padding:10px;background:#00ffff0d;border:1px solid var(--neon-cyan)}.score-label{font-size:10px;color:var(--neon-yellow);text-shadow:0 0 5px var(--neon-yellow);letter-spacing:1px}.score-value{font-size:16px;color:var(--neon-cyan);text-shadow:0 0 10px var(--neon-cyan);letter-spacing:2px;text-align:right;font-family:Courier New,monospace}.next-piece-box{background:var(--bg-panel);border:3px solid var(--neon-cyan);padding:15px;border-radius:0;box-shadow:var(--border-glow),inset 0 0 20px #00ffff1a;min-height:150px;display:flex;flex-direction:column;gap:10px}.next-piece-label{font-size:10px;color:var(--neon-yellow);text-shadow:0 0 5px var(--neon-yellow);text-align:center;letter-spacing:1px}.next-piece-grid{display:grid;grid-template-rows:repeat(4,1fr);gap:2px;flex:1;min-height:100px}.next-piece-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}.next-piece-cell{aspect-ratio:1;border:1px solid rgba(0,255,255,.3);background-color:#00ffff0d;box-shadow:inset 0 0 2px #00000080}.pause-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.pause-menu{background:var(--bg-panel);border:4px solid var(--neon-cyan);padding:40px;text-align:center;box-shadow:0 0 30px var(--neon-cyan),inset 0 0 30px #00ffff1a;animation:pauseSlideIn .3s ease-out}@keyframes pauseSlideIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.pause-menu h2{font-size:28px;margin-bottom:30px;color:var(--neon-pink);text-shadow:0 0 10px var(--neon-pink);letter-spacing:2px}.pause-button{display:block;width:100%;padding:15px;margin-bottom:15px;font-size:14px;font-family:"Press Start 2P",cursive;background:#00ffff1a;border:2px solid var(--neon-cyan);color:var(--neon-cyan);cursor:pointer;transition:all .2s;text-shadow:0 0 5px var(--neon-cyan)}.pause-button:hover{background:#0ff3;box-shadow:0 0 15px var(--neon-cyan)}.pause-button.quit{border-color:var(--neon-pink);color:var(--neon-pink);text-shadow:0 0 5px var(--neon-pink)}.pause-button.quit:hover{background:#f0f3;box-shadow:0 0 15px var(--neon-pink)}.pause-hint{margin-top:20px;font-size:10px;color:var(--text-secondary)}.gameover-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000e6;display:flex;justify-content:center;align-items:center;z-index:1000}.gameover-menu{background:var(--bg-panel);border:4px solid var(--neon-pink);padding:40px;text-align:center;max-width:500px;box-shadow:0 0 40px var(--neon-pink),inset 0 0 30px #ff00ff1a;animation:gameoverPop .5s cubic-bezier(.34,1.56,.64,1)}@keyframes gameoverPop{0%{transform:scale(.7);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.gameover-menu h1{font-size:32px;margin-bottom:20px;color:var(--neon-pink);text-shadow:0 0 10px var(--neon-pink),0 0 20px var(--neon-yellow);letter-spacing:2px;animation:gameoverFlash .5s ease-out}@keyframes gameoverFlash{0%,to{text-shadow:0 0 10px var(--neon-pink),0 0 20px var(--neon-yellow)}50%{text-shadow:0 0 20px var(--neon-pink),0 0 30px var(--neon-yellow),0 0 40px var(--neon-cyan)}}.high-score-alert{background:linear-gradient(135deg,var(--neon-yellow),var(--neon-pink));color:var(--bg-dark);padding:15px;margin-bottom:20px;border-radius:0;font-size:12px;box-shadow:0 0 20px var(--neon-yellow);animation:highScorePulse .6s ease-out}@keyframes highScorePulse{0%{transform:scale(.9)}50%{transform:scale(1.05)}to{transform:scale(1)}}.high-score-alert p{margin-top:5px;font-weight:700}.gameover-stats{display:flex;flex-direction:column;gap:15px;margin:30px 0;background:#00ffff0d;padding:20px;border:2px solid var(--neon-cyan)}.stat-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(0,255,255,.2)}.stat-item:last-child{border-bottom:none}.stat-label{color:var(--neon-yellow);font-size:10px;text-shadow:0 0 5px var(--neon-yellow)}.stat-value{color:var(--neon-cyan);font-size:12px;font-family:Courier New,monospace;text-shadow:0 0 10px var(--neon-cyan)}.restart-button{width:100%;padding:15px;font-size:14px;font-family:"Press Start 2P",cursive;background:linear-gradient(135deg,var(--neon-pink),var(--neon-yellow));border:2px solid var(--neon-pink);color:var(--bg-dark);cursor:pointer;box-shadow:0 0 20px var(--neon-pink);transition:all .2s;font-weight:700;text-transform:uppercase}.restart-button:hover{box-shadow:0 0 30px var(--neon-pink),inset 0 0 10px #ff00ff4d;transform:scale(1.05)}.leaderboard-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;padding:20px}.leaderboard-box{background:var(--bg-panel);border:3px solid var(--neon-cyan);padding:20px;border-radius:0;box-shadow:var(--border-glow),inset 0 0 20px #00ffff1a;max-width:700px;width:100%}.leaderboard-title{text-align:center;color:var(--neon-cyan);font-size:20px;margin-bottom:20px;text-shadow:0 0 10px var(--neon-cyan);letter-spacing:1px}.leaderboard-content{max-height:400px;overflow-y:auto;margin-bottom:20px}.leaderboard-content::-webkit-scrollbar{width:8px}.leaderboard-content::-webkit-scrollbar-track{background:#00ffff0d}.leaderboard-content::-webkit-scrollbar-thumb{background:var(--neon-cyan);border-radius:0}.scores-table{width:100%;border-collapse:collapse;font-size:10px}.scores-table thead{background:#00ffff1a;border-bottom:2px solid var(--neon-cyan)}.scores-table th{padding:10px;color:var(--neon-yellow);text-align:left;text-shadow:0 0 5px var(--neon-yellow);font-weight:700}.scores-table td{padding:10px;border-bottom:1px solid rgba(0,255,255,.2);color:var(--neon-cyan)}.score-row:hover{background:#00ffff1a}.rank{color:var(--neon-pink);font-weight:700;text-shadow:0 0 5px var(--neon-pink)}.score{font-family:Courier New,monospace;text-align:right;color:var(--neon-yellow);text-shadow:0 0 5px var(--neon-yellow)}.lines{font-family:Courier New,monospace;text-align:right}.level{font-family:Courier New,monospace;text-align:right;color:var(--neon-green);text-shadow:0 0 5px var(--neon-green)}.date{color:var(--text-secondary);font-size:9px}.no-scores{text-align:center;padding:40px 20px;color:var(--text-secondary);font-size:12px}.close-button{width:100%;padding:12px;font-size:10px;font-family:"Press Start 2P",cursive;background:#00ffff1a;border:2px solid var(--neon-cyan);color:var(--neon-cyan);cursor:pointer;transition:all .2s;text-shadow:0 0 5px var(--neon-cyan)}.close-button:hover{background:#0ff3;box-shadow:0 0 10px var(--neon-cyan)}.leaderboard-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1001}.leaderboard-modal{width:90%;max-width:700px}@keyframes lineClear{0%{background-color:#ffffff4d}50%{background-color:var(--neon-yellow)}to{background-color:transparent}}.line-clearing{animation:lineClear .3s ease-out}@media(max-width:768px){.game-layout{flex-direction:column;gap:15px}.game-sidebar{min-width:100%;flex-direction:row}.score-panel,.next-piece-box{flex:1}.title{font-size:24px}.level-select-box{padding:20px}.scores-table{font-size:9px}.scores-table th,.scores-table td{padding:8px}}