/* ============================================================
   Leaderboard panel and initials entry.
   Shared by every game — the markup and the wiring in
   js/leaderboard.js are identical, so the styling is too.
   Depends on css/styles.css for tokens and the button base.
   ============================================================ */

.board{margin:0 auto 20px;max-width:330px;text-align:left}
.board h3{font-family:var(--font-head);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:10px;text-align:center}
.board ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.board li{display:grid;grid-template-columns:1.8rem 1fr auto;gap:10px;align-items:baseline;
  padding:6px 12px;border-radius:8px;background:var(--bg-alt);border:1px solid transparent;
  font-family:var(--font-head);font-variant-numeric:tabular-nums}
.board li.you{border-color:var(--gold);background:rgba(255,216,138,.07)}
/* The empty state is a row of prose, not a rank/name/score row, so it opts out
   of the grid the scored rows use. */
.board li.board-empty{display:block;text-align:center;font-family:var(--font-body);
  font-weight:400;letter-spacing:0;font-size:.86rem;color:var(--text-faint);padding:12px}
.board .rank{color:var(--text-faint);font-size:.82rem}
.board .who{font-weight:700;letter-spacing:.22em;font-size:1rem}
.board .pts{font-weight:700;font-size:.95rem;color:var(--accent)}
.board li.you .pts{color:var(--gold)}

/* The start screen carries two buttons now — Start, and the one that opens
   this panel before a round rather than after one. */
.ov-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.entry{margin:0 auto 18px;max-width:340px}
.entry p{font-size:.88rem;color:var(--gold);margin-bottom:12px}
.entry-row{display:flex;gap:10px;justify-content:center;align-items:center}
#initials{width:150px;text-align:center;font-family:var(--font-head);font-weight:700;
  font-size:1.9rem;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;
  padding:8px 6px;border-radius:12px;border:1px solid var(--accent);background:var(--surface);color:var(--text)}
#initials:focus{outline:2px solid var(--accent);outline-offset:2px}
.btn-sm{padding:11px 20px;font-size:.84rem}