:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body,#root{min-height:100vh;min-height:100dvh;background:#0a0608;color:#fafafa;overflow-x:hidden}.cyber-bg-canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}.tetris-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.bg-orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.15;animation:orbFloat 12s ease-in-out infinite alternate}.bg-orb-1{width:400px;height:400px;background:#00d4ff;top:-10%;left:-5%;animation-duration:14s}.bg-orb-2{width:350px;height:350px;background:#b44dff;bottom:-10%;right:-5%;animation-duration:10s;animation-delay:-3s}.bg-orb-3{width:250px;height:250px;background:#ff2d55;top:50%;left:50%;transform:translate(-50%,-50%);animation-duration:16s;animation-delay:-6s}@keyframes orbFloat{0%{transform:translate(0) scale(1)}50%{transform:translate(30px,-20px) scale(1.1)}to{transform:translate(-20px,30px) scale(.95)}}.tetris-root{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;gap:.75rem}.tetris-title{font-size:2.5rem;font-weight:900;letter-spacing:.35em;text-transform:uppercase;position:relative;background:linear-gradient(180deg,gold,#f97316 40%,#ec4899,#a855f7);background-size:100% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:titleShine 3s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(255,215,0,.3))}@keyframes titleShine{0%,to{background-position:0% 0%;filter:drop-shadow(0 0 20px rgba(255,215,0,.3))}50%{background-position:0% 100%;filter:drop-shadow(0 0 30px rgba(168,85,247,.4))}}.tetris-title:before{content:"TETRIS";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(255,255,255,.25) 0%,transparent 50%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;z-index:1}.tetris-title:after{content:"";position:absolute;bottom:-6px;left:5%;right:5%;height:2px;background:linear-gradient(90deg,transparent,#FFD700,#EC4899,#A855F7,transparent);border-radius:1px;opacity:.6}.mobile-stats{display:none;gap:1.5rem;justify-content:center;align-items:center;padding:.4rem 1rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.06);border-radius:.75rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.ms-item{display:flex;flex-direction:column;align-items:center;gap:0}.ms-label{font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:#ffffff59;font-weight:600}.ms-value{font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums;color:#fafafa}.ms-value.hi{color:gold}.tetris-layout{display:flex;gap:1.25rem;align-items:flex-start}.tetris-side{display:flex;flex-direction:column;gap:1rem;min-width:140px}.glass{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:.75rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.stat-box{padding:.75rem 1rem;display:flex;flex-direction:column;gap:.25rem}.stat-label{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:#ffffff59;font-weight:600}.stat-value{font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums;color:#fafafa}.stat-value.hi{color:gold}.level-progress{width:100%;height:3px;background:#ffffff0f;border-radius:2px;overflow:hidden;margin-top:.25rem}.level-bar{height:100%;background:linear-gradient(90deg,gold,#ec4899);border-radius:2px;transition:width .3s ease}.level-next{font-size:.5rem;color:#ffffff40;letter-spacing:.05em}.hold-hint{font-size:.55rem;color:#ffffff40;margin-top:.25rem}.empty-preview{opacity:.2}.tetris-cell.go-gray{border-color:#ffffff0d;animation:goGraySweep .4s ease-out}@keyframes goGraySweep{0%{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}.next-box{align-items:center}.next-grid{display:grid;grid-template-columns:repeat(4,1.25rem);grid-template-rows:repeat(4,1.25rem);gap:2px;margin-top:.35rem}.next-cell{width:1.25rem;height:1.25rem;border-radius:4px;background:#ffffff08;border:1px solid rgba(255,255,255,.04)}.next-cell.filled{border:none}.controls-list{display:flex;flex-direction:column;gap:.35rem;margin-top:.25rem}.controls-list p{font-size:.72rem;color:#ffffff73}kbd{display:inline-block;background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:.1em .4em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.65rem;color:#ffffffa6;margin-right:.1rem}.board-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;gap:.75rem}.board-wrapper.shake{animation:boardShake .35s ease-out}@keyframes boardShake{0%,to{transform:translate(0)}10%{transform:translate(-4px)}30%{transform:translate(4px)}50%{transform:translate(-3px)}70%{transform:translate(3px)}90%{transform:translate(-1px)}}.tetris-board{position:relative;display:flex;flex-direction:column;background:#0a0a14d9;border:2px solid rgba(255,255,255,.1);border-radius:.6rem;overflow:hidden;box-shadow:0 0 30px #ffd70014,0 0 60px #a855f70d,inset 0 0 40px #0000004d;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);touch-action:none;user-select:none;-webkit-user-select:none}.board-grid-bg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.particle-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5}.tetris-row{display:flex;position:relative;z-index:1}.tetris-row.clearing{animation:clearFlash .35s ease-out}@keyframes clearFlash{0%{opacity:1;background:#fff6;transform:scaleY(1)}50%{opacity:.6;background:#ffd7004d;transform:scaleY(1.1)}to{opacity:1;background:transparent;transform:scaleY(1)}}.tetris-cell{width:1.75rem;height:1.75rem;border:1px solid rgba(255,255,255,.03);background:transparent;position:relative;z-index:1}.tetris-cell.filled{border:1px solid rgba(255,255,255,.12);border-radius:3px;animation:cellAppear .1s ease-out}@keyframes cellAppear{0%{transform:scale(.8);opacity:.5}to{transform:scale(1);opacity:1}}.tetris-cell.ghost{border:1px dashed rgba(255,255,255,.12);background:#ffffff05}.combo-popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:15;pointer-events:none;animation:comboIn .8s ease-out forwards}.combo-text{font-size:1.6rem;font-weight:900;letter-spacing:.1em;background:linear-gradient(135deg,gold,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;filter:drop-shadow(0 0 12px rgba(255,215,0,.5))}@keyframes comboIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}40%{transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-80%) scale(1.1)}}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#06060ee0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:20;padding:1.5rem}.overlay-content{display:flex;flex-direction:column;align-items:center;gap:.75rem;animation:overlayFade .3s ease-out}@keyframes overlayFade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.overlay-title{font-size:2.2rem;font-weight:900;letter-spacing:.2em;background:linear-gradient(135deg,gold,#f97316,#ec4899,#a855f7);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s ease-in-out infinite}.overlay-sub{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:#ffffff4d;margin-top:-.5rem}.overlay-score{font-size:1.1rem;color:#ffffffb3}.overlay-hint{font-size:.7rem;color:#ffffff4d}.overlay-splash{cursor:pointer;overflow:hidden;background:#0a0608eb}.splash-blocks{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.splash-block{position:absolute;border-radius:6px;opacity:.06;animation:floatBlock 15s ease-in-out infinite}.sb-1{width:80px;height:80px;background:gold;top:8%;left:10%;animation:floatBlock1 15s ease-in-out infinite;animation-delay:0s;transform:rotate(15deg)}.sb-2{width:60px;height:60px;background:#ec4899;top:20%;right:15%;animation:floatBlock2 15s ease-in-out infinite;animation-delay:-3s;transform:rotate(-20deg)}.sb-3{width:100px;height:40px;background:#a855f7;bottom:25%;left:8%;animation:floatBlock3 15s ease-in-out infinite;animation-delay:-6s;transform:rotate(30deg)}.sb-4{width:50px;height:50px;background:#f97316;bottom:15%;right:12%;animation:floatBlock4 15s ease-in-out infinite;animation-delay:-9s;transform:rotate(-10deg)}.sb-5{width:40px;height:80px;background:#38bdf8;top:55%;left:25%;animation:floatBlock5 15s ease-in-out infinite;animation-delay:-4s;transform:rotate(45deg)}.sb-6{width:70px;height:30px;background:#10b981;top:40%;right:25%;animation:floatBlock6 15s ease-in-out infinite;animation-delay:-7s;transform:rotate(-35deg)}@keyframes floatBlock1{0%,to{opacity:.06;transform:rotate(15deg) translateY(0) scale(1)}33%{opacity:.1;transform:rotate(15deg) translateY(-15px) scale(1.05)}66%{opacity:.04;transform:rotate(15deg) translateY(10px) scale(.95)}}@keyframes floatBlock2{0%,to{opacity:.06;transform:rotate(-20deg) translateY(0) scale(1)}33%{opacity:.1;transform:rotate(-20deg) translateY(-12px) scale(1.05)}66%{opacity:.04;transform:rotate(-20deg) translateY(8px) scale(.95)}}@keyframes floatBlock3{0%,to{opacity:.06;transform:rotate(30deg) translateY(0) scale(1)}33%{opacity:.1;transform:rotate(30deg) translateY(-10px) scale(1.05)}66%{opacity:.04;transform:rotate(30deg) translateY(12px) scale(.95)}}@keyframes floatBlock4{0%,to{opacity:.06;transform:rotate(-10deg) translateY(0) scale(1)}33%{opacity:.1;transform:rotate(-10deg) translateY(-14px) scale(1.05)}66%{opacity:.04;transform:rotate(-10deg) translateY(6px) scale(.95)}}@keyframes floatBlock5{0%,to{opacity:.06;transform:rotate(45deg) translateY(0) scale(1)}33%{opacity:.1;transform:rotate(45deg) translateY(-11px) scale(1.05)}66%{opacity:.04;transform:rotate(45deg) translateY(9px) scale(.95)}}@keyframes floatBlock6{0%,to{opacity:.06;transform:rotate(-35deg) translateY(0) scale(1)}33%{opacity:.1;transform:rotate(-35deg) translateY(-13px) scale(1.05)}66%{opacity:.04;transform:rotate(-35deg) translateY(7px) scale(.95)}}.splash-content{gap:1.5rem;position:relative;z-index:2}.splash-logo{display:flex;flex-direction:column;align-items:center;gap:.5rem}.logo-blocks{display:flex;gap:3px;margin-bottom:.25rem}.lb{width:18px;height:18px;border-radius:3px;animation:logoBounce 2s ease-in-out infinite}.lb-1{background:gold;animation-delay:0s}.lb-2{background:#f97316;animation-delay:.15s}.lb-3{background:#ec4899;animation-delay:.3s}.lb-4{background:#a855f7;animation-delay:.45s}@keyframes logoBounce{0%,to{transform:translateY(0) scale(1)}25%{transform:translateY(-6px) scale(1.1)}50%{transform:translateY(0) scale(1)}}.splash-title{font-size:2.4rem;font-weight:900;letter-spacing:.25em;background:linear-gradient(180deg,gold,#f97316 35%,#ec4899 65%,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 30px rgba(255,215,0,.35));position:relative;line-height:1}.splash-title:before{content:"TETRIS";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,transparent 45%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.splash-edition{font-size:.65rem;letter-spacing:.5em;text-transform:uppercase;color:#ffffff40;font-weight:500;margin-top:.25rem}.splash-hi{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.5rem 1.5rem;background:#ffd7000f;border:1px solid rgba(255,215,0,.12);border-radius:.75rem}.splash-hi-label{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:#ffd70080;font-weight:600}.splash-hi-value{font-size:1.4rem;font-weight:800;color:gold;font-variant-numeric:tabular-nums}.btn-play{display:flex;align-items:center;gap:.6rem;padding:.8rem 3rem;font-size:1rem;letter-spacing:.15em;border-radius:50px;background:linear-gradient(135deg,gold,#f97316);color:#1a0a00;font-weight:800;box-shadow:0 0 30px #ffd7004d,0 4px 20px #0000004d;animation:playPulse 2.5s ease-in-out infinite}.btn-icon{width:18px;height:18px}@keyframes playPulse{0%,to{box-shadow:0 0 30px #ffd7004d,0 4px 20px #0000004d}50%{box-shadow:0 0 50px #ffd70080,0 4px 30px #0000004d}}.btn-play:hover{transform:translateY(-2px) scale(1.02)}.btn-play:active{transform:translateY(0) scale(.98)}.splash-features{display:flex;gap:2rem;margin-top:.25rem}.sf-item{display:flex;flex-direction:column;align-items:center;gap:.35rem;color:#ffffff4d}.sf-item svg{width:20px;height:20px;stroke:#ffd70066}.sf-item span{font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}.splash-credit{font-size:.7rem;color:#ffffff4d}.splash-credit-link{color:#38bdf8;text-decoration:none;font-weight:600;transition:color .2s}.splash-credit-link:hover{color:#7dd3fc;text-decoration:underline}.splash-hint{font-size:.65rem;color:#fff3;animation:hintPulse 2s ease-in-out infinite}@keyframes hintPulse{0%,to{opacity:.5}50%{opacity:1}}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.final-stats{display:flex;gap:1.5rem;padding:.75rem 0}.fs-item{display:flex;flex-direction:column;align-items:center;gap:.15rem}.fs-label{font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:#ffffff59;font-weight:600}.fs-value{font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums;color:#fafafa}.new-record{font-size:.85rem;font-weight:800;letter-spacing:.15em;color:gold;animation:recordPulse 1s ease-in-out infinite}@keyframes recordPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}.btn{background:linear-gradient(135deg,gold,#f97316);color:#1a0a00;font-weight:700;font-size:.85rem;border:none;border-radius:.6rem;padding:.65rem 2.5rem;cursor:pointer;letter-spacing:.1em;text-transform:uppercase;transition:all .2s;position:relative;overflow:hidden}.btn-glow{box-shadow:0 0 20px #ffd7004d,0 0 40px #f9731626}.btn-glow:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;background:linear-gradient(135deg,gold,#f97316,#ec4899,#a855f7,gold);background-size:300% 300%;border-radius:inherit;z-index:-1;animation:borderGlow 3s linear infinite;opacity:0;transition:opacity .3s}.btn-glow:hover:before{opacity:1}@keyframes borderGlow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.btn:hover{opacity:.9;transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn:focus-visible{outline:2px solid #FFD700;outline-offset:2px}.touch-controls{display:none;flex-direction:column;gap:.5rem;width:100%;max-width:320px;padding:0 .25rem}.tc-row{display:flex;gap:.5rem;justify-content:center}.tc-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;width:64px;height:56px;border-radius:.75rem;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:#ffffffb3;cursor:pointer;transition:all .1s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.tc-btn svg{width:22px;height:22px}.tc-btn:active{background:#ffd70026;border-color:#ffd7004d;transform:scale(.95)}.tc-btn-wide{flex:1;max-width:100px}.tc-btn-accent{background:#ffd7001a;border-color:#ffd70040;color:gold}.tc-btn-accent:active{background:#ffd70040}.tc-btn[style*=opacity]{pointer-events:none}.tc-label{font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;opacity:.6}.sound-toggle{position:fixed;top:1rem;right:1rem;z-index:100;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff9;cursor:pointer;transition:all .2s;padding:0}.sound-toggle svg{width:18px;height:18px}.sound-toggle:hover{background:#ffffff1a;color:#ffffffe6;border-color:#ffd7004d}.sound-toggle:active{transform:scale(.92)}@media(max-width:768px){.tetris-root{justify-content:flex-start;padding-top:.75rem;gap:.5rem}.tetris-title{font-size:1.6rem;letter-spacing:.2em}.mobile-stats{display:flex}.desktop-only{display:none}.tetris-layout{gap:0}.tetris-cell{width:calc((100vw - 3rem)*.1);height:calc((100vw - 3rem)*.1);max-width:1.75rem;max-height:1.75rem}.touch-controls{display:flex}.overlay-title{font-size:1.6rem}.combo-text{font-size:1.2rem}}@media(max-width:360px){.tetris-root{padding:.5rem}.tetris-title{font-size:1.3rem;letter-spacing:.2em}.splash-title{font-size:2.5rem}.splash-features{gap:1.2rem}.btn-play{padding:.7rem 2.2rem;font-size:.9rem}.tc-btn{width:56px;height:48px}.tc-btn svg{width:18px;height:18px}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}