/* Leaderboard: toolbar, table, rows, pager, empty/error states. */
.board { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.board-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s4); border-bottom: 1px solid var(--line); }
.board-head h2 { margin-right: auto; }
.board-sub { font-size: 0.8125rem; color: var(--ink-3); font-weight: 400; font-family: var(--font-body); margin-left: var(--s2); }
.search { position: relative; flex: 0 1 300px; min-width: 0; }
.search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search .input { width: 100%; padding-left: 32px; }
.result-count { font-size: 0.8125rem; color: var(--ink-3); min-width: 9ch; }

.table-wrap { overflow-x: auto; }
.rank-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.rank-table th {
  position: sticky; top: 0; z-index: 1; background: var(--surface-2);
  font-size: 0.75rem; font-weight: 600; color: var(--ink-2); text-align: left;
  padding: 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.rank-table th.num { text-align: right; }
.sort-btn {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px;
  width: 100%; padding: 10px var(--s3); cursor: pointer; justify-content: inherit;
}
th.num .sort-btn { justify-content: flex-end; }
.sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sort-btn:hover { color: var(--ink); }
.sort-ind { width: 10px; text-align: center; color: var(--ink-3); font-size: 0.7rem; }
th[aria-sort="ascending"] .sort-btn, th[aria-sort="descending"] .sort-btn { color: var(--ink); }
th[aria-sort="ascending"] .sort-ind, th[aria-sort="descending"] .sort-ind { color: var(--accent); }

.rank-table td { padding: 9px var(--s3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.rank-table tbody tr { cursor: pointer; }
.rank-table tbody tr:hover { background: var(--surface-2); }
.rank-table tbody tr:focus-within { background: var(--accent-soft); }
.rank-table tbody tr:last-child td { border-bottom: 0; }

.c-rank { color: var(--ink-3); width: 4.5em; }
.c-rank.top3 { color: var(--ink); font-weight: 600; }
.c-name { max-width: 0; width: 40%; overflow: hidden; text-overflow: ellipsis; }
.row-link { color: var(--ink); font-weight: 500; text-decoration: none; }
.row-link:hover { text-decoration: underline; }
.row-link:focus-visible { outline-offset: 3px; }
.row-link mark { background: var(--tile); color: var(--tile-ink); border-radius: 2px; padding: 0 1px; }
.c-rating { font-weight: 700; font-family: var(--font-display); font-size: 1rem; }
.c-wtl { color: var(--ink-2); }
.c-wtl .sep { color: var(--line-strong); padding: 0 2px; }
.c-updated { color: var(--ink-3); font-size: 0.8125rem; }

/* Win %: number first, a quiet bar behind it as reinforcement */
.winbar { display: inline-flex; align-items: center; gap: var(--s2); justify-content: flex-end; }
.winbar-track { width: 44px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.winbar-fill { display: block; height: 100%; background: var(--ink-3); border-radius: 2px; }

/* My player: whole-row tint + inline icon/text badge */
tr.is-me { background: var(--accent-soft); }
tr.is-me:hover { background: var(--accent-soft); }
.badge-you {
  display: inline-flex; align-items: center; gap: 3px; margin-left: var(--s2); vertical-align: 1px;
  padding: 1px 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em;
}
.badge-you .icon { width: 10px; height: 10px; }

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--ink-2); }
.pager-info { margin-right: auto; }
.pager:empty { display: none; }

/* Matching players ranked below the top 2,000, shown under the list when searching */
.outside { border-top: 1px solid var(--line-strong); }

.table-state { padding: var(--s7) var(--s4); text-align: center; }
.table-state h3 { font-size: 1.05rem; margin-bottom: var(--s2); }
.table-state p { color: var(--ink-2); font-size: 0.9rem; margin-bottom: var(--s4); }
.table-state .notice { display: inline-flex; text-align: left; max-width: 520px; }
.skel-row td { padding: 13px var(--s3); }

/* Mobile: collapse to rank · player · rating · 7 days, W/T/L under the name */
.sub-line { display: none; font-size: 0.75rem; color: var(--ink-3); margin-top: 1px; }
@media (max-width: 760px) {
  .c-opt { display: none; }
  .sub-line { display: block; }
  .board-head { padding: var(--s3); }
  .search { flex: 1 1 100%; order: 3; }
  .rank-table td, .sort-btn { padding-left: var(--s2); padding-right: var(--s2); }
  .c-rank { width: 3.2em; }
  .rank-table td.c-name { width: auto; max-width: none; white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 1180px) and (min-width: 761px) { .c-opt2 { display: none; } }