.bp .split > *, .bp .panel { min-width: 0; }
.bp-modes { margin-bottom: 14px; }
.bp-tip { margin-top: 0; }
:root { --bp-frame: #24252b; --bp-empty: #3a3c46; --bp-fill: #8c95b3; --bp-a: #e5484d; --bp-b: #30a46c; --bp-c: #3e7bfa; }
.bp-board { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 8px; background: var(--bp-frame); border-radius: 14px; max-width: 420px; margin: 8px auto 0; touch-action: none; user-select: none; -webkit-user-select: none; }
.bp-c { aspect-ratio: 1; min-width: 0; border: 0; padding: 0; border-radius: 5px; background: var(--bp-empty); cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; }
.bp-c.on { background: var(--bp-fill); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.bp-c.ghost { background: color-mix(in srgb, #ffffff 55%, var(--bp-empty)); }
.bp-c.ghost.bad { background: color-mix(in srgb, var(--bp-a) 55%, var(--bp-empty)); }
.bp-c.hintc::after { content: ""; position: absolute; inset: 2px; border: 2px dashed #fff; border-radius: 4px; }
.bp-c:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; z-index: 1; }
.bp-small { max-width: 300px; gap: 3px; padding: 6px; margin-top: 10px; }
.bp-small .bp-c { cursor: default; display: block; border-radius: 4px; }
.bp-c.put.slot0 { background: var(--bp-a); } .bp-c.put.slot1 { background: var(--bp-b); } .bp-c.put.slot2 { background: var(--bp-c); }
.bp-c.gone::after { content: ""; position: absolute; inset: 0; border-radius: 4px; background: repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 3px, transparent 3px 7px); }
.bp-playbar { display: flex; justify-content: center; gap: 12px; margin-top: 14px; }
.bp-stat { background: var(--canvas); border: 1px solid var(--line); border-radius: 12px; padding: 6px 14px; display: flex; flex-direction: column; align-items: center; min-width: 80px; }
.bp-stat b { font: 600 20px/1.2 var(--mono); color: var(--ink); }
.bp-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bp-slot { --m: 14px; background: var(--canvas); border: 2px solid var(--line); border-radius: 14px; min-height: 108px; padding: 26px 6px 10px; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; color: var(--body); font: inherit; }
.bp-slot.sel { border-color: var(--ink); }
.bp-slot.used { opacity: .5; }
.bp-letter { position: absolute; top: 6px; left: 10px; font: 500 12px/1 var(--mono); color: var(--muted); }
.bp-empty { font-size: 13px; color: var(--muted); }
.bp-mini { display: inline-grid; gap: 2px; }
.bp-mini i { width: var(--m); height: var(--m); border-radius: 3px; }
.bp-mini i.on { background: var(--ink); }
.bp-mini.slot0 i.on { background: var(--bp-a); } .bp-mini.slot1 i.on { background: var(--bp-b); } .bp-mini.slot2 i.on { background: var(--bp-c); }
.bp-palette { margin-top: 4px; }
.bp-gh { margin: 12px 0 6px; }
.bp-pal { display: flex; flex-wrap: wrap; gap: 6px; }
.bp-pb { --m: 9px; min-width: 44px; min-height: 44px; padding: 6px; border: 1px solid var(--line); background: var(--canvas); border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bp-pb:hover { border-color: var(--ink); }
.bp-custom { margin-top: 14px; }
.bp-draw { display: grid; grid-template-columns: repeat(5, 40px); gap: 4px; margin-top: 8px; }
.bp-d { width: 40px; height: 40px; border: 1px solid var(--line); background: var(--canvas); border-radius: 6px; cursor: pointer; padding: 0; }
.bp-d.on { background: var(--ink); border-color: var(--ink); }
.bp-step { margin-top: 14px; }
.bp-step-t { margin: 4px 0 0; }
.bp-tag { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; color: #fff; font: 600 13px/1 var(--mono); margin-right: 4px; vertical-align: 1px; }
.bp-tag.slot0 { background: var(--bp-a); } .bp-tag.slot1 { background: var(--bp-b); } .bp-tag.slot2 { background: var(--bp-c); }
.bp-tag.slot0, .bp-tag.slot1, .bp-tag.slot2 { color: #000; } /* color fix: black letters reach AA on all three piece colors */
@media (max-width: 420px) { .bp-slot { --m: 11px; min-height: 92px; } }