@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";.game-board{width:225px;height:450px;background:repeating-linear-gradient(90deg,#333 0 2px,#111 2px 34px);border:8px solid #666;box-shadow:0 0 24px #000 inset;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(20,1fr);position:relative;border-radius:4px;overflow:hidden;box-sizing:content-box}.game-board:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(rgba(255,255,0,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,0,.03) 1px,transparent 1px);background-size:20px 20px;pointer-events:none;opacity:.8}.cell{width:21px;height:21px;border:1px solid rgba(0,0,0,.1);box-sizing:border-box;position:relative;background:rgba(20,20,30,.9);transition:all .1s ease;box-shadow:inset 0 0 6px #000000b3;aspect-ratio:1/1;will-change:opacity;transform:translateZ(0);-webkit-transform:translate3d(0,0,0)}.cell:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);pointer-events:none}.filled{border:1px solid rgba(255,255,255,.3)!important;box-shadow:0 0 10px currentColor,inset 0 0 10px #ffffff4d;animation:cellPlaced .3s ease-out}@keyframes cellPlaced{0%{opacity:.5}to{opacity:1}}.cell.I{background:linear-gradient(145deg,#00f0f0,#00a0a0)!important}.cell.J{background:linear-gradient(145deg,#0000f0,#0000a0)!important}.cell.L{background:linear-gradient(145deg,#f0a000,#a07000)!important}.cell.O{background:linear-gradient(145deg,#f0f000,#a0a000)!important}.cell.S{background:linear-gradient(145deg,#00f000,#00a000)!important}.cell.T{background:linear-gradient(145deg,#a000f0,#7000a0)!important}.cell.Z{background:linear-gradient(145deg,#f00000,#a00000)!important}.game-over-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:fadeIn .5s ease-in-out;text-align:center;padding:20px;box-sizing:border-box}.game-over-text{color:#f44;font-size:3rem;font-weight:700;text-shadow:0 0 10px #ff0000,0 0 20px #ff0000;margin-bottom:1.5rem;animation:pulse 1.5s infinite;width:100%;line-height:1.2}.game-over-instruction{color:#fff;font-size:1rem;text-align:center;max-width:80%;line-height:1.4;margin-bottom:1.5rem}.restart-button{background:linear-gradient(180deg,#4CAF50 0%,#45a049 100%);color:#fff;border:none;border-radius:4px;padding:.6rem 1.5rem;font-size:1.1rem;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px #2e7d32,0 6px 10px #0000004d;transition:all .2s ease;position:relative;overflow:hidden}.restart-button:hover{background:linear-gradient(180deg,#45a049 0%,#3d8b40 100%);transform:translateY(2px);box-shadow:0 2px #2e7d32,0 4px 8px #0000004d}.restart-button:active{transform:translateY(4px);box-shadow:0 1px #2e7d32,0 2px 4px #0000004d}.restart-button:focus{outline:none;box-shadow:0 0 0 3px #4caf5066}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.game-over-board .cell{opacity:.5;filter:grayscale(50%) brightness(.7);transition:all .5s ease}.game-over-board .filled{opacity:.8;animation:gameOverPulse 2s infinite}@keyframes gameOverPulse{0%,to{opacity:.7}50%{opacity:.9}}.side-panel{width:140px;margin-left:0;background:rgba(10,10,26,.6);padding:20px;border-radius:12px;box-shadow:0 8px 24px #0000004d;border:1px solid rgba(255,255,0,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}.side-panel:hover{transform:translateY(-4px);box-shadow:0 12px 28px #0006}.side-panel:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent)}.level,.score{font-size:18px;margin-bottom:18px;color:#f8f8f8;text-shadow:1px 1px 0 #444}.next-block-label{margin-bottom:8px;font-size:14px;color:#aaa}.next-block-preview{width:60px;height:60px;background:#111;border:2px solid #444;border-radius:4px;display:flex;align-items:center;justify-content:center}.controls{display:flex;flex-direction:column;align-items:center;gap:12px;padding:15px;background:rgba(10,10,26,.6);border-radius:12px;box-shadow:0 4px 12px #0003;border:1px solid rgba(255,255,0,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .3s ease;position:relative;overflow:visible;min-width:220px;box-sizing:border-box;height:fit-content;margin-top:-15px}.controls:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent);z-index:1}.controls:hover{transform:translateY(-4px);box-shadow:0 12px 28px #0006;border-color:#ff06}.controls-title{color:#ff0;font-family:"Press Start 2P",Arial,sans-serif;font-size:24px;font-weight:700;text-align:center;text-shadow:3px 3px 0 #f00;margin:0 0 15px;line-height:1.2;letter-spacing:2px;text-transform:uppercase}.controls>div{display:flex;gap:15px;align-items:center}.controls-btn{background:linear-gradient(145deg,#2a2a4a,#1a1a3a);border:2px solid rgba(255,255,0,.3);border-radius:12px;box-shadow:4px 4px 8px #0000004d,-2px -2px 4px #ffffff0d,inset 0 0 10px #0000004d;font-size:22px;width:60px;height:60px;display:flex;align-items:center;justify-content:center;color:#ff0;text-shadow:0 0 8px rgba(255,255,0,.5);cursor:pointer;transition:all .2s ease;padding:0;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.controls-btn:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,0,.1),transparent);opacity:0;transition:opacity .2s ease}.controls-btn:active{transform:translateY(2px) scale(.98);box-shadow:2px 2px 4px #0000004d,-1px -1px 2px #ffffff0d,inset 0 0 10px #0006}.controls-btn:hover{color:#fff;border-color:#ff09;box-shadow:4px 4px 12px #0006,-2px -2px 6px #ffffff1a,inset 0 0 15px #0003}.controls-btn:hover:before{opacity:.5}.rotate-controls{display:flex;justify-content:center;margin-bottom:10px}.controls-btn.rotate{background:linear-gradient(145deg,#ffcc00,#ff9900);border-color:#ff0c;color:#fff;text-shadow:0 0 10px rgba(255,255,0,.8);position:relative;z-index:1;width:60px;height:60px;font-size:24px;margin:0 auto}.controls-btn.rotate:before{background:linear-gradient(135deg,rgba(255,255,255,.3),transparent);opacity:.5}.controls-btn.rotate:hover{background:linear-gradient(145deg,#ffdd33,#ffaa33);border-color:#ff0;box-shadow:0 0 20px #fc0c;transform:scale(1.05)}.controls-btn.rotate:active{transform:scale(.95)}.controls-btn.left,.controls-btn.right,.controls-btn.down{background:rgba(40,40,60,.8);color:#fff;border:1px solid rgba(255,255,255,.1)}.controls-btn.left:hover,.controls-btn.right:hover,.controls-btn.down:hover{background:rgba(50,50,80,.9);border-color:#fff3}.controls-btn.left:active,.controls-btn.right:active,.controls-btn.down:active{background:rgba(30,30,50,.9)}@media (max-width: 900px){.controls{flex-direction:row;min-width:auto;width:100%;justify-content:center;padding:12px}.controls>div:first-child{margin-right:15px}.controls-btn{width:50px;height:50px;font-size:20px}}.game-controls{display:flex;gap:12px;margin:0 0 10px;padding:0 40px 0 0;z-index:10;justify-content:flex-end;box-sizing:border-box}.control-button{background:linear-gradient(145deg,#2a2a4a,#1a1a3a);border:2px solid rgba(255,255,0,.3);border-radius:12px;box-shadow:4px 4px 8px #0000004d,-2px -2px 4px #ffffff0d,inset 0 0 10px #0000004d;width:35px;height:35px;display:flex;align-items:center;justify-content:center;color:#ff0;text-shadow:0 0 8px rgba(255,255,0,.5);cursor:pointer;transition:all .2s ease;padding:0;font-size:20px;position:relative;overflow:hidden}.control-button:hover{color:#fff;border-color:#ff09;box-shadow:4px 4px 12px #0006,-2px -2px 6px #ffffff1a,inset 0 0 15px #0003;transform:translateY(-2px)}.control-button:active{transform:translateY(1px);box-shadow:2px 2px 6px #0000004d}.control-button:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,0,.1),transparent);opacity:.5;transition:opacity .2s ease}.control-button:hover:before{opacity:.7}.control-button.pause-button{background:linear-gradient(145deg,#ffcc00,#ff9900);border-color:#ff0c;color:#fff;text-shadow:0 0 10px rgba(255,255,0,.8)}.control-button.pause-button:hover{background:linear-gradient(145deg,#ffdd33,#ffaa33);border-color:#ff0;box-shadow:0 0 20px #fc0c}.control-button.mute-button{background:linear-gradient(145deg,#4a4a6a,#2a2a4a);border-color:#6464ff4d;color:#88f;text-shadow:0 0 8px rgba(100,100,255,.5)}.control-button.mute-button:hover{background:linear-gradient(145deg,#5a5a7a,#3a3a5a);border-color:#88f;color:#aaf;box-shadow:0 0 15px #6464ff99}.paused-overlay{position:absolute;top:5px;left:5px;right:5px;bottom:5px;background:rgba(0,0,0,.8);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:20;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:20px;box-sizing:border-box;text-align:center}.paused-text{color:#ff0;font-size:2rem;font-weight:700;text-shadow:0 0 10px #ff0,0 0 20px #f80;margin:0 0 20px;padding:10px 20px;white-space:nowrap;animation:pulse 1.5s infinite;background:rgba(0,0,0,.5);border-radius:10px;border:2px solid rgba(255,255,0,.3);box-shadow:0 0 20px #ffc8004d}@keyframes pulse{0%,to{transform:scale(1);opacity:.9}50%{transform:scale(1.05);opacity:1}}.resume-button{background:linear-gradient(145deg,#00aa00,#008800);border:2px solid #0f0;border-radius:8px;color:#fff;padding:8px 20px;font-family:"Press Start 2P",Arial,sans-serif;font-size:12px;line-height:1.6;cursor:pointer;transition:all .2s ease;text-shadow:0 0 5px rgba(0,255,0,.5);box-shadow:0 4px #060,0 6px 10px #0000004d}.resume-button:hover{background:linear-gradient(145deg,#00cc00,#009900);transform:translateY(-2px);box-shadow:0 6px #070,0 8px 15px #0000004d}.resume-button:active{transform:translateY(1px);box-shadow:0 2px #070,0 3px 5px #0000004d}@media (max-width: 768px){.game-controls{position:fixed;bottom:20px;left:0;right:0;padding:0 20px;justify-content:space-between;max-width:300px;margin:0 auto}.control-button{width:34px;height:34px;font-size:16px}.paused-text{font-size:1.9rem}.resume-button{font-size:10px;padding:10px 15px}}html,body{margin:0;padding:0;height:100%;width:100vw;min-height:100vh}#root{width:100vw;min-height:100vh}body{min-height:100vh;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);font-family:"Press Start 2P",Arial,sans-serif;color:#fff;box-sizing:border-box;touch-action:none}html{-webkit-text-size-adjust:100%}.tetris-app{display:flex;flex-direction:column;align-items:center;background:rgba(10,10,26,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);max-width:560px;min-width:560px;width:560px;border-radius:16px;padding:8px 25px 5px 20px;box-sizing:border-box;margin:0 auto;flex-shrink:0}.tetris-app-wrapper{width:100vw;overflow-x:auto;display:flex;justify-content:center}@media (max-width: 480px){.tetris-app-wrapper{transform:scale(calc(100vw / 450));transform-origin:top left;width:100vw}body{padding:0;align-items:flex-start}}@media (max-width: 480px){.tetris-app{min-width:450px;width:450px;max-width:450px}body{padding:0;align-items:flex-start}}body{overflow-x:auto}.main-content{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;gap:20px;width:100%;max-width:885px;margin:0 0 0 10px;padding:0;position:relative;z-index:2}.right-panel{display:flex;flex-direction:column;gap:15px;width:245px;margin:0 0 0 auto;min-width:0;justify-content:flex-start;height:auto;padding:0 10px 10px 0;box-sizing:border-box}.tetris-app:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:16px;padding:2px;background:linear-gradient(135deg,rgba(255,255,0,.3),rgba(255,0,0,.3));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}.game-container{display:flex;flex-direction:column;align-items:center;position:relative;z-index:1;background:rgba(0,0,0,.3);border-radius:10px;padding:14px;box-shadow:0 0 10px #ffff004d,0 0 20px #f003,inset 0 0 15px #0009;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:2px solid transparent;transition:all .3s ease;height:fit-content;flex-shrink:0;overflow:hidden}.game-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:8px;padding:3px;background:linear-gradient(45deg,#ff0 0%,#f90 25%,#f30 50%,#f00 75%,#c00 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;z-index:-1;opacity:.8;animation:borderPulse 4s ease-in-out infinite}@keyframes borderPulse{0%,to{opacity:.7}50%{opacity:.9}}.side-panel{width:140px;margin-left:0}@keyframes float{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}@keyframes colorPulse{0%,to{filter:hue-rotate(0deg)}50%{filter:hue-rotate(10deg)}}.game-title{color:#ff0;font-family:"Press Start 2P",Arial,sans-serif;font-size:18px;font-weight:700;text-align:center;text-shadow:1px 1px 0 #f00,2px 2px 0 rgba(0,0,0,.5);margin:10px 0;padding:6px 12px;line-height:1.2;white-space:nowrap;z-index:10;letter-spacing:.5px;text-transform:uppercase;pointer-events:none;-webkit-user-select:none;user-select:none;background:rgba(0,0,0,.6);border-radius:4px;border:1px solid rgba(255,255,0,.15);box-shadow:0 1px 4px #0003;width:100%;box-sizing:border-box;animation:float 3s ease-in-out infinite,colorPulse 4s ease-in-out infinite}.by-shadeed{display:block;font-size:14px;margin-top:6px;color:#fff;text-shadow:1px 1px 0 #f00;letter-spacing:.5px}@media (max-width: 900px){.main-content{flex-direction:column;align-items:center;margin-top:20px}.right-panel{width:100%;max-width:400px;margin-top:30px;align-items:center}.side-panel{width:100%;margin-left:0}.controls{width:100%;max-width:400px;margin-top:20px}.game-title{font-size:24px;padding:10px 20px;position:relative;top:0;left:0;transform:none;margin:0 auto 20px;width:fit-content}.by-shadeed{font-size:14px}.game-container{margin-top:0}}:root{--primary: #ff0;--primary-shadow: #f00;--bg-dark: #0a0a1a;--bg-light: #1a1a2e;--accent: #4cc9f0;--text: #ffffff}*{margin:0;padding:0;box-sizing:border-box}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}body{margin:0;font-family:"Press Start 2P",Courier New,monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--text);background:linear-gradient(-45deg,var(--bg-dark),var(--bg-light),#2a0a4a,#0a1a2e);background-size:400% 400%;animation:gradientBG 15s ease infinite;min-height:100vh;box-sizing:border-box}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 30%,rgba(255,255,0,.1) 0%,transparent 25%),radial-gradient(circle at 80% 70%,rgba(255,0,0,.1) 0%,transparent 25%);pointer-events:none;z-index:-1}#root{display:flex;justify-content:center;align-items:center;min-height:100vh}