/* Sports Bingo: scoreboard panel (prefix .spb-). Card, patterns and leaderboard come from bingo-core.css. */
.spb-sb { display: flex; flex-direction: column; gap: 2px; }
.spb-row { display: grid; grid-template-columns: 4px minmax(0, 1fr) 10px auto 44px; gap: 9px; align-items: center; padding: 4px 0; }
.spb-row > i { height: 28px; border-radius: 2px; background: var(--tc); }
.spb-nm { font-size: 14px; color: var(--s-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.spb-nm b { color: var(--s-text); font-weight: 800; letter-spacing: -.01em; }
.spb-pos { width: 8px; height: 8px; border-radius: 50%; background: transparent; transition: background .3s; }
.spb-row.has .spb-pos { background: var(--you); box-shadow: 0 0 0 3px color-mix(in srgb, var(--you) 22%, transparent); }
.spb-to { display: flex; gap: 3px; }
.spb-to u { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--s-dim); }
.spb-to u.used { background: transparent; box-shadow: inset 0 0 0 1px var(--s-line); }
.spb-sc { font: 600 27px 'IBM Plex Mono', monospace; text-align: right; line-height: 1; }
.spb-sc.pop { animation: spbPop .7s; }
@keyframes spbPop { 30% { color: var(--you); transform: scale(1.12); } }
.spb-sit { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 8px 0 9px; font: 600 12px 'IBM Plex Mono', monospace; }
.spb-clk { color: var(--hot); white-space: nowrap; }
.bn-done .spb-clk { color: var(--s-text); }
.spb-dd { color: var(--s-dim); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spb-field { display: block; width: 100%; height: auto; border-radius: 5px; overflow: hidden; }
.spb-turf { fill: #121a1b; }
.spb-yl { stroke: rgba(255,255,255,.09); stroke-width: .35; }
.spb-yl.mid { stroke: rgba(255,255,255,.24); }
.spb-drive { opacity: .55; transition: x .5s, width .5s; }
.spb-los, .spb-fd { transition: transform .55s cubic-bezier(.3,.8,.3,1); }
.spb-los line { stroke: #fff; stroke-width: .45; opacity: .7; }
.spb-los ellipse { fill: #fff; }
.spb-fd line { stroke: var(--you); stroke-width: .7; }
.spb-field.idle .spb-los, .spb-field.idle .spb-fd, .spb-field.idle .spb-drive { opacity: 0; }
.spb-ez { display: flex; justify-content: space-between; margin: 4px 0 10px; font: 500 9.5px 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--s-faint); }
.spb-ls { width: 100%; border-collapse: collapse; font: 500 11px 'IBM Plex Mono', monospace; color: var(--s-dim); }
.spb-ls th, .spb-ls td { padding: 3px 0; text-align: center; border-bottom: 1px solid var(--s-line); }
.spb-ls thead th { color: var(--s-faint); font-weight: 500; font-size: 10px; }
.spb-ls tbody th { text-align: left; color: var(--s-text); font-weight: 600; width: 22%; }
.spb-ls td.t { color: var(--s-text); font-weight: 600; }
.spb-ls [hidden] { display: none; }

@media (max-width: 760px) {
  .spb-sc { font-size: 24px; }
  .spb-nm { font-size: 13px; }
}