/* =============================================================================
   Game UI 2.0.2 — shared presentation primitives

   This is the neutral layer used by every built-in game and the GameSpec
   renderer. Individual game styles still own identity and specialist widgets;
   this file owns density, region rhythm, table containment, focus treatment,
   and the mobile one-bottom-surface rule.
   ============================================================================= */

.game-ui-surface {
  --game-ui-gap-1: 4px;
  --game-ui-gap-2: 8px;
  --game-ui-gap-3: 12px;
  --game-ui-control-min: 40px;
  --game-ui-row-pad: 7px;
  min-width: 0;
}

:root {
  --game-ui-team-a-ink: #60a5fa;
  --game-ui-team-b-ink: #f87171;
}

:root[data-theme="light"] {
  --game-ui-team-a-ink: #2563eb;
  --game-ui-team-b-ink: #dc2626;
}

.game-ui-surface[data-game-ui-density="comfortable"] {
  --game-ui-gap-1: 6px;
  --game-ui-gap-2: 12px;
  --game-ui-gap-3: 16px;
  --game-ui-row-pad: 10px;
}

.game-ui-surface [data-game-ui-region] {
  min-width: 0;
}

/* The current UIPlan sheet shares the preset chrome palette. Keep this on
   the current renderer's own shell so frozen plans and preset CSS are intact. */
.game-ui-hole-sheet { --game-ui-sheet-width: 680px; --game-ui-sheet-height: 760px; }
.game-ui-sheet-size-wide { --game-ui-sheet-width: 760px; --game-ui-sheet-height: 820px; }
@media (min-width: 720px) {
  .game-ui-hole-sheet {
    width: min(var(--game-ui-sheet-width), calc(100vw - 32px));
    max-height: min(86vh, var(--game-ui-sheet-height));
  }
}
.game-ui-hole-sheet.game-ui-sheet-height-viewport { max-height: min(90dvh, 90svh); }
.game-ui-hole-sheet .custom-game-sheet-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.game-ui-hole-sheet .custom-game-sheet-title {
  flex: 0 1 auto;
  min-width: auto;
  font-size: var(--text-xl);
  font-weight: 700;
}
.game-ui-sheet-nav-spread .custom-game-sheet-nav { flex: 1 1 auto; }
.game-ui-sheet-nav-spread .custom-game-sheet-title { flex: 1 1 auto; }
.game-ui-sheet-title-stable .custom-game-sheet-title { min-width: 140px; }
.game-ui-hole-sheet .custom-game-sheet-navbtn,
.game-ui-hole-sheet .custom-game-sheet-close {
  width: 36px;
  height: 36px;
  min-width: auto;
  min-height: auto;
  font-size: calc(16px + var(--font-size-step));
  font-weight: 400;
}
.game-ui-hole-sheet .custom-game-sheet-navbtn { line-height: 1; }
.game-ui-sheet-navstyle-standard .custom-game-sheet-navbtn { font-size: calc(20px + var(--font-size-step)); }
.game-ui-sheet-navstyle-standard .custom-game-sheet-navbtn:disabled { opacity: 0.4; }
.game-ui-sheet-navstyle-compact .custom-game-sheet-navbtn:disabled { cursor: default; }
.game-ui-hole-sheet .custom-game-sheet-navbtn:not(:disabled):hover,
.game-ui-hole-sheet .custom-game-sheet-close:hover { background: var(--hi-faint); }
.game-ui-sheet-close-danger .custom-game-sheet-close {
  background: rgba(220, 53, 69, 0.18);
  border-color: rgba(220, 53, 69, 0.7);
  color: #ffdfe3;
  box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.2);
}
.game-ui-sheet-close-danger .custom-game-sheet-close:hover {
  background: rgba(220, 53, 69, 0.3);
  border-color: rgba(220, 53, 69, 0.9);
}
.game-ui-hole-sheet .custom-game-sheet-body { padding: 12px 16px 4px; }
.game-ui-hole-sheet .custom-game-sheet-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 10px 16px calc(10px + var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)));
}
.game-ui-sheet-footer-start .custom-game-sheet-footer { justify-content: flex-start; }
.game-ui-sheet-footer-actions { display: block; }
.game-ui-sheet-footer-stretch .game-ui-sheet-footer-actions { display: flex; gap: 8px; width: 100%; }
.game-ui-hole-sheet .custom-game-sheet-done { width: auto; min-width: 0; min-height: 44px; }
.game-ui-sheet-footer-stretch .custom-game-sheet-done { display: flex; width: 100%; min-width: 0; }
.game-ui-sheet-emphasis-strong .custom-game-sheet-done { font-weight: 800; color: #fff; }
@media (max-width: 719px) {
  .game-ui-hole-sheet .custom-game-sheet-done { min-height: 48px; }
  .game-ui-sheet-density-compact .custom-game-sheet-header { padding: 8px 12px; }
  .game-ui-sheet-density-compact .custom-game-sheet-title { font-size: var(--text-lg); }
  .game-ui-sheet-density-compact.game-ui-sheet-title-stable .custom-game-sheet-title { min-width: 110px; }
  .game-ui-sheet-density-compact .custom-game-sheet-navbtn,
  .game-ui-sheet-density-compact .custom-game-sheet-close {
    width: 32px; height: 32px; font-size: calc(16px + var(--font-size-step));
  }
  .game-ui-sheet-density-compact .custom-game-sheet-body { padding: 6px 12px 4px; }
  .game-ui-sheet-density-compact .custom-game-sheet-footer {
    padding: 6px 12px calc(6px + var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)));
  }
}
:root[data-theme="light"] .game-ui-hole-sheet .custom-game-sheet-header {
  background: #f8fafc;
}
:root[data-theme="light"] .game-ui-hole-sheet .custom-game-sheet-footer {
  background: rgba(248, 250, 252, 0.94);
}

/* Accessible captions keep their table names without adding a second visible
   heading. This primitive also works in detached dialogs and Composer. */
.custom-game-v2-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.gamespec-preset-surface .custom-game-instance-block {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.custom-game-v2-play-board-wrap {
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
}

.custom-game-v2-value-cycle {
  grid-template-columns: minmax(0, 1fr) minmax(56px, 80px) auto;
}

.custom-game-v2-value-cycle > input {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.custom-game-v2-summary-value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  white-space: normal;
}

.custom-game-v2-summary-value + .custom-game-v2-summary-value {
  border-top: 1px solid var(--line);
  padding-top: 3px;
  margin-top: 3px;
}

.custom-game-v2-summary-name {
  overflow-wrap: anywhere;
}

/* Compact per-side readouts share tracks, so names, badges and totals align
   across every player rather than forming unrelated flex rows. */
.game-ui-side-summary-grid {
  display: grid;
  grid-template-columns: fit-content(55%) minmax(0, 1fr);
  width: 100%;
  align-items: center;
}
.game-ui-side-summary-row { display: contents; }
.game-ui-side-summary-name,
.game-ui-side-summary-value {
  min-width: 0;
  padding: 3px 4px;
  border-bottom: 1px solid var(--line);
  font-size: calc(12px + var(--font-size-step));
  line-height: 1.3;
}
.game-ui-side-summary-name {
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 14px;
  border-right: 1px solid var(--line);
}
.game-ui-side-summary-value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.game-ui-side-summary-row:last-child > * { border-bottom: 0; }
.game-ui-side-summary-number {
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 20px;
  text-align: right;
}
.game-ui-readout-badges {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 6px;
  vertical-align: middle;
}
.game-ui-readout-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: normal;
}
.game-ui-readout-badges[data-game-ui-badge-style="label"] {
  display: flex;
  align-items: center;
  margin-top: 1px;
}
[data-game-ui-badge-style="label"] .game-ui-readout-badge-label { font-weight: 600; }
.game-ui-readout-badges[data-game-ui-badge-style="stacked"] {
  display: flex;
  margin-top: 4px;
}
[data-game-ui-badge-style="stacked"] .game-ui-readout-badge { flex-direction: column; }
[data-game-ui-badge-style="stacked"] .game-ui-readout-badge-icon { font-size: 18px; }
.game-ui-readout-badge-label { font-size: calc(11px + var(--font-size-step)); }
.game-ui-readout-badges[data-game-ui-badge-style="icon"] { gap: 1px; }
[data-game-ui-badge-style="icon"] .game-ui-readout-badge {
  font-size: calc(11px + var(--font-size-step));
  line-height: 1;
  gap: 0;
}

.custom-game-v2-board-summary-field {
  display: grid;
  gap: 3px;
  text-align: left;
}

.custom-game-v2-board-summary-field + .custom-game-v2-board-summary-field {
  margin-top: 6px;
}

.custom-game-v2-board-summary-label,
.custom-game-v2-board-field > h4 {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.custom-game-v2-board-fields {
  display: grid;
  gap: 12px;
}

.custom-game-v2-board-field {
  display: grid;
  gap: 8px;
  min-width: 0;
  border-bottom: 2px solid var(--line);
  padding-bottom: 12px;
}

.custom-game-v2-board-fields .custom-game-v2-play-board-entry-stack {
  gap: 8px;
}

/* Expanded amount cards keep a usable input width and fill available columns.
   Inline table controls do not contain an amount editor and stay compact. */
@media (min-width: 720px) {
  .custom-game-v2-board-fields .custom-game-v2-play-board-entry-stack:has(> .custom-game-v2-value-cycle .game-ui-amount-editor) {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 10px;
  }
}

.custom-game-v2-board-fields .custom-game-v2-play-board-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
}

.custom-game-v2-board-fields .custom-game-v2-play-board-entry-label {
  flex-basis: 100%;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: normal;
}

.custom-game-v2-board-fields .custom-game-stepper,
.custom-game-v2-board-fields .custom-game-v2-play-board-cycle {
  width: 100%;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  .game-ui-control-group[data-game-ui-label-placement="hidden"] > legend.game-ui-control-group-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

:root[data-theme="light"] .custom-game-sheet:has(.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]) {
  background: #fff;
}

:root[data-theme="light"] .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .custom-game-tally-chip {
  /* Match the preset's button chrome, including read-only automatic awards.
     The selected state below retains its own positive fill and readable ink. */
  background: var(--btn-bg);
  border-color: var(--btn-line);
  color: var(--ink-strong);
}

:root[data-theme="light"] .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  .custom-game-tally-chip[data-active="false"]:not(.custom-game-award-chip):not(:disabled):hover {
  background: #c8d4e1;
}

:root[data-theme="light"] .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .custom-game-tally-chip[data-active="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent, #fff);
}

.game-ui-surface [data-game-ui-region="header"] {
  gap: var(--game-ui-gap-2);
}

.game-ui-surface [data-game-ui-region="header"] h2 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-ui-surface [data-game-ui-region="play"] {
  min-height: 0;
}

.game-ui-surface :where(button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 80%, white);
  outline-offset: 2px;
}

.game-ui-surface :where(button, [role="button"], [role="radio"]) {
  touch-action: manipulation;
}

/* Semantic action icons share the preset icon geometry and accent treatment,
   regardless of which game or surface declares the action. Like the preset
   accent, this must outrank the high-specificity light-theme button reset. */
.custom-game-surface-action[data-game-ui-action-style="icon"][data-game-ui-action-icon="sparkles"] {
  color: #e0a82e !important;
}
.custom-game-surface-action[data-game-ui-action-style="icon"][data-game-ui-action-icon="sparkles"]:hover {
  color: #f0b94a !important;
}

/* Verified result states are shared by table cells, compact readouts and
   individual matchup values. These attributes belong only to UIPlan nodes;
   the hand-rendered reference styles are intentionally untouched. */
:root [data-game-ui-result-state="win"] {
  --game-ui-result-ink: var(--accent);
  --game-ui-result-fill: rgba(104, 211, 145, 0.15);
}
:root [data-game-ui-result-state="loss"] {
  --game-ui-result-ink: var(--danger);
  --game-ui-result-fill: rgba(255, 107, 107, 0.15);
}
:root [data-game-ui-result-state="tie"] {
  --game-ui-result-ink: var(--warn);
  --game-ui-result-fill: rgba(255, 180, 84, 0.1);
}
:root[data-theme="light"] [data-game-ui-result-state="win"] { --game-ui-result-fill: #dff6e8; }
:root[data-theme="light"] [data-game-ui-result-state="loss"] { --game-ui-result-fill: #ffe3e3; }
:root[data-theme="light"] [data-game-ui-result-state="tie"] { --game-ui-result-fill: #fff1d8; }
:root .game-ui-numeric-value { font-weight: 700; }
.game-ui-side-value { display: inline-block; white-space: nowrap; }
.game-ui-team-label { color: var(--ink); }
.game-ui-team-label[data-game-ui-team-label="a"] { color: var(--game-ui-team-a-ink); }
.game-ui-team-label[data-game-ui-team-label="b"] { color: var(--game-ui-team-b-ink); }
.game-ui-side-score { color: var(--ink); }
:root .game-ui-side-score[data-game-ui-result-state="win"] { color: var(--game-ui-result-ink); font-weight: 700; }
:root .game-ui-side-score[data-game-ui-result-state="loss"] { color: var(--game-ui-result-ink); font-weight: 700; }
:root .game-ui-side-score[data-game-ui-result-state="tie"] { color: var(--game-ui-result-ink); font-weight: 700; }
:root .game-ui-side-score[data-game-ui-score-tone="neutral"] { color: var(--ink) !important; }
:root .game-ui-numeric-value[data-game-ui-value-tone="positive"] { color: var(--accent); }
:root .game-ui-numeric-value[data-game-ui-value-tone="danger"] { color: var(--danger); }
:root .game-ui-numeric-value[data-game-ui-value-tone="neutral"] { color: var(--ink); }
:root .game-ui-numeric-value[data-game-ui-value-tone="muted"] { color: var(--muted); }
:root .game-ui-numeric-value[data-game-ui-value-tone="warning"] { color: var(--warn); }
:root :is(.custom-game-v2-play-board-table, .custom-game-v2-result-board-table, .custom-game-v2-results-table)
  :is([data-game-ui-result-state="win"], [data-game-ui-result-state="loss"], [data-game-ui-result-state="tie"]) {
  color: var(--game-ui-result-ink);
  background: transparent;
  font-weight: 700;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

:root .game-ui-opponent-results { display: block; white-space: normal; }
:root .game-ui-opponent-results .game-ui-opponent-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 2px 4px;
  margin-bottom: 2px;
  border-radius: 3px;
  color: var(--ink);
  background: var(--game-ui-result-fill);
  font-weight: 400;
  font-size: calc(12px + var(--font-size-step));
}
:root .game-ui-opponent-results [data-game-ui-result-tone="text"] {
  background: transparent; color: var(--game-ui-result-ink, var(--muted));
}
.game-ui-opponent-name { font-weight: 500; font-size: calc(14px + var(--font-size-step)); margin-right: 6px; }
.game-ui-opponent-detail { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.game-ui-opponent-score { font-size: calc(11px + var(--font-size-step)); color: var(--muted); }
:root .game-ui-opponent-results .game-ui-opponent-payout { font-weight: 600; font-size: calc(13px + var(--font-size-step)); }
.game-ui-opponent-multiplier { font-size: calc(10px + var(--font-size-step)); color: var(--muted); margin-left: 2px; }
:root .game-ui-opponent-results .game-ui-opponent-summary {
  margin-top: 3px;
  padding-top: 3px;
  border-top: 2px solid var(--line);
  font-size: calc(15px + var(--font-size-step));
  font-weight: 600;
  text-align: center;
}
.game-ui-opponent-summary-value { font-size: calc(13px + var(--font-size-step)); }

/* A break-even standing is neutral; a pushed individual matchup uses amber. */
:root .game-ui-result-value[data-game-ui-result-state="tie"] { color: var(--muted); font-weight: 400; }

/* Compact opponent readouts share the preset sheet-summary palette. Keep
   these translucent in both themes, rather than using desktop's light fills. */
@media (max-width: 1024px) {
  :root .game-ui-opponent-results .game-ui-opponent-result[data-game-ui-result-state="win"] { --game-ui-result-fill: rgba(104, 211, 145, 0.18); }
  :root .game-ui-opponent-results .game-ui-opponent-result[data-game-ui-result-state="loss"] { --game-ui-result-fill: rgba(255, 107, 107, 0.18); }
  :root .game-ui-opponent-results .game-ui-opponent-result[data-game-ui-result-state="tie"] { --game-ui-result-fill: rgba(255, 180, 84, 0.14); }
  :root .game-ui-opponent-results .game-ui-opponent-result {
    align-items: baseline;
    padding: 4px 10px;
    margin-bottom: 3px;
    gap: 8px;
    min-height: 24px;
    border-radius: 0;
    line-height: 1.35;
  }
  .game-ui-opponent-name { font-size: inherit; font-weight: 700; min-width: 0; margin-right: 0; overflow-wrap: anywhere; }
  .game-ui-opponent-detail { margin-left: auto; }
  .game-ui-opponent-score { font-size: 0.92em; }
  :root .game-ui-opponent-results .game-ui-opponent-payout { font-size: inherit; font-weight: 700; }
  .game-ui-opponent-multiplier { font-size: 0.85em; }
  :root .game-ui-opponent-results .game-ui-opponent-summary {
    padding: 4px 8px;
    margin-top: 4px;
    border-top-width: 1px;
    font-size: var(--text-base);
    font-weight: 700;
    text-align: left;
  }
  .game-ui-opponent-summary-value { font-size: inherit; }
}
@media (max-width: 480px) {
  :root .game-ui-opponent-results .game-ui-opponent-result { font-size: calc(11px + var(--font-size-step)); }
  :root .game-ui-opponent-results .game-ui-opponent-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }
  :root .game-ui-opponent-results .game-ui-opponent-summary > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  :root .game-ui-opponent-results .game-ui-opponent-summary-value {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* A sheet uses the preset's compact inset result treatment, independently of
   the viewport's table breakpoint. Main-board readouts retain their own spacing. */
:root .custom-game-sheet .game-ui-opponent-results .game-ui-opponent-result {
  align-items: baseline; padding: 3px 8px; margin-bottom: 3px; gap: 8px;
  min-height: 22px; border-radius: 4px; line-height: 1.35;
  font-size: calc(12px + var(--font-size-step)); font-weight: 700;
}
:root .custom-game-sheet .game-ui-opponent-result[data-game-ui-result-state="win"] { --game-ui-result-fill: rgba(104, 211, 145, 0.18); }
:root .custom-game-sheet .game-ui-opponent-result[data-game-ui-result-state="loss"] { --game-ui-result-fill: rgba(255, 107, 107, 0.18); }
:root .custom-game-sheet .game-ui-opponent-result[data-game-ui-result-state="tie"] { --game-ui-result-fill: rgba(255, 180, 84, 0.14); }
.custom-game-sheet .game-ui-opponent-name { font-size: inherit; font-weight: 700; margin-right: 0; }
.custom-game-sheet .game-ui-opponent-score { font-size: .92em; }
:root .custom-game-sheet .game-ui-opponent-results .game-ui-opponent-payout { font-size: inherit; font-weight: 700; }
.custom-game-sheet .game-ui-opponent-multiplier { font-size: .85em; }
:root .custom-game-sheet .game-ui-opponent-results .game-ui-opponent-summary {
  padding: 4px 8px; margin-top: 4px; border-top-width: 1px;
  font-size: calc(13px + var(--font-size-step)); font-weight: 700; text-align: left;
}
.custom-game-sheet .game-ui-opponent-summary-value { font-size: inherit; }
@media (max-width: 480px) {
  :root .custom-game-sheet .game-ui-opponent-results .game-ui-opponent-result {
    font-size: calc(11px + var(--font-size-step)); padding: 2px 6px; gap: 4px; min-height: 20px;
  }
  :root .custom-game-sheet .game-ui-opponent-results .game-ui-opponent-summary {
    font-size: calc(12px + var(--font-size-step)); padding: 3px 6px;
  }
}

.game-ui-data-table tr[data-game-ui-row-tone="positive"] > td,
.custom-game-v2-result-board-table tr[data-game-ui-row-tone="positive"] > td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.game-ui-data-table tr[data-game-ui-row-tone="warning"] > td,
.custom-game-v2-result-board-table tr[data-game-ui-row-tone="warning"] > td { background: color-mix(in srgb, var(--warn, #ffbf69) 14%, transparent); }
.game-ui-data-table tr[data-game-ui-row-tone="danger"] > td,
.custom-game-v2-result-board-table tr[data-game-ui-row-tone="danger"] > td { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.game-ui-data-table tr[data-game-ui-row-tone="muted"] > td,
.custom-game-v2-result-board-table tr[data-game-ui-row-tone="muted"] > td { color: var(--muted); }

.game-ui-surface .game-ui-data-table tr[data-game-ui-row-emphasis="outline"] > *,
.game-ui-surface .custom-game-v2-result-board-table tr[data-game-ui-row-emphasis="outline"] > * {
  font-weight: 700;
  outline: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
  outline-offset: -1px;
}

[data-game-ui-active-tone="gold"] { --game-ui-active-fill: #f5b82e; --game-ui-active-ink: #000; }
[data-game-ui-active-tone="warning"] { --game-ui-active-fill: var(--warn); --game-ui-active-ink: #000; }
[data-game-ui-active-tone="positive"] { --game-ui-active-fill: var(--accent); --game-ui-active-ink: var(--on-accent); }
[data-game-ui-active-tone="danger"] { --game-ui-active-fill: var(--danger); --game-ui-active-ink: #000; }
[data-game-ui-active-tone="primary"] { --game-ui-active-fill: var(--tab-active-bg, #1778d4); --game-ui-active-ink: #fff; }
/* Like the preset controls, explicit active tones must survive the global
   light-theme button reset. Disabled/off controls retain their normal chrome. */
:root [data-game-ui-active-tone]:is(button, [role="button"])[aria-pressed="true"],
:root [data-game-ui-active-tone] :is(button[aria-pressed="true"], [role="radio"][aria-checked="true"]) {
  background: var(--game-ui-active-fill) !important;
  border-color: var(--game-ui-active-fill) !important;
  color: var(--game-ui-active-ink) !important;
}

/* A required 2.0.2 value may legitimately have no authored default. Keep that
   state visible instead of silently projecting false, zero, or the first
   choice. Validation becomes red only after an invalid edit; untouched work
   stays the softer setup-warning color. This is profile-scoped so replayed
   2.0.1 controls retain their exact historical presentation. */
.game-ui-surface[data-game-ui-profile="gamespec-ui@2.0.2"] [data-required-unset="true"] {
  /* Required-without-default is semantic state, not a second visual theme.
     Preset tables use their normal neutral control border until the value is
     actually invalid; keeping that same contract avoids orange dashed inputs
     in the generated UIPlan surface. */
  outline: none;
  outline-offset: 0;
}

.game-ui-surface[data-game-ui-profile="gamespec-ui@2.0.2"] input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 24%, transparent);
}

.game-ui-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  .custom-game-stepper[data-required-unset="true"] .custom-game-stepper-value {
  color: var(--warn);
  font-style: italic;
}

/* A keyboard-focusable scroll region is added only when the table actually
   overflows. The thin inset edge is a visual affordance without consuming a
   separate instruction row on every phone. */
.game-ui-table-scroll {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.game-ui-table-scroll[tabindex="0"] {
  box-shadow: inset -10px 0 12px -14px color-mix(in srgb, var(--ink) 58%, transparent);
}

.game-ui-table-scroll[tabindex="0"]:focus-visible {
  border-radius: var(--radius-sm, 6px);
}

body.mode-games .game-ui-surface .game-ui-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

body.mode-games .game-ui-surface .game-ui-table :is(th, td) {
  padding-top: var(--game-ui-row-pad);
  padding-bottom: var(--game-ui-row-pad);
  line-height: 1.2;
}

/* Preset-quality table contract. The generated renderer uses these same
   selectors as the hand-built scorecards; only the plan supplies the column
   meaning. Keep this in the shared UI layer so a new game inherits the same
   sticky hole column, 2px rhythm, and compact overflow behavior automatically.
   The source table rules live in game-tables.css; this final layer only
   normalizes the generated table when later feature CSS has already run.
   Scope to the renderer-owned surface, including read-only result boards and
   Composer, with enough specificity to survive the async table decorator. */
.game-ui-surface:is(.game-ui-input-surface, .custom-game-instance-results)[data-game-ui-profile="gamespec-ui@2.0.2"] :is(
  .custom-game-v2-all-hole-table,
  .custom-game-v2-play-board-table
) {
  width: max(100%, 820px);
  min-width: max(100%, 820px);
  border-collapse: separate;
  border-spacing: 0;
}

.game-ui-surface:is(.game-ui-input-surface, .custom-game-instance-results)[data-game-ui-profile="gamespec-ui@2.0.2"] :is(
  .custom-game-v2-all-hole-table,
  .custom-game-v2-play-board-table
) :is(th, td) {
  border-bottom: 2px solid var(--line);
  padding: var(--game-ui-row-pad, 7px) 6px;
  font-size: var(--text-lg);
  line-height: 1.2;
  white-space: nowrap;
}

.game-ui-surface:is(.game-ui-input-surface, .custom-game-instance-results)[data-game-ui-profile="gamespec-ui@2.0.2"] :is(
  .custom-game-v2-all-hole-table,
  .custom-game-v2-play-board-table
) thead th {
  position: sticky;
  top: var(--game-sticky-head-top, 0px);
  background: var(--table-head-bg);
  z-index: var(--z-sticky-header);
}

.game-ui-surface:is(.game-ui-input-surface, .custom-game-instance-results)[data-game-ui-profile="gamespec-ui@2.0.2"] :is(
  .custom-game-v2-all-hole-table,
  .custom-game-v2-play-board-table
) :is(th, td):first-child {
  width: 40px;
  min-width: 40px;
  position: sticky;
  left: 0;
  padding-left: 4px;
  padding-right: 4px;
  background: var(--panel);
  border-right: 2px solid var(--line);
  z-index: var(--z-sticky-col);
}

.game-ui-surface:is(.game-ui-input-surface, .custom-game-instance-results)[data-game-ui-profile="gamespec-ui@2.0.2"] :is(
  .custom-game-v2-all-hole-table,
  .custom-game-v2-play-board-table
) thead th:first-child {
  z-index: var(--z-sticky-corner);
}

/* A declarative inline surface action can carry a short label and its live
   amount (for example Skins' per-hole stake) without inventing a preset DOM
   fragment. Its chrome intentionally shares the hand-built summary-card
   tokens. */
.game-ui-surface-trigger-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  margin: 14px 0 12px;
  padding: 18px var(--text-md);
  border: 1px solid var(--line-base, rgba(136, 165, 191, 0.22));
  border-radius: var(--game-menu-radius, 16px);
  background: var(--panel);
  box-shadow: 0 10px 24px -20px rgba(0, 0, 0, 0.45);
}

.custom-game-inputs-inner:has(> .game-ui-surface-trigger-card) {
  padding: 0;
}

.gamespec-preset-surface .game-scroll-body > .custom-game-inputs:has(.game-ui-surface-trigger-card),
.game-scroll-body > .custom-game-inputs:has([data-game-ui-play-board="holes"]) {
  padding-left: 0;
  padding-right: 0;
}

.custom-game-inputs-inner:has([data-game-ui-play-board="holes"]) {
  padding: 0;
}

/* A settings-only host has no visible play controls until its modal opens. */
.custom-game-inputs-inner[data-game-ui-profile="gamespec-ui@2.0.2"]:not(:has(> :not([hidden]))) {
  padding: 0;
}

/* A compact state face and a readable explanation share one hit target.
   Works for authored boolean controls and exclusive state cycles alike. */
:root button.game-ui-caption-button[aria-pressed] {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--panel-alt); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--radius-md);
  padding: 12px 16px; font-family: inherit; font-size: var(--text-md);
  font-weight: 600; text-align: left; min-height: 0;
}
.game-ui-caption-button > .game-ui-button-face {
  font-size: var(--text-xl); font-weight: 800; min-width: 36px;
  text-align: center; color: inherit;
}
.game-ui-caption-button > .game-ui-button-caption { flex: 1; min-width: 0; color: inherit; }
/* Preserve the idle surface against the global light-theme button reset. */
:root button.game-ui-caption-button[aria-pressed="false"] {
  background: var(--panel-alt) !important; border-color: var(--line) !important;
}
@media (max-width: 719px) {
  :root button.game-ui-caption-button[aria-pressed] { padding: 12px 18px; min-height: 48px; }
  .game-ui-caption-button > .game-ui-button-caption { font-size: var(--text-lg); }
}

.game-ui-surface-trigger-card > button {
  flex: 0 0 auto;
  height: calc(var(--btn-base-h, 40px) + var(--font-grow));
  min-height: calc(var(--btn-base-h, 40px) + var(--font-grow));
  white-space: nowrap;
}

.game-ui-surface-trigger-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.game-ui-surface-trigger-description {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-xs, 11px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.game-ui-surface-trigger-value {
  color: var(--ink);
  font-size: calc(var(--text-lg, 18px) + 3px);
  line-height: 1.1;
}

/* Four-column award grids and read-only leaderboards can use the viewport.
   Interaction-heavy matrices retain a modest horizontal canvas, reduced from
   the former blanket 720/820px minimum. */
body.mode-games .game-ui-surface[data-game-ui-recipe="achievement-grid"] .game-ui-table,
body.mode-games .game-ui-surface[data-game-ui-recipe="leaderboard"] .game-ui-table {
  min-width: 100%;
}

body.mode-games .game-ui-surface:not([data-game-ui-recipe="achievement-grid"]):not([data-game-ui-recipe="leaderboard"]) .game-ui-table:not(.game-ui-standing-table):not(:where(.custom-game-v2-all-hole-table, .custom-game-v2-play-board-table, .custom-game-empty-table)) {
  min-width: max(100%, 36rem);
}

/* An empty-state frame holds a sentence, not a score matrix. Keep its full
   explanation visible without horizontal scrolling, in either play or results. */
.game-ui-surface .custom-game-empty-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.game-ui-surface .custom-game-empty-table .custom-game-empty {
  width: auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Generated result/member tables have only three or four short columns. Once
   the active GameSpec recipe is propagated to the custom section, keep these
   simple tables in the card instead of inheriting the matrix-wide 36rem
   canvas used by interaction-heavy built-in game grids. */
body.mode-games :is(#customSection, .gamespec-preset-surface)[data-game-ui-spec-profile="gamespec-ui@2.0.2"] .game-ui-table:is(.custom-game-v2-results-table, .custom-game-v2-member-table, .custom-game-v2-hole-ledger-table),
body.mode-games .custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-table:is(.custom-game-v2-results-table, .custom-game-v2-member-table, .custom-game-v2-hole-ledger-table) {
  min-width: 100%;
}

/* Semantic GameSpec groups are real control boundaries. An always-visible
   group is a fieldset/legend; collapsed and collapsible groups are native
   details/summary disclosures, so their hierarchy works with keyboard and
   assistive technology without a parallel ARIA widget implementation. */
.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] {
  gap: var(--game-ui-gap-2);
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-control-group {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-control-group.is-disclosure {
  border-top: 1px solid var(--line-soft, var(--line));
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-control-group-label:not(.pill) {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 6px 0;
  color: var(--ink);
  font-size: var(--text-sm, 13px);
  font-weight: 750;
  line-height: 1.35;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] details.game-ui-control-group > summary {
  display: flex;
  min-height: var(--game-ui-control-min);
  align-items: center;
  cursor: pointer;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] :is(
  details.game-ui-control-group,
  .game-ui-region-disclosure
) > summary,
.custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-region-disclosure > summary {
  list-style: none;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] :is(
  details.game-ui-control-group,
  .game-ui-region-disclosure
) > summary::-webkit-details-marker,
.custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-region-disclosure > summary::-webkit-details-marker {
  display: none;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] :is(
  details.game-ui-control-group,
  .game-ui-region-disclosure
) > summary::after,
.custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-region-disclosure > summary::after {
  content: '›';
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: var(--game-ui-gap-2);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 120ms ease;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] :is(
  details.game-ui-control-group,
  .game-ui-region-disclosure
)[open] > summary::after,
.custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-region-disclosure[open] > summary::after {
  transform: rotate(90deg);
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-control-group-content {
  display: grid;
  min-width: 0;
  gap: var(--game-ui-gap-2);
  padding: 2px 0 6px;
}

/* The group descriptor owns composition, while this shared layer owns the
   small set of renderer layouts that make that composition feel deliberate.
   Explicit column counts are bounded by the schema, so a generated game can
   reproduce a compact award grid or a two-column setup without smuggling CSS
   into its GameSpec. */
.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-control-group-content[data-game-ui-layout="inline"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-control-group-content[data-game-ui-layout="grid"],
.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-control-group-content[data-game-ui-layout="cards"],
.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-control-group-content[data-game-ui-layout="matrix"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-control-group-content[data-game-ui-columns="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-control-group-content[data-game-ui-columns="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-control-group-content[data-game-ui-columns="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-control-group-content[data-game-ui-gap="tight"] {
  gap: var(--game-ui-gap-1);
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-control-group-content[data-game-ui-gap="loose"] {
  gap: var(--game-ui-gap-3);
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-control-group[data-game-ui-gap="tight"] > .game-ui-control-group-content {
  gap: var(--game-ui-gap-1);
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-control-group[data-game-ui-gap="tight"] .custom-game-field:not(.custom-game-v2-achievement-control),
.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-control-group[data-game-ui-gap="tight"] .custom-game-v2-entry-field:not(.custom-game-v2-achievement-control) {
  padding-block: 5px;
}

/* Preset Options are compact cards, not a second disclosure menu. The same
   neutral card treatment is available to any authored settings group, so a
   generated plan can express the hand-rolled option rhythm without importing
   a game's selector names or the old green pill chrome. */
.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"].custom-game-v2-settings
  > .custom-game-options-group {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: var(--game-menu-control-radius, var(--radius-md));
  background: color-mix(in srgb, var(--panel-alt) 74%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 48%, transparent);
}

/* A semantic panel reuses the same control-box/pill primitives as preset
   options. The wrapper owns helper text; it does not add another card. */
.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  > .game-ui-control-group[data-game-ui-group-style="panel"] {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  .game-ui-control-group-panel > .game-ui-control-group-content {
  padding: 0;
}

.game-ui-control-group-description { margin-bottom: 6px; }

/* Inert document blocks share the preset panel/label/text primitives. Only
   composition and paragraph variants are owned by this component. */
.game-ui-prose-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
  margin-bottom: 10px;
}

.game-ui-prose-compact { margin: 0; line-height: 1.4; }
.game-ui-prose-list { margin: 4px 0; padding-left: 16px; }
[data-game-ui-info-content] { display: contents; }

.custom-game-v2-settings.game-options-panel:has(> [data-game-ui-group-style="panel"]) {
  row-gap: 0;
}

.custom-game-v2-settings > [data-game-ui-group-style="panel"] + [data-game-ui-group-style="panel"] {
  margin-top: 12px;
}

.game-ui-control-group-hint { margin-top: 10px; }
.game-ui-control-group-hint.is-inside { margin: 6px 0 0; }

/* Responsive option cards use the preset controls' 220px minimum. Header
   and footer chrome span the surface; only authored groups join the grid. */
.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"].custom-game-v2-settings[data-game-ui-surface-layout="cards"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 10px;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"].custom-game-v2-settings[data-game-ui-surface-layout="cards"] > .custom-game-options-group {
  margin-top: 0;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"].custom-game-v2-settings[data-game-ui-surface-layout="cards"] > :not(.custom-game-options-group) {
  grid-column: 1 / -1;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"].custom-game-v2-settings[data-game-ui-surface-layout="cards"] > .game-options-modal-header {
  margin-bottom: 2px;
}

/* Full-width single-choice cards use the same touch dimensions, typography,
   and selected treatment as the preset decision sheets. This is a semantic
   control variant, usable by any choice/player group, not a game selector. */
.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  [data-game-ui-control-variant="choiceCards"]:is([role="radiogroup"], .custom-game-choice-cards),
.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  [data-game-ui-control-variant="choiceCards"] > [role="radiogroup"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  gap: 8px;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  [data-game-ui-control-variant="choiceCards"] :is([role="radio"], .custom-game-choice-clear) {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--line);
  border-radius: 10px;
  min-height: 44px;
  min-width: 0;
  width: 100%;
  padding: 10px 12px;
  background: var(--panel-alt);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  [data-game-ui-control-variant="choiceCards"] [role="radio"][data-active="true"] {
  border-color: var(--accent);
  background: rgba(31, 157, 85, 0.2);
  color: #e5fff7;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  [data-game-ui-control-variant="choiceCards"] [role="radio"][data-active="true"]::before {
  content: '\2713\00a0';
  color: var(--accent);
  font-weight: 700;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  [data-game-ui-control-variant="choiceCards"] .custom-game-choice-clear { text-align: center; }

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  [data-game-ui-control-variant="choiceCards"] :disabled { opacity: .55; cursor: not-allowed; }

:root[data-theme="light"] .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  [data-game-ui-control-variant="choiceCards"] :is([role="radio"], .custom-game-choice-clear) {
  background: var(--btn-bg);
  border-color: var(--btn-line);
  color: var(--ink-strong);
}

:root[data-theme="light"] .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  [data-game-ui-control-variant="choiceCards"] [role="radio"][data-active="true"] {
  background: rgba(31, 157, 85, 0.18);
  border-color: var(--accent);
  color: #0a3a2e;
}

:root[data-theme="light"] .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  [data-game-ui-control-variant="choiceCards"] [role="radio"][data-active="true"]::before {
  color: #00875a;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  .game-ui-control-group-content[data-game-ui-layout="grid"][data-game-ui-columns="auto"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"].custom-game-v2-settings
  > .custom-game-options-group > .game-ui-control-group-label:not(.pill) {
  padding: 0 0 7px;
  color: var(--muted);
  font-size: var(--text-xs, 11px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"].custom-game-v2-settings
  > .custom-game-options-group > .game-ui-control-group-content {
  margin-top: 0;
  padding: 0;
}

/* Surface layout is an authored composition token, not a selector escape
   hatch. These bounded rules let a plan describe the same inline, card, grid,
   or matrix rhythm as a tuned preset while the renderer keeps ownership of
   the actual markup. */
.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .custom-game-v2-team-columns {
  grid-column: 1 / -1;
  grid-template-columns: repeat(var(--game-ui-assignment-columns, 2), minmax(0, 1fr));
  gap: 10px;
}

/* Matrix membership uses the same neutral column and button treatment as
   preset option pickers. The authored column count survives phone widths. */
.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .custom-game-v2-team-columns > .custom-game-v2-team-card {
  display: block;
  padding: 8px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 8px;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .custom-game-v2-team-columns .custom-game-v2-team-card-header {
  margin-bottom: 6px;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .custom-game-v2-team-columns .custom-game-v2-team-card-header strong {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.game-ui-surface :is(
  [data-game-ui-surface-layout="grid"],
  [data-game-ui-surface-layout="cards"],
  [data-game-ui-surface-layout="matrix"]
) {
  display: grid;
  min-width: 0;
  gap: var(--game-ui-gap-2);
}

.game-ui-surface [data-game-ui-surface-layout="inline"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  gap: var(--game-ui-gap-2);
}

.game-ui-surface [data-game-ui-surface-columns="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.game-ui-surface [data-game-ui-surface-columns="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.game-ui-surface [data-game-ui-surface-columns="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.game-ui-surface [data-game-ui-surface-columns="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.game-ui-surface [data-game-ui-surface-gap="tight"] {
  gap: var(--game-ui-gap-1);
}

.game-ui-surface [data-game-ui-surface-gap="loose"] {
  gap: var(--game-ui-gap-3);
}

.game-ui-surface [data-game-ui-surface-scroll="internal"] {
  min-height: 0;
  overscroll-behavior: contain;
}

.game-ui-surface .game-options-panel[data-game-ui-surface-scroll="internal"] {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-control-group[data-game-ui-priority="secondary"] > .game-ui-control-group-label:not(.pill) {
  color: var(--muted);
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-region-disclosure {
  min-width: 0;
  margin: 0;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-region-disclosure > summary {
  min-height: var(--game-ui-control-min);
  cursor: pointer;
  color: var(--muted);
  font-size: var(--text-sm, 13px);
  font-weight: 750;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-region-disclosure-content {
  min-width: 0;
  padding-top: var(--game-ui-gap-1);
}

/* Group wrappers add one semantic DOM level inside the settings sheet. Retain
   its compact two-column field rhythm instead of falling back to the generic
   stacked custom-game field treatment. */
.custom-game-v2-settings .game-ui-control-group-content > .custom-game-field,
.custom-game-v2-round-entry-settings .game-ui-control-group-content > .custom-game-v2-entry-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(104px, min(42%, 230px));
  align-items: start;
  gap: 3px 12px;
  min-width: 0;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft, var(--line));
}

.custom-game-v2-settings .game-ui-control-group-content > .custom-game-field > :is(span:first-child, .custom-game-v2-control-description, .custom-game-v2-control-help, .custom-game-v2-control-unit),
.custom-game-v2-round-entry-settings .game-ui-control-group-content > .custom-game-v2-entry-field > .custom-game-v2-control-description {
  grid-column: 1;
  min-width: 0;
}

/* Control-level presentation overrides are safe, bounded tokens projected by
   the generic renderer. They let an authored plan choose the same compact
   above-label, full-width, or content-sized rhythm used by a tuned preset. */
.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] :is(
  .custom-game-field,
  .custom-game-v2-entry-field
)[data-game-ui-control-label-placement="above"] {
  grid-template-columns: minmax(0, 1fr);
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] :is(
  .custom-game-field,
  .custom-game-v2-entry-field
)[data-game-ui-control-label-placement="above"] > :is(
  select,
  input,
  .custom-game-toggle-switch,
  .custom-game-onoff-group,
  .custom-game-stepper,
  .hcp-mode-btn-group,
  button:not(.custom-game-v2-clear-entry)
) {
  grid-column: 1;
  grid-row: auto;
  justify-self: stretch;
  width: 100%;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] :is(
  .custom-game-field,
  .custom-game-v2-entry-field
)[data-game-ui-control-width="full"] > :is(
  select,
  input,
  .custom-game-toggle-switch,
  .custom-game-onoff-group,
  .custom-game-stepper,
  .hcp-mode-btn-group,
  button:not(.custom-game-v2-clear-entry)
) {
  width: 100%;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] :is(
  .custom-game-field,
  .custom-game-v2-entry-field
)[data-game-ui-control-size="large"] > :is(
  select,
  input,
  .custom-game-toggle-switch,
  .custom-game-onoff-group,
  .custom-game-stepper,
  .hcp-mode-btn-group,
  button:not(.custom-game-v2-clear-entry)
) {
  min-height: 48px;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] :is(
  .custom-game-field,
  .custom-game-v2-entry-field
)[data-game-ui-control-label-placement="hidden"] > :is(
  span:first-child,
  .custom-game-v2-control-description
) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] :is(
  .custom-game-field,
  .custom-game-v2-entry-field
)[data-game-ui-control-variant="pill"] :is(button, [role="button"], [role="radio"]) {
  border-radius: 999px;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] :is(
  .custom-game-field,
  .custom-game-v2-entry-field
)[data-game-ui-control-variant="cell"] {
  padding-inline: 6px;
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--panel-alt) 86%, transparent);
}

.custom-game-v2-settings .game-ui-control-group-content > .custom-game-field > :is(select, input, .custom-game-toggle-switch, .custom-game-onoff-group, .custom-game-stepper, .hcp-mode-btn-group, button:not(.custom-game-v2-clear-entry)),
.custom-game-v2-round-entry-settings .game-ui-control-group-content > .custom-game-v2-entry-field > :is(select, input, .custom-game-toggle-switch, .custom-game-onoff-group, .custom-game-stepper, .hcp-mode-btn-group, button:not(.custom-game-v2-clear-entry)) {
  grid-column: 2;
  grid-row: 1 / span 3;
  justify-self: end;
  width: min(100%, 230px);
  max-width: 100%;
  min-width: 0;
}

.custom-game-v2-settings .game-ui-control-group-content > .custom-game-field > .custom-game-v2-clear-entry,
.custom-game-v2-round-entry-settings .game-ui-control-group-content > .custom-game-v2-entry-field > .custom-game-v2-clear-entry {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
}

@media (max-width: 480px) {
  .custom-game-v2-settings .game-ui-control-group-content > .custom-game-field,
  .custom-game-v2-round-entry-settings .game-ui-control-group-content > .custom-game-v2-entry-field {
    grid-template-columns: minmax(0, 1fr) minmax(104px, 42%);
  }

  /* The current-hole label and selector already communicate context. Keep the
     semantic heading for assistive technology, but prevent five navigation
     items from wrapping into a loose second row on a phone. */
  .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"][data-game-ui-responsive-mode="currentHole"] .custom-game-hole-nav {
    flex-wrap: nowrap;
    justify-content: center;
  }

  .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"][data-game-ui-responsive-mode="currentHole"] .custom-game-hole-nav-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Content-sized scalar fields fit their label and a short numeric value.
   Adaptive grids can then reflow whole fields without squeezing the keypad
   input or splitting a short label across lines. */
.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  .game-ui-control-group-content[data-game-ui-columns="auto"]
  > .custom-game-field[data-game-ui-control-width="content"][data-game-ui-control-label-placement="inline"] {
  grid-template-columns: minmax(0, max-content) auto;
  align-items: center;
  justify-content: start;
  gap: 0 6px;
  padding: 0;
  border: 0;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  .game-ui-control-group-content[data-game-ui-columns="auto"]
  > .custom-game-field[data-game-ui-control-width="content"] > input[type="number"] {
  width: 64px;
  grid-row: 1;
  justify-self: start;
  appearance: textfield;
}

@media (min-width: 1025px) {
  .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"][data-game-ui-responsive-mode="split"] .custom-game-v2-entries > .game-ui-control-group > .game-ui-control-group-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"][data-game-ui-responsive-mode="split"] .custom-game-v2-entries > .game-ui-control-group > .game-ui-control-group-content > :is(.custom-game-v2-achievement-cards, .custom-game-v2-wager-matchups) {
    grid-column: 1 / -1;
  }
}

.game-ui-input-surface [data-game-ui-region="play"] > h3,
.game-ui-input-surface [data-game-ui-region="play"] .custom-game-hole-nav-title {
  font-size: var(--text-md, 16px);
  font-weight: 750;
}

/* Results follow the same semantic-region contract as inputs. Keep the
   summary compact, preserve a readable heading hierarchy, and let authored
   region/result disclosure use native details without adding another live
   region around the changing content. */
.custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"] {
  display: grid;
  gap: var(--game-ui-gap-2);
  min-width: 0;
}

.custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"] > [data-game-ui-region] {
  min-width: 0;
}

.custom-game-v2-summary {
  display: grid;
  gap: var(--game-ui-gap-1);
  padding: 7px 8px;
  border: 1px solid var(--line-soft, var(--line));
  border-radius: var(--radius-md, 8px);
  background: color-mix(in srgb, var(--panel-alt) 90%, transparent);
}

.custom-game-v2-summary > h4 {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs, 11px);
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.custom-game-v2-summary-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr));
  gap: var(--game-ui-gap-1) var(--game-ui-gap-2);
  margin: 0;
}

.custom-game-v2-summary-metric {
  min-width: 0;
}

.custom-game-v2-summary-metric dt {
  color: var(--muted);
  font-size: var(--text-xs, 11px);
  font-weight: 650;
}

.custom-game-v2-summary-metric dd {
  margin: 1px 0 0;
  color: var(--ink);
  font-size: var(--text-sm, 13px);
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.custom-game-v2-summary-metric dd small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--text-xs, 11px);
  font-weight: 500;
}

.custom-game-v2-status,
.custom-game-v2-state {
  min-width: 0;
}

.custom-game-v2-state {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 8px;
  padding: 5px 8px;
  border-left: 3px solid var(--line);
  color: var(--ink);
  font-size: var(--text-sm, 13px);
}

.custom-game-v2-state:is(.is-ready, .is-empty) {
  border-left-color: var(--line-soft, var(--line));
}

.custom-game-v2-state:is(.is-blocked, .is-partial, .is-error) {
  border-left-color: var(--warn, var(--danger));
}

.custom-game-v2-state > span {
  color: var(--muted);
}

.custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-region-disclosure {
  min-width: 0;
  margin: 0;
}

.custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-region-disclosure > summary {
  display: flex;
  align-items: center;
  min-height: var(--game-ui-control-min);
  cursor: pointer;
  color: var(--muted);
  font-size: var(--text-sm, 13px);
  font-weight: 750;
}

.custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-region-disclosure-content {
  display: grid;
  gap: var(--game-ui-gap-2);
  min-width: 0;
}

@media (min-width: 1025px) {
  .custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"][data-game-ui-responsive-mode="split"] {
    grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.5fr);
    align-items: start;
  }

  .custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"][data-game-ui-responsive-mode="split"] > [data-game-ui-region="status"],
  .custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"][data-game-ui-responsive-mode="split"] > [data-game-ui-region="summary"] {
    grid-column: 1;
    grid-row: 1;
  }

  .custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"][data-game-ui-responsive-mode="split"]:has(> [data-game-ui-region="status"]:not([hidden])) > [data-game-ui-region="summary"] {
    grid-row: 2;
  }

  .custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"][data-game-ui-responsive-mode="split"] > [data-game-ui-region="results"] {
    grid-column: 2;
    grid-row: 1 / span 3;
  }

  .custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"][data-game-ui-responsive-mode="split"] > [data-game-ui-region="history"] {
    grid-column: 1 / -1;
  }

  /* A split needs a visible summary/status companion. A board with its own
     summary should not reserve an empty sidebar beside the scorecard. */
  .custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"][data-game-ui-responsive-mode="split"]:not(:has(> :is([data-game-ui-region="status"], [data-game-ui-region="summary"]):not([hidden]))) > [data-game-ui-region="results"] {
    grid-column: 1 / -1;
  }
}

.game-ui-history-disclosure {
  margin-top: var(--game-ui-gap-2);
  border-top: 1px solid var(--line-soft, var(--line));
}

.game-ui-history-disclosure > summary {
  min-height: var(--game-ui-control-min);
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--muted);
  font-size: var(--text-sm, 13px);
  font-weight: 700;
}

.custom-game-ledger-content {
  display: grid;
  gap: var(--game-ui-gap-2);
  min-width: 0;
}

/* Styled scrollbars keep a long ledger visibly discoverable on platforms
   whose overlay scrollbars would otherwise make the final row look clipped. */
.custom-game-ledger-groups[data-game-ui-ledger-scrollable="true"] {
  scrollbar-color: color-mix(in srgb, var(--muted) 54%, transparent) transparent;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

.custom-game-ledger-groups[data-game-ui-ledger-scrollable="true"]::-webkit-scrollbar {
  width: 7px;
}

.custom-game-ledger-groups[data-game-ui-ledger-scrollable="true"]::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 54%, transparent);
}

.custom-game-ledger-groups[data-game-ui-ledger-scrollable="true"]:not([data-game-ui-ledger-scroll-end="true"]) {
  box-shadow: inset 0 -14px 12px -16px color-mix(in srgb, var(--ink, #163047) 68%, transparent);
}

.game-ui-ledger-scroll-hint {
  margin: calc(var(--game-ui-gap-2) * -1) 2px 0;
  padding-top: 5px;
  border-top: 1px solid color-mix(in srgb, var(--muted) 32%, transparent);
  color: var(--muted);
  font-size: var(--text-xs, 11px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.game-ui-ledger-scroll-hint::after {
  content: ' \2193';
}

.game-ui-ledger-scroll-hint[hidden] {
  display: none;
}

/* Both hosts use the shared live-results table primitive. Semantic column
   roles, rather than a game's id, decide which cells may grow or wrap. */
.game-ui-standing-table.custom-game-v2-result-board-table {
  table-layout: fixed;
}

/* The table decorator runs after render and adds game-ui-table. Compact
   standings must not then inherit the all-hole board's 34rem minimum. */
body.mode-games .game-ui-surface .game-ui-table.game-ui-standing-table:not(:has(.game-ui-standing-holes)) {
  min-width: 100%;
}

.game-ui-standing-table col.game-ui-standing-rank { width: 12%; }
.game-ui-standing-table col.game-ui-standing-player { width: 34%; }
.game-ui-standing-table:has(col:nth-child(7)) col.game-ui-standing-player { width: 28%; }
.game-ui-standing-table col.game-ui-standing-number { width: auto; }
/* Ranked leaderboards use the preset's proportional tracks. The player name
   yields to its handicap chip; numeric columns keep enough space for headings. */
.game-ui-standing-table:has(col.game-ui-standing-rank):not(:has(col.game-ui-standing-holes)) col.game-ui-standing-rank { width: 14%; }
.game-ui-standing-table:has(col.game-ui-standing-rank):not(:has(col.game-ui-standing-holes)) col.game-ui-standing-player { width: 38%; }
.game-ui-standing-table:has(col.game-ui-standing-rank):not(:has(col.game-ui-standing-holes)) col.game-ui-standing-number { width: 18%; }
.game-ui-standing-table:has(col.game-ui-standing-holes) {
  table-layout: auto;
  min-width: 580px;
}
.game-ui-standing-table:has(col.game-ui-standing-holes) col.game-ui-standing-player { width: 25%; }
.game-ui-standing-table :is(td, th) {
  white-space: normal;
  overflow-wrap: normal;
  vertical-align: middle;
  min-width: 0;
}
.game-ui-standing-table .live-results-title-row th {
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 16%, var(--panel-alt) 84%),
    color-mix(in srgb, var(--accent) 8%, var(--panel-alt) 92%));
}
.game-ui-standing-table .live-results-data-row td { height: 42px; }
@media (max-width: 600px) {
  .game-ui-surface[data-game-ui-density="compact"] .game-ui-standing-table .live-results-data-row td {
    height: 36px;
  }
}
.game-ui-standing-table .live-results-data-row .live-results-label {
  white-space: nowrap;
  position: static;
  width: auto;
  min-width: 0;
  max-width: none;
  box-shadow: none;
}
.gamespec-preset-surface .game-scroll-body > .gamespec-results-inline.live-results-card { padding: 0; }
.gamespec-preset-surface .game-scroll-body > .gamespec-results-inline.live-results-card:has(.custom-game-v2-result-tabs) {
  padding: 0 var(--space-md);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.gamespec-results-inline .custom-game-v2-result-board { margin-top: 0; }
.game-ui-standing-table td.game-ui-standing-player { text-align: left; }
.game-ui-standing-player-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-ui-standing-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.game-ui-standing-name-row .game-ui-standing-player-name { flex: 1 1 auto; }
.game-ui-standing-name-row .custom-game-v2-hcp-badge {
  margin-inline-start: 0;
  text-align: center;
  white-space: nowrap;
}
.game-ui-standing-table td.game-ui-standing-rank {
  color: var(--muted);
  font-weight: 700;
}
.game-ui-surface .game-ui-standing-table tbody tr.live-results-data-row.game-ui-standing-leader td {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.game-ui-standing-table .game-ui-standing-leader td.game-ui-standing-player {
  color: var(--accent);
  font-weight: 800;
}
.game-ui-standing-table td[data-game-ui-source="settlement"],
.game-ui-standing-table td[data-game-ui-value="secondary"] {
  color: var(--muted);
}
.game-ui-standing-table td.game-ui-standing-holes {
  min-width: 220px;
  text-align: left;
}
.custom-game-v2-board-status.game-ui-surface-trigger-card {
  gap: 12px;
  padding: 18px clamp(24px, 6vw, 42px);
}
.custom-game-v2-result-board-table[data-game-ui-result-board="holes"] tbody th {
  color: var(--ink);
  font-weight: 400;
}
/* Read-only hole history follows the shared scorecard's collapsed borders
   and header tracking. Row headers remain semantic <th> cells, including the
   muted push state, rather than inheriting leaderboard emphasis. */
.game-ui-surface.custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"]
  .custom-game-v2-result-board-table[data-game-ui-result-board="holes"] {
  border-collapse: collapse;
}
.game-ui-surface.custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"]
  .custom-game-v2-result-board-table[data-game-ui-result-board="holes"] thead th {
  letter-spacing: 0.01em;
}
.game-ui-surface.custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"]
  .custom-game-v2-result-board-table[data-game-ui-result-board="holes"] tbody tr:last-child > :is(th, td) {
  border-bottom: 0;
}
.game-ui-surface.custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"]
  .custom-game-v2-result-board-table tr[data-game-ui-row-tone="muted"] > th {
  color: var(--muted);
}
:root[data-theme="light"] .game-ui-surface.custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"]
  .custom-game-v2-result-board-table[data-game-ui-result-board="holes"] thead th:first-child {
  background: var(--table-head-bg);
}
.custom-game-v2-result-board-scroll {
  overflow-y: hidden;
  touch-action: pan-x pan-y;
  overscroll-behavior-y: auto;
}

/* A scorecard-style standings board shares the preset table's compact rows,
   real column headers and scroll frame. No game id or game-specific markup is
   needed; other standings retain their ranked/striped leaderboard treatment. */
.game-ui-scorecard-wrap {
  padding-bottom: 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
}

.live-results-card:has([data-game-ui-table-style="scorecard"]) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.mode-games .game-ui-surface .game-ui-table.game-ui-scorecard-table {
  width: max(100%, 34rem);
  min-width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
}

body.mode-games .game-ui-surface .game-ui-scorecard-table :is(th, td) {
  height: auto;
  padding: 4px 6px;
  border: 0;
  border-bottom: 2px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.25;
  white-space: normal;
  text-align: center;
}

body.mode-games .game-ui-surface .game-ui-scorecard-table thead th {
  position: sticky;
  top: var(--game-sticky-head-top, 0px);
  background: var(--table-head-bg);
  font-weight: 700;
  z-index: var(--z-sticky-header);
}

body.mode-games .game-ui-surface .game-ui-scorecard-table .game-ui-standing-player {
  width: 40px;
  min-width: 40px;
  position: sticky;
  left: 0;
  border-right: 2px solid var(--line);
  z-index: var(--z-sticky-col);
  text-align: left;
  font-weight: 700;
  font-size: var(--text-sm);
}

body.mode-games .game-ui-surface .game-ui-scorecard-table thead .game-ui-standing-player {
  text-align: center;
  z-index: var(--z-sticky-corner);
}

.game-ui-scorecard-table .game-ui-standing-player-name {
  white-space: normal;
  overflow: visible;
}

body.mode-games .game-ui-surface .game-ui-scorecard-table .game-ui-standing-holes {
  min-width: 0;
}

body.mode-games .game-ui-surface .game-ui-scorecard-table .game-ui-standing-number {
  min-width: 42px;
  text-align: right;
  white-space: nowrap;
}

body.mode-games .game-ui-surface .game-ui-table [data-game-ui-settlement="collect"] {
  color: var(--accent);
  font-weight: 600;
}
body.mode-games .game-ui-surface .game-ui-table [data-game-ui-settlement="owe"] {
  color: var(--danger);
  font-weight: 600;
}
body.mode-games .game-ui-surface .game-ui-table [data-game-ui-settlement="even"] {
  color: var(--muted);
  font-weight: 400;
}

@media (min-width: 769px) {
  body.mode-games .game-ui-surface .game-ui-scorecard-table :is(th, td) {
    padding-top: var(--game-ui-row-pad);
    padding-bottom: var(--game-ui-row-pad);
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
  }
  body.mode-games .game-ui-surface .game-ui-scorecard-table .game-ui-standing-player {
    padding-left: 4px;
    padding-right: 4px;
  }
  body.mode-games .game-ui-surface .game-ui-scorecard-table .game-ui-standing-number {
    min-width: 0;
    text-align: center;
  }
  .game-ui-scorecard-table .game-ui-standing-player-name { white-space: nowrap; }
}
.custom-game-v2-result-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  margin-bottom: 14px;
}
.custom-game-v2-result-tabs .custom-game-v2-result-tab {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: normal;
}
.custom-game-v2-result-tab:not(.custom-game-v2-result-tab-select):not(.active),
.custom-game-v2-result-tab-pill:not(.active) { opacity: 0.72; }
.custom-game-v2-result-tab-pill {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 4px 4px 4px 14px;
  font-size: 0.85rem;
  font-weight: 600;
}
.custom-game-v2-result-tabs .custom-game-v2-result-tab-select {
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  min-height: 32px;
  padding: 2px 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  box-shadow: none;
  cursor: pointer;
}
.game-ui-surface .custom-game-v2-result-group-action {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 0.95rem;
  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;
}
.custom-game-v2-result-group-action:hover {
  background: color-mix(in srgb, var(--danger, #d44a4a) 14%, transparent);
  transform: none;
  box-shadow: none;
}
/* Result navigation uses the same selected radio treatment as preset match
   tabs. The active class also keeps the shared idle-button polish out. */
:root:not([data-theme="light"]) :is(.custom-game-v2-result-tab, .custom-game-v2-result-tab-pill).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"] :is(.custom-game-v2-result-tab, .custom-game-v2-result-tab-pill).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);
}
.custom-game-v2-board-summary-field .custom-game-v2-result-matchup-cell {
  display: block;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.game-ui-control-group-content > [data-game-ui-all-holes="true"] {
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
}

/* A group-targeted setup action uses the same editor without showing unrelated
   settings or a second disclosure. The modal chrome supplies its title. */
.game-ui-surface [data-game-ui-group-filtered="true"],
.game-ui-surface [data-game-ui-focused-group="true"] > .game-ui-control-group-label,
.game-ui-surface [data-game-ui-focused-group="true"] [data-game-ui-group-action="header"] {
  display: none !important;
}
.game-ui-surface [data-game-ui-focused-group="true"] {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.game-ui-surface [data-game-ui-focused-group="true"] > .game-ui-control-group-content {
  padding: 0;
  margin: 0;
  border: 0;
}
.game-ui-control-group-content > .custom-game-v2-control-help {
  grid-column: 1 / -1;
}
.custom-game-all-hole-label {
  min-width: 20px;
  font-size: var(--text-xs);
  color: var(--muted);
}

/* A hidden label has no layout column. Labeled buttons and choice chips
   already communicate their purpose; leaving an empty label track squeezed
   them into a narrow, tall stack in every generated options panel. */
.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-control-group-content
  > :is(.custom-game-field, .custom-game-v2-entry-field)[data-game-ui-control-label-placement="hidden"] {
  grid-template-columns: minmax(0, 1fr);
  border-top: 0;
  padding-top: 0;
}
.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-control-group-content
  > :is(.custom-game-field, .custom-game-v2-entry-field)[data-game-ui-control-label-placement="hidden"]
  > :is(button, input, select, .hcp-mode-btn-group, .custom-game-onoff-group, .custom-game-stepper) {
  grid-column: 1;
  grid-row: auto;
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
}

.custom-game-ledger-disclosure > summary {
  justify-content: space-between;
}

/* The inline remove action used by Match Play was 22px. Keep the tab compact,
   but meet the 24px WCAG target floor with enough breathing room for a thumb. */
.game-ui-surface .matchplay-tab-remove-btn {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
}

@media (max-width: 768px) {
  .game-ui-surface {
    --game-ui-row-pad: 5px;
    --game-ui-control-min: 40px;
  }

  body.mode-games .game-ui-surface .game-ui-table :is(th, td) {
    padding-left: 7px;
    padding-right: 7px;
    font-size: clamp(12px, 3.25vw, 14px);
  }

  body.mode-games .game-ui-surface .game-ui-table :is(input, select, button) {
    min-height: 34px;
  }

  /* The legacy table minimum belongs to the preset tables. UIPlan input
     boards own their fit/intrinsic sizing below, regardless of their host. */
  body.mode-games .game-ui-surface:not([data-game-ui-recipe="achievement-grid"]):not([data-game-ui-recipe="leaderboard"]) .game-ui-table:not(.game-ui-standing-table):not(:where(.custom-game-v2-all-hole-table, .custom-game-v2-play-board-table, .custom-game-empty-table)) {
    min-width: max(100%, 34rem);
  }

  body.mode-games.game-results-expanded .game-section[aria-hidden="false"] .results-card-wrap {
    /* Keep the shared Score/Games footer visible. The results drawer expands
       into the space above it; it must never take over the footer's viewport
       slot or make the app's primary navigation disappear. */
    bottom: calc(var(--games-footer-h, 113px) + var(--footer-bottom-offset, 0px) - 3px) !important;
  }

  body.mode-games.game-results-expanded .game-section[aria-hidden="false"] .results-card-wrap .live-results-card,
  body.mode-games.game-results-expanded .game-section[aria-hidden="false"] .results-card-wrap .banker-header-totals {
    max-height: min(52dvh, 420px);
  }

  body.mode-games.game-results-expanded .game-section[aria-hidden="false"] {
    padding-bottom: calc(min(52dvh, 420px) + 58px + var(--footer-bottom-offset, 0px));
  }

  .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] .custom-game-v2-entry-field:not(.custom-game-v2-achievement-control) {
    gap: 6px;
    padding-block: 6px;
  }
}

/* Score-mode totals are a narrow summary tray, so let the labels carry the
   available width and keep numeric columns at a predictable share. This
   also wins over the older 1% value-column rule that made generated totals
   look like a blank strip with clipped numbers. */
body.mode-score #gameTotalsCard.game-totals-card #gameTotalsBody {
  padding: 4px;
}

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent {
  min-width: 0;
}

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  :is(.game-totals-custom-table, .game-totals-matchplay-table, .game-totals-bestball-table,
      .game-totals-hilo-mini-table, .game-totals-skins-mini-table, .live-results-table) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  table-layout: fixed;
}

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  :is(.game-totals-custom-table, .game-totals-matchplay-table, .game-totals-bestball-table,
      .game-totals-hilo-mini-table, .game-totals-skins-mini-table, .live-results-table)
  :is(th, td) {
  min-width: 0;
  padding: 3px 5px;
  line-height: 1.2;
}

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  .game-totals-custom-table--two-col :is(th.game-totals-custom-value, td.game-totals-custom-value) {
  width: 28%;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
}

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  .game-totals-custom-table--three-col :is(th.game-totals-custom-value, td.game-totals-custom-value,
    th.game-totals-custom-secondary-value, td.game-totals-custom-secondary-value) {
  width: 22%;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
}

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  :is(.game-totals-custom-table--two-col, .game-totals-custom-table--three-col)
  :is(th:first-child, td:first-child) {
  white-space: normal;
  overflow-wrap: anywhere;
}

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  .game-totals-custom-table :is(th.game-totals-custom-value, td.game-totals-custom-value,
    th.game-totals-custom-secondary-value, td.game-totals-custom-secondary-value) {
  font-variant-numeric: tabular-nums;
}

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  .live-results-table .live-results-label {
  min-width: 0;
  max-width: none;
  position: static;
  overflow-wrap: anywhere;
}

/* The cloned result tables use a small, stable label column and share the
   remaining width between the values. Explicit game shapes keep long player
   names from reserving space meant for the scores. */
body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  .junk-standings-table :is(th:first-child, td:first-child) { width: 58%; }

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  .ninepoint-standings-table :is(th:first-child, td:first-child),
body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  .vegas-results-table :is(th:first-child, td:first-child) { width: 36%; }

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  .hilo-results-table :is(th:first-child, td:first-child) { width: 34%; }

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  .wolf-results-table :is(th:first-child, td:first-child) { width: 30%; }

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  .vegas-results-table col.lr-col-label { width: 36%; }

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  .hilo-results-table col.lr-col-label { width: 34%; }

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  .wolf-results-table col.lr-col-label { width: 30%; }

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  .strokeplay-standings-table :is(th:first-child, td:first-child),
body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  .stableford-standings-table :is(th:first-child, td:first-child) { width: 11%; }

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  :is(.strokeplay-standings-table, .stableford-standings-table)
  :is(th:nth-child(2), td:nth-child(2)) { width: 41%; }

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  .bbb-standings-table :is(th:first-child, td:first-child) { width: 10%; }

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  .bbb-standings-table :is(th:nth-child(2), td:nth-child(2)) { width: 30%; }

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  .game-totals-matchplay-table :is(th:first-child, td:first-child) {
  width: 70%;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  .game-totals-bestball-table :is(th:first-child, td:first-child) { width: 18%; }

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  .game-totals-bestball-table :is(th:nth-child(2), td:nth-child(2)) {
  width: 48%;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  :is(.live-results-table, .game-totals-matchplay-table, .game-totals-bestball-table)
  :is(th, td):not(.live-results-label) {
  white-space: nowrap;
}

body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
  :is(.game-totals-matchplay-status, .game-totals-bestball-status, .game-totals-custom-status) {
  margin-block: 2px 4px;
  line-height: 1.2;
}

@media (max-width: 768px) {
  body.mode-score #gameTotalsCard.game-totals-card #gameTotalsBody {
    left: 4px;
    right: 4px;
    bottom: calc(100% + 4px);
    max-height: min(58vh, 360px);
  }

  body.mode-score #gameTotalsCard.game-totals-card .game-totals-tabs-shell {
    margin-bottom: 4px;
  }

  body.mode-score #gameTotalsCard.game-totals-card .game-totals-tabs {
    gap: 4px;
  }

  body.mode-score #gameTotalsCard.game-totals-card .game-totals-tab {
    min-height: 36px;
    height: 36px;
    max-height: 36px;
    padding-inline: 9px;
    font-size: 12px;
  }

  body.mode-score #gameTotalsCard.game-totals-card #gameTotalsContent
    :is(th, td) {
    padding-inline: 4px;
  }
}

@media (max-width: 600px) {
  /* The shipped BBB point grid fits two 150px fields across a phone-width
     options sheet. Preserve that useful density instead of collapsing all
     three values into a one-column wall. */
  .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"].custom-game-v2-settings
    .game-ui-control-group-content[data-game-ui-layout="grid"][data-game-ui-columns="3"],
  .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"].custom-game-v2-settings
    .game-ui-control-group-content[data-game-ui-layout="grid"][data-game-ui-columns="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  body.mode-games .game-ui-surface[data-game-ui-recipe="achievement-grid"] .game-ui-table :is(th, td) {
    padding-inline: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mode-games.game-results-expanded .games-controls-shell {
    transition: none;
  }

  .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] :is(
    details.game-ui-control-group,
    .game-ui-region-disclosure
  ) > summary::after,
  .custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"] .game-ui-region-disclosure > summary::after {
    transition: none;
  }
}

@media (forced-colors: active) {
  .game-ui-surface :where(button, input, select, textarea, [tabindex]):focus-visible {
    outline-color: Highlight;
  }

  .game-ui-table-scroll[tabindex="0"] {
    border: 1px solid CanvasText;
    box-shadow: none;
  }
}

/* Generated all-hole boards use the same dense table contract as the
   hand-built preset tables. Keep the compact contract last so the generic
   renderer cannot reintroduce a desktop-width overflow on phones. */
@media (max-width: 768px) {
  .game-ui-surface:is(.game-ui-input-surface, .custom-game-instance-results)[data-game-ui-profile="gamespec-ui@2.0.2"] :is(
    .custom-game-v2-all-hole-table,
    .custom-game-v2-play-board-table
  ) {
    width: 100%;
    min-width: 0;
  }

  .game-ui-surface:is(.game-ui-input-surface, .custom-game-instance-results)[data-game-ui-profile="gamespec-ui@2.0.2"] :is(
    .custom-game-v2-all-hole-table,
    .custom-game-v2-play-board-table
  ) :is(th, td) {
    padding: var(--game-ui-row-pad, 5px) 7px;
    font-size: var(--text-lg);
  }

  .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"] :is(
    .custom-game-v2-all-hole-table,
    .custom-game-v2-play-board-table
  ) :is(th, td):first-child {
    min-width: 50px;
    padding-left: 2px;
    padding-right: 2px;
  }

  .game-ui-surface.custom-game-instance-results[data-game-ui-profile="gamespec-ui@2.0.2"]
    .custom-game-v2-result-board-table[data-game-ui-result-board="holes"] :is(th, td):first-child {
    width: auto;
    min-width: 40px;
    max-width: none;
    padding-inline: 7px;
  }

  /* A summary board such as Junk is the mobile `Hole | Results` projection:
     let the result column own the remaining width instead of inheriting the
     wide entry-table minimum used by Banker/BBB/Wolf-style boards. */
  .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
    .custom-game-v2-play-board[data-game-ui-play-board-compact="summary"]
    .custom-game-v2-play-board-table {
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
  }

  .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
    .custom-game-v2-play-board[data-game-ui-play-board-compact="summary"]
    .custom-game-v2-play-board-table th:not(:first-child),
  .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
    .custom-game-v2-play-board[data-game-ui-play-board-compact="summary"]
    .custom-game-v2-play-board-table td:not(:first-child) {
    width: auto;
    min-width: 0;
    white-space: normal;
    text-align: left;
  }

  .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
    .custom-game-v2-play-board-table tbody tr[data-game-ui-hole-opener="true"] {
    cursor: pointer;
  }
}

/* Intrinsic boards preserve usable controls and scroll inside their surface.
   A bounded per-column minimum scales with the expanded column count rather
   than assigning every generated game one hard-coded desktop table width. */
.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  .custom-game-v2-play-board-table[data-game-ui-column-sizing="fit"] {
  width: 100%;
  min-width: 0;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  .custom-game-v2-play-board-table[data-game-ui-column-sizing="intrinsic"] {
  width: max(100%, calc(60px + var(--game-ui-board-columns) * 140px));
  min-width: max(100%, calc(60px + var(--game-ui-board-columns) * 140px));
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  .custom-game-v2-play-board-table[data-game-ui-column-sizing="intrinsic"] :is(th, td) {
  font-size: var(--text-lg);
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  .custom-game-v2-play-board-table[data-game-ui-column-sizing="intrinsic"] thead th {
  padding: 4px 6px;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  .custom-game-v2-play-board-table[data-game-ui-column-sizing="intrinsic"] :is(th, td):first-child {
  width: 52px;
  min-width: 52px;
  padding-inline: 6px;
}

.game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
  .custom-game-v2-play-board-table[data-game-ui-column-sizing="intrinsic"] td:has(> select, > .custom-game-v2-play-board-player-control > select) {
  padding: 3px 4px;
  text-align: center;
}

.custom-game-v2-play-board-table td > :is(
  select[data-game-ui-control-width="content"],
  .custom-game-v2-play-board-player-control > select[data-game-ui-control-width="content"]
) {
  width: 100%;
  max-width: 130px;
  min-width: 84px;
}

/* Matchup readouts carry authored line boundaries. The dense scorecard's
   nowrap default must not turn independent opponent results into one line. */
.game-ui-surface:is(.game-ui-input-surface, .custom-game-instance-results)[data-game-ui-profile="gamespec-ui@2.0.2"]
  :is(.custom-game-v2-play-board-table, .custom-game-v2-result-board-table)
  td.custom-game-v2-result-matchup-cell[data-game-ui-matchup-layout="stack"] {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
    .custom-game-v2-play-board-table[data-game-ui-column-sizing="intrinsic"] :is(th, td) {
    font-size: var(--text-sm);
  }

  .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
    .custom-game-v2-play-board-table[data-game-ui-column-sizing="intrinsic"] thead th {
    padding: 4px 5px;
  }

  .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
    .custom-game-v2-play-board-table[data-game-ui-column-sizing="intrinsic"] :is(th, td):first-child {
    padding-inline: 5px;
  }

  .custom-game-v2-play-board-table td > :is(
    select[data-game-ui-control-width="content"],
    .custom-game-v2-play-board-player-control > select[data-game-ui-control-width="content"]
  ) {
    min-width: 64px;
  }
}

/* Preset game tables should use the phone-width card before they create a
   horizontal surface. The older 34/36rem canvas is useful for dense desktop
   grids, but leaves an unnecessary empty strip beside short mobile tables.
   Keep the table's intrinsic content as the overflow floor so long labels and
   touch controls can still scroll when they actually need the room. */
@media (max-width: 768px) {
  /* Match the desktop-grid rule's specificity so every ordinary game table
     gets the compact mobile floor, including tables created by a GameSpec. */
  body.mode-games .game-ui-surface:not([data-game-ui-recipe="achievement-grid"]):not([data-game-ui-recipe="leaderboard"])
    .game-ui-table:not(.game-ui-standing-table):not(:where(.custom-game-v2-all-hole-table, .custom-game-v2-play-board-table, .custom-game-empty-table)) {
    min-width: 0;
  }

  body.mode-games .game-ui-surface .game-ui-table.game-ui-scorecard-table,
  body.mode-games .game-ui-surface .game-ui-table.game-ui-standing-table:has(col.game-ui-standing-holes) {
    width: 100%;
    min-width: 0;
  }

  body.mode-games .game-ui-surface .game-ui-table:is(
    .vegas-table,
    .banker-table,
    .skins-table,
    .junk-table,
    .bbb-table
  ),
  body.mode-games .game-ui-surface #bbbTable {
    width: 100%;
    min-width: 0;
  }

  body.mode-games .game-ui-surface .game-ui-table:is(
    .vegas-table,
    .banker-table,
    .skins-table,
    .junk-table,
    .bbb-table
  ) :is(th, td),
  body.mode-games .game-ui-surface #bbbTable :is(th, td) {
    padding-inline: clamp(3px, 1vw, 5px);
  }

  body.mode-games .game-ui-surface .game-ui-table:is(
    .vegas-table,
    .banker-table,
    .skins-table,
    .junk-table,
    .bbb-table
  ) :is(th, td):first-child,
  body.mode-games .game-ui-surface #bbbTable :is(th, td):first-child {
    padding-inline: 2px;
  }

  /* Intrinsic generated boards still need one column per player, but the
     desktop 140px column budget is excessive on a phone. The control rules
     below retain their own minimums; this budget only prevents the renderer
     from reserving several hundred pixels of empty space per column. */
  .game-ui-input-surface[data-game-ui-profile="gamespec-ui@2.0.2"]
    .custom-game-v2-play-board-table[data-game-ui-column-sizing="intrinsic"] {
    width: max(100%, calc(60px + var(--game-ui-board-columns) * 80px));
    min-width: max(100%, calc(60px + var(--game-ui-board-columns) * 80px));
  }
}

/* Vegas is the only phone readout with six compact numeric columns. Its
   content-sized layout can let a wider two-letter team label push the final
   points column beyond the card edge. Tighten only the team-score/Mult group
   so the standard four-player readout gains room without crowding the longer
   Ghost Team/Opponents labels used by 2–3 player mode. */
@media (max-width: 480px) {
  body.mode-games .game-ui-surface #vegasTable :is(
    th:nth-child(2), td:nth-child(2),
    th:nth-child(3), td:nth-child(3),
    th:nth-child(4), td:nth-child(4)
  ) {
    padding-inline: 1px;
  }
}