/* Shared Game Summary presentation
   Single source of truth for GameSummary_html rendered by LeaderboardNow and AV.

   IMPORTANT:
   - All selectors are scoped under .game-summary.
   - This deliberately avoids LeaderboardNow's existing .scorecard styles.
*/

.game-summary {
  --game-summary-ink: #111;
  --game-summary-line: #222;
  --game-summary-soft: #e8e8e8;

  width: min(100%, 980px);
  margin: auto;
  color: var(--game-summary-ink);
  font-family: Arial, Helvetica, sans-serif;
}

.game-summary *,
.game-summary *::before,
.game-summary *::after {
  box-sizing: border-box;
}

/* Current leaderboard */
.game-summary .scorecard {
  margin-bottom: 18px;
  border: 3px solid var(--game-summary-line);
}

.game-summary table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.game-summary th,
.game-summary td {
  padding: 11px 10px;
  border-right: 2px solid var(--game-summary-line);
  border-bottom: 2px solid var(--game-summary-line);
  font-size: 34px;
  font-weight: 700;
  text-align: center;
}

.game-summary th {
  background: var(--game-summary-soft);
  font-size: 28px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.game-summary th:last-child,
.game-summary td:last-child {
  border-right: 0;
}

.game-summary tbody tr:last-child td {
  border-bottom: 0;
}

.game-summary th:first-child,
.game-summary td:first-child {
  width: 40%;
  padding-left: 22px;
  text-align: left;
}

/* Hole-score marks */
.game-summary .score-mark {
  display: inline-grid;
  width: 1.65em;
  height: 1.65em;
  place-items: center;
  line-height: 1;
}

.game-summary .birdie {
  border: 3px solid var(--game-summary-ink);
  border-radius: 50%;
}

.game-summary .bogey {
  border: 3px solid var(--game-summary-ink);
}

/* Game sections */
.game-summary .section {
  margin-bottom: 18px;
  padding: 12px 20px;
  border: 3px solid var(--game-summary-line);
}

.game-summary .score-grid {
  display: grid;
  grid-template-columns: 150px 180px 120px 180px;
  align-items: center;
  column-gap: 10px;
  font-size: 28px;
  font-weight: 800;
}

.game-summary .section-title {
  grid-column: 1;
  text-align: left;
}

.game-summary .left-side {
  grid-column: 2;
  text-align: right;
}

.game-summary .status {
  grid-column: 3;
  text-align: center;
  white-space: nowrap;
}

.game-summary .right-side {
  grid-column: 4;
  text-align: left;
}

.game-summary .match-row {
  display: contents;
}

.game-summary .match-row > span {
  padding: 4px 0;
}

/* Optional ticker retained from the concept design.
   It can be omitted from GameSummary_html without affecting layout. */
.game-summary .ticker {
  padding: 12px 20px;
  border-top: 4px solid var(--game-summary-line);
  font-size: 24px;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 650px) {
  .game-summary th,
  .game-summary td {
    padding: 8px 5px;
  }

  .game-summary th:first-child,
  .game-summary td:first-child {
    padding-left: 10px;
  }

  .game-summary .section {
    padding: 10px 12px;
  }

  .game-summary .score-grid {
    grid-template-columns: 112px minmax(100px, 1fr) 88px minmax(100px, 1fr);
    column-gap: 6px;
    font-size: 22px;
  }
}

@media (orientation: landscape) and (max-height: 700px) {
  .game-summary th,
  .game-summary td {
    padding: 6px;
    font-size: 22px;
  }

  .game-summary th {
    font-size: 16px;
  }

  .game-summary .section {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .game-summary .ticker {
    padding: 8px;
  }
}