.round-ranking { min-width: 0; container: rankings / inline-size }
.round-ranking-heading { font-size: .875rem; margin: 0 0 8px; font-weight: 600 }
.round-ranking-list { display: grid; list-style: none; padding: 0; margin: 0 }
.round-ranking-row { display: grid; grid-template-columns: 2rem minmax(0,1fr) auto; gap: 8px 12px; align-items: center; min-width: 0; padding: 10px 8px; border-radius: 6px }
.round-ranking-row + .round-ranking-row { border-top: 1px solid var(--line) }
.round-ranking-row[data-self=true] { background: var(--hover) }
.round-rank { color: var(--muted); font-size: .8125rem; text-align: center; font-variant-numeric: tabular-nums }
.round-identity,.round-person { min-width: 0 }
.round-person { line-height: 1.4 }
.round-name { font-size: .875rem; font-weight: 550; overflow-wrap: anywhere }
button.round-name { min-height: 36px; max-width: 100%; padding: 4px 0; border: 0; border-radius: 4px; background: transparent; color: inherit; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
button.round-name:hover { color: var(--accent); }
.round-name::before, .result-history-name::before, .room-score-table tbody th::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--player); vertical-align: .12em }
.round-self { margin-left: 6px; font-size: .6875rem; color: var(--muted); white-space: nowrap }
.round-status { display: block; margin-top: 3px; color: var(--muted); font-size: .6875rem; overflow-wrap: anywhere }
.round-outcome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px }
.round-time { font-size: .6875rem; white-space: nowrap }
.round-ranking-row[data-done=true] .round-time { color: var(--accent) }
.round-metrics { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 4px 16px; font-size: .75rem; font-variant-numeric: tabular-nums }
.round-metrics > span { white-space: nowrap }
.round-best,.round-time { font-weight: 600 }
.round-count,.round-latest { color: var(--muted) }
.round-points,.personal-round-points { color: var(--accent); font-weight: 600 }
@container rankings (min-width: 40rem) {
  .comparison-result .round-identity { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
  .comparison-result .round-status { margin-top: 0; }
}
.personal-round-points { margin: 0 0 8px; font-size: .875rem; font-variant-numeric: tabular-nums }
@container rankings (max-width: 620px) {
  .round-ranking-row { grid-template-columns: 1.35rem minmax(0,1fr); gap: 3px 8px; padding: 8px 4px }
  .round-rank { grid-row: span 2; align-self: start; padding-top: 2px }
  .round-identity { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px }
  /* Let the outcome wrap before it squeezes a name into a narrow column. */
  .round-person { flex: 1 1 auto }
  .round-outcome { justify-content: flex-start }
  .round-status { margin-top: 0 }
  .round-metrics { grid-column: 2; justify-content: flex-start; gap: 3px 10px; line-height: 1.4 }
}
/* Histories are optional detail beneath the same ranking used during play. */
.result-columns.result-histories { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap: 8px 16px }
.single-history { max-width: 46rem }
.single-history > summary { overflow-wrap: anywhere }
.single-history .result-player { padding: 0 }
.result-history { min-width: 0; margin: 0; border-top: 1px solid var(--line) }
.result-history > summary { display: grid; grid-template-columns: 1rem minmax(0,1fr) auto; align-items: baseline; gap: 4px 8px; min-height: 44px; padding: 8px 4px; border-radius: 6px; cursor: pointer; font-size: .875rem; list-style: none }
.result-history > summary:hover { background: var(--hover) }
.result-history > summary::before { content: '+'; grid-column: 1; grid-row: 1; color: var(--muted); text-align: center }
.result-history[open] > summary::before { content: '−' }
.result-history > summary::-webkit-details-marker { display: none }
.result-history-name { min-width: 0; overflow-wrap: anywhere }
.result-history-count { font-size: .75rem; color: var(--muted); white-space: nowrap }
.result-history-preview { grid-column: 2 / -1; display: flex; align-items: baseline; gap: 8px; justify-content: space-between; min-width: 0; color: var(--muted); font-size: .75rem }
.result-history-preview-word { min-width: 0; overflow-wrap: anywhere }
.result-history-preview-temperature { flex: none; white-space: nowrap }
.result-history[open] .result-history-preview { display: none }
.result-statistics { margin: 0 }
.result-statistics .race-statistics { margin-top: 0 }
.result-statistics .list-controls > button { min-width: 0; max-width: 100%; overflow-wrap: anywhere }
.result-history .result-player { border-top: 0; padding: 0 4px 12px 28px }
.result-history .result-player > .guess-list { max-width: 46rem }
/* Keep the complete ring clear of the first guess immediately below. */
.result-history > summary:focus-visible { outline-offset: -2px }
@media (forced-colors: active) { .round-ranking-row[data-self=true] { outline: 1px solid Highlight; outline-offset: -1px } }

/* Keep comparable columns where names and totals have room. Narrow containers
   (including enlarged text) put labelled totals below the complete name. */
.room-standings,.podium-table { container: cumulative / inline-size }
.room-standings { padding: 14px 12px; border: 1px solid var(--line) }
.room-standings > details > summary { min-height: 32px; align-content: center }
.room-standings > details > summary:focus-visible { outline-offset: 3px; border-radius: 3px }
.room-standings #room-standings-scope { margin: 2px 0 10px }
.room-score-table { line-height: 1.4 }
.room-score-table :is(th,td) { padding: 9px 4px; vertical-align: middle }
.room-score-table :is(th,td):first-child { width: 1.35rem; padding-left: 2px; text-align: center }
.room-score-table :is(th,td):nth-child(3) { width: 3.1rem; text-align: center }
.room-score-table :is(th,td):nth-child(4) { width: 6.5rem; text-align: center }
.room-score-table :is(th,td):last-child { width: 2.75rem; padding-right: 2px }
.room-score-table thead th { padding-bottom: 7px; font-size: .6875rem }
.room-score-table tbody tr { border-top: 1px solid var(--line) }
.room-score-table tbody th { line-height: 1.45; padding-inline: 16px 6px }
/* Keep the decorative marker in a gutter, outside the name's line wrapping. */
.room-score-table tbody th::before { float: inline-start; width: 5px; height: 5px; margin-block: .5em 0; margin-inline: -10px 5px }
.room-score-table small { font-size: .6875rem; white-space: nowrap }
.room-score-table :is(.standings-wins,.standings-points) { white-space: nowrap; font-variant-numeric: tabular-nums }
.room-score-table .medal-stack { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; gap: 3px }
.room-score-table .medal-count { display: flex; justify-content: center; flex-wrap: nowrap; gap: 2px; font-size: .75rem }
.room-score-table .medal-disc { width: .9rem; height: .9rem; font-size: .6rem; box-shadow: none }
.round-breakdown { margin-top: 12px; border-top: 1px solid var(--line); min-width: 0 }
.round-breakdown > summary { min-height: 44px; padding-block: 10px; cursor: pointer; font-size: .8125rem; font-weight: 550 }
.round-breakdown > summary:focus-visible,.round-scores-scroll:focus-visible { outline-offset: 2px; border-radius: 3px }
.round-scores-scroll { overflow-x: auto; max-width: 100%; padding-bottom: 4px }
.round-scores-table { width: calc(11rem + var(--round-count) * 6rem); min-width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .75rem; line-height: 1.4 }
.round-scores-table :is(th,td) { padding: 8px; text-align: right; font-variant-numeric: tabular-nums; vertical-align: top }
.round-scores-table th { font-weight: 550 }
.round-scores-table thead th { width: 6rem; white-space: normal }
.round-scores-table thead th:last-child { width: 4rem }
.round-scores-table small { display: block; color: var(--muted); font-weight: 400; font-size: .625rem; margin-top: 3px }
.round-scores-table tr > :first-child { position: sticky; inset-inline-start: 0; z-index: 1; width: 7rem; text-align: left; overflow-wrap: anywhere; white-space: normal; background: var(--page); box-shadow: 1px 0 var(--line) }
/* Names stay readable while rounds scroll beneath them; match the opaque row paint. */
.round-scores-table tbody tr:nth-child(even) > :first-child { background: color-mix(in srgb, var(--hover) 60%, var(--page)) }
.round-scores-table tbody tr[data-self=true] > :first-child { background: var(--hover) }
.round-scores-table tbody tr { border-top: 1px solid var(--line) }
.round-scores-table tbody td { white-space: nowrap }
.round-scores-table [data-self=true] { background: var(--hover) }
@container cumulative (min-width: 32rem) {
  .room-score-table :is(th,td):first-child { width: 6% }
  .room-score-table :is(th,td):nth-child(3) { width: 14% }
  .room-score-table :is(th,td):nth-child(4) { width: 28% }
  .room-score-table :is(th,td):last-child { width: 12% }
  .room-score-table .medal-stack { max-width: 9rem; margin-inline: auto }
}
@container cumulative (max-width: 17rem) {
  .round-scores-table { width: calc(9rem + var(--round-count) * 4rem) }
  .round-scores-table thead th { width: 4rem }
  .round-scores-table tr > :first-child { width: 5rem }
}
@container cumulative (max-width: 20rem) {
  .room-score-table { display: block }
  .room-score-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
  .room-score-table tbody { display: block }
  .room-score-table tbody tr { display: grid; grid-template-columns: 1.25rem minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr); align-items: start; gap: 7px 8px; padding: 10px 4px; border-radius: 0 }
  .room-score-table tbody :is(th,td) { border: 0; padding: 0; width: auto; min-width: 0; text-align: left }
  .room-score-table tbody tr > :is(th,td):nth-child(n) { width: auto }
  .room-score-table tbody td:first-child { grid-column: 1; grid-row: 1 / 3; text-align: center }
  .room-score-table tbody th { grid-column: 2 / -1; overflow-wrap: anywhere; padding-inline-start: 10px }
  .room-score-table tbody td:nth-child(3) { grid-column: 2; text-align: left }
  .room-score-table tbody td:nth-child(4) { grid-column: 3 }
  .room-score-table tbody td:last-child { grid-column: 4; text-align: right }
  .room-score-table [data-label]::before { content: attr(data-label); display: block; font-size: .625rem; font-weight: 400; line-height: 1.3; color: var(--muted); margin-bottom: 4px; overflow-wrap: normal }
  .room-score-table :is(.standings-wins,.standings-points) { white-space: nowrap }
  .room-score-table .medal-stack { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 7px }
  .room-score-table .medal-count { gap: 3px; font-size: .75rem; flex-wrap: nowrap }
  .room-score-table .medal-disc { width: .95rem; height: .95rem; font-size: .6rem }
}

/* A phone podium is a short ceremony followed by the complete results. The
   desktop keeps the raised three-place silhouette, including tied winners. */
@media (max-width: 600px) {
  .podium-places { grid-template-columns: minmax(0,1fr); gap: 10px; margin: 20px 0 24px }
  .podium-place[data-rank] { grid-column: 1; grid-row: auto }
  .podium-place { position: relative; padding-left: 2.75rem; text-align: left; border-bottom: 1px solid var(--line) }
  .podium-place .podium-place-title { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
  .podium-winner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 0 }
  .podium-name { flex: 1 1 max-content; min-width: 0; font-size: 1rem }
  .podium-points { max-width: 100%; margin-inline-start: auto; overflow-wrap: anywhere; font-size: 1rem; text-align: right }
  .podium-winner .medal-stack { flex-basis: 100%; justify-content: flex-start; gap: 8px; font-size: .75rem }
  .podium-completions { flex-basis: 100% }
  .podium-place[data-rank] .podium-step { position: absolute; left: 0; top: 12px; width: 2rem; height: 2rem; margin: 0; border-width: 2px; border-radius: 6px; font-size: 1.125rem }
  .race-podium .room-score-table { font-size: .75rem }
}