/* 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;
}

/* Options-panel list of currently-assigned matches ("Alice vs Bob ×"),
   plus the add-match row below it. */
.matchplay-match-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.matchplay-match-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 8px;
  font-size: 0.9rem;
}
.matchplay-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.matchplay-add-vs {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.85rem;
}
/* Rounded-square danger "×" — same shape/color language as the app's other
   modal row-remove buttons (docs/stylesheet/junk-achievement-wizard.css's
   .jca-row-delete, docs/stylesheet/paywall.css's .paywall-close-btn): a
   transparent fill, a tinted danger border, radius well under half the box
   so it reads as a rounded square, never a circle. Shared by both the
   options-panel match list row AND the result card's own remove button. */
.matchplay-remove-match-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  /* .btn's base rule sets min-height: var(--touch-min) (44px), which wins
     over the explicit height above and stretched this into a 30×44 pill
     instead of a square — min-height/min-width: 0 here let the fixed
     dimensions actually govern the box. */
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: var(--radius-sm, 6px);
  color: var(--danger, #d44a4a);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--danger, #d44a4a) 45%, transparent);
  box-shadow: none;
}
.matchplay-remove-match-btn:hover {
  background: color-mix(in srgb, var(--danger, #d44a4a) 14%, transparent);
  transform: none;
  box-shadow: none;
}

/* Tabbed results view: a tab row (one per active match) + the SELECTED
   match's card below it, below the results toggle. margin-top gives the
   row breathing room under the sticky section header instead of sitting
   flush against it. */
.matchplay-matches-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.matchplay-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
/* Each tab is a pill wrapping TWO independently-clickable buttons — the
   label (selects the tab) and its own inline "×" (removes the match,
   browser-tab style) — rather than one button, since a <button> can't
   nest another <button>. The wrapper carries all the shape/color chrome;
   its children are visually transparent, just laid out side by side. */
.matchplay-tab {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 14px;
  font-size: 0.85rem;
  font-weight: 600;
}
.matchplay-tab-select-btn {
  flex: 0 0 auto;
  padding: 2px 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
/* Sized down from the base 30px .matchplay-remove-match-btn so it fits
   inline within the tab pill's own height instead of inflating it. */
.matchplay-tab-remove-btn {
  width: 22px;
  height: 22px;
  font-size: 0.95rem;
}
/* Selected look: the same blue "radio-selected" gradient the Scoring Mode
   buttons use inside .game-options-panel (games-mode.css), reused here for
   visual consistency. Keyed on the literal .active class (the JS stamps it
   alongside data-active="true") rather than the attribute alone — a
   higher-specificity ui-polish.css rule
   (".btn:not(.accent):not(.active):not(.is-open)") repaints EVERY .btn in
   both themes with a flat white/gray look and would otherwise beat a
   data-active-only selector, leaving "selected" and "unselected" tabs
   visually identical. */
:root:not([data-theme="light"]) .matchplay-tab.active {
  background: linear-gradient(180deg, rgba(35, 132, 220, 0.38), rgba(23, 109, 198, 0.34));
  border-color: rgba(106, 201, 255, 0.9);
  color: var(--on-accent);
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 2px rgba(70, 177, 255, 0.3), 0 12px 24px -20px var(--shadow-deep);
}
:root[data-theme="light"] .matchplay-tab.active {
  background: linear-gradient(180deg, rgba(35, 132, 220, 0.28), rgba(23, 109, 198, 0.24));
  border-color: rgba(20, 93, 171, 0.86);
  color: #0f3f66;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 0 0 2px var(--accent-glow);
}
.matchplay-tab:not(.active) {
  opacity: 0.72;
}
.matchplay-match-card .skins-summary-card {
  gap: 12px;
}
.matchplay-empty-hint {
  padding: 10px 4px;
  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;
}

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

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

.game-totals-matchplay-mini,
.game-totals-bestball-mini,
.game-totals-custom-mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 4px;
}
.game-totals-matchplay-status,
.game-totals-bestball-status,
.game-totals-custom-status {
  font-weight: 600;
  font-size: 0.95rem;
}
.game-totals-matchplay-table,
.game-totals-bestball-table,
.game-totals-custom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.game-totals-matchplay-table td,
.game-totals-bestball-table td,
.game-totals-custom-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,
.game-totals-custom-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;
}