:root{--dpad-btn: 53px;--action-btn: 57px}@media (max-width: 430px){:root{--dpad-btn: 44px;--action-btn: 47px}}.app{display:grid;grid-template-rows:auto 1fr auto;align-items:center;justify-items:center;padding:16px 0;width:min(95vw,500px);height:100dvh;overflow:clip}.board-stack{width:100%;min-height:0;display:flex;flex-direction:column;gap:0;position:relative}.bottom-stack{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.logo{width:100%;max-width:500px;height:auto;display:block;align-self:start;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.hud{background:var(--board-bg);width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;border-radius:6px 6px 0 0;padding:0 6px}.hud-lines,.hud-level,.hud-score,.next-preview{flex:1;font-size:clamp(20px,4vw,28px);color:var(--hud-text);border-radius:4px;padding:18px 6px 0;font-weight:700;font-variant-numeric:tabular-nums;position:relative;text-align:center;height:72px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.hud-lines,.hud-score,.next-preview{max-width:62px}.hud-right{display:flex;gap:0}.hud-level{width:56px}.hud-lines:before,.hud-level:before,.hud-score:before,.next-preview:before{position:absolute;top:8px;left:0;right:0;text-transform:uppercase;font-size:8px;font-weight:700;letter-spacing:0px;color:var(--hud-label);text-align:center}.hud-lines:before{content:"Lines"}.hud-level:before{content:"Level"}.hud-score:before{content:"Score"}.next-preview:before{content:"Next"}.mini-piece{display:grid;gap:2px;max-width:100%;max-height:100%}.mini-cell{background:transparent;border-radius:2px;min-width:0;min-height:0}.mini-cell.on{box-shadow:inset 0 0 0 1px #0003}.board-wrap{position:relative;width:100%;aspect-ratio:1 / 1;touch-action:none;overscroll-behavior:contain}.board{position:relative;width:100%;height:100%;background:var(--board-bg);padding:10px;border-radius:0 0 6px 6px;touch-action:none;overflow:hidden}.grid-bg{width:100%;height:100%;display:grid;gap:4px}.cell{background:var(--cell-bg);border-radius:3px}.piece-cell{position:absolute;top:10px;left:10px;width:var(--cell-size, calc((100% - 20px - (var(--n) - 1) * 4px) / var(--n)));height:var(--cell-size, calc((100% - 20px - (var(--n) - 1) * 4px) / var(--n)));border-radius:2px;overflow:hidden;box-shadow:0 0 4px currentColor;transform:translate3d(calc(var(--c) * (var(--cell-size, calc((100% - 20px - (var(--n) - 1) * 4px) / var(--n))) + 4px)),calc(var(--r) * (var(--cell-size, calc((100% - 20px - (var(--n) - 1) * 4px) / var(--n))) + 4px)),0);pointer-events:none;image-rendering:pixelated;transition:transform .1s ease-in-out}@keyframes piece-slam{0%{translate:0 calc(-2.5 * var(--cell-size, 40px));scale:1.05;opacity:0}60%{opacity:1}to{translate:0 0;scale:1}}.piece-cell.piece-new{transition:none;animation:piece-slam .16s cubic-bezier(.2,0,.2,1) both}.piece-cell[data-kind=Z]{background:linear-gradient(to bottom,#ff2814,#ff0905 50%,#f00008 50%,#d60015);color:#ff0905;box-shadow:inset 0 0 0 5px #c2000a,inset 0 0 0 3px #eb0c00}.piece-cell[data-kind=L]{background:linear-gradient(to bottom,#ffe605,#ff8c00 50%,#ff3c00 50%,#f92a01);color:#ff8c00;box-shadow:inset 0 0 0 5px #e04b00,inset 0 0 0 3px #fc0}.piece-cell[data-kind=O]{background:linear-gradient(to bottom,#e7ff0a,#ffee05 50%,#ffc300 50%,#f0a000);color:#ffee05;box-shadow:inset 0 0 0 5px #dba800,inset 0 0 0 3px #f0f000}.piece-cell[data-kind=S]{background:linear-gradient(to bottom,#00ff4d,#00f018 50%,#0fdb00 50%,#28c700);color:#00f018;box-shadow:inset 0 0 0 5px #18b800,inset 0 0 0 3px #00db1d}.piece-cell[data-kind=I]{background:linear-gradient(to bottom,#5cb3ff,#38c3ff 50%,#1ad9ff 50%,#05eeff);color:#38c3ff;box-shadow:inset 0 0 0 5px #00d4ff,inset 0 0 0 3px #29b8ff}.piece-cell[data-kind=T]{background:linear-gradient(to bottom,#ff75d1,#ff57e3 50%,#f93dff 50%,#d729fa);color:#ff57e3;box-shadow:inset 0 0 0 5px #ee1cfd,inset 0 0 0 3px #ff47da}.piece-cell[data-kind=J]{background:linear-gradient(to bottom,#ae6afb,#824dff 50%,#4e33ff 50%,#2121fd);color:#824dff;box-shadow:inset 0 0 0 5px #270fff,inset 0 0 0 3px #7b3afd}.mini-cell[data-kind=Z]{background:linear-gradient(to bottom,#ff2814,#d60015)}.mini-cell[data-kind=L]{background:linear-gradient(to bottom,#ffe605,#f92a01)}.mini-cell[data-kind=O]{background:linear-gradient(to bottom,#e7ff0a,#f0a000)}.mini-cell[data-kind=S]{background:linear-gradient(to bottom,#00ff4d,#28c700)}.mini-cell[data-kind=I]{background:linear-gradient(to bottom,#5cb3ff,#05eeff)}.mini-cell[data-kind=T]{background:linear-gradient(to bottom,#ff75d1,#d729fa)}.mini-cell[data-kind=J]{background:linear-gradient(to bottom,#ae6afb,#2121fd)}.piece-cell:before{content:"";position:absolute;top:12%;left:8%;width:84%;height:14%;background:#ffffffa6;border-radius:4px;filter:blur(1px);pointer-events:none}.piece-cell:after{content:"";position:absolute;bottom:0;left:0;right:0;height:38%;background:#00000038;pointer-events:none}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--overlay-bg);border-radius:6px}.overlay-content{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;width:100%;height:100%;padding:0 20px;box-sizing:border-box;overflow:hidden}.overlay-title{width:100%;font-size:min(9.5vw,48px);font-weight:700;color:var(--overlay-text);text-align:center;letter-spacing:.05em;text-shadow:0 2px 16px rgba(0,0,0,.6);overflow:hidden}@keyframes flash-text{0%,49%{opacity:1}50%,to{opacity:0}}.start-prompt{font-size:14px;color:#f54747;text-align:center;letter-spacing:.06em;animation:flash-text 1s step-start infinite;text-shadow:0 0 8px hsl(0 90% 50%)}.overlay-score-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}.overlay-score-label{font-size:13px;font-weight:700;letter-spacing:1px;color:var(--hud-label);text-transform:uppercase}.overlay-score{font-size:72px;font-weight:700;color:var(--overlay-text);line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 2px 12px rgba(0,0,0,.5)}.play-again{position:relative;width:76px;height:76px;border-radius:50%;padding:0;font-size:0;color:transparent;flex-shrink:0;background-color:#138613;transition:box-shadow .2s;box-shadow:inset 0 3px #169c16,inset 0 -3px 1px #107010,0 0 1px #138613,inset 0 0 3px #0a430a,inset 0 0 3px #0e1c3a80,inset 0 0 1px 6px #138613,inset 0 -3px 2px 8px #0e1c3ab3,inset 0 0 1px 8px #062d06,inset 0 0 1px 8px #0e1c3ab3,inset 0 0 1px 8px #010901,inset 0 0 1px 10px #66d966b3,inset 0 4px 0 9px #46c846b3,inset 0 -4px 1px 9px #14501433,inset 0 0 0 14px #138613,inset 0 30px 10px #107010,inset 0 0 8px 13px #0d590d,0 2px 4px #00000080}.play-again:hover{background-color:#1dcd1d}.play-again:before{content:"";position:absolute;bottom:17px;left:21px;display:block;width:35px;height:23px;background:linear-gradient(to top,#66d9664d,#1380131a);border-radius:40% 40% 60% 60%;transition:opacity .2s}.play-again:active,.play-again.pressed{background-color:#127d12;box-shadow:inset 0 3px #169c16,inset 0 -3px 1px #107010,0 0 1px #138613,inset 0 0 3px #0a430a,inset 0 0 3px #0e1c3a80,inset 0 0 1px 6px #138613,inset 0 -3px 2px 8px #0e1c3ab3,inset 0 0 1px 8px #062d06,inset 0 0 1px 8px #0e1c3ab3,inset 0 0 2px 9px #010901,inset 0 0 1px 10px #66d96633,inset 0 4px 0 9px #46c84680,inset 0 -4px 1px 9px #0a320a33,inset 0 0 0 14px #117811,inset 0 30px 10px #0e620e,inset 0 0 8px 13px #0a430a,0 2px 4px #00000080}.play-again:active:before,.play-again.pressed:before{opacity:.5}.action-green{position:relative;width:var(--action-btn);height:var(--action-btn);border-radius:50%;padding:0;font-size:0;color:transparent;flex-shrink:0;background-color:#138613;transition:box-shadow .2s;box-shadow:inset 0 2px #169c16,inset 0 -2px 1px #107010,0 0 1px #138613,inset 0 0 2px #0a430a,inset 0 0 2px #0e1c3a80,inset 0 0 1px 4px #138613,inset 0 -2px 1px 5px #0e1c3ab3,inset 0 0 1px 5px #062d06,inset 0 0 1px 5px #0e1c3ab3,inset 0 0 1px 6px #010901,inset 0 0 1px 7px #66d966b3,inset 0 3px 0 6px #46c846b3,inset 0 -3px 1px 6px #14501433,inset 0 0 0 9px #138613,inset 0 21px 7px #107010,inset 0 0 5px 9px #0d590d,0 3px 6px #00000080}.action-green:before{content:"";position:absolute;bottom:18%;left:21%;display:block;width:42%;height:25%;background:linear-gradient(to top,#66d9664d,#1380131a);border-radius:40% 40% 60% 60%;transition:opacity .2s}.action-green:hover{background-color:#1dcd1d}.action-green:active{background-color:#127d12;box-shadow:inset 0 2px #169c16,inset 0 -2px 1px #107010,0 0 1px #138613,inset 0 0 2px #0a430a,inset 0 0 2px #0e1c3a80,inset 0 0 1px 4px #138613,inset 0 -2px 1px 5px #0e1c3ab3,inset 0 0 1px 5px #062d06,inset 0 0 1px 5px #0e1c3ab3,inset 0 0 1px 6px #010901,inset 0 0 1px 7px #66d96633,inset 0 3px 0 6px #46c84680,inset 0 -3px 1px 6px #0a320a33,inset 0 0 0 9px #117811,inset 0 21px 7px #0e620e,inset 0 0 5px 9px #0a430a,0 3px 6px #00000080}.action-green:active:before{opacity:.5}.pending{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--hud-text);pointer-events:none;filter:drop-shadow(0 0 12px rgba(0,0,0,.3));transition:opacity .08s linear,transform .08s linear}.pending-arrow{font-size:64px;line-height:1;color:var(--hud-text);text-shadow:0 0 20px rgba(255,255,255,.4)}.pending-x{font-size:72px;color:#e74c3c;line-height:1;text-shadow:0 0 20px rgba(231,76,60,.5)}.tri{display:inline-block;width:0;height:0}.tri-up{border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:12px solid currentColor}.tri-down{border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid currentColor}.tri-left{border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:12px solid currentColor}.tri-right{border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid currentColor}.tri-lg.tri-up{border-left-width:42px;border-right-width:42px;border-bottom-width:62px}.tri-lg.tri-down{border-left-width:42px;border-right-width:42px;border-top-width:62px}.tri-lg.tri-left{border-top-width:42px;border-bottom-width:42px;border-right-width:62px}.tri-lg.tri-right{border-top-width:42px;border-bottom-width:42px;border-left-width:62px}.flash{position:absolute;top:10px;right:10px;background:var(--accent);color:var(--hud-text);padding:4px 10px;border-radius:3px;font-size:12px;font-weight:700;pointer-events:none}.controls{display:flex;width:100%;align-items:flex-end;justify-content:space-between;gap:16px}.dpad{display:grid;grid-template-columns:repeat(3,var(--dpad-btn));grid-template-rows:repeat(2,var(--dpad-btn));gap:10px}.dpad button{font-size:16px;padding:0;line-height:1;border-radius:50%;position:relative;background-color:#cacfd8;color:#242e42;box-shadow:inset 0 2px #e2e4e9,inset 0 -2px 1px #a7afbe,0 0 1px #b6bcc9,inset 0 0 2px #7b879d,inset 0 0 2px #0e1c3a4d,inset 0 0 1px 4px #c4c9d4,inset 0 -2px 1px 5px #0e1c3a66,inset 0 0 1px 5px #7b879d,inset 0 0 1px 5px #0e1c3a4d,inset 0 0 1px 6px #414958,inset 0 0 1px 7px #f6f7f8e6,inset 0 3px 0 6px #f0f2f4cc,inset 0 -3px 1px 6px #7b879d4d,inset 0 0 0 9px #cacfd8,inset 0 21px 7px #b3b9c7,inset 0 0 5px 9px #a1a9ba,0 3px 6px #00000080;transition:box-shadow .2s}.dpad button:before{content:"";position:absolute;bottom:19%;left:22%;display:block;width:45%;height:26%;background:linear-gradient(to top,#f6f7f880,#cacfd81a);border-radius:40% 40% 60% 60%;pointer-events:none;transition:opacity .2s}.dpad button:hover{background-color:#f9fafb}.dpad button:active,.dpad button.pressed{background-color:#bec4cf;box-shadow:inset 0 2px #e2e4e9,inset 0 -2px 1px #a7afbe,0 0 1px #b6bcc9,inset 0 0 2px #7b879d,inset 0 0 2px #0e1c3a4d,inset 0 0 1px 4px #c4c9d4,inset 0 -2px 1px 5px #0e1c3a66,inset 0 0 1px 5px #7b879d,inset 0 0 1px 5px #0e1c3a4d,inset 0 0 1px 6px #414958,inset 0 0 1px 7px #f6f7f866,inset 0 3px 0 6px #f0f2f480,inset 0 -3px 1px 6px #5761754d,inset 0 0 0 9px #b9bfcb,inset 0 21px 7px #a1a9ba,inset 0 0 5px 9px #8a94a8,0 3px 6px #00000080}.dpad button:active:before,.dpad button.pressed:before{opacity:.5}.dpad button:nth-child(1){grid-column:2;grid-row:1}.dpad button:nth-child(2){grid-column:1;grid-row:2}.dpad button:nth-child(3){grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}.actions{display:flex;gap:10px;align-items:flex-end}.rotate,.action-green{position:relative}.rotate{top:-18px}.action-green{top:-32px;right:-4px}.rotate,.gear{position:relative;width:var(--action-btn);height:var(--action-btn);border-radius:50%;padding:0;font-size:0;color:transparent;flex-shrink:0;transition:box-shadow .2s}.rotate{background-color:#155dc1;box-shadow:inset 0 2px #1868d8,inset 0 -2px 1px #1352aa,0 0 1px #155dc1,inset 0 0 2px #0f428a,inset 0 0 2px #0e1c3a80,inset 0 0 1px 4px #155dc1,inset 0 -2px 1px 5px #0e1c3ab3,inset 0 0 1px 5px #0f428a,inset 0 0 1px 5px #0e1c3ab3,inset 0 0 1px 6px #010409,inset 0 0 1px 7px #7eaef1b3,inset 0 3px 0 6px #3a83e9b3,inset 0 -3px 1px 6px #10479333,inset 0 0 0 9px #155dc1,inset 0 21px 7px #1352aa,inset 0 0 5px 9px #114b9c,0 3px 6px #00000080}.rotate:before{content:"";position:absolute;bottom:21%;left:25%;display:block;width:42%;height:28%;background:linear-gradient(to top,#6ca3ef4d,#3e86ea1a);border-radius:40% 40% 60% 60%;transition:opacity .2s}.rotate:hover{background-color:#3e86ea}.rotate:active,.rotate.pressed{background-color:#1458b8;box-shadow:inset 0 2px #1868d8,inset 0 -2px 1px #1352aa,0 0 1px #155dc1,inset 0 0 2px #0f428a,inset 0 0 2px #0e1c3a80,inset 0 0 1px 4px #155dc1,inset 0 -2px 1px 5px #0e1c3ab3,inset 0 0 1px 5px #0f428a,inset 0 0 1px 5px #0e1c3ab3,inset 0 0 1px 6px #010409,inset 0 0 1px 7px #7eaef133,inset 0 3px 0 6px #3a83e980,inset 0 -3px 1px 6px #0f428a33,inset 0 0 0 9px #1456b3,inset 0 21px 7px #114b9c,inset 0 0 5px 9px #10458e,0 3px 6px #00000080}.rotate:active:before,.rotate.pressed:before{opacity:.5}.gear{background-color:#e21212;box-shadow:inset 0 2px #ed2121,inset 0 -2px 1px #cb1010,0 0 1px #e21212,inset 0 0 2px #9c0d0d,inset 0 0 2px #0e1c3a80,inset 0 0 1px 4px #e21212,inset 0 -2px 1px 5px #0e1c3ab3,inset 0 0 1px 5px #840b0b,inset 0 0 1px 5px #0e1c3ab3,inset 0 0 1px 6px #090101,inset 0 0 1px 7px #f79797b3,inset 0 3px 0 6px #f15050b3,inset 0 -3px 1px 6px #b30f0f33,inset 0 0 0 9px #e21212,inset 0 21px 7px #cb1010,inset 0 0 5px 9px #b30f0f,0 3px 6px #00000080}.gear:before{content:"";position:absolute;bottom:21%;left:25%;display:block;width:42%;height:28%;background:linear-gradient(to top,#f797974d,#e212121a);border-radius:40% 40% 60% 60%;transition:opacity .2s}.gear:active{background-color:#d91212;box-shadow:inset 0 2px #ed2121,inset 0 -2px 1px #cb1010,0 0 1px #e21212,inset 0 0 2px #9c0d0d,inset 0 0 2px #0e1c3a80,inset 0 0 1px 4px #e21212,inset 0 -2px 1px 5px #0e1c3ab3,inset 0 0 1px 5px #840b0b,inset 0 0 1px 5px #0e1c3ab3,inset 0 0 1px 6px #090101,inset 0 0 1px 7px #f7979733,inset 0 3px 0 6px #f1505080,inset 0 -3px 1px 6px #840b0b33,inset 0 0 0 9px #d41111,inset 0 21px 7px #bd0f0f,inset 0 0 5px 9px #9c0d0d,0 3px 6px #00000080}.gear:hover{background-color:#f15555}.gear:active:before{opacity:.5}.hint{margin:0;font-size:13px;color:#776e65;text-align:center;line-height:1.4}.hint strong{color:#5c544c}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#776e6573;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal{background:var(--modal-bg);color:var(--text);border:1px solid var(--modal-border);border-radius:6px;width:min(92vw,360px);box-shadow:0 10px 40px #00000059;overflow:hidden}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--hud-bg);color:var(--hud-text);font-size:18px;font-weight:700}.modal-close{background:transparent;color:var(--hud-text);font-size:24px;line-height:1;width:32px;height:32px;padding:0}.modal-close:hover{background:#ffffff26}.modal-body{padding:16px;display:flex;flex-direction:column;gap:14px}.modal-body .row{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:700}.modal-body input[type=range]{width:100%}.kinds{display:flex;flex-direction:column;gap:6px}.kinds-label{font-size:13px;font-weight:700}.kind-list{display:flex;flex-wrap:wrap;gap:6px}.kind-toggle{display:inline-flex;align-items:center;gap:4px;cursor:pointer;-webkit-user-select:none;user-select:none}.kind-toggle input{display:none}.kind-swatch{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;border-radius:3px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);border:2px solid transparent;transition:opacity .1s ease,border-color .1s ease}.kind-toggle input:checked+.kind-swatch{border-color:var(--accent)}.settings-note{margin:0;font-size:11px;opacity:.7}.theme-toggle{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700}.theme-toggle button{background:var(--dpad-bg);color:var(--btn-text);padding:6px 14px}:root{--bg: radial-gradient(ellipse 120% 85% at 50% 0%, #213a63 0%, #0a1228 78%);--bg-solid: #0a1228;--text: #dce6f8;--board-bg: #0e1c3a;--cell-bg: rgba(255, 255, 255, .06);--hud-bg: #0e1c3a;--hud-text: #eaf2ff;--hud-label: #8aa0c8;--btn-bg: #24407a;--btn-bg-hover: #2e4f95;--btn-text: #eaf2ff;--dpad-bg: #0e1c3a;--dpad-bg-hover: #16294f;--overlay-bg: rgba(8, 14, 32, .82);--overlay-text: #eaf2ff;--modal-bg: #122244;--modal-border: #2a3f6b;--accent: #f5862e;--outline: rgba(0, 0, 0, .4);font-family:"Press Start 2P",monospace;color-scheme:dark;background:var(--bg-solid);color:var(--text)}:root[data-theme=dark]{--bg: radial-gradient(ellipse 120% 85% at 50% 0%, #122039 0%, #05080f 80%);--bg-solid: #05080f;--text: #c3cad6;--board-bg: #0c1322;--cell-bg: rgba(255, 255, 255, .045);--hud-bg: #0c1322;--hud-text: #e7ecf3;--hud-label: #7585a0;--btn-bg: #1b2740;--btn-bg-hover: #26344f;--btn-text: #e7ecf3;--dpad-bg: #0c1322;--dpad-bg-hover: #16203a;--overlay-bg: rgba(5, 8, 15, .84);--overlay-text: #e7ecf3;--modal-bg: #0b1322;--modal-border: #1f2c45;--accent: #5b8fd6;--outline: rgba(0, 0, 0, .45);color-scheme:dark}*{box-sizing:border-box}html,body{height:100vh;overflow:hidden;overscroll-behavior:none}body{margin:0;display:flex;align-items:flex-start;justify-content:center;touch-action:manipulation;background:var(--bg);background-attachment:fixed;color:var(--text);font-size:18px}button{font:inherit;background:var(--btn-bg);color:var(--btn-text);border:none;border-radius:4px;padding:8px 14px;cursor:pointer;font-weight:700;letter-spacing:.5px;box-shadow:inset 3px 3px #ffffff59,inset -3px -3px #00000057}button:hover{background:var(--btn-bg-hover)}