*{box-sizing:border-box}.game-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.game-wrapper{display:flex;gap:30px;align-items:flex-start}.game-board-wrapper{display:flex;flex-direction:column;align-items:center;position:relative}.game-board-wrapper h1{color:#fff;font-size:3rem;margin:0 0 20px;text-shadow:0 0 10px rgba(255,255,255,.5);letter-spacing:.2em}.board{background:#0f0f1e;border:4px solid #333;border-radius:8px;box-shadow:0 0 30px #000000b3,inset 0 0 20px #00000080;overflow:hidden}.row{display:flex}.cell{width:30px;height:30px;border:1px solid rgba(255,255,255,.1);transition:all .1s ease}.side-panel{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:20px;min-width:200px;color:#fff}.side-panel h2,.side-panel h3{margin-top:0;color:#fff;font-size:1.2rem;text-align:center;border-bottom:2px solid rgba(255,255,255,.3);padding-bottom:10px;margin-bottom:15px}.next-piece{display:flex;justify-content:center;align-items:center;min-height:120px;background:#0000004d;border-radius:8px;padding:15px}.mini-board{display:flex;flex-direction:column;gap:2px}.mini-row{display:flex;gap:2px}.mini-cell{width:20px;height:20px;border-radius:2px;border:1px solid rgba(255,255,255,.2)}.stats{display:flex;flex-direction:column;gap:15px;margin-bottom:30px}.stat{text-align:center}.stat label{display:block;font-size:.9rem;opacity:.8;margin-bottom:5px}.stat-value{font-size:2rem;font-weight:700;color:#00f0f0;text-shadow:0 0 10px rgba(0,240,240,.5)}.controls{background:#0000004d;border-radius:8px;padding:15px}.controls h3{font-size:1rem;margin-bottom:10px}.controls ul{list-style:none;padding:0;margin:0;font-size:.9rem;line-height:1.8}.controls li{opacity:.9}.game-over-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;justify-content:center;align-items:center;border-radius:8px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.game-over-message{text-align:center;color:#fff;padding:40px;background:#ffffff1a;border-radius:12px;border:2px solid rgba(255,255,255,.3)}.game-over-message h2{margin-top:0;font-size:2.5rem;margin-bottom:20px;text-shadow:0 0 10px rgba(255,255,255,.5)}.game-over-message p{font-size:1.5rem;margin:10px 0 30px}.game-over-message button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:15px 30px;font-size:1.1rem;border-radius:8px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0000004d}.game-over-message button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0006}.game-over-message button:active{transform:translateY(0)}@media (max-width: 900px){.game-wrapper{flex-direction:column;align-items:center}.side-panel{width:100%;max-width:400px}.game-board-wrapper h1{font-size:2rem}}.line-clear-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;pointer-events:none;z-index:10;animation:flashBackground .5s ease-out}.line-clear-message{font-weight:700;text-align:center;animation:popIn .5s cubic-bezier(.68,-.55,.265,1.55);text-shadow:0 0 20px currentColor}.effect-1{background:radial-gradient(circle,rgba(255,255,0,.3) 0%,transparent 70%)}.effect-1 .line-clear-message{font-size:3rem;color:#ff0;animation:popIn .5s cubic-bezier(.68,-.55,.265,1.55),pulse1 .5s ease-out}.effect-2{background:radial-gradient(circle,rgba(255,165,0,.4) 0%,transparent 70%);animation:flashBackground .4s ease-out,shake .3s ease-out}.effect-2 .line-clear-message{font-size:4rem;color:#f80;animation:popIn .5s cubic-bezier(.68,-.55,.265,1.55),pulse2 .6s ease-out,glow2 .6s ease-out}.effect-3{background:radial-gradient(circle,rgba(255,0,255,.5) 0%,rgba(0,255,255,.3) 50%,transparent 70%);animation:flashBackground .3s ease-out,shake .4s ease-out,spin .6s ease-out}.effect-3 .line-clear-message{font-size:5rem;color:#f0f;animation:popIn .5s cubic-bezier(.68,-.55,.265,1.55),pulse3 .7s ease-out,rainbow 1s linear infinite,bounce .5s ease-out}.effect-4{background:radial-gradient(circle,rgba(255,0,0,.6) 0%,rgba(255,255,0,.4) 30%,rgba(0,255,0,.4) 50%,rgba(0,0,255,.3) 70%,transparent 90%);animation:flashBackground .2s ease-out,shake .5s ease-out,spin .8s ease-out,explosion .8s ease-out}.effect-4 .line-clear-message{font-size:6rem;color:#fff;animation:popIn .5s cubic-bezier(.68,-.55,.265,1.55),pulse4 .8s ease-out,rainbow .5s linear infinite,bounce .6s ease-out,superGlow 1s ease-out infinite;letter-spacing:.2em}@keyframes flashBackground{0%,to{opacity:0}50%{opacity:1}}@keyframes popIn{0%{transform:scale(0) rotate(-180deg);opacity:0}70%{transform:scale(1.2) rotate(10deg)}to{transform:scale(1) rotate(0);opacity:1}}@keyframes pulse1{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes pulse2{0%,to{transform:scale(1)}33%{transform:scale(1.15)}66%{transform:scale(.95)}}@keyframes pulse3{0%,to{transform:scale(1)}25%{transform:scale(1.2)}50%{transform:scale(.9)}75%{transform:scale(1.15)}}@keyframes pulse4{0%,to{transform:scale(1)}20%{transform:scale(1.3)}40%{transform:scale(.85)}60%{transform:scale(1.2)}80%{transform:scale(.9)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-10px)}20%,40%,60%,80%{transform:translate(10px)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes bounce{0%,to{transform:translateY(0)}25%{transform:translateY(-20px)}50%{transform:translateY(0)}75%{transform:translateY(-10px)}}@keyframes rainbow{0%{color:red}16%{color:#f70}33%{color:#ff0}50%{color:#0f0}66%{color:#07f}83%{color:#80f}to{color:red}}@keyframes glow2{0%,to{text-shadow:0 0 20px currentColor}50%{text-shadow:0 0 40px currentColor,0 0 60px currentColor}}@keyframes superGlow{0%,to{text-shadow:0 0 20px currentColor,0 0 40px #ff0000,0 0 60px #00ff00,0 0 80px #0000ff}50%{text-shadow:0 0 40px currentColor,0 0 80px #ff0000,0 0 120px #00ff00,0 0 160px #0000ff}}@keyframes explosion{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.5);opacity:1}to{transform:scale(1);opacity:.7}}@media (max-width: 600px){.cell{width:20px;height:20px}.game-board-wrapper h1{font-size:1.5rem}.mini-cell{width:15px;height:15px}.effect-1 .line-clear-message{font-size:2rem}.effect-2 .line-clear-message{font-size:2.5rem}.effect-3 .line-clear-message{font-size:3rem}.effect-4 .line-clear-message{font-size:3.5rem}}
