#leaderboard-table td, #leaderboard-table th { text-align: left; }
#leaderboard-table td:first-child, #leaderboard-table th:first-child { width: 36px; color: var(--text-dim); }
.rank-medal { font-size: 1.1rem; }
#leaderboard-table td.streak-cell { font-weight: 700; color: var(--accent-hover); }

#leaderboard-table tr.you-row { background: var(--hover-bg); }
#leaderboard-table tr.you-row td:nth-child(2) { font-weight: 700; }
.you-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--accent);
  color: var(--on-accent);
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: middle;
}

/* Rows step in left-to-right-read-order instead of all appearing at once. `backwards` fill mode
   keeps each row at its 0% (invisible) state through its own delay, rather than flashing visible
   then animating. Reduced motion skips the class entirely (see leaderboard.js). */
#leaderboard-table tbody tr.row-in {
  animation: row-in 0.25s ease backwards;
  animation-delay: calc(var(--row-i, 0) * 30ms);
}
@keyframes row-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}