.bf-game{--bf-frame:#cfc8bb;--bf-bay:#e7e1d6;--bf-bay-hi:#efe9df}.bf-t1,.bf-cell[data-t="1"]{--t:#ff8fb8;--t-edge:#e5689a}.bf-t2,.bf-cell[data-t="2"]{--t:#ffab5c;--t-edge:#e98a32}.bf-t3,.bf-cell[data-t="3"]{--t:#ffd659;--t-edge:#e9b52b}.bf-t4,.bf-cell[data-t="4"]{--t:#62d6a4;--t-edge:#34b47f}.bf-t5,.bf-cell[data-t="5"]{--t:#6cc4f2;--t-edge:#3ea2db}.bf-t6,.bf-cell[data-t="6"]{--t:#a98af0;--t-edge:#8566de}.bf-t7,.bf-cell[data-t="7"]{--t:#ff7f73;--t-edge:#e5584b}.bf-board-wrap{aspect-ratio:1;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:min(100%,520px);margin-inline:auto;position:relative;container-type:inline-size}.bf-board{--gap:clamp(2px, .75cqw, 4px);--pad:clamp(6px, 2cqw, 11px);--cellsz:calc((100cqw - 2 * var(--pad) - 8 * var(--gap)) / 9);--pitch:calc(var(--cellsz) + var(--gap));width:100%;height:100%;padding:var(--pad);background:var(--bf-frame);border-radius:16px;outline:none;position:relative;box-shadow:inset 0 2px #ffffff59,inset 0 -3px #00000014}.bf-board:focus-visible{box-shadow:0 0 0 3px var(--surface), 0 0 0 6px var(--accent)}.bf-board.is-thunk{animation:.14s ease-out bf-thunk}@keyframes bf-thunk{40%{transform:translateY(1.5px)}}.bf-cells{gap:var(--gap);grid-template-rows:repeat(9,1fr);grid-template-columns:repeat(9,1fr);width:100%;height:100%;display:grid}.bf-cell{background:var(--bf-bay);border-radius:clamp(3px,1cqw,6px);transition:background-color 90ms;position:relative}.bf-block,.bf-cell[data-t]:not([data-t="0"]){background:var(--t);box-shadow:inset 0 2px 0 #ffffff73, inset 0 -3px 0 var(--t-edge), 0 1px 1.5px #3c28142e}.bf-cell[data-t="0"]{background:var(--bf-bay)}.bf-cell.is-aim{background:color-mix(in srgb, var(--aim) 42%, var(--bf-bay));box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--aim) 70%, transparent)}.bf-cell.is-hint[data-t]:not([data-t="0"]){filter:brightness(1.12)saturate(1.1);box-shadow:inset 0 2px 0 #fff9, inset 0 -3px 0 var(--t-edge), 0 0 0 2px #ffffffd9}.bf-cell.is-hint.is-aim{box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--aim) 70%, transparent), 0 0 0 2px #ffffffd9}.bf-cell.is-drop{animation:.2s cubic-bezier(.3,.8,.4,1.4) bf-drop}@keyframes bf-drop{0%{transform:scale(.84)}55%{transform:scale(1.06)}}.bf-cell.is-cursor{box-shadow:inset 0 0 0 2px var(--accent)}.bf-fx{inset:var(--pad);pointer-events:none;position:absolute}.bf-pop{width:var(--cellsz);height:var(--cellsz);transform:translate(calc(var(--c) * var(--pitch)), calc(var(--r) * var(--pitch)));border-radius:clamp(3px,1cqw,6px);position:absolute}.bf-pop>i{border-radius:inherit;animation:bf-pop .38s cubic-bezier(.4, 0, .6, 1) var(--d,0s) both;position:absolute;inset:0}@keyframes bf-pop{0%{transform:scale(1)}30%{filter:brightness(1.35);transform:scale(1.16);box-shadow:0 0 0 3px #ffffffe6}to{opacity:0;transform:scale(.1)rotate(8deg)}}.bf-float{left:var(--x);top:var(--y);text-align:center;white-space:nowrap;color:#3b2a8c;z-index:2;background:#fffffff0;border-radius:12px;padding:.2em .6em .25em;font-weight:800;line-height:1.05;animation:.95s cubic-bezier(.2,.7,.3,1) forwards bf-float;position:absolute;transform:translate(-50%,-50%);box-shadow:0 4px 12px #28195a38}.bf-float b{font-size:clamp(1.1rem,6cqw,1.7rem);display:block}.bf-float small{color:#c2410c;font-size:clamp(.72rem,3.4cqw,.95rem);display:block}@keyframes bf-float{0%{opacity:0;transform:translate(-50%,-30%)scale(.7)}18%{opacity:1;transform:translate(-50%,-60%)scale(1.08)}70%{opacity:1}to{opacity:0;transform:translate(-50%,-140%)scale(1)}}.bf-tray{--tc:16px;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;grid-template-columns:repeat(3,1fr);gap:6px;width:min(100%,520px);margin:10px auto 0;display:grid}.bf-slot{height:calc(5 * var(--tc) + 4 * 2px + 18px);background:var(--surface-2);-webkit-tap-highlight-color:transparent;cursor:grab;border-radius:14px;outline:none;place-items:center;display:grid;position:relative}.bf-slot:focus-visible{box-shadow:0 0 0 3px var(--accent)}.bf-slot.is-empty{cursor:default}.bf-slot.is-held .bf-piece{visibility:hidden}.bf-slot.is-stuck .bf-piece{opacity:.34;filter:grayscale(.7)}.bf-slot.is-selected{box-shadow:0 0 0 3px var(--accent)}.bf-slot.is-dealt .bf-piece{animation:bf-deal .3s cubic-bezier(.3, .8, .4, 1.3) calc(var(--k) * 60ms) both}@keyframes bf-deal{0%{opacity:0;transform:scale(.3)}}.bf-slot.is-refused{animation:.26s ease-out bf-refuse}@keyframes bf-refuse{25%{transform:translate(-3px)}50%{transform:translate(3px)}75%{transform:translate(-1.5px)}}.bf-piece{--pg:2px;width:calc(var(--w) * (var(--tc) + var(--pg)) - var(--pg));height:calc(var(--h) * (var(--tc) + var(--pg)) - var(--pg));pointer-events:none;position:relative}.bf-piece>.bf-block{width:var(--tc);height:var(--tc);left:calc(var(--c) * (var(--tc) + var(--pg)));top:calc(var(--r) * (var(--tc) + var(--pg)));border-radius:max(2px, calc(var(--tc) * .22));position:absolute}.bf-ghost{z-index:60;pointer-events:none;transform:translate(var(--gx), var(--gy));will-change:transform;position:fixed;top:0;left:0}.bf-ghost .bf-piece{transform-origin:var(--ox) var(--oy);filter:drop-shadow(0 10px 14px #28195a4d)drop-shadow(0 2px 3px #28195a33);animation:.14s cubic-bezier(.2,.8,.3,1.2) backwards bf-lift}.bf-ghost .bf-block{box-shadow:inset 0 2px 0 #ffffff80, inset 0 -3px 0 var(--t-edge)}@keyframes bf-lift{0%{transform:scale(var(--from,.5))}}.bf-ghost.is-snapping{transition:transform 90ms cubic-bezier(.2,.8,.3,1)}.bf-ghost.is-snapping .bf-piece{filter:drop-shadow(0 2px 3px #28195a33);transition:filter 90ms}.bf-ghost.is-returning{transition:transform .34s cubic-bezier(.34,1.56,.64,1)}.bf-ghost.is-returning .bf-piece{transform:scale(var(--from,.5));transition:transform .34s cubic-bezier(.34,1.4,.64,1)}.bf-score-box [data-el=score]{display:inline-block}.bf-score-box.is-tick [data-el=score]{animation:.26s ease-out bf-tick}@keyframes bf-tick{40%{color:var(--accent);transform:scale(1.16)}}.bf-streak{color:#c2410c;font-size:.68rem;font-weight:800}.bf-over dl>div{border-bottom:1px solid var(--border);justify-content:space-between;gap:1rem;padding:.3rem 0;display:flex}.bf-over dt{color:var(--muted)}.bf-over dd{font-variant-numeric:tabular-nums;font-weight:700}.bf-over::backdrop{background:#00000073}.bf-final{font-variant-numeric:tabular-nums;font-size:2.6rem;font-weight:800;line-height:1}.bf-newbest{letter-spacing:.04em;text-transform:uppercase;color:#5a3a00;background:linear-gradient(100deg,#ffd659 20%,#fff2b8 40%,#ffd659 60%) 0 0/250% 100%;border-radius:999px;margin-top:.5rem;padding:.2rem .7rem;font-size:.8rem;font-weight:800;animation:.42s cubic-bezier(.3,.8,.4,1.5) both bf-best-in,1.6s linear .42s 3 bf-best-shine;display:inline-block}@keyframes bf-best-in{0%{opacity:0;transform:scale(.4)}}@keyframes bf-best-shine{0%{background-position:100% 0}to{background-position:-150% 0}}.bf-static{touch-action:auto;margin:0}@media (prefers-reduced-motion:reduce){.bf-cell.is-drop,.bf-board.is-thunk,.bf-slot.is-dealt .bf-piece,.bf-slot.is-refused,.bf-ghost .bf-piece,.bf-score-box [data-el=score],.bf-newbest{animation:none!important}.bf-pop>i{animation-duration:1ms}.bf-float{animation-duration:.6s}.bf-ghost.is-snapping,.bf-ghost.is-returning,.bf-ghost.is-returning .bf-piece{transition-duration:1ms}}