:root{--fit-cell-size: clamp(1.75rem, calc((100vw - 7rem)/8) , 3.15rem);--fit-gap: .2rem;--fit-board-edge: rgba(87, 230, 230, .44);--fit-empty: #1c2631;--fit-empty-hover: #23333f;--fit-gold: #ffd166;--fit-success: #86efac;--fit-danger: #f87171;--tone-1: var(--block-fit-tone-1);--tone-2: var(--block-fit-tone-2);--tone-3: var(--block-fit-tone-3);--tone-4: var(--block-fit-tone-4);--tone-5: var(--block-fit-tone-5);--tone-6: var(--block-fit-tone-6)}.game-page-block-fit{background:radial-gradient(circle at 77% 18%,rgba(255,159,120,.09),transparent 28rem),radial-gradient(circle at 16% 80%,rgba(87,230,230,.08),transparent 25rem),var(--bg)}.game-page-block-fit .ambient-grid{opacity:.12;background-image:linear-gradient(rgba(255,159,120,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(87,230,230,.028) 1px,transparent 1px);background-size:52px 52px}.block-fit-main{max-width:67rem;padding-top:1.4rem}.block-fit-game{padding:clamp(.85rem,2.4vw,1.55rem);background:linear-gradient(145deg,rgba(255,159,120,.04),transparent 22%),linear-gradient(155deg,#121820fa,#080c11f5)}.block-fit-game.game-panel:before{background:linear-gradient(90deg,var(--warm),var(--accent),transparent);box-shadow:0 0 14px #ff9f7847}.game-page-block-fit .game-kicker span{color:var(--warm)}.block-fit-heading{display:flex;margin-bottom:1rem;align-items:end;justify-content:space-between;gap:1.2rem}.block-fit-heading h1{margin:0;font-size:clamp(1.65rem,4vw,2.25rem);line-height:1;letter-spacing:-.045em}.game-intro{margin:.45rem 0 0;color:var(--text-muted);font-size:.88rem}.control-button{min-height:2.65rem;padding:.58rem .85rem;border:1px solid rgba(255,255,255,.14);border-radius:.38rem;background:linear-gradient(90deg,rgba(87,230,230,.05),transparent),#070c11e0;color:#aeb8c3;font:600 .65rem/1 var(--font-mono);letter-spacing:.045em;text-transform:uppercase;cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease}.control-button:hover{border-color:var(--accent);background:#57e6e621;color:var(--text);transform:translateY(-1px)}.new-game-button{flex:0 0 auto;border-color:#ff9f788c;color:var(--warm)}.game-toolbar{display:grid;margin-bottom:1rem;padding:.65rem;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:.42rem;background:linear-gradient(90deg,rgba(255,159,120,.04),transparent 48%),#05090db8;box-shadow:inset 0 0 0 1px #0000004d}.stat{display:grid;min-width:0;padding:.15rem .8rem;gap:.16rem;border-right:1px solid rgba(255,255,255,.1)}.stat:last-child{border-right:0}.stat:first-child{box-shadow:inset 2px 0 0 var(--warm)}.stat-label,.tray-kicker{color:#718091;font:400 .48rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.stat-value{overflow:hidden;color:var(--text);font:500 clamp(.95rem,3vw,1.3rem)/1.15 var(--font-mono);text-overflow:ellipsis}#score{color:var(--accent)}#combo[data-active=true]{color:var(--fit-success);text-shadow:0 0 10px rgba(134,239,172,.16)}.block-fit-playfield{display:grid;grid-template-columns:max-content minmax(13rem,1fr);align-items:stretch;justify-content:center;gap:clamp(1rem,3vw,2rem)}.board-frame{position:relative;width:max-content;padding:.45rem;border:1px solid var(--fit-board-edge);border-radius:.5rem;background:linear-gradient(145deg,rgba(87,230,230,.05),transparent 48%),#080e14;box-shadow:0 1.35rem 3rem #00000057,0 0 0 1px #ff9f781a,inset 0 0 2.2rem #0000004d}.board-coordinate{padding:.1rem .1rem .42rem;color:#536171;font:400 .46rem/1 var(--font-mono);letter-spacing:.09em;text-transform:uppercase}.block-fit-board{display:grid;width:max-content;padding:.25rem;grid-template-rows:repeat(8,var(--fit-cell-size));gap:var(--fit-gap);border:1px solid rgba(255,255,255,.08);border-radius:.34rem;background:#05090dbd}.block-fit-row{display:grid;grid-template-columns:repeat(8,var(--fit-cell-size));gap:var(--fit-gap)}.block-fit-cell{position:relative;width:var(--fit-cell-size);height:var(--fit-cell-size);margin:0;padding:0;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:.24rem;background:linear-gradient(145deg,rgba(255,255,255,.025),transparent 60%),var(--fit-empty);cursor:crosshair;transition:border-color .12s ease,background .12s ease,transform .12s ease}.block-fit-cell:before,.tray-block:before,.drag-block:before{position:absolute;top:.13rem;right:.13rem;bottom:.13rem;left:.13rem;border:1px solid color-mix(in srgb,var(--piece-color) 72%,#d9fbff);border-radius:.18rem;background:linear-gradient(145deg,rgba(255,255,255,.14),transparent 44%),var(--piece-color);box-shadow:inset 0 1px #ffffff14,inset 0 -.2rem .35rem #00000038,0 0 .45rem color-mix(in srgb,var(--piece-color) 12%,transparent);content:""}.block-fit-cell:not(.filled):not(.preview-valid):not(.preview-invalid):hover{border-color:#57e6e64d;background:var(--fit-empty-hover)}.block-fit-cell.filled{cursor:default}.block-fit-cell:not(.filled):before{display:none}.block-fit-cell.preview-valid{border-color:#86efacad;background:#86efac1c}.block-fit-cell.preview-valid:after,.block-fit-cell.preview-invalid:after{position:absolute;top:.17rem;right:.17rem;bottom:.17rem;left:.17rem;border-radius:.15rem;content:""}.block-fit-cell.preview-valid:after{border:1px solid rgba(134,239,172,.64);background:#86efac3d}.block-fit-cell.preview-invalid{border-color:#f87171ad;background:#f8717117}.block-fit-cell.preview-invalid:after{border:1px solid rgba(248,113,113,.62);background:repeating-linear-gradient(135deg,rgba(248,113,113,.24) 0,rgba(248,113,113,.24) .18rem,transparent .18rem,transparent .34rem)}.block-fit-cell.just-placed{animation:block-land .24s ease-out}.block-fit-cell.line-flash{animation:line-clear .36s ease-out}.tone-1{--piece-color: var(--tone-1)}.tone-2{--piece-color: var(--tone-2)}.tone-3{--piece-color: var(--tone-3)}.tone-4{--piece-color: var(--tone-4)}.tone-5{--piece-color: var(--tone-5)}.tone-6{--piece-color: var(--tone-6)}.tray-section{display:grid;min-width:0;padding:.8rem;align-content:start;border:1px solid rgba(255,255,255,.11);border-radius:.48rem;background:linear-gradient(145deg,rgba(255,159,120,.035),transparent 32%),linear-gradient(160deg,rgba(87,230,230,.035),transparent 52%),#05090db3}.tray-heading{display:flex;padding:.15rem .1rem .7rem;align-items:end;justify-content:space-between;gap:.8rem;border-bottom:1px solid rgba(255,255,255,.09)}.tray-heading h2{margin:.34rem 0 0;font-size:.98rem;line-height:1}.tray-kicker{margin:0}.placement-count{color:var(--text-muted);font:400 .52rem/1 var(--font-mono);white-space:nowrap}.piece-tray{display:grid;padding-top:.7rem;gap:.55rem}.piece-slot{position:relative;min-width:0}.piece-button{position:relative;display:grid;width:100%;min-height:6.7rem;padding:.65rem .6rem .55rem;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:.38rem;background:linear-gradient(90deg,rgba(87,230,230,.025),transparent),#070c11d6;color:var(--text-muted);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:border-color .15s ease,background .15s ease,opacity .15s ease,transform .15s ease}.piece-button:hover:not(:disabled){border-color:#57e6e69e;background:#57e6e617}.piece-button[aria-pressed=true]{border-color:#ff9f789e;background:#ff9f7817;box-shadow:inset 3px 0 0 var(--warm),0 0 .7rem #ff9f780f;transform:translate(.08rem)}.piece-button:active:not(:disabled){cursor:grabbing}.piece-button:disabled{cursor:not-allowed;opacity:.33}.piece-button.used{min-height:2.7rem;border-style:dashed;background:transparent}.piece-rotate{position:absolute;z-index:2;top:.38rem;right:.42rem;display:grid;width:1.85rem;height:1.85rem;padding:0;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:linear-gradient(90deg,rgba(87,230,230,.04),transparent),#070c11f0;color:#aeb8c3;cursor:pointer;transition:border-color .14s ease,background .14s ease,color .14s ease,transform .14s ease}.piece-rotate:hover:not(:disabled){border-color:var(--accent);background:#57e6e61c;color:var(--accent)}.piece-rotate:active:not(:disabled){transform:rotate(20deg)}.piece-rotate:disabled{cursor:not-allowed;opacity:.38}.piece-rotate span{font:500 1.05rem/1 var(--font-mono);transform:translateY(-.03rem)}.piece-shape{display:grid;grid-template-columns:repeat(var(--piece-cols),1.35rem);grid-template-rows:repeat(var(--piece-rows),1.35rem);gap:.12rem;pointer-events:none}.tray-block,.drag-block{position:relative;width:1.35rem;height:1.35rem;grid-column:calc(var(--piece-col) + 1);grid-row:calc(var(--piece-row) + 1)}.piece-key{position:absolute;top:.38rem;left:.45rem;color:var(--text-muted);font:400 .48rem/1 var(--font-mono)}.piece-fit-state{position:absolute;right:.45rem;bottom:.38rem;color:var(--text-muted);font:400 .44rem/1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase}.drag-ghost{position:fixed;z-index:100;display:grid;grid-template-columns:repeat(var(--piece-cols),1.65rem);grid-template-rows:repeat(var(--piece-rows),1.65rem);gap:.14rem;pointer-events:none;filter:drop-shadow(0 .65rem .75rem rgba(0,0,0,.45));transform:translate(-50%,-50%)}.drag-ghost .drag-block{width:1.65rem;height:1.65rem}.drag-ghost.invalid{opacity:.55;filter:grayscale(.65) drop-shadow(0 .5rem .6rem rgba(0,0,0,.45))}.game-message,.control-hint{color:var(--text-muted);font-size:.75rem;text-align:center}.game-message{min-height:1.5em;margin:.9rem 0 0}.game-message.success{color:var(--fit-success)}.game-message.warning{color:var(--fit-gold)}.control-hint{margin:.5rem auto 0;max-width:41rem;line-height:1.55}kbd{padding:.05rem .25rem;border:1px solid rgba(255,255,255,.16);border-radius:.2rem;background:#080d12e6;color:var(--accent);font:500 .6rem/1 var(--font-mono)}.game-over-banner{display:flex;margin-top:.9rem;padding:.8rem .9rem;align-items:center;justify-content:space-between;gap:1rem;border:1px solid rgba(255,159,120,.35);border-radius:.4rem;background:#ff9f7812}.game-over-banner[hidden]{display:none}.game-over-banner div{display:grid;gap:.1rem}.game-over-banner span{color:var(--warm);font:400 .48rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.game-over-banner strong{font-size:.92rem}.block-fit-dialog{width:min(calc(100% - 2rem),25rem);padding:0;border:1px solid rgba(87,230,230,.55);border-radius:.52rem;background:linear-gradient(145deg,rgba(255,159,120,.06),transparent 32%),#0c1219;color:var(--text);box-shadow:0 1.5rem 5rem #000000b3,0 0 2rem #57e6e61f}.block-fit-dialog::backdrop{background:#02060ac2;-webkit-backdrop-filter:blur(.18rem);backdrop-filter:blur(.18rem)}.block-fit-dialog form{padding:1.35rem}.block-fit-dialog h2{margin:0;font-size:1.45rem}.block-fit-dialog form>p:not(.game-kicker){margin:.55rem 0 1.2rem;color:var(--text-muted);font-size:.82rem}.dialog-actions{display:flex;justify-content:flex-end;gap:.55rem}.dialog-cancel{border-color:#ffffff29;background:transparent;color:var(--text-muted)}.dialog-confirm{border-color:#ff9f7899;background:#ff9f7817;color:var(--warm)}@keyframes block-land{0%{transform:scale(.72);filter:brightness(1.35)}72%{transform:scale(1.06)}to{transform:scale(1);filter:brightness(1)}}@keyframes line-clear{0%{background:#ffd1668f;transform:scale(1)}55%{background:#ffd16626;transform:scale(.82)}to{background:var(--fit-empty);transform:scale(1)}}@media (max-width: 760px){:root{--fit-cell-size: clamp(1.75rem, calc((100vw - 5.4rem)/8) , 2.75rem)}.block-fit-main{padding:.8rem .65rem 2.5rem}.block-fit-game{padding:.75rem .55rem .9rem}.block-fit-heading{padding:0 .2rem}.game-toolbar{padding:.5rem .3rem}.stat{padding-inline:.42rem;text-align:center}.stat-label{font-size:.42rem}.block-fit-playfield{grid-template-columns:1fr;justify-items:center;gap:.8rem}.tray-section{width:100%;padding:.65rem}.piece-tray{grid-template-columns:repeat(3,minmax(0,1fr));gap:.38rem}.piece-button{min-height:6.1rem;padding-inline:.25rem}.piece-button.used{min-height:6.1rem}.piece-rotate{width:2rem;height:2rem}.piece-shape{grid-template-columns:repeat(var(--piece-cols),1.08rem);grid-template-rows:repeat(var(--piece-rows),1.08rem);gap:.08rem}.tray-block{width:1.08rem;height:1.08rem}.tray-block:before{top:.09rem;right:.09rem;bottom:.09rem;left:.09rem}.piece-fit-state{display:none}.control-hint{font-size:.67rem}}@media (max-width: 390px){:root{--fit-cell-size: max(1.58rem, calc((100vw - 4.6rem)/8) );--fit-gap: .14rem}.block-fit-heading{align-items:stretch;flex-direction:column;gap:.75rem}.new-game-button{width:100%}.board-frame{padding:.32rem}.block-fit-board{padding:.18rem}.piece-key{top:.26rem;left:.3rem}.dialog-actions{flex-direction:column-reverse}}@media (prefers-reduced-motion: reduce){.control-button,.block-fit-cell,.piece-button,.piece-rotate{transition:none}.block-fit-cell.just-placed,.block-fit-cell.line-flash{animation:none}}