/* ── States ───────────────────────────────────────────────── */
.loading, .empty {
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  font-size: 15px;
}
.loading { padding: 48px 20px; }
.empty {
  padding: 44px 22px;
  min-height: 150px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(120, 86, 38, 0.34);
  border-radius: 3px;
  background: rgba(120, 86, 38, 0.05);
}

.updated {
  text-align: center;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1.5px solid var(--rule);
  font-size: 12px;
  font-style: italic;
  color: var(--text-dim);
}
.footer {
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-dim);
}
.footer a {
  color: var(--gold-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(169, 132, 47, 0.5);
  padding-bottom: 1px;
  transition: color 140ms ease, border-color 140ms ease;
}
.footer a:hover { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }
.footer a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.footer__sep { opacity: 0.5; margin: 0 4px; }

/* ── Motion ───────────────────────────────────────────────── */
@keyframes ledger-rise {
  from { opacity: 0; transform: translateY(16px) scale(0.992); }
  to   { opacity: 1; transform: none; }
}
@keyframes plaque-strike {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes plaque-sheen {
  0%   { left: -30%; }
  55%, 100% { left: 130%; }
}
@keyframes row-ink {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gold-drift {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
  body { padding: 14px 10px 40px; }
  .page { padding: 24px 16px 26px; border-radius: 4px; }
  .page::after { inset: 6px; }
  .header__title { font-size: clamp(34px, 13vw, 46px); }
  .record { padding: 14px 16px; gap: 12px; }
  .row, .row-head { grid-template-columns: 40px 1fr 66px 44px; gap: 8px; padding-left: 8px; padding-right: 8px; }
  .row { min-height: 46px; }
  .name { font-size: 15px; }
  .tabs { gap: 4px; }
  .tab { flex: 1; padding: 11px 8px; min-height: 46px; }
}
@media (max-width: 360px) {
  .games { display: none; }
  .row, .row-head { grid-template-columns: 38px 1fr 70px; }
}

/* ── Sanapeli board ────────────────────────────────────────────
   Five columns, not four: rank, name, points, WINS, best gap. This has
   to come after every .row / .row-head rule above — they are the same
   specificity, so source order decides, and the first attempt sat above
   them and lost, wrapping the fifth column onto its own line.
   "Best gap" is a gap behind that round's first solver, never an absolute
   time: an absolute one would mostly be the viewer's own stream delay. */
    /* Wider than the rating board's four columns: the Finnish headings
   ("Voitot", "Ero") need the room, and at 52px they collided into
   "VOITOTPARAS ERO" with the last one wrapping onto a second line. */
.row.row--word, .row-head.row--word { grid-template-columns: 44px 1fr 74px 62px 58px; }
.row.row--word .word-gap, .row-head.row--word .word-gap {
  text-align: right; font-variant-numeric: tabular-nums; opacity: .75;
}
@media (max-width: 640px) {
  .row.row--word, .row-head.row--word { grid-template-columns: 38px 1fr 62px 54px 50px; gap: 7px; }
}
@media (max-width: 420px) {
  /* Narrowest layout drops the gap column rather than crushing the name. */
  .row.row--word, .row-head.row--word { grid-template-columns: 38px 1fr 66px 40px; }
  .row.row--word .word-gap, .row-head.row--word .word-gap { display: none; }
}