/* ---------------------------------------------------------------------------
   Leaderboard.

   Nutzt bewusst die vorhandenen Bausteine — .stats fuer den Rahmen,
   .history__table fuer die Tabelle, .segmented fuer die Umschalter. Hier steht
   nur, was es dort noch nicht gibt.
   --------------------------------------------------------------------------- */

.lb-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.lb-note {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Die eigene Zeile hervorheben — beim Suchen des eigenen Namens in einer
   langen Liste ist das der einzige Griff, den man braucht. */
.lb-row--me {
  background: var(--bg-elev);
}
.lb-row--me th,
.lb-row--me td {
  color: var(--accent);
  font-weight: 500;
}

/* Rang und Zahlen tabellarisch ausrichten, damit die Spalten stehen. */
#lb-rows td:first-child {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
#lb-rows td {
  font-variant-numeric: tabular-nums;
}