.bg-table { display: flex; gap: 6px; justify-content: center; margin: 10px 0; }
.bg-board {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
  width: min(88vw, 340px);
  aspect-ratio: 1 / 1;
}
.bg-pt {
  background: var(--card);
  border-radius: 6px;
  display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start;
  cursor: pointer; border: 2px solid transparent; padding: 2px;
}
.bg-pt.legal { border-color: #6bcb77; }
.bg-pt.sel { border-color: #ffd93d; }
.bg-chip { width: 80%; height: 14px; border-radius: 7px; margin: 1px 0; }
.bg-chip.p1 { background: #ff6b6b; }
.bg-chip.p2 { background: #4d96ff; }
.bg-off, .bg-bar { width: 30px; display: flex; flex-direction: column; gap: 4px; }
.bg-bar span, .bg-off span { font-size: 12px; text-align: center; }
.bg-count { font-size: 11px; color: var(--ink); }