/* The leaderboards page. Loaded AFTER /assets/site.css: nav, footer, body and
   the colour tokens (--bg, --fg, --accent... light AND dark) are the site's;
   this sheet adds only the board's pieces, under lb- names. */

.lb-wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

.lb-head { padding: 40px 0 22px; border-bottom: 1px solid var(--line); }
.lb-head h1 { margin: 0; font-size: clamp(30px, 4vw, 42px); line-height: 1.1; letter-spacing: -0.02em; }
.lb-note { margin: 10px 0 0; color: var(--fg-dim); font-size: 14px; max-width: 70ch; }

/* The members-only screen (phase B): a centred card, the sign-in button in
   Discord's own blurple so it reads as "Sign in with Discord" at a glance. */
.lb-wrap .lb-gate {
  max-width: 520px; margin: 40px auto 64px; padding: 32px 28px; text-align: center;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px;
}
.lb-gate img { border-radius: 50%; }
.lb-gate h2 { margin: 14px 0 8px; font-size: 26px; }
.lb-gate p { color: var(--fg-dim); margin: 0 0 18px; }
.lb-gate p strong { color: var(--fg); }
.lb-signin {
  display: inline-block; background: #5865F2; color: #fff; font-weight: 700;
  padding: 11px 22px; border-radius: 10px; text-decoration: none;
}
.lb-signin:hover { background: #4752C4; }
.lb-gate .lb-small { font-size: 13px; margin: 18px 0 0; }

/* site.css spaces its prose sections 52px apart; the board's are one tool. */
.lb-wrap section + section { margin-top: 0; }

/* The boards' tabs: Clubs for every member, the premium ones after it. */
.lb-boards { display: flex; flex-wrap: wrap; gap: 6px; padding: 20px 0 0; border-bottom: 1px solid var(--line); }
.lb-tab {
  all: unset; cursor: pointer; padding: 8px 14px; font: 600 14px system-ui, sans-serif;
  color: var(--fg-dim); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.lb-tab:hover { color: var(--fg); }
.lb-tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.lb-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lb-tab .lb-premium { font-size: 10px; font-weight: 700; color: var(--warn); margin-left: 4px; }
.lb-mine { padding: 6px 0 0; }
.lb-mine .lb-chip { font-weight: 500; }
.lb-mine .lb-chip small { color: var(--fg-dim); margin-left: 4px; }
.lb-table tr.lb-section th {
  text-align: left; background: var(--bg-sunk); color: var(--fg-dim); font-size: 12px;
  letter-spacing: .06em; padding-top: 14px;
}
.lb-table td.lb-left, .lb-table th.lb-left { text-align: left; }
.lb-table .lb-star { color: var(--warn); }

.lb-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 20px 0 4px; }
.lb-search { position: relative; flex: 0 1 340px; min-width: 0; }
#q {
  width: 100%;
  background: var(--bg-elev); color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; font: inherit; font-size: 15px;
}
#q:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.lb-hits {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px; list-style: none;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); max-height: 320px; overflow: auto;
}
.lb-hits li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 7px; cursor: pointer;
}
.lb-hits li:hover, .lb-hits li:focus { background: var(--accent-soft); outline: none; }
.lb-hits small { color: var(--fg-dim); white-space: nowrap; }
.lb-hits .lb-nohit { color: var(--fg-dim); cursor: default; }
.lb-club { margin: 0; font-size: 24px; line-height: 1.2; }

/* hidden must win over the display rules below: without it the Tournament
   pick, the Streaks chips and an empty Season box showed on every tab. */
[hidden] { display: none !important; }
.lb-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 14px 0 6px; }
.lb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-chip {
  border: 1px solid var(--line); background: var(--bg-elev); color: var(--fg);
  border-radius: 999px; padding: 5px 11px; font: 600 13px system-ui, sans-serif; cursor: pointer;
}
/* Picked = the site's accent (Oct 20), like the "you" outline and the nav. */
.lb-chip[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
/* The "55 GP" on a picked chip: the chip's own ink, a touch softer. */
.lb-chip[aria-pressed="true"] small { color: inherit; opacity: .75; }
/* A position dot keeps its ring on the teal (RW's blue would melt in). */
.lb-chip[aria-pressed="true"] .lb-dot { box-shadow: 0 0 0 2px var(--bg); }
.lb-min { color: var(--fg-dim); font-size: 13px; display: inline-flex; gap: 8px; align-items: center; }
.lb-min select {
  background: var(--bg-elev); color: var(--fg); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 8px; font: inherit;
}

.lb-status { color: var(--fg-dim); font-size: 13px; margin: 6px 0 10px; }

.lb-scroll { overflow-x: auto; margin-bottom: 48px; border: 1px solid var(--line); border-radius: 12px; }
.lb-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.lb-table th, .lb-table td { padding: 7px 10px; text-align: right; white-space: nowrap; }
.lb-table thead th {
  position: sticky; top: 0; background: var(--bg-sunk);
  border-bottom: 1px solid var(--line); font-size: 12px;
}
.lb-table thead button {
  all: unset; cursor: pointer; color: var(--fg-dim); font-weight: 700; letter-spacing: .02em;
}
.lb-table thead button:hover, .lb-table thead button:focus-visible { color: var(--fg); }
.lb-table th[aria-sort="ascending"] button, .lb-table th[aria-sort="descending"] button { color: var(--accent); }
.lb-table tbody tr:nth-child(even) { background: var(--bg-sunk); }
.lb-table tbody tr:hover { background: var(--accent-soft); }
.lb-table .lb-rank { color: var(--fg-dim); text-align: right; width: 1%; }
.lb-table .lb-name { text-align: left; font-weight: 600; position: sticky; left: 0; background: inherit; }
.lb-table thead .lb-name { color: var(--fg-dim); font-size: 12px; }
.lb-table td.lb-on { font-weight: 700; color: var(--fg); }
.lb-table tbody tr { background: var(--bg); }
/* Phase C: the signed-in member's own row. */
.lb-table tbody tr.lb-me { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.lb-you {
  font-size: 11px; font-weight: 700; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 0 6px; margin-left: 4px; vertical-align: 1px;
}

/* Your row on a club board opens My player. */
.lb-table tbody tr.lb-me.lb-open { cursor: pointer; }
.lb-table tbody tr.lb-me.lb-open:hover .lb-name { text-decoration: underline; }

/* My player (Oct 19): tiles per role, then the game log. */
.pl-head { padding: 20px 0 0; }
.pl-head .lb-status { margin: 4px 0 0; }
.pl-role { margin: 18px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--accent); }
.pl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.pl-tile {
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-variant-numeric: tabular-nums;
}
.pl-tile b { display: block; font-size: 22px; line-height: 1.2; color: var(--fg); }
.pl-tile span { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--fg-dim); }
.pl-empty { color: var(--fg-dim); margin: 18px 0; }
/* The game log's position chips: the Cards page's coloured dots. */
.lb-chip.lb-pos { display: inline-flex; align-items: center; gap: 7px; }
.lb-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pl-loghead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 34px 0 0; }
.pl-title { margin: 0; font-size: 20px; }
/* The game log's opponent holds the left edge once Date / Game / Club have
   scrolled under it (Oct 21) — the Player column's trick, so the stats on the
   right always read against the game they belong to. */
.lb-table .pl-opp {
  position: sticky; left: 0; z-index: 1; background: inherit;
  box-shadow: 1px 0 0 var(--line);
}
.lb-table thead th.pl-opp { z-index: 2; background: var(--bg-sunk); }
/* At rest the whole name, one line, no ellipsis (elvis, Oct 21). Only while
   the column is STUCK (JS sets .pl-stuck on the table) does it narrow to
   161px, and a name wider than that loses its START under a fade, so its end
   stays readable. NOTHING in the table moves: the name stays in the cell,
   made transparent, so the column keeps its width (a width on a table cell
   is not honoured when the content shrinks — tried), and the narrow name is
   an overlay drawn from data-n, row-coloured, with the columns scrolling
   under showing again to its right. */
.lb-table tbody tr { --row-bg: var(--bg); }
.lb-table tbody tr:nth-child(even) { --row-bg: var(--bg-sunk); }
.lb-table .pl-oppn { display: inline-block; white-space: nowrap; }
.lb-table.pl-stuck .pl-opp { background: transparent; box-shadow: none; color: transparent; }
.lb-table.pl-stuck .pl-opp::after {
  content: attr(data-n); position: absolute; left: 0; top: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center; box-sizing: border-box;
  width: min(100%, 183px); /* 161px of name (11.5em at the rows' 14px) + padding + 2px */
  padding: 0 10px; overflow: hidden; white-space: nowrap;
  color: var(--fg); background: var(--row-bg); box-shadow: 1px 0 0 var(--line);
}
.lb-table.pl-stuck thead .pl-opp::after { background: var(--bg-sunk); }
/* One straight edge down the column (never narrower than the column when
   every name is short); 2px of slack so rounding never eats a last letter.
   Only the measured-long names are anchored by their end. */
.lb-table.pl-stuck .pl-long::after { justify-content: flex-end; }
.lb-table.pl-stuck .pl-long::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2.6em; z-index: 2;
  background: linear-gradient(to right, var(--row-bg) 10px, transparent);
}
.lb-table td.pl-w { color: var(--accent); font-weight: 700; }
.lb-table td.pl-otl { color: var(--warn); font-weight: 700; }
.lb-table td.pl-l { color: var(--fg-dim); font-weight: 700; }
.lb-table .lb-dim, .lb-dim { color: var(--fg-dim); }
.pl-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: -32px 0 48px; color: var(--fg-dim); font-size: 13px; }
.pl-pager .lb-chip:disabled { opacity: .4; cursor: default; }

@media (max-width: 560px) {
  .pl-tiles { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .pl-tile b { font-size: 18px; }
  .lb-wrap { padding: 0 16px; }
  .lb-search { flex-basis: 100%; }
  .lb-table th, .lb-table td { padding: 6px 7px; }
}