:root{--bg: #0e1116;--panel: #171c26;--panel-2: #212940;--text: #e8ecf4;--muted: #93a0b4;--accent: #a78bfa;--accent-ink: #1c1040;color-scheme:dark}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent;overflow:hidden}.game{height:100%;max-width:720px;margin-inline:auto;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:10px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.play{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}.rail{flex:0 0 auto;min-width:0;display:flex;gap:8px;order:1}.rail-end{order:2}.board-wrap{order:3}.rail .stat{flex:1 1 0;min-width:0}.rail .box{height:68px}.rail>.box{flex:0 0 92px}.rail-end>.box{flex:1 1 auto}.rail-actions{flex-direction:row}@media(min-aspect-ratio:4 / 5){.play{flex-direction:row;gap:10px;width:100%;max-width:calc(50vh + 240px);margin-inline:auto}.rail,.rail-end,.board-wrap{order:0}.rail{flex-direction:column;width:clamp(74px,17vw,104px);min-height:0;overflow:hidden}.rail .stat{flex:0 0 auto}.rail .box,.rail>.box,.rail-end>.box{flex:1 1 auto;height:auto}.rail-actions{flex-direction:column}}.stat{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:7px 10px;border-radius:10px;background:var(--panel)}.stat-label{color:var(--muted);font-size:11px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat-value{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}.box{display:flex;flex-direction:column;gap:5px;min-height:52px;padding:7px 10px 9px;border:0;border-radius:10px;background:var(--panel);color:inherit;font:inherit;text-align:start}button.box{cursor:pointer}button.box:disabled{opacity:.45;cursor:default}.box-label{color:var(--muted);font-size:11px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview{display:block;flex:1 1 auto;width:100%;min-height:0}.rail-actions{flex:0 0 auto;display:flex;gap:8px}.btn{min-height:44px;min-width:44px;padding:0 14px;border:0;border-radius:10px;background:var(--panel-2);color:var(--text);font:inherit;font-weight:600;cursor:pointer}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--accent);color:var(--accent-ink);padding:0 28px;font-size:16px}.btn-small{min-height:38px;padding:0 8px;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board-wrap{position:relative;flex:1;min-width:0;min-height:0;touch-action:none}canvas.board{position:absolute;inset:0;width:100%;height:100%;display:block}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;text-align:center;border-radius:12px;background:#0e1116c7;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.overlay[hidden]{display:none}.overlay-title{margin:0;font-size:clamp(20px,5vw,38px);line-height:1.15}.overlay-score{margin:0;font-size:16px;font-weight:600}.overlay-hint{margin:0;max-width:34ch;color:var(--muted);font-size:13px;line-height:1.45}.overlay-score[hidden],.overlay-hint[hidden]{display:none}.pad{display:none;gap:8px;grid-template-columns:repeat(6,1fr)}@media(pointer:coarse){.pad{display:grid}}.pad-btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0;border:0;border-radius:12px;background:var(--panel-2);color:var(--text);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}.pad-btn:active,.pad-btn.is-down{background:#2c3763}.pad-btn svg{width:26px;height:26px}.pad-btn[data-action=hardDrop]{color:var(--accent)}@media(max-height:470px){.game{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:8px}.rail{width:clamp(64px,15vw,88px);gap:6px}.stat{padding:4px 8px}.stat-label,.box-label{font-size:10px}.stat-value{font-size:15px}.btn-small{min-height:32px}.pad-btn{min-height:44px}.overlay-hint{font-size:12px}}@media(max-height:470px)and (min-aspect-ratio:13 / 10){.game{flex-direction:row;max-width:none}.pad{grid-template-columns:repeat(2,1fr);align-content:center;flex:0 0 auto;width:116px}}@media(prefers-reduced-motion:reduce){.btn:active,.pad-btn:active{transform:none}}