/* ==========================================================================
   DAILY PAWS — CLAUDE EDITION
   leaderboard.css · the monthly board, shared by all four games
   --------------------------------------------------------------------------
   Replaces the original leaderboard.css, which had survived the overhaul with
   only a thin patch in each game stylesheet: the podium gradients, the emoji
   medals, the trophy gold and five different corner radii were all still the
   original Daily Paws.

   This is a results table, not a podium. Flat rows on the panel's own ground,
   separated by hairline rules; rank set in DM Mono with tabular figures; the
   first three carry weight and the game's accent rather than a medal; the one
   spent colour is the reader's own row.

   Light and dark are one set of rules. The two themes differ only in the
   --lb-* values below, instead of the original's duplicated `body.light`
   fork that restated every declaration.

   Per-game accent: each game sets --lb-accent in its own stylesheet.
   Tokens: shared/css/tokens.css.
   ========================================================================== */

.lb-panel{
  /* Night is the default: three of the four games open dark. */
  --lb-surface:   var(--night-2);
  --lb-ink:       var(--cream);
  --lb-muted:     var(--cream-mute);
  --lb-faint:     rgba(244,234,214,.42);
  --lb-line:      var(--night-line);
  --lb-line-firm: rgba(244,234,214,.26);
  --lb-accent:    var(--amber);
  --lb-me-tint:   rgba(191,78,28,.18);
  --lb-avatar-bg: rgba(244,234,214,.06);
  --lb-gold:      #E6B34C;
  --lb-gold-tint: rgba(230,179,76,.10);

  position:relative;
  box-sizing:border-box;
  width:100%; max-width:392px;
  max-height:88dvh; overflow-y:auto; overscroll-behavior:contain;
  padding:26px 22px 22px;
  background:var(--lb-surface);
  color:var(--lb-ink);
  border:1px solid var(--lb-line);
  border-radius:var(--r-md);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7);
  font-family:var(--f-sans); font-weight:400; line-height:1.5;
  scrollbar-width:none; -ms-overflow-style:none;
}
.lb-panel::-webkit-scrollbar{ display:none }
.lb-panel *, .lb-panel *::before, .lb-panel *::after{ box-sizing:border-box }
.lb-panel p, .lb-panel h2, .lb-panel div, .lb-panel span{ margin:0 }

body.light .lb-panel, .light .lb-panel{
  --lb-surface:   var(--paper);
  --lb-ink:       var(--ink);
  --lb-muted:     var(--muted);
  --lb-faint:     rgba(31,21,12,.45);
  --lb-line:      var(--line);
  --lb-line-firm: var(--line-firm);
  --lb-accent:    var(--rust);
  --lb-me-tint:   rgba(191,78,28,.10);
  --lb-avatar-bg: rgba(31,21,12,.05);
  --lb-gold:      #A8721C;
  --lb-gold-tint: rgba(201,133,38,.10);
  box-shadow:0 40px 80px -44px rgba(64,40,14,.45);
}

/* ── Close ─────────────────────────────────────────────────────────────── */
.lb-close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer;
  font-family:var(--f-sans); font-size:15px; line-height:1;
  color:var(--lb-muted);
  border-radius:var(--r-pill);
  transition:color .22s var(--e-out), background .22s var(--e-out);
}
.lb-close:hover{ color:var(--lb-ink); background:var(--lb-avatar-bg) }
.lb-close:focus{ outline:none }
.lb-close:focus-visible{ outline:1.5px solid var(--lb-line-firm); outline-offset:0; color:var(--lb-ink); border-radius:var(--r-pill) }
.lb-close span{ position:relative }

/* ── Masthead ──────────────────────────────────────────────────────────
   Title, then the month row. The month-display line is a fallback only: once
   the nav renders it repeats the nav label, so it steps aside. */
.lb-heading{
  font-family:var(--f-display); font-weight:600; font-size:1.32rem;
  letter-spacing:-.018em; line-height:1.1; color:var(--lb-ink);
  text-align:center; margin-bottom:16px;
}
.lb-month-display{
  font-family:var(--f-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--lb-accent); text-align:center; margin:-8px 0 14px;
}
.lb-month-display:empty,
.lb-panel:has(.lb-nav-inner) .lb-month-display{ display:none }
/* Out-rank the ".lb-panel p/h2/div" margin reset above. */
.lb-panel .lb-heading{ margin-bottom:14px }
.lb-panel .lb-month-display{ margin:-6px 0 12px }
.lb-panel .lb-subhead{ margin:14px auto 0 }
.lb-panel .lb-subhead + .lb-scoring{ margin-top:14px }
/* The div reset above outranks the grid's own auto margins, which pinned the
   scoring table to the left edge under a centred title. */
.lb-panel .lb-scoring-grid{ margin:0 auto }
/* The reset note sits under the list as small print, not in the masthead. */
.lb-subhead,.lb-month{
  font-family:var(--f-sans); font-size:.75rem; line-height:1.5;
  color:var(--lb-faint); text-align:center; margin:14px auto 0; max-width:34ch;
  text-wrap:balance;
}

/* ── Month navigation ──────────────────────────────────────────────────
   Two quiet mono controls either side of the month, on a hairline rule —
   not a bordered box. */
.lb-month-nav{ margin:0 0 4px }
.lb-nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:0 0 12px; border-bottom:1px solid var(--lb-line);
  background:none; border-radius:0;
}
.lb-nav-label{
  flex:1; text-align:center; white-space:nowrap;
  font-family:var(--f-display); font-weight:600; font-size:.9375rem;
  letter-spacing:-.01em; color:var(--lb-ink);
}
.lb-nav-btn{
  padding:4px 2px; background:none; border:0; cursor:pointer;
  font-family:var(--f-mono); font-size:.625rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  color:var(--lb-muted); flex:none;
  transition:color .2s var(--e-out);
}
.lb-nav-btn:hover:not(:disabled){ color:var(--lb-accent) }
.lb-nav-btn:disabled{ opacity:.3; cursor:default }

/* ── Rows ──────────────────────────────────────────────────────────────
   One row treatment. The top three differ by weight and a portrait, not by
   a gradient pill. */
.lb-list,.lb-panel .lb-list{ display:flex; flex-direction:column; gap:0; margin-top:2px }
.lb-rest{ display:flex; flex-direction:column; gap:0 }

.lb-row--top3,
.lb-row--rest{
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding:11px 10px 11px 8px;
  border-bottom:1px solid var(--lb-line);
  background:none; border-radius:0;
}
/* Every place carries its portrait; the firmer rule is all that marks the
   top three now. */
.lb-list > .lb-row--top3:nth-of-type(3){ border-bottom-color:var(--lb-line-firm) }
.lb-rest .lb-row--rest:last-child{ border-bottom:0 }

.lb-rank{
  flex:none; width:2ch; text-align:right;
  font-family:var(--f-mono); font-size:.75rem; font-weight:500;
  font-variant-numeric:tabular-nums; color:var(--lb-faint);
}
.lb-row--top3 .lb-rank{ color:var(--lb-accent) }

/* The breed portrait is content. Only its ring is restated: a hairline in
   place of the original's gold bevel. */
.lb-avatar-wrap{
  flex:none; display:block; overflow:hidden;
  width:42px; height:42px; padding:0;
  background:var(--lb-avatar-bg);
  border:1px solid var(--lb-line-firm); border-radius:50%;
}
.lb-avatar{ display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; filter:none; opacity:1 }
.lb-avatar--blank{ display:block; width:100%; height:100%; border-radius:50%; background:var(--lb-avatar-bg); border:0 }

.lb-name-wrap{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; justify-content:center }
.lb-name{
  font-family:var(--f-sans); font-weight:600; font-size:.9375rem; line-height:1.3;
  color:var(--lb-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.lb-missed,.lb-best,.lb-wins{
  font-family:var(--f-mono); font-size:.625rem; font-weight:400;
  letter-spacing:.04em; line-height:1.4; color:var(--lb-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lb-missed:empty,.lb-best:empty,.lb-wins:empty{ display:none }

.lb-pts{
  flex:none; margin-left:auto; white-space:nowrap;
  font-family:var(--f-mono); font-weight:500; font-size:.875rem;
  font-variant-numeric:tabular-nums; color:var(--lb-ink);
}

/* ── The reader's own row ──────────────────────────────────────────────
   The one place colour is spent: a rust rule in the margin and the faintest
   tint, instead of the original's border, glow and inset shadow. */
.lb-row--me{ background:var(--lb-me-tint) }
.lb-row--me::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:2px; background:var(--rust);
}
.lb-you-dot{
  display:inline-block; flex:none; width:6px; height:6px; border-radius:50%;
  background:var(--moss); margin-left:9px; vertical-align:middle;
  position:relative; top:-1px; /* optically centres it against the bold name, not its baseline */
}
/* The ".lb-panel span" margin reset above outranks the margin-left in the
   rule itself, which left the dot sitting flush against the name. Restating
   it with the panel class in front wins the tie. */
.lb-panel .lb-you-dot{ margin-left:8px }

/* ── Pinned personal position row ───────────────────────────────────────
   When the player is outside the Top 10, their real standing is pinned
   underneath, separated from the Top 10 by a subtle dashed rule and label. */
.lb-pinned-wrap{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed var(--lb-line-firm);
}
.lb-pinned-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 8px 6px;
}
.lb-pinned-label{
  font-family:var(--f-mono); font-size:.625rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--lb-muted);
}
.lb-row--pinned{
  border-bottom:0;
}
.lb-row--pinned .lb-rank{
  width:auto; min-width:2ch;
  color:var(--lb-ink);
  font-weight:600;
}

/* ── Loading, empty and footnote ───────────────────────────────────────── */
.lb-loading{
  font-family:var(--f-display); font-style:italic; font-size:1rem;
  color:var(--lb-accent); text-align:center; padding:22px 12px;
}
.lb-note{
  font-family:var(--f-sans); font-size:.75rem; line-height:1.5;
  color:var(--lb-faint); text-align:center; margin-top:14px;
}

/* ── Scoring ───────────────────────────────────────────────────────────
   A mono definition list under a rule, matching the rule rows on the front
   page's puzzle plates. */
.lb-scoring{ margin-top:18px; padding-top:16px; border-top:1px solid var(--lb-line) }
.lb-panel .lb-scoring-title{
  font-family:var(--f-mono); font-size:.625rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--lb-muted); text-align:center; margin-bottom:18px;
}
.lb-scoring-grid{
  display:grid; grid-template-columns:1fr auto; gap:7px 14px;
  max-width:250px; margin:0 auto; align-items:baseline;
  font-family:var(--f-sans); font-size:.8125rem; color:var(--lb-muted);
}
.lb-scoring-pts{
  font-family:var(--f-mono); font-weight:500; text-align:right;
  font-variant-numeric:tabular-nums; color:var(--lb-ink);
}

/* ── Catch-Up Paws ─────────────────────────────────────────────────────
   A paw and a count in the row's small print, only for players who used one.
   One key under the list explains it, instead of a column. */
.lb-panel .lb-cup{
  display:inline-flex; align-items:center; gap:3px;
  margin-left:7px;
  line-height:1; color:var(--lb-accent);
}
.lb-cup .dp-paw{ display:block; width:9px; height:9px; flex:none }
.lb-cup-n{ font-variant-numeric:tabular-nums }
.lb-panel .lb-cup-note{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:12px 0 0;
  font-family:var(--f-mono); font-size:.625rem; font-weight:400; letter-spacing:.06em;
  color:var(--lb-faint);
}
.lb-cup-note .dp-paw{ display:block; width:10px; height:10px; flex:none; color:var(--lb-accent) }
/* The note is a link to the Catch-Up Paws guide: quiet like the note it
   replaces, with an underline that draws on hover and a small arrow. */
.lb-cup-note a{
  display:inline-flex; align-items:center; gap:6px;
  color:inherit; text-decoration:none;
  padding-bottom:1px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:color .22s var(--e-out), background-size .32s var(--e-io);
}
.lb-cup-note a:hover,
.lb-cup-note a:focus-visible{ color:var(--lb-ink); background-size:100% 1px }
.lb-cup-note a:focus-visible{ outline:1.5px solid var(--lb-line-firm); outline-offset:3px; border-radius:var(--r-xs) }
.lb-cup-note-arrow{ color:var(--lb-accent); transition:transform .25s var(--e-out) }
.lb-cup-note a:hover .lb-cup-note-arrow{ transform:translateX(2px) }

/* ── Streaks ───────────────────────────────────────────────────────────
   Pawdle and Connect Paws show each player's streak in the row's small
   print: a flame in the game's accent and the count. The row renders at once
   with a quiet "Streak" placeholder; leaderboard.js fills the count in. */
.lb-streak{ display:inline-flex; align-items:center; gap:4px; vertical-align:top }
.lb-streak-icon{ display:block; flex:none; width:10px; height:10px; color:var(--lb-accent) }
.lb-streak.is-zero .lb-streak-icon{ color:var(--lb-faint) }
.lb-streak.is-loading .lb-streak-n{ opacity:.5 }
@media (prefers-reduced-motion:no-preference){
  .lb-streak-n{ transition:opacity .25s var(--e-out) }
}

/* ── Last month's winners ──────────────────────────────────────────────
   Pawdle, Connect Paws and Paw Paths close their board with a way through to
   the front page's podium of last month's top three (index.html #winners).
   Pawdle Plus has no podium there, so it carries no link. */
.lb-panel .lb-winners-link{
  display:flex; align-items:center; gap:12px;
  margin:16px 0 0; padding:12px 14px;
  border:1px solid var(--lb-line); border-radius:var(--r-sm);
  background:linear-gradient(100deg,var(--lb-gold-tint),transparent 72%);
  color:var(--lb-ink); text-decoration:none;
  transition:border-color .22s var(--e-out);
}
.lb-panel .lb-winners-link:hover{ border-color:var(--lb-gold) }
.lb-panel .lb-winners-link:focus-visible{ outline:1.5px solid var(--lb-gold); outline-offset:2px }
.lb-winners-cup{ display:block; flex:none; width:26px; height:26px; color:var(--lb-gold) }
.lb-panel .lb-winners-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px }
.lb-winners-kicker{
  font-family:var(--f-mono); font-size:.5625rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; line-height:1.2;
  color:var(--lb-gold);
}
.lb-winners-title{
  font-family:var(--f-display); font-weight:600; font-size:1rem;
  letter-spacing:-.01em; line-height:1.2; color:var(--lb-ink);
}
.lb-winners-arrow{
  flex:none; font-size:1.05rem; line-height:1; color:var(--lb-muted);
  transition:transform .25s var(--e-out), color .25s var(--e-out);
}
.lb-winners-link:hover .lb-winners-arrow{ transform:translateX(3px); color:var(--lb-gold) }

/* ── Small screens ─────────────────────────────────────────────────────── */
@media (max-width:420px){
  .lb-panel{ padding:22px 16px 18px }
  .lb-row--top3,.lb-row--rest{ gap:10px; padding:10px 6px 10px 8px }
  .lb-avatar-wrap{ width:38px; height:38px }
  .lb-name{ font-size:.875rem }
}

@media (prefers-reduced-motion:reduce){
  .lb-close,.lb-nav-btn,.lb-winners-link,.lb-winners-arrow{ transition:none }
}