/* ============================================================
   LOBBY LEADERBOARD -- a white card floating above the sky,
   matching the Find a Match / Solo vs Bots groupings above it.
   Tokens come from style-a.css :root.
   ============================================================ */

.leaderboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
}

.leaderboard h3 {
  font-family: var(--font);
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--navy);
}

.leaderboard__blurb {
  color: var(--navy-soft);
  margin-top: -0.5rem;
  text-align: center;
  max-width: 46ch;
}

/* --- tab rows --- */

.leaderboard__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.leaderboard__tab {
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--navy);
  background: var(--card);
  border: none;
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  cursor: pointer;
  box-shadow: var(--card-shadow);
  transition:
    background 140ms var(--ease),
    color 140ms var(--ease),
    transform 140ms var(--ease);
}
.leaderboard__tab:hover {
  transform: translateY(-1px);
}
.leaderboard__tab:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}
/* Selected state.
   These buttons are aria-pressed toggles, the same attribute the lobby's
   difficulty picker uses — which means style-a.css's global
   `button[aria-pressed="true"]` (0,1,1) and its `:hover` variant (0,2,1) now
   match them too. Hence the extra `.leaderboard` in each selector: it takes
   these to (0,3,0) and (0,4,0) so the picker's golden yellow never wins here,
   on hover or otherwise. The box-shadow is restated for the same reason —
   the global rule sets one, and inheriting the picker's inset ring would give
   the card a border it was never drawn with. */
.leaderboard .leaderboard__tab[aria-pressed="true"] {
  background: var(--navy);
  color: #ffffff;
  box-shadow: var(--card-shadow);
}

/* The period row is the secondary axis, so it reads one step quieter. */
.leaderboard__tabs--period .leaderboard__tab {
  font-size: 0.84rem;
  padding: 0.34rem 0.8rem;
  color: var(--navy-soft);
}
.leaderboard .leaderboard__tabs--period .leaderboard__tab[aria-pressed="true"] {
  background: var(--green);
  color: #ffffff;
}

/* --- window caption + status --- */

.leaderboard__window,
.leaderboard__status {
  color: var(--navy-mute);
  font-size: 0.86rem;
  text-align: center;
}
.leaderboard__window:empty,
.leaderboard__status:empty {
  display: none;
}

/* --- board --- */

.leaderboard__table-wrap {
  width: 100%;
  max-width: 42rem;
  /* Narrow phones scroll the table, never the page. */
  overflow-x: auto;
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 0.6rem 0.4rem;
}

.leaderboard__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  color: var(--navy-soft);
}

.leaderboard__table th {
  font-weight: 900;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-mute);
  text-align: left;
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}

.leaderboard__table td {
  padding: 0.48rem 0.7rem;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
.leaderboard__table tbody tr:last-child td {
  border-bottom: none;
}

/* Empty tbody: the wrapper would otherwise collapse to a sliver of card. */
.leaderboard__table tbody:empty::after {
  content: "";
  display: block;
  height: 0.6rem;
}

.leaderboard__rank {
  width: 2.6rem;
  text-align: center;
  font-weight: 900;
  color: var(--navy);
}

.leaderboard__racer {
  font-weight: 700;
  color: var(--navy);
  /* A long username truncates rather than pushing PPM off the card. */
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard__ppm {
  font-weight: 900;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.leaderboard__table td:nth-child(4),
.leaderboard__table td:nth-child(5) {
  font-variant-numeric: tabular-nums;
  color: var(--navy-mute);
}

.leaderboard__row--top .leaderboard__ppm {
  color: var(--orange-press);
}

@media (max-width: 560px) {
  .leaderboard__blurb { font-size: 0.9rem; }
  .leaderboard__table { font-size: 0.88rem; }
  .leaderboard__table th,
  .leaderboard__table td { padding: 0.4rem 0.5rem; }
}