/* The end of the game's score table (web/kit/results.js; docs/UI_GUIDE.md, Components): a column per
   player (their token, name and a note, the winner's with a crown and a quiet tint in their colour),
   a row per stat, the deciding row emphasised. It scrolls sideways inside its box only when it has
   to. */
.st-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; margin: 4px 0 8px; }
.score-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.score-table th, .score-table td { padding: 8px 4px; border-bottom: 1px solid var(--gc-rule); }
.score-table thead th { border-bottom-color: var(--gc-rule-strong, var(--gc-rule)); vertical-align: bottom; }
/* The stat names: the first column. */
.score-table tbody th, .score-table .st-corner {
  text-align: left; padding-left: 0; padding-right: 8px; min-width: 4.5em; max-width: 8em;
  font-size: 12.5px; font-weight: 500; color: var(--gc-text-2); }
/* A player's column head: their token over their name (shortened; whole in the title). */
.score-table th.st-p { position: relative; min-width: 40px; padding-top: 18px; text-align: center; font-weight: 700; font-size: 12.5px; color: var(--gc-text);
  box-shadow: inset 0 -3px 0 var(--pc); }
.st-p .pt-token { width: 32px; height: 32px; margin: 0 auto 4px; }
.st-p .pt-token svg { width: 100%; height: 100%; }
.st-p .pt-ini { font-size: 14px; }
.st-nm, .st-note { display: block; max-width: 7.5em; margin: 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-note { font-size: 11px; font-weight: 500; color: var(--gc-text-3); }
.score-table.some .st-nm, .score-table.some .st-note { max-width: 4.8em; }
.score-table.many .st-nm, .score-table.many .st-note { max-width: 3.4em; }
.st-crown { position: absolute; top: 2px; left: 50%; margin-left: -7px; fill: var(--gc-text); }
.st-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* A heading over the rows after it. */
.score-table tr.st-sec th { max-width: none; padding: 14px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gc-text-3); }
/* The values: centred under their player, tabular. */
.score-table td { text-align: center; color: var(--gc-text); }
.score-table td.txt { font-size: 12.5px; color: var(--gc-text-2); overflow-wrap: anywhere; hyphens: auto; }
/* The winner's column: a quiet tint in their colour (amber stays for what you can do). */
.score-table .st-win { background: color-mix(in srgb, var(--pc) 10%, transparent); }
/* The row that decides. */
.score-table tr.total th { color: var(--gc-text); font-weight: 700; }
.score-table tr.total td { font: 700 22px/1 var(--gc-font-display); }
/* Five or six players on a phone: a little tighter. */
.score-table.many th, .score-table.many td { padding-left: 2px; padding-right: 2px; }
.score-table.many tbody th, .score-table.many .st-corner { min-width: 0; max-width: 5.5em; padding-right: 4px; }
.score-table.many .st-p .pt-token { width: 28px; height: 28px; }
.score-table.many td.txt { font-size: 11px; }