.board {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.5rem;
}

/* Each tick emits a fresh <ol class="frame">; show only the newest. */
.board .frame:not(:last-of-type) {
  display: none;
}

.board ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.board li {
  display: grid;
  grid-template-columns: 2rem 8.5rem 1fr 2.5rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
}

.board li + li {
  border-top: 1px solid var(--border);
}

.board .rank {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.board .name {
  font-weight: 600;
}

.board .bar {
  height: 0.55rem;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  border-radius: 999px;
  overflow: hidden;
}

.board .fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.board .score {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--accent);
  font-weight: 600;
}

/* Opt every element into cross-fade view transitions so the reshuffle animates.
   A pure-CSS enhancement, not required for the replacement to work. */
@view-transition {
  navigation: auto;
}
::view-transition-group(*) {
  animation-duration: 0.35s;
}