.bp{--bp1: #f07167;--bp2: #f6a35c;--bp3: #3fb8af;--bp4: #7d8ce8;--bp5: #b57edc;--bp6: #94c94f;--bp7: #ef8fb3;--pitch: 34px;--cellpx: 31px;gap:14px;user-select:none}:root.colorblind .bp{--bp1: #d55e00;--bp2: #e69f00;--bp3: #009e73;--bp4: #0072b2;--bp5: #cc79a7;--bp6: #b6c93a;--bp7: #56b4e9}.bp-board-box{position:relative;width:min(100%,440px)}.bp-board{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;padding:6px;border-radius:14px;background:color-mix(in oklab,var(--cell-strong) 28%,var(--surface-2));touch-action:manipulation}.bp-cell{aspect-ratio:1;border-radius:6px;background:color-mix(in oklab,var(--cell) 82%,var(--cell-line));position:relative;transition:background-color 90ms}.bp-cell.filled,.bp-block{background:var(--b);box-shadow:inset 0 3px #ffffff47,inset 0 -3px #00000024}.bp-c1{--b: var(--bp1)}.bp-c2{--b: var(--bp2)}.bp-c3{--b: var(--bp3)}.bp-c4{--b: var(--bp4)}.bp-c5{--b: var(--bp5)}.bp-c6{--b: var(--bp6)}.bp-c7{--b: var(--bp7)}.bp-pv1{--pv: var(--bp1)}.bp-pv2{--pv: var(--bp2)}.bp-pv3{--pv: var(--bp3)}.bp-pv4{--pv: var(--bp4)}.bp-pv5{--pv: var(--bp5)}.bp-pv6{--pv: var(--bp6)}.bp-pv7{--pv: var(--bp7)}.bp-cell.pv{background:color-mix(in oklab,var(--pv) 45%,transparent);box-shadow:inset 0 0 0 2px var(--pv)}.bp-cell.pv-clear:after{content:"";position:absolute;inset:0;border-radius:inherit;background:#ffffff61;box-shadow:0 0 0 2px #ffffff80;animation:bp-glow .7s ease-in-out infinite alternate}.bp-cell.pv-cursor{box-shadow:inset 0 0 0 2px var(--danger)}@keyframes bp-glow{0%{opacity:.55}to{opacity:1}}.bp-cell.just{animation:bp-land .18s ease-out}@keyframes bp-land{0%{transform:scale(.82)}70%{transform:scale(1.06)}to{transform:scale(1)}}.bp-cell.clearing{animation:bp-clear .38s ease-in var(--d, 0ms) forwards;z-index:1}@keyframes bp-clear{0%{transform:scale(1);filter:brightness(1)}35%{transform:scale(1.12);filter:brightness(1.5)}to{transform:scale(0);opacity:0}}.bp-fx{position:absolute;inset:6px;pointer-events:none}.bp-pop{position:absolute;transform:translate(-50%,-50%);font-weight:800;font-size:1.1rem;color:var(--text);text-shadow:0 1px 0 var(--surface),0 0 6px var(--surface);animation:bp-float .9s ease-out forwards;white-space:nowrap}.bp-pop.big{font-size:1.5rem;color:var(--accent)}@keyframes bp-float{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}20%{opacity:1;transform:translate(-50%,-60%) scale(1.05)}to{opacity:0;transform:translate(-50%,-160%) scale(1)}}.bp-tray{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(100%,440px);touch-action:none}.bp-slot{appearance:none;font:inherit;border:1px dashed var(--border);background:var(--surface-2);border-radius:14px;min-height:calc(var(--pitch) * .44 * 5 + 26px);max-height:150px;display:grid;place-items:center;cursor:grab;padding:6px;touch-action:none;color:inherit}.bp-slot:disabled{cursor:default}.bp-slot.selected{border:2px solid var(--accent);background:var(--accent-soft)}.bp-slot.lifting .bp-piece{opacity:.25}.bp-slot.nofit .bp-piece{opacity:.35;filter:grayscale(.8)}.bp-piece{display:grid;grid-template-columns:repeat(var(--w),var(--size, calc(var(--pitch) * .44)));grid-template-rows:repeat(var(--h),var(--size, calc(var(--pitch) * .44)));gap:2px;pointer-events:none}.bp-piece .bp-block{border-radius:4px}.bp-piece.deal{animation:bp-deal .26s ease-out backwards}@keyframes bp-deal{0%{transform:translateY(14px) scale(.6);opacity:0}to{transform:none;opacity:1}}.bp-ghost{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;grid-template-columns:repeat(var(--w),var(--cellpx));grid-template-rows:repeat(var(--h),var(--cellpx));gap:calc(var(--pitch) - var(--cellpx));filter:drop-shadow(0 10px 14px rgb(0 0 0 / .28));will-change:transform}.bp-ghost .bp-block{border-radius:6px;animation:bp-lift .14s ease-out}.bp-ghost.returning{transition:transform .18s ease-in,opacity .18s;opacity:.2}@keyframes bp-lift{0%{transform:scale(.6)}to{transform:scale(1)}}.bp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}@media (max-width: 380px){.bp-board{gap:2px;padding:4px}.bp-cell{border-radius:4px}}