/* Match Play + Best Ball — minimal styles. The bulk of each game's table
   chrome inherits from .skins-table (declared in skins.css) so the new
   games look consistent with the rest of the app without duplicating
   layout rules. */

/* ─── Match Play ──────────────────────────────────────────────────── */

.matchplay-player-select {
  padding: 6px 10px;
  background: var(--panel, transparent);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 140px;
}

.matchplay-row-p1 td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.matchplay-row-p2 td { background: color-mix(in srgb, var(--warn, #ffbf69) 14%, transparent); }
.matchplay-row-tie td { color: var(--muted); }
.matchplay-row-closedout td {
  font-weight: 700;
  outline: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
  outline-offset: -1px;
}
.matchplay-carried-from {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.85em;
  margin-left: 4px;
}

/* ─── Best Ball ───────────────────────────────────────────────────── */

.bestball-teams-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bestball-team-col {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 8px;
  padding: 8px;
}
.bestball-team-col-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bestball-team-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Each player button in a team column — same look as hcp-mode-btn but
   stretched to full width of the column. data-active="true" gets the
   selected appearance from .hcp-mode-btn[data-active="true"] in
   main.css; nothing to override here. */
.bestball-team-item-btn {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}

/* Standalone single-toggle button (Half-Pop / Carry). Uses the same
   .hcp-mode-btn visual treatment so a selected/unselected state matches
   the rest of the app. Just sized to fit its label rather than spanning
   the group width. */
.game-option-toggle-btn {
  display: inline-flex;
  width: auto;
}

.bestball-team-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.bestball-team-summary-row strong {
  color: var(--muted);
  margin-right: 6px;
}

.bestball-stroke-totals {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}

.bestball-row-a td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.bestball-row-b td { background: color-mix(in srgb, var(--warn, #ffbf69) 14%, transparent); }
.bestball-row-tie td { color: var(--muted); }

/* ─── Game Totals mini-renderers + Round Report status line ──────── */

.game-totals-matchplay-mini,
.game-totals-bestball-mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 4px;
}
.game-totals-matchplay-status,
.game-totals-bestball-status {
  font-weight: 600;
  font-size: 0.95rem;
}
.game-totals-matchplay-table,
.game-totals-bestball-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.game-totals-matchplay-table td,
.game-totals-bestball-table td {
  padding: 4px 6px;
  color: var(--ink);
}
.game-totals-matchplay-table tr:not(:last-child) td,
.game-totals-bestball-table tr:not(:last-child) td {
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

/* Round Report — Match Play / Best Ball rows show a status string in
   place of the dollar amount. Style it so it doesn't get mistaken for
   the +$X / -$X coloring. */
.final-round-status-text {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.85rem;
}