/* Rating and leaderboard (rated-play.js, leaderboard.js, account-rating.js). Only theme tokens (style.css), so the
 * dither looks, big buttons and TV mode follow without extra rules; the few size changes for those are at the end. */

/* lobby: the "Rated" switch above "Play now"'s hint */
.rated-row { display: flex; justify-content: center; margin: 10px 0 0; }

/* waiting screen: rated search without a bot */
.rated-box { margin: 10px auto 14px; max-width: 420px; }
.rated-nobody { color: var(--muted); margin: 0 0 12px; }

/* table: opponent's public rating and the rated / unrated line */
.prating { flex: none; padding: 1px 7px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .8rem;
  font-variant-numeric: tabular-nums; color: var(--text); }
.rated-note { margin: 4px 0 0; text-align: center; font-size: .85rem; color: var(--gold); }
.rated-note.is-off { color: var(--muted); }

/* end card and match final: the result line or a guest's hint */
.rating-line { margin: 6px auto 10px; max-width: 360px; }
.rating-line p { margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.rating-line button { min-height: 44px; }
.result-card:not([data-kind="final"]) .ov-rating { display: none; }

/* leaderboard screen */
.ranks-card h1 { margin-top: 0; }
.ranks-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.ranks-status:empty { display: none; }
.ranks-table-wrap { overflow-x: auto; }
.ranks-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ranks-table th, .ranks-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: right; }
.ranks-table .col-name { text-align: left; font-weight: 600; overflow-wrap: anywhere; }
.ranks-table thead th { color: var(--muted); font-weight: 500; font-size: .85rem; }
.ranks-table .col-rank { width: 3.5em; }
.ranks-table tr.is-me th, .ranks-table tr.is-me td { color: var(--gold); }
.ranks-table tr.is-me .col-name::after { content: " \2022"; }
.ranks-empty { color: var(--muted); }
.ranks-you { font-weight: 600; }

/* profile */
.acct-rating { margin: 18px 0 8px; }
.acct-ratings { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0 12px; }
.acct-ratings dt { font-weight: 600; }
.acct-ratings dd { margin: 0; font-variant-numeric: tabular-nums; }

/* big buttons / TV: larger tabs and rows, the rating chip stays legible */
.big-ui .ranks-table th, .big-ui .ranks-table td { padding: 12px 8px; font-size: 1.1rem; }
.big-ui .seg span { min-height: 56px; font-size: 1.05rem; }
.big-ui .prating { font-size: 1rem; }
.big-ui .rated-note { font-size: 1rem; }

/* dither: selection is inversion, never a colour */
.theme-dither .ranks-table tr.is-me th, .theme-dither .ranks-table tr.is-me td { background: var(--ink); color: var(--paper); }