.playbox-palette{min-width:0;width:100%;margin-top:12px}
.playbox-palette>details{border-bottom:1px solid #bdacb650;padding:8px 0}
.playbox-palette summary{cursor:pointer;padding:8px 4px;font-weight:700;color:#79314f;min-height:44px}
.playbox-color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:8px;padding:8px 2px;max-height:340px;overflow-y:auto;overscroll-behavior:contain}
.playbox-color-grid .playbox-color{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding:8px 4px;min-width:0;min-height:86px;border-radius:16px;font-size:12px;line-height:1.2;overflow-wrap:anywhere;text-align:center;color:#593348!important}
.playbox-chip{display:block;flex:none;position:relative;width:34px;height:34px;border-radius:50%;background:var(--bead-color);box-shadow:inset 2px 2px 3px #fff9,inset -2px -2px 3px #0004,0 2px 3px #0002;border:1px solid #59445044}
.playbox-chip:after{content:'';position:absolute;inset:11px;border-radius:50%;background:#eee7e4;box-shadow:inset 1px 1px 2px #0005}
.playbox-chip.translucent{background:linear-gradient(var(--bead-color),var(--bead-color)),repeating-conic-gradient(#ffffff 0 25%,#c7cbd1 0 50%) 0/10px 10px}
.playbox-chip.metallic{background:linear-gradient(120deg,#fff8,transparent 38%,#0003 65%,#fff6),var(--bead-color)}
#dialogBody .playbox-color-grid{grid-template-columns:repeat(auto-fit,minmax(84px,1fr))}

/* Fill columns from top to bottom, then continue to the right. */
.board-toolbar .board-stats{min-width:0;flex:1 1 180px}
.board-color-preview{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,36px);grid-auto-columns:36px;justify-content:start;gap:6px;width:100%;min-width:0;max-width:100%;overflow-x:auto;padding:3px 2px 7px;overscroll-behavior-x:contain}
.board-color-preview:has(>button:nth-child(13)){grid-template-rows:repeat(3,36px)}
.color-counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:7px;width:100%;min-width:0}
.color-counts>span{min-width:0;white-space:nowrap}

.color-counts{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));align-items:start}
.color-counts>.required-color{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:6px;align-items:center;white-space:normal;font-size:14px}
.required-color .dot{width:20px;height:20px;margin:0}
.required-color-name{overflow-wrap:anywhere;line-height:1.25}
.required-color strong{font-variant-numeric:tabular-nums}

details.required-colors>summary{cursor:pointer;font-weight:700;min-height:44px;padding:10px 2px;line-height:1.3;color:#593348}
details.required-colors>summary::marker{color:#b51b5c}
details.required-colors:not([open]){margin-bottom:4px}
details.required-colors>summary:focus-visible{outline:2px solid #b51b5c;outline-offset:2px;border-radius:6px}

.bead-workspace .boardbox>details.required-colors{margin:12px 0 0;padding:4px 12px;border:1px solid #d5c3ce;border-radius:14px;background:#f6f0f4;min-width:0}.boardbox>details.required-colors>summary{padding:10px 0}.boardbox>details.required-colors .color-counts{max-height:180px;overflow-y:auto;overscroll-behavior:contain;padding-bottom:8px}.boardbox>details.required-colors .board-color-preview{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0}