.game{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap);min-height:100dvh;width:100%;padding:var(--gap)}.console{position:relative;padding:10px;background:var(--c-frame);border-top:var(--edge) solid var(--c-text);border-left:var(--edge) solid var(--c-text);border-right:var(--edge) solid var(--c-frame-dark);border-bottom:var(--edge) solid var(--c-frame-dark);box-shadow:6px 6px 0 0 var(--c-frame-dark)}.console__inner{padding:8px;background:var(--c-bg);border-top:var(--edge) solid var(--c-frame-dark);border-left:var(--edge) solid var(--c-frame-dark);border-right:var(--edge) solid var(--c-text);border-bottom:var(--edge) solid var(--c-text)}.console__screws{display:flex;justify-content:space-between;padding:0 2px 6px}.console__screw{width:6px;height:6px;background:var(--c-frame-dark)}.console__vents{display:flex;gap:4px;justify-content:center;padding-top:6px}.console__vent{width:26px;height:4px;background:var(--c-frame-dark)}.screen{display:flex;align-items:flex-start;gap:var(--gap)}.screen__board{position:relative}.board{display:grid;grid-template-columns:repeat(10,var(--cell));grid-template-rows:repeat(20,var(--cell));background:var(--c-bg);border:var(--edge) solid var(--c-frame-dark)}.board__row{display:contents}.cell{width:var(--cell);height:var(--cell);background:var(--c-bg)}.cell[data-cell]:not([data-cell="0"]){background:var(--piece, var(--c-piece-a));box-shadow:inset var(--edge) var(--edge) 0 0 var(--c-text),inset calc(var(--edge) * -1) calc(var(--edge) * -1) 0 0 var(--c-frame-dark)}.cell--ghost[data-cell]:not([data-cell="0"]){background:var(--c-bg);box-shadow:inset 0 0 0 var(--edge) var(--c-frame)}.cell--preview{width:calc(var(--cell) * .7);height:calc(var(--cell) * .7);background:transparent}.cell--preview[data-cell="0"]{background:transparent}.hud{display:flex;flex-direction:column;gap:var(--gap);min-width:calc(var(--cell) * 4.6)}.hud__stat{display:flex;flex-direction:column;gap:4px;padding:6px;border:var(--edge) solid var(--c-frame-dark)}.hud__label{color:var(--c-accent);font-size:8px}.hud__value{color:var(--c-text);font-size:10px}.hud__stat--next{align-items:flex-start}.preview{display:grid;grid-template-columns:repeat(4,calc(var(--cell) * .7));grid-template-rows:repeat(4,calc(var(--cell) * .7))}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:8px;background:var(--c-bg);border:var(--edge) solid var(--c-frame-dark);text-align:center}.overlay__title{margin:0;color:var(--c-accent);font-size:calc(var(--cell) * .85);line-height:1.2}.overlay__title--small{font-size:calc(var(--cell) * .55)}.overlay__line{display:flex;flex-direction:column;gap:4px;margin:0;font-size:8px}.overlay__label{color:var(--c-frame)}.overlay__value{color:var(--c-text);font-size:10px}.overlay__blink{margin:0;color:var(--c-text);font-size:9px;animation:blink 1s steps(1,end) infinite}.overlay__blink--small{font-size:7px}@keyframes blink{0%{opacity:1}50%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.overlay__blink{animation:none}}.btn{min-width:48px;min-height:48px;padding:0 12px;background:var(--c-frame);color:var(--c-bg);font:inherit;font-size:10px;text-transform:uppercase;border-top:var(--edge) solid var(--c-text);border-left:var(--edge) solid var(--c-text);border-right:var(--edge) solid var(--c-frame-dark);border-bottom:var(--edge) solid var(--c-frame-dark);touch-action:manipulation;user-select:none;-webkit-user-select:none;cursor:pointer}.btn--wide{min-width:calc(var(--cell) * 5)}.btn:active{border-top-color:var(--c-frame-dark);border-left-color:var(--c-frame-dark);border-right-color:var(--c-text);border-bottom-color:var(--c-text)}.pad{display:grid;width:min(100%,420px);grid-template-columns:repeat(6,minmax(0,1fr));grid-template-areas:"lft dwn rgt ... ccw cw_" "drp drp drp pse pse pse";gap:6px;padding:6px;background:var(--c-frame-dark);border-top:var(--edge) solid var(--c-frame);border-left:var(--edge) solid var(--c-frame)}.pad__btn{min-width:48px;min-height:48px;padding:0;background:var(--c-frame);color:var(--c-bg);font:inherit;font-size:12px;line-height:1;border-top:var(--edge) solid var(--c-text);border-left:var(--edge) solid var(--c-text);border-right:var(--edge) solid var(--c-frame-dark);border-bottom:var(--edge) solid var(--c-frame-dark);touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}.pad__btn:active{border-top-color:var(--c-frame-dark);border-left-color:var(--c-frame-dark);border-right-color:var(--c-text);border-bottom-color:var(--c-text)}.pad__btn--text{font-size:9px}.pad__btn--rotate{background:var(--c-accent);color:var(--c-text)}.pad__btn--left{grid-area:lft}.pad__btn--softDrop{grid-area:dwn}.pad__btn--right{grid-area:rgt}.pad__btn--rotateCCW{grid-area:ccw}.pad__btn--rotateCW{grid-area:cw_}.pad__btn--hardDrop{grid-area:drp}.pad__btn--pause{grid-area:pse}:root{--c-bg: #000000;--c-frame: #7c7c7c;--c-frame-dark: #3c3c3c;--c-text: #fcfcfc;--c-accent: #f83800;--c-piece-a: #3cbcfc;--c-piece-b: #0058f8;--c-piece-c: #fcfcfc;--cell: clamp(14px, 4vw, 28px);--edge: 2px;--gap: 8px;color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html{height:100%}body{margin:0;min-height:100dvh;background:var(--c-bg);color:var(--c-text);font-family:"Press Start 2P",Courier New,monospace;font-size:10px;line-height:1.6;letter-spacing:.06em;text-transform:uppercase;image-rendering:pixelated;-webkit-font-smoothing:none;text-rendering:optimizeSpeed;-webkit-text-size-adjust:100%;overscroll-behavior:none}img,canvas{image-rendering:pixelated}#root{display:flex;min-height:100dvh;align-items:center;justify-content:center}[data-cell=I],[data-cell=O],[data-cell=T]{--piece: var(--c-piece-a)}[data-cell=J],[data-cell=S]{--piece: var(--c-piece-b)}[data-cell=L],[data-cell=Z]{--piece: var(--c-piece-c)}