.app{display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:24px 0;gap:6px;width:min(95vw,500px);height:100vh}.board-stack{width:100%;display:flex;flex-direction:column;gap:0}.bottom-stack{width:100%;display:flex;flex-direction:column;gap:6px}.logo{width:100%;max-width:500px;height:auto;display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.hud{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px}.score,.next-preview{background:var(--board-bg);color:var(--hud-text);border-radius:4px;padding:18px 6px 4px;font-weight:700;font-variant-numeric:tabular-nums;position:relative;text-align:center;width:80px;height:72px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.score:before,.next-preview:before{position:absolute;top:4px;left:0;right:0;text-transform:uppercase;font-size:8px;font-weight:700;letter-spacing:0px;color:var(--hud-label);text-align:center}.score:before{content:"Lines"}.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}.score{font-size:28px}.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: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:calc((100% - 20px - (var(--n) - 1) * 4px) / var(--n));height:calc((100% - 20px - (var(--n) - 1) * 4px) / var(--n));border-radius:2px;overflow:hidden;filter:drop-shadow(0 0 3px currentColor);transform:translate3d(calc(var(--c) * (100% + 4px)),calc(var(--r) * (100% + 4px)),0);transition:transform .16s cubic-bezier(.34,1.34,.64,1);transition-property:transform;pointer-events:none;will-change:transform;backface-visibility:hidden;image-rendering:pixelated}.piece-cell[data-kind=Z]{background:linear-gradient(to bottom,#ff2814,#ff0905 50%,#f00008 50%,#d60015);color:#ff0905;box-shadow:0 0 0 2px #000000a6,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:0 0 0 2px #000000a6,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:0 0 0 2px #000000a6,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:0 0 0 2px #000000a6,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:0 0 0 2px #000000a6,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:0 0 0 2px #000000a6,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:0 0 0 2px #000000a6,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}.board.rotating .piece-cell{transition:transform 90ms ease-out}.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;gap:20px}.overlay-score-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}.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}.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,48px);grid-template-rows:repeat(2,48px);gap:4px}.dpad button{font-size:16px;padding:0;line-height:1;border-radius:50%;position:relative;background-color:#155dc1;color:#d6e7ff;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;transition:box-shadow .2s}.dpad button:before{content:"";position:absolute;bottom:10px;left:12px;display:block;width:24px;height:14px;background:linear-gradient(to top,#6ca3ef4d,#3e86ea1a);border-radius:40% 40% 60% 60%;pointer-events:none;transition:opacity .2s}.dpad button:hover{background-color:#3e86ea}.dpad button:active,.dpad button.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}.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{position:relative;top:-12px}.rotate,.gear{position:relative;width:52px;height:52px;border-radius:50%;padding:0;font-size:0;color:transparent;flex-shrink:0;transition:box-shadow .2s}.rotate{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}.rotate:before{content:"";position:absolute;bottom:12px;left:14px;display:block;width:24px;height:16px;background:linear-gradient(to top,#f797974d,#e212121a);border-radius:40% 40% 60% 60%;transition:opacity .2s}.rotate:hover{background-color:#f15555}.rotate:active,.rotate.pressed{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}.rotate:active:before,.rotate.pressed:before{opacity:.5}.gear{background-color:#cacfd8;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}.gear:before{content:"";position:absolute;bottom:12px;left:14px;display:block;width:24px;height:16px;background:linear-gradient(to top,#f6f7f880,#cacfd81a);border-radius:40% 40% 60% 60%;transition:opacity .2s}.gear:active{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}.gear:hover{background-color:#f9fafb}.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)}