.tetris-page{width:min(1180px,100% - 32px);margin:0 auto}.tetris-intro{justify-content:space-between;align-items:end;gap:3rem;padding:clamp(3rem,7vw,5.5rem) 0 2.4rem;display:flex}.tetris-intro h1{letter-spacing:-.055em;margin:0;font:500 clamp(3.2rem,7vw,6.4rem)/.9 ui-serif,Georgia,serif}.tetris-intro>p{max-width:500px;color:var(--muted);margin:0;line-height:1.8}.tetris-shell{background:#121924;border:1px solid #9eb0c3;border-radius:18px;position:relative;overflow:hidden;box-shadow:0 28px 80px #102a5625}.tetris-toolbar{background:linear-gradient(135deg,#eff4f8,#d6e0ea);border-bottom:1px solid #26394d;justify-content:space-between;align-items:center;gap:1rem;min-height:72px;padding:10px 14px;display:flex}.mode-tabs,.tetris-actions{gap:6px;display:flex}.mode-tabs button,.icon-button{color:#354c66;cursor:pointer;background:#f5f8fb;border:1px solid #91a3b6;border-radius:8px;min-height:46px;font:800 .82rem ui-sans-serif,system-ui,sans-serif;box-shadow:inset 0 1px #fff}.mode-tabs button{padding:0 1rem}.mode-tabs small{color:#78889a;margin-left:.35rem;font-size:.66rem}.mode-tabs button.active{color:#fff;background:#18283a;border-color:#283d54;box-shadow:inset 0 1px #566c82}.mode-tabs button.active small{color:#a7bdd4}.icon-button{width:46px;padding:0;font-size:1.25rem}.tetris-stage{background:linear-gradient(#ffffff08 1px,#0000 1px) 0 0/34px 34px,linear-gradient(90deg,#ffffff08 1px,#0000 1px) 0 0/34px 34px,radial-gradient(circle at 18% 14%,#4da4aa26,#0000 22rem),radial-gradient(circle at 86% 76%,#e3b34518,#0000 18rem),#101824;grid-template-columns:minmax(120px,190px) minmax(280px,360px) minmax(150px,220px);justify-content:center;align-items:start;gap:clamp(1rem,3vw,2rem);min-height:680px;padding:clamp(1.2rem,4vw,3rem);display:grid}.tetris-board-frame{background:#1d2a36;border:1px solid #516575;border-radius:8px;padding:12px;position:relative;box-shadow:inset 0 0 0 1px #ffffff0b,0 24px 60px #03070c8a}.tetris-board{aspect-ratio:10/20;background:#071019;border:1px solid #0b121a;border-radius:6px;grid-template-rows:repeat(20,1fr);grid-template-columns:repeat(10,1fr);gap:2px;width:min(68vw,336px);padding:8px;display:grid}.tetris-cell{background:#152130;border-radius:3px;min-width:0;min-height:0;box-shadow:inset 0 0 0 1px #ffffff05}.tetris-cell.ghost{background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff28}.filled,.piece-preview-grid i.filled{box-shadow:inset 0 2px #ffffff75,inset 0 -5px #0000002b,0 0 14px #ffffff14}.piece-I{background:#48c7de}.piece-J{background:#406adf}.piece-L{background:#ee8f3a}.piece-O{background:#f2cf44}.piece-S{background:#55bf6a}.piece-T{background:#a76bdd}.piece-Z{background:#df5365}.start-overlay{color:#f2f6f9;cursor:pointer;text-align:center;backdrop-filter:blur(3px);background:#071019db;border:0;border-radius:6px;place-content:center;gap:.45rem;display:grid;position:absolute;inset:12px}.start-overlay strong{font:500 2rem ui-serif,Georgia,serif}.start-overlay span{color:#aebdca;font-size:.8rem}.tetris-panel{color:#dbe7f2;gap:1rem;display:grid}.mini-panel,.score-panel{background:#172434d9;border:1px solid #33485f;border-radius:8px;padding:1rem;box-shadow:inset 0 1px #ffffff0d}.mini-panel>span,.score-panel span{color:#8ea1b6;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.8rem;font:800 .68rem ui-monospace,monospace;display:block}.mini-panel strong{color:#f4f8fb;font:800 1.45rem ui-monospace,monospace}.piece-preview-stack{gap:.8rem;display:grid}.piece-preview{place-items:center;min-height:72px;display:grid}.piece-preview.empty{opacity:.28}.piece-preview-grid{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(4,1fr);gap:2px;width:64px;height:64px;display:grid}.piece-preview-grid i{border-radius:3px}.score-panel{gap:.85rem;display:grid}.score-panel p{border-bottom:1px solid #2d4056;margin:0;padding-bottom:.8rem}.score-panel p:last-child{border-bottom:0;padding-bottom:0}.score-panel span{margin-bottom:.25rem}.score-panel strong{color:#fff;font:800 1.55rem/1 ui-monospace,Menlo,monospace}.tetris-controls{background:#dce5ed;border-top:1px solid #26394d;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:14px;display:none}.tetris-controls button{color:#22394f;background:#f8fbff;border:1px solid #98aabc;border-radius:8px;min-height:46px;font:900 1.1rem ui-sans-serif,system-ui,sans-serif}.tetris-statusbar{color:#5c6e82;background:#edf3f7;border-top:1px solid #26394d;justify-content:space-between;gap:1rem;min-height:46px;padding:12px 18px;font:800 .72rem ui-monospace,monospace;display:flex}.tetris-statusbar strong{color:#213f60}.tetris-toast{z-index:20;color:#102338;opacity:0;pointer-events:none;background:#eef6ffed;border-radius:999px;max-width:calc(100% - 32px);padding:.7rem 1rem;transition:all .18s;position:absolute;bottom:58px;left:50%;transform:translate(-50%,8px);box-shadow:0 14px 30px #0005}.tetris-toast.visible{opacity:1;transform:translate(-50%)}.tetris-over-dialog,.tetris-rules-dialog{max-width:min(640px,100% - 32px);color:var(--ink);background:#f7f9fc;border:1px solid #bdcada;border-radius:18px;padding:0;box-shadow:0 25px 90px #07172e73}.tetris-over-dialog{max-width:min(470px,100% - 32px)}.tetris-over-dialog::backdrop,.tetris-rules-dialog::backdrop{backdrop-filter:blur(5px);background:#07172eba}.tetris-over-dialog form,.tetris-rules-dialog form{padding:2.2rem;position:relative}.tetris-over-dialog h2,.tetris-rules-dialog h2{margin:0;font:500 2.2rem ui-serif,Georgia,serif}.tetris-over-dialog form>p:not(.eyebrow){color:var(--muted);line-height:1.7}.tetris-rule-list{gap:.7rem;margin-top:1.3rem;display:grid}.tetris-rule-list p{border-top:1px solid var(--line);color:var(--muted);grid-template-columns:78px 1fr;gap:1rem;margin:0;padding:.85rem 0;line-height:1.75;display:grid}.tetris-rule-list b{color:#174b82}.tetris-rule-list kbd{color:#18324d;text-align:center;background:#fff;border:1px solid #b6c4d3;border-bottom-width:2px;border-radius:6px;min-width:1.8em;margin:0 .08rem;padding:.13rem .38rem;font:800 .78em ui-monospace,Menlo,monospace;display:inline-block}.dialog-close{color:var(--muted);cursor:pointer;background:0 0;border:0;font-size:1.5rem;position:absolute;top:12px;right:12px}.dialog-primary{color:#fff;cursor:pointer;background:#123f73;border:0;border-radius:9px;width:100%;min-height:46px;margin-top:1.2rem;font-weight:800}.text-button{width:100%;min-height:42px;color:var(--muted);cursor:pointer;background:0 0;border:0;margin-top:.5rem}@media (width<=860px){.tetris-page{width:100%}.tetris-intro{flex-direction:column;align-items:start;gap:1.2rem;width:calc(100% - 32px);margin:0 auto}.tetris-shell{border-left:0;border-right:0;border-radius:0}.tetris-toolbar{flex-direction:column;align-items:stretch}.mode-tabs button{flex:1;padding:0 .7rem}.mode-tabs small{margin:2px 0 0;display:block}.tetris-actions{justify-content:stretch}.icon-button{flex:1}.tetris-stage{grid-template-columns:minmax(0,1fr) minmax(220px,320px);min-height:auto;padding:1rem}.left-panel{grid-area:1/1}.tetris-board-frame{grid-area:1/2/span 2}.right-panel{grid-area:2/1}.tetris-board{width:min(52vw,320px)}.piece-preview{min-height:58px}.score-panel strong{font-size:1.2rem}.tetris-controls{display:grid}}@media (width<=620px){.tetris-stage{grid-template-columns:1fr;justify-items:center}.left-panel,.right-panel,.tetris-board-frame{grid-area:auto;width:min(100%,360px)}.left-panel{grid-template-columns:1fr 1fr}.right-panel{grid-template-columns:1fr}.piece-preview-stack{grid-template-columns:repeat(3,1fr)}.tetris-board{width:min(100vw - 56px,336px)}.tetris-controls{grid-template-columns:repeat(3,minmax(0,1fr))}.tetris-rule-list p{grid-template-columns:1fr;gap:.35rem}.tetris-rules-dialog form{padding:1.8rem}}
