.bf{--bf-gap:3px;--bf-size:min(100%, 520px);--bf-grid:color-mix(in srgb, var(--ink) 55%, var(--paper));--bf-shade:color-mix(in srgb, var(--ink) 24%, transparent);gap:var(--s2);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;grid-template-columns:minmax(0,1fr);grid-template-areas:"stats""board""tray";width:min(100%,520px);margin-inline:auto;display:grid}.bf-modes button{padding:0 var(--s3)}@media (width<=420px){.bf-modes button{padding:0 var(--s2)}}@media (width<=380px){.bf-modes button{padding:0 calc(var(--s1) + 2px);font-size:var(--fs-base)}}.bf__stats{align-items:baseline;column-gap:var(--s4);padding:0 var(--s1);flex-wrap:wrap;grid-area:stats;row-gap:0;display:flex}.bf__stat{align-items:baseline;gap:var(--s2);min-width:0;display:inline-flex}.bf__stat[hidden]{display:none}.bf__stat-label{font-size:var(--fs-sm);color:var(--ink-2);font-weight:700;line-height:1.25}.bf__stat-value{font-size:var(--fs-lg);font-variant-numeric:tabular-nums;font-weight:800;line-height:1.2}.bf__stat--main .bf__stat-value{font-size:var(--fs-xl)}.bf__stats--three{grid-template-columns:repeat(3,auto);justify-content:start;display:grid}.bf__stats--three .bf__stat{gap:0;display:grid}.bf__boardwrap{width:var(--bf-size);grid-area:board;justify-self:center;position:relative}.bf__board{gap:var(--bf-gap);padding:var(--bf-gap);aspect-ratio:1;background:var(--bf-grid);border:2px solid var(--ink);border-radius:var(--r-tile);touch-action:manipulation;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);width:100%;display:grid}.bf__board:focus-visible{box-shadow:var(--focus);border-radius:var(--r-tile)}.bf__board.is-aiming{cursor:pointer}.bf__cell{border-radius:calc(var(--r-field) - 2px);background:var(--paper);min-width:0;min-height:0;position:relative}.bf__board .bf__cell:first-child{border-top-left-radius:calc(var(--r-tile) - 6px)}.bf__board .bf__cell:nth-child(8){border-top-right-radius:calc(var(--r-tile) - 6px)}.bf__board .bf__cell:nth-child(57){border-bottom-left-radius:calc(var(--r-tile) - 6px)}.bf__board .bf__cell:last-child{border-bottom-right-radius:calc(var(--r-tile) - 6px)}.bf__cell[data-tone],.bf__cell.is-will,.bf__mini.is-on,.bf-float__cell.is-on{box-shadow:inset 0 0 0 2px var(--ink), inset 0 -4px 0 var(--bf-shade)}.bf__cell[data-tone=sun]{background:var(--tone-sun)}.bf__cell[data-tone=leaf]{background:var(--tone-leaf)}.bf__cell[data-tone=berry]{background:var(--tone-berry)}.bf__cell[data-tone=sky]{background:var(--tone-sky)}.bf__cell[data-tone=clay]{background:var(--tone-clay)}.bf__cell.is-ghost:after{content:"";border-radius:inherit;background:color-mix(in srgb, var(--gt) 75%, var(--paper));box-shadow:inset 0 0 0 3px var(--ink);position:absolute;inset:0}.bf__cell.is-will{background:var(--gt);box-shadow:inset 0 0 0 2px var(--ink), inset 0 0 0 5px var(--card)}.bf__cell.is-bad:after{content:"";z-index:1;border-radius:inherit;background:color-mix(in srgb, var(--card) 62%, transparent);border:3px dashed var(--ink);position:absolute;inset:0}.bf__cell.is-bad:before{content:"";z-index:2;background:var(--bad);-webkit-mask:var(--bf-x) center / contain no-repeat;mask:var(--bf-x) center / contain no-repeat;position:absolute;inset:24%}.bf__cell.is-clearing{animation:bf-clear .26s var(--ease) forwards;z-index:1}@keyframes bf-clear{0%{transform:scale(1)}35%{transform:scale(1.08)}to{opacity:0;transform:scale(.15)}}.bf__gain{z-index:3;padding:0 var(--s2);border-radius:var(--r-field);background:var(--ink);color:var(--card);font-size:var(--fs-lg);font-variant-numeric:tabular-nums;pointer-events:none;opacity:0;font-weight:800;line-height:1.5;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.bf__gain.is-on{animation:bf-gain 1s var(--ease) forwards}.bf__gain.is-still{opacity:1}@keyframes bf-gain{0%{opacity:0;translate:0 6px}15%{opacity:1;translate:0}75%{opacity:1;translate:0 -8px}to{opacity:0;translate:0 -14px}}.bf__over{z-index:4;padding:var(--s3);background:color-mix(in srgb, var(--paper) 70%, transparent);border-radius:var(--r-tile);place-items:center;display:grid;position:absolute;inset:0}.bf__over[hidden]{display:none}.bf__over-card{gap:var(--s2);text-align:center;width:min(340px,100%);padding:var(--s4) var(--s4) var(--s5);background:var(--card);border:2px solid var(--ink);border-radius:var(--r-tile);box-shadow:var(--shadow-2);justify-items:center;display:grid}.bf__over-card p{margin:0}.bf__over-title{font-size:var(--fs-xl);margin:0}.bf__over-text{color:var(--ink-2)}.bf__over-score{font-size:var(--fs-2xl);font-variant-numeric:tabular-nums;font-weight:800;line-height:1.1}.bf__over-record{align-items:center;gap:var(--s2);color:var(--go);font-weight:800;display:inline-flex}.bf__over-best,.bf__over-meta{color:var(--ink-2);font-size:var(--fs-sm);font-weight:700}.bf__over-actions{justify-content:center;gap:var(--s2);margin-top:var(--s2);flex-wrap:wrap;display:flex}.bf__tray{gap:var(--s2);grid-area:tray;grid-template-columns:repeat(3,minmax(0,1fr));display:grid;container-type:inline-size}.bf__slot{--bf-mini:clamp(14px, calc(((100cqw - 2 * var(--s2)) / 3 - 20px) / 5), 24px);min-width:0;height:calc(var(--bf-mini) * 5 + 2px * 4 + var(--s1) * 2 + 4px);padding:var(--s1);border:2px solid var(--line);border-radius:var(--r-tile);background:var(--card);color:var(--ink);cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;place-items:center;transition:background-color .12s,border-color .12s,transform .12s;display:grid;position:relative}.bf__slot:hover:not([disabled]){background:var(--paper);border-color:var(--line-strong)}.bf__slot:focus-visible{box-shadow:var(--focus)}.bf__slot[aria-pressed=true]{border:3px solid var(--ink);padding:calc(var(--s1) - 1px);background:color-mix(in srgb, var(--hop) 16%, var(--card));box-shadow:0 0 0 4px var(--hop);transform:translateY(-3px)}.bf__slot[aria-pressed=true]:hover:not([disabled]){border-color:var(--ink);background:color-mix(in srgb, var(--hop) 22%, var(--card))}.bf__slot[aria-pressed=true]:focus-visible{box-shadow:0 0 0 4px var(--hop), 0 0 0 6px var(--card), 0 0 0 9px var(--go)}.bf__slot.is-empty{cursor:default;background:0 0;border-style:dashed}.bf__slot.is-dead{cursor:not-allowed}.bf__slot.is-dead .bf__mini.is-on{background:var(--line);box-shadow:inset 0 0 0 2px var(--line-strong)}.bf__slot.is-lifted .bf__piece{opacity:.25}.bf__slot[disabled]:not(.is-empty){cursor:default}.bf__slot.is-shake{animation:bf-shake .32s var(--ease)}@keyframes bf-shake{0%,to{translate:0}20%{translate:-6px}45%{translate:5px}70%{translate:-3px}85%{translate:2px}}.bf__piece{grid-template-columns:repeat(var(--w), var(--bf-mini));grid-auto-rows:var(--bf-mini);pointer-events:none;gap:2px;display:grid}.bf__mini{border-radius:calc(var(--r-field) / 2)}.bf__mini.is-on{background:var(--t);box-shadow:inset 0 0 0 2px var(--ink), inset 0 -3px 0 var(--bf-shade)}.bf-float{--bf-shade:color-mix(in srgb, var(--ink) 24%, transparent);z-index:60;pointer-events:none;will-change:transform;opacity:.85;display:grid;position:fixed;top:0;left:0}.bf-float.is-bad{opacity:.5}.bf-float__cell{border-radius:calc(var(--r-field) - 2px)}.bf-float__cell.is-on{background:var(--t)}@media (prefers-reduced-motion:reduce){.bf__gain.is-on{opacity:1;animation:none}.bf__slot.is-shake,.bf__cell.is-clearing{animation:none}.bf__slot{transition:none}}@media (width>=900px){.bf{--bf-col:clamp(380px, 32vw, 440px);--bf-size:min(560px, max(340px, calc(100dvh - 372px)), calc(100% - var(--bf-col) - var(--s5)));grid-template-columns:var(--bf-size) var(--bf-col);justify-content:center;column-gap:var(--s5);row-gap:var(--s4);grid-template-rows:auto 1fr;grid-template-areas:"board stats""board tray";width:100%}.bf__boardwrap{grid-row:1/span 2;align-self:start;width:100%}.bf__stats{column-gap:var(--s5);padding:0}.bf__stat{gap:0;display:grid}.bf__stat-value{font-size:var(--fs-xl)}.bf__stat--main .bf__stat-value{font-size:var(--fs-2xl);line-height:1.1}.bf__tray{align-self:start}}