:root{--matrix:#39ff88;--cyan:#16f4ff;--panel:rgba(4,18,17,.96);--cell:clamp(23px,3.45vh,33px)}
*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden}body{display:flex;align-items:center;justify-content:center;padding:10px;background:#010706 url('assets/matrix-chamber-4k.webp') center/cover no-repeat fixed;color:#edfff5;font-family:'Courier New',monospace}#matrix-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;opacity:.2}#celebration-fx{position:fixed;inset:0;z-index:30;width:100%;height:100%;pointer-events:none}#event-banner{position:fixed;top:18%;left:50%;z-index:31;pointer-events:none;transform:translate(-50%,-50%) scale(.7);opacity:0;color:#fff;font-size:clamp(24px,5vw,64px);font-weight:900;letter-spacing:6px;text-align:center;text-shadow:3px 0 #ff28d7,-3px 0 var(--cyan),0 0 20px var(--matrix)}#event-banner.show{animation:eventPop 1.15s ease-out}@keyframes eventPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-65%) scale(.92)}}body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle,transparent 25%,rgba(0,0,0,.58))}
.game-wrap{position:relative;width:min(100%,850px);display:flex;flex-direction:column;gap:10px;padding:14px 20px 18px;border:1px solid rgba(57,255,136,.62);border-radius:18px;background:linear-gradient(145deg,rgba(3,14,14,.98),rgba(1,7,8,.97));box-shadow:0 24px 90px #000,0 0 28px rgba(57,255,136,.2),inset 0 0 25px rgba(22,244,255,.05)}
.game-header{display:flex;align-items:end;justify-content:space-between;gap:18px}.kicker{display:block;color:var(--matrix);font-size:10px;letter-spacing:3px}h1{color:#fff;font-size:clamp(25px,4vw,37px);letter-spacing:7px;text-shadow:2px 0 #ff28d7,-2px 0 var(--cyan)}h1 em{color:var(--matrix);font-size:.5em;font-style:normal}.header-actions{display:flex;gap:8px}.header-actions button,#start-btn,.mobile-controls button{border:1px solid var(--matrix);border-radius:7px;background:#041512;color:var(--matrix);font:700 11px 'Courier New',monospace;letter-spacing:1px;cursor:pointer;box-shadow:0 0 8px rgba(57,255,136,.25)}.header-actions button{padding:9px 11px}.header-actions button:hover,#start-btn:hover{background:var(--matrix);color:#00120a}.stage-track{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;color:#b8e4d4;font-size:11px}.stage-track>div{height:7px;overflow:hidden;border:1px solid #257357;border-radius:99px;background:#020b09}.stage-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--matrix),var(--cyan));transition:width .2s}.main{display:flex;justify-content:center;gap:32px}.board-area{position:relative;padding:10px;border:1px solid rgba(22,244,255,.78);background:#03100f;box-shadow:11px 13px 0 #021311,12px 14px 0 rgba(57,255,136,.72),0 0 22px rgba(22,244,255,.3)}.board{--cols:10;--rows:20;display:grid;grid-template-columns:repeat(var(--cols),var(--cell));grid-template-rows:repeat(var(--rows),var(--cell));gap:2px;padding:4px;background:#000506;border:2px solid var(--cyan);box-shadow:inset 0 0 25px #000,0 0 15px rgba(22,244,255,.35)}
.cell{position:relative;width:var(--cell);height:var(--cell);border:1px solid rgba(57,255,136,.13);background:linear-gradient(145deg,#0d2b24,#020a09)}.cell.filled{z-index:2;border:1px solid #fff;box-shadow:inset 4px 4px 0 rgba(255,255,255,.45),inset -5px -6px 0 rgba(0,0,0,.45),0 0 6px currentColor,4px 5px 0 #00130d}.cell.filled:after{content:"";position:absolute;inset:4px;border:1px solid rgba(255,255,255,.38);background:linear-gradient(135deg,rgba(255,255,255,.3),transparent 45%)}.cell.I{background:#10dff2;color:#10dff2}.cell.O{background:#ffe84b;color:#ffe84b}.cell.T{background:#c24bff;color:#c24bff}.cell.S{background:#3dff78;color:#3dff78}.cell.Z{background:#ff4166;color:#ff4166}.cell.J{background:#3b71ff;color:#3b71ff}.cell.L{background:#ff9f31;color:#ff9f31}.cell.G{background:#50665e;color:#50665e}
.cell{position:relative;width:var(--cell);height:var(--cell);border:1px solid rgba(57,255,136,.13);background:linear-gradient(145deg,#0d2b24,#020a09)}.cell.filled{z-index:2;border:1px solid #fff;box-shadow:inset 4px 4px 0 rgba(255,255,255,.45),inset -5px -6px 0 rgba(0,0,0,.45),0 0 6px currentColor,4px 5px 0 #00130d}.cell.filled:after{content:"";position:absolute;inset:4px;border:1px solid rgba(255,255,255,.38);background:linear-gradient(135deg,rgba(255,255,255,.3),transparent 45%)}.cell.I{background:#10dff2;color:#10dff2}.cell.O{background:#ffe84b;color:#ffe84b}.cell.T{background:#c24bff;color:#c24bff}.cell.S{background:#3dff78;color:#3dff78}.cell.Z{background:#ff4166;color:#ff4166}.cell.J{background:#3b71ff;color:#3b71ff}.cell.L{background:#ff9f31;color:#ff9f31}.cell.G{background:#50665e;color:#50665e}.board-area.clear-impact{animation:clearImpact .34s ease-out}@keyframes clearImpact{0%{filter:brightness(1);transform:translate(0)}25%{filter:brightness(2.2);transform:translate(-5px,2px)}50%{filter:brightness(1.25);transform:translate(5px,-2px)}100%{filter:brightness(1);transform:translate(0)}}
.overlay{position:absolute;inset:10px;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(0,8,7,.97);border:1px solid var(--matrix)}.overlay.hidden{display:none}.overlay-text{color:#fff;font-size:clamp(24px,5vw,40px);font-weight:900;letter-spacing:5px;text-align:center;text-shadow:2px 0 #ff28d7,-2px 0 var(--cyan)}.overlay-sub{color:var(--matrix);font-size:12px;letter-spacing:2px;text-align:center}#start-btn{padding:12px 22px}.side-panel{display:flex;flex-direction:column;gap:10px;width:175px}.panel-box{padding:10px 13px;border:1px solid rgba(57,255,136,.42);border-radius:8px;background:var(--panel);box-shadow:7px 8px 0 rgba(0,0,0,.35)}.panel-box h2{margin-bottom:7px;color:#8ec9b5;font-size:10px;letter-spacing:2px}.stat-value{color:#fff;font-size:23px;text-shadow:0 0 5px var(--matrix)}.next-grid{--cell:21px;display:grid;grid-template-columns:repeat(4,var(--cell));grid-template-rows:repeat(4,var(--cell));gap:2px;justify-content:center;padding:6px;background:#010807}.controls ul{list-style:none;color:#c6e4d8;font-size:10px;line-height:1.7}.mobile-controls{display:none;grid-template-columns:repeat(6,1fr);gap:6px;width:min(100%,620px);z-index:10}.mobile-controls button{min-height:44px;touch-action:manipulation}
@media(max-width:720px){body{padding:4px;align-items:flex-start}.game-wrap{padding:9px 6px}.game-header{align-items:flex-start}.header-actions{flex-direction:column}.main{gap:9px}.board-area{padding:6px;box-shadow:6px 7px 0 #031713}.board{--cell:min(4.45vw,24px);gap:1px}.side-panel{width:104px}.panel-box{padding:6px}.controls{display:none}.next-grid{--cell:14px}.mobile-controls{display:grid}.stage-track{gap:5px;font-size:9px}}@media(min-width:1800px) and (min-height:1100px){:root{--cell:42px}.game-wrap{width:1080px}.side-panel{width:220px}.stat-value{font-size:30px}}