:root{--cell-size: 64px;--cell-gap: 4px;--board-pad: 12px;--screen-pad: 24px;--radius: 6px;--tray-cell-size: 28px;--tray-slot-size: 168px;--anim-duration: .18s;--anim-easing: cubic-bezier(.2, .8, .2, 1);--color-bg: #0F172A;--color-board: #1E293B;--color-cell-empty: #334155;--color-text: #F1F5F9;--color-piece-single: #38BDF8;--color-piece-line: #4ADE80;--color-piece-sq2: #F97316;--color-piece-sq3: #A78BFA;--color-piece-l2: #FACC15;--color-piece-l3: #F472B6;--color-preview-ok: rgba(74, 222, 128, .35);--color-preview-bad: rgba(244, 63, 94, .35);--z-ghost: 1000;--ghost-opacity: .85;--z-overlay: 900;--color-overlay-backdrop: rgba(15, 23, 42, .85)}@media(max-width:430px){:root{--cell-size: 32px;--cell-gap: 2px;--board-pad: 6px;--screen-pad: 12px;--tray-cell-size: 20px;--tray-slot-size: 112px}}html,body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:-apple-system,ui-sans-serif,system-ui,sans-serif;min-height:100vh;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}#app,.board,.tray,.ghost{touch-action:none}body{display:grid;place-items:center}#app{padding:var(--screen-pad)}.board{display:grid;grid-template-columns:repeat(10,var(--cell-size));grid-template-rows:repeat(10,var(--cell-size));gap:var(--cell-gap);padding:var(--board-pad);background:var(--color-board);border-radius:var(--radius)}.board__cell{background:var(--color-cell-empty);border-radius:var(--radius);transform-origin:center}.board__cell[data-state=filled]{background:var(--piece-color);animation:cellAppear var(--anim-duration) var(--anim-easing) both}@keyframes cellAppear{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.board__cell[data-state=preview-ok]{background:var(--color-preview-ok)}.board__cell[data-state=preview-bad]{background:var(--color-preview-bad)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:0ms!important;transition-duration:0ms!important}}.tray{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--cell-gap);padding:var(--board-pad);background:var(--color-board);border-radius:var(--radius);margin-top:var(--screen-pad)}.tray__slot{min-height:var(--tray-slot-size);display:grid;place-items:center}.tray__piece{display:grid;grid-template-columns:repeat(var(--bbox-w),var(--tray-cell-size));grid-template-rows:repeat(var(--bbox-h),var(--tray-cell-size));gap:var(--cell-gap)}.tray__piece-cell{background:var(--piece-color);border-radius:var(--radius)}.ghost{position:absolute;top:0;left:0;pointer-events:none;z-index:var(--z-ghost);display:grid;grid-template-columns:repeat(var(--bbox-w),var(--cell-size));grid-template-rows:repeat(var(--bbox-h),var(--cell-size));gap:var(--cell-gap);opacity:var(--ghost-opacity);will-change:transform}.ghost__cell{background:var(--piece-color);border-radius:var(--radius)}.tray__slot[data-picked=true] .tray__piece{opacity:0}.hud{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:var(--screen-pad);padding:var(--screen-pad);color:var(--color-text)}.hud__mute{justify-self:end;font-family:inherit;font-size:16px;font-weight:600;letter-spacing:.05em;padding:var(--cell-gap) var(--screen-pad);background:transparent;color:var(--color-text);border:1px solid var(--color-cell-empty);border-radius:var(--radius);cursor:pointer;opacity:.7}.hud__mute:hover{opacity:1}.hud__pair{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:var(--cell-gap)}.hud__label{font-size:16px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}.hud__score{font-size:40px;font-variant-numeric:tabular-nums;font-weight:600;line-height:1}.hud__pair--best .hud__score{opacity:.7}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-overlay);display:grid;grid-auto-flow:row;place-items:center;align-content:center;gap:var(--screen-pad);background:var(--color-overlay-backdrop);color:var(--color-text);transition:opacity var(--anim-duration) var(--anim-easing)}.overlay[data-visible=false]{display:none}.overlay__heading{font-size:40px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.overlay__score{font-size:40px;font-variant-numeric:tabular-nums;font-weight:600;opacity:.85}.overlay__button{font-size:16px;font-family:inherit;font-weight:600;padding:var(--cell-gap) var(--screen-pad);background:var(--color-piece-line);color:var(--color-bg);border:0;border-radius:var(--radius);cursor:pointer}.combo-callout{position:fixed;top:var(--screen-pad);left:50%;z-index:var(--z-overlay);font-family:-apple-system,ui-sans-serif,system-ui,sans-serif;font-size:40px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-piece-line);pointer-events:none;opacity:0;transform:translate(-50%)}.combo-callout[data-visible=true]{animation:comboPulse .9s var(--anim-easing) forwards}@keyframes comboPulse{0%{opacity:0;transform:translate(-50%) scale(.8)}15%{opacity:1;transform:translate(-50%) scale(1.15)}30%{opacity:1;transform:translate(-50%) scale(1)}80%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%) scale(1)}}