/* Star Battle: the board is js/star-battle.js reusing css/queens.css (cells, lines, hints, win). Only the differences live here. */
.sb .qc .mark .q { width: 72%; height: 72%; }
.sb .qc.q .mark .q { transition: opacity .12s ease, transform .26s cubic-bezier(.3, 1.6, .5, 1); }
.queens-board.won .sb-star-gold { color: var(--accent); }
/* stars placed / needed, next to the board label */
.q-meta .pill.sb-prog { display: inline-flex; align-items: center; gap: 5px; }
.q-meta .pill.sb-prog svg { width: 13px; height: 13px; color: var(--accent); }
.q-meta .pill.sb-prog.full { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.q-meta .pill.sb-prog.full svg { color: var(--accent-ink); }
/* how-to-play: tiny example boards */
.sb-mini { display: inline-grid; gap: 2px; vertical-align: middle; }
.sb-mini i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; font-style: normal; font-size: 13px; font-weight: 800; color: var(--queen); background: var(--qbg, var(--surface-2)); }