/* ═══════════════════════════════════════════════════════════════════════
   LEADERBOARDS — /leaderboards (js/leaderboards.js). Site tokens from styles.css.
   Polish pass 2026-09-28: equal board-set tabs, legible skill emblems (the
   256 px slate hexes read from ~28 px up), roomier tables and sidebar.
   ═══════════════════════════════════════════════════════════════════════ */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hs-hero { padding-bottom: 48px; }
.hs-updated { margin-top: 18px; color: var(--text-muted); font-size: 0.85rem; min-height: 1.2em; }

.hs {
  background: rgba(10, 10, 18, 0.95);
  padding: 16px 0 96px;
  font-variant-numeric: tabular-nums;
}

/* ── Toolbar: board sets + search ─────────────────────────────────────── */
/* Board sets take the full width; the description and search share the row below. */
.hs-subbar {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: center;
  margin: 18px 0 28px;
}
/* Every board set gets the same size, whatever its name. */
.hs-modes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.hs-mode {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  min-height: 72px; padding: 14px 18px; min-width: 0;
  background: var(--surface-card); border: 1px solid var(--border-light); border-radius: 10px;
  color: var(--text); text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.hs-mode:hover { border-color: var(--gold-dark); background: var(--surface-hover); }
.hs-mode.is-active { border-color: var(--gold); box-shadow: var(--shadow-glow); background: var(--surface-raised); }
.hs-mode__name {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hs-mode.is-active .hs-mode__name { color: var(--gold-light); }
.hs-mode__count { font-size: 0.82rem; color: var(--text-muted); }
.hs-mode-blurb { color: var(--text-muted); margin: 0; min-height: 1.5em; font-size: 0.95rem; }

.hs-search { position: relative; display: flex; }
.hs-search input {
  width: 100%; height: 46px; padding: 0 18px;
  background: var(--surface-card); color: var(--text);
  border: 1px solid var(--border-light); border-radius: 10px; font: inherit; font-size: 0.95rem;
}
.hs-search input::placeholder { color: var(--text-dim); }
.hs-search input:focus { outline: none; border-color: var(--gold); }
.hs-search__results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: var(--surface-raised); border: 1px solid var(--border-light); border-radius: 10px;
  box-shadow: var(--shadow-md); overflow: hidden;
}
.hs-search__results a {
  display: flex; justify-content: space-between; gap: 12px; padding: 11px 18px;
  color: var(--text); text-decoration: none;
}
.hs-search__results a:hover, .hs-search__results a:focus { background: var(--surface-hover); outline: none; }
.hs-search__results a span { color: var(--text-muted); font-size: 0.82rem; }
.hs-search__empty { padding: 12px 18px; color: var(--text-muted); }

/* ── Layout ───────────────────────────────────────────────────────────── */
.hs-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 28px; align-items: start; }

.hs-nav {
  position: sticky; top: calc(var(--nav-height) + 20px);
  max-height: calc(100vh - var(--nav-height) - 40px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border-light) transparent;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 12px;
}
.hs-nav__group + .hs-nav__group { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.hs-nav h3 {
  font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin: 0 10px 10px;
}
.hs-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hs-nav__sub {
  font-size: 0.7rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 0.12em; margin: 14px 10px 6px;
}
.hs-nav__link {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: 8px;
  color: var(--text); text-decoration: none; font-size: 0.95rem;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.hs-nav__link:hover { background: var(--surface-hover); }
.hs-nav__link.is-active { background: rgba(200, 162, 78, 0.14); color: var(--gold-light); box-shadow: inset 3px 0 0 var(--gold); }
.hs-nav__link.is-soon { color: var(--text-muted); }
.hs-soon-tag {
  margin-left: auto; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); border: 1px solid var(--border-light); border-radius: 4px; padding: 2px 6px;
}

/* Skill emblems. One size per context so every row lines up. */
.hs-icon { width: 30px; height: 30px; flex: none; object-fit: contain; }
.hs-nav__link .hs-icon { width: 32px; height: 32px; }
.hs-icon--dot { display: inline-flex; align-items: center; justify-content: center; }
.hs-icon--dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-dark); }

/* ── Panel ────────────────────────────────────────────────────────────── */
.hs-panel {
  background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 28px 32px 32px;
}
.hs-panel__head { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.hs-panel__head h2 {
  font-family: var(--font-display); font-size: 1.75rem; color: var(--text); margin: 0; line-height: 1.2;
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
}
.hs-panel__head h2 .hs-icon { width: 44px; height: 44px; }
.hs-panel__head h2 .hs-icon--dot { display: none; }
.hs-panel__sub { color: var(--text-muted); margin: 8px 0 0; font-size: 0.95rem; line-height: 1.5; }
.hs-subhead {
  font-family: var(--font-display); font-size: 1.1rem; color: var(--gold-light);
  margin: 32px 0 12px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}

.hs-state { padding: 56px 16px; text-align: center; color: var(--text-muted); font-size: 1rem; }
.hs-state.is-error { color: #e88a8a; }

.hs-table-wrap { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border-light) transparent; }
.hs-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.hs-table th {
  text-align: left; font-weight: 600; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); padding: 10px 16px; border-bottom: 1px solid var(--border-light); white-space: nowrap;
}
.hs-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.hs-table tbody tr { transition: background var(--transition-fast); }
.hs-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.hs-table tbody tr:last-child td { border-bottom: 0; }
.hs-table tr.is-strong td { font-weight: 600; }
.hs-table tr.is-found td { background: rgba(200, 162, 78, 0.12); }
.hs-num { text-align: right !important; white-space: nowrap; }
.hs-rank { width: 88px; color: var(--text-muted); font-weight: 600; }
.hs-dim { color: var(--text-muted); }
.hs-name a { color: var(--text); text-decoration: none; font-weight: 600; }
.hs-name a:hover { color: var(--gold-light); text-decoration: underline; }
.hs-title { color: var(--gold); font-size: 0.8rem; font-weight: 500; margin-left: 6px; }

/* The podium: ranks 1–3 on a live row. */
.hs-rank__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 28px; padding: 0 8px; border-radius: 999px;
  border: 1px solid transparent; font-size: 0.9rem;
}
.hs-table tr.is-top1 .hs-rank__badge { color: var(--gold-light); border-color: var(--gold); background: rgba(200, 162, 78, 0.14); }
.hs-table tr.is-top2 .hs-rank__badge { color: #d6d8de; border-color: #8e939e; background: rgba(214, 216, 222, 0.08); }
.hs-table tr.is-top3 .hs-rank__badge { color: #d8a070; border-color: #9a6a44; background: rgba(216, 160, 112, 0.08); }

/* A row frozen on the board its character left (owner ruling 2026-09-28). */
.hs-struck, .hs-table tr.is-locked .hs-name a { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--accent-crimson); }
.hs-table tr.is-locked td { color: var(--text-muted); }
.hs-table tr.is-locked .hs-name a { color: var(--text-muted); }
.hs-left { font-size: 0.78rem; color: var(--text-dim); font-weight: 400; margin-left: 6px; }

.hs-pager {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.92rem;
}
.hs-pager a { color: var(--gold-light); text-decoration: none; padding: 6px 10px; border-radius: 6px; }
.hs-pager a:hover { background: var(--surface-hover); }

.hs-footnote { color: var(--text-dim); font-size: 0.84rem; margin-top: 12px; line-height: 1.5; }

.hs-soon {
  border: 1px dashed var(--border-light); border-radius: 12px; padding: 64px 32px; text-align: center; color: var(--text-muted);
}
.hs-soon__label { font-family: var(--font-display); font-size: 1.4rem; color: var(--gold); margin: 0 0 12px; letter-spacing: 0.06em; }
.hs-soon p { margin: 0 0 8px; }
.hs-soon__why { font-size: 0.86rem; color: var(--text-dim); }

/* Firsts: one table per group, same column grid in every one. */
.hs-firsts { table-layout: fixed; }
.hs-firsts__what { width: 44%; }
.hs-firsts__who { width: 30%; }
.hs-firsts__when { width: 26%; }
.hs-firsts td { overflow: hidden; text-overflow: ellipsis; }

/* Controls (tracker) */
.hs-controls { display: flex; gap: 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.hs-chips { display: flex; gap: 8px; }
.hs-chip {
  padding: 8px 18px; border: 1px solid var(--border-light); border-radius: 999px; color: var(--text);
  text-decoration: none; font-size: 0.9rem;
}
.hs-chip:hover { border-color: var(--gold-dark); }
.hs-chip.is-active { border-color: var(--gold); color: var(--gold-light); background: rgba(200, 162, 78, 0.1); }
.hs-select { color: var(--text-muted); font-size: 0.9rem; display: flex; gap: 10px; align-items: center; }
.hs-select select {
  background: var(--surface-raised); color: var(--text); border: 1px solid var(--border-light);
  border-radius: 8px; padding: 8px 12px; font: inherit;
}

/* Profile */
.hs-layout.is-wide { grid-template-columns: 272px minmax(0, 1fr); }
.hs-profile-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 28px; align-items: start; }
.hs-profile-grid .hs-table td { padding-top: 10px; padding-bottom: 10px; }
.hs-locked { margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--border); opacity: 0.85; }
.hs-skillcell { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }

/* Stats */
.hs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.hs-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.hs-card__value { font-size: 1.75rem; font-weight: 700; color: var(--gold-light); }
.hs-card__label { color: var(--text-muted); font-size: 0.84rem; margin-top: 6px; }
.hs-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; height: 180px; align-items: end; padding-bottom: 24px; }
.hs-bar { position: relative; height: 100%; display: flex; align-items: flex-end; }
.hs-bar__fill { width: 100%; min-height: 2px; background: var(--gold-dark); border-radius: 4px 4px 0 0; }
.hs-bar__label { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 0.7rem; color: var(--text-dim); white-space: nowrap; }
.hs-dist td.hs-heat { text-align: center !important; background: rgba(200, 162, 78, calc(var(--p) * 0.55)); font-size: 0.84rem; padding: 10px 6px; }
.hs-dist th.hs-num { text-align: center !important; padding-left: 6px; padding-right: 6px; }

.hs-about { max-width: 760px; margin: 64px auto 0; color: var(--text-muted); line-height: 1.75; }
.hs-about h2 { font-family: var(--font-display); color: var(--text); font-size: 1.35rem; margin-bottom: 12px; }
.hs-about p { margin: 0 0 14px; }
.hs-about a { color: var(--gold-light); }

/* ── Narrower desktops ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hs-layout, .hs-layout.is-wide { grid-template-columns: 236px minmax(0, 1fr); gap: 20px; }
  .hs-panel { padding: 24px; }
}

/* ── Phone ────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .hs-modes { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hs-subbar { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 14px 0 20px; }
  .hs-mode { min-height: 60px; padding: 10px 14px; }
  .hs-mode__name { font-size: 0.9rem; white-space: normal; overflow: visible; line-height: 1.25; }
  .hs-layout, .hs-layout.is-wide { grid-template-columns: minmax(0, 1fr); }
  .hs-nav { position: static; max-height: 240px; }
  .hs-profile-grid { grid-template-columns: minmax(0, 1fr); }
  .hs-panel { padding: 18px 12px; }
  .hs-panel__head h2 { font-size: 1.4rem; }
  .hs-panel__head h2 .hs-icon { width: 36px; height: 36px; }
  .hs-table { font-size: 0.88rem; }
  .hs-table th, .hs-table td { padding: 10px 6px; }
  .hs-table th { font-size: 0.66rem; letter-spacing: 0.04em; }
  .hs-rank { width: 48px; }
  .hs-rank__badge { min-width: 28px; height: 24px; padding: 0 6px; font-size: 0.82rem; }
  .hs-icon { width: 26px; height: 26px; }
  .hs-bar__label { display: none; }
  .hs-bars { padding-bottom: 0; }
}