/* The scoreboard under a game (ADR-0060). Sits on the page, not on the game,
   so it follows the page's own colours on both sites. */
.scores { margin-top: var(--space-6); }
.scores h2 { font-size: var(--step-1); margin-bottom: var(--space-2); }
.scores p { max-width: none; }
.score-settings { margin: 0 0 var(--space-3); color: var(--ink-soft); overflow-wrap: anywhere; }
.score-note { color: var(--ink-soft); }
.score-new { color: var(--accent); font-weight: 700; margin: var(--space-3) 0 0; }
.score-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }

.score-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.score-row {
  display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: var(--space-2);
  min-height: var(--tap); padding: 0 var(--space-3); border-radius: var(--radius); background: var(--surface-2);
}
.score-row:has(.score-remove) { grid-template-columns: 2.5rem 1fr auto auto; }
.score-row.mine { box-shadow: inset 0 0 0 2px var(--accent); }
.score-rank { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.score-row:nth-child(1) .score-rank { color: var(--accent); font-weight: 700; }
.score-name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.score-value { font-variant-numeric: tabular-nums; font-weight: 700; }
.score-gap { text-align: center; color: var(--ink-soft); }
.score-remove { min-height: 40px; padding-inline: var(--space-3); }

.score-boards { margin-top: var(--space-4); }
.score-boards summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.score-boards ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.score-boards .btn { text-align: left; overflow-wrap: anywhere; }