/* ============================================================
   /leaderboard
   Every rule in this file is prefixed lb-. Nothing bare, nothing
   that reaches into .btn / .panel / .card.

   The board sits on one glass panel over the wireframe ground. The
   only opaque-ish surface is the promo card, and even that keeps a
   translucent gradient so the lattice still reads through it.
   ============================================================ */

.lb-page {
  /* Bronze has no theme token because the other two medals do not either:
     --grad-gold and --grad-silver are decorative ramps, like the rarity
     gradients, not themed chrome. Bronze joins them here. */
  --lb-bronze: linear-gradient(180deg, oklch(76% 0.088 58), oklch(52% 0.098 46));
  --lb-line: var(--glass-border);
  padding-bottom: 84px; /* clearance for the pinned bar */
}

/* ---------- head ---------- */

.lb-head { padding-bottom: 16px; }
.lb-head-count {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--muted-fg);
}

/* ---------- controls ---------- */

.lb-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 16px;
}
.lb-windows { flex-wrap: wrap; }

/* ---------- layout ---------- */

.lb-grid {
  display: grid;
  gap: 18px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr) 322px;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "board promo"
    "board feed";
}
.lb-main { grid-area: board; min-width: 0; }
.lb-promo { grid-area: promo; }
.lb-feed { grid-area: feed; }

/* ---------- the board ---------- */

.lb-board { overflow: hidden; }

/* The wide table scrolls inside its own box. The page body never does. */
.lb-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}
.lb-table-exp { min-width: 600px; }
.lb-table-pulls { min-width: 706px; }

.lb-row {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--lb-line);
}
.lb-row:last-child { border-bottom: 0; }

.lb-row-exp { grid-template-columns: 54px minmax(150px, 1fr) 74px 92px 118px; }
.lb-row-pull {
  grid-template-columns: 54px 62px minmax(150px, 1fr) 116px 84px 104px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.lb-row:not(.lb-hrow):not(.lb-gap):hover { background: var(--glass-bg-faint); }

/* The signed in collector, wherever they land. */
.lb-row.is-you {
  background: oklch(from var(--lime) l c h / 0.11);
  box-shadow: inset 3px 0 0 var(--lime);
}
.lb-row.is-you:hover { background: oklch(from var(--lime) l c h / 0.16); }
.lb-row.is-you .lb-sub { color: oklch(from var(--lime) 62% c h); }

.lb-hrow {
  padding-top: 12px;
  padding-bottom: 10px;
  background: var(--glass-bg-faint);
}
.lb-h {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
.lb-h-thumb { text-align: center; }

.lb-cell { min-width: 0; }

/* ---------- rank + medals ---------- */

.lb-rank { display: flex; align-items: center; }
.lb-medal {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted-fg);
  background: var(--glass-bg-faint);
  border: 1px solid var(--lb-line);
}
.lb-medal.is-medal {
  color: oklch(22% 0.03 80);
  border-color: oklch(0% 0 0 / 0.18);
  font-weight: 800;
  text-shadow: 0 1px 0 oklch(100% 0 0 / 0.35);
}
.lb-medal[data-medal="gold"] {
  background: var(--grad-gold);
  box-shadow: 0 3px 12px oklch(82% 0.13 92 / 0.35);
}
.lb-medal[data-medal="silver"] {
  background: var(--grad-silver);
  box-shadow: 0 3px 12px oklch(0% 0 0 / 0.22);
}
.lb-medal[data-medal="bronze"] {
  background: var(--lb-bronze);
  box-shadow: 0 3px 12px oklch(60% 0.1 50 / 0.3);
}

/* ---------- collector ---------- */

.lb-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.lb-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.lb-who-text { display: flex; flex-direction: column; min-width: 0; }
.lb-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-sub {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- figures ---------- */

.lb-level { display: flex; align-items: baseline; gap: 5px; }
.lb-lvl {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0.02em;
}
.lb-lvl-cap {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--muted-fg);
}

.lb-packs { display: flex; align-items: baseline; gap: 6px; font-size: 13.5px; font-weight: 600; }
.lb-unit {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-fg);
  white-space: nowrap;
}

.lb-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
}
.lb-fig { font-size: 21px; line-height: 1.05; }

.lb-grade { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.lb-grade .lb-fig { font-size: 20px; }

.lb-rar { display: flex; align-items: center; }
.lb-val { font-size: 14px; font-weight: 600; justify-content: center; }

.lb-thumb { display: flex; align-items: center; justify-content: center; min-width: 0; }

/* ---------- gap marker ---------- */

.lb-gap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  color: var(--muted-fg);
  font-size: 11.5px;
}
.lb-gap-dots {
  display: inline-block;
  width: 32px;
  text-align: center;
  letter-spacing: 1px;
  color: var(--border);
}

/* ---------- empty ---------- */

.lb-empty { padding: 52px 20px; }
.lb-empty-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--fg); }

/* ---------- show more ---------- */

.lb-more {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 16px;
}
.lb-more-btn { gap: 8px; }
.lb-more-ico { display: inline-flex; }
.lb-more-count { font-size: 11px; letter-spacing: 0.04em; }

/* ---------- promo ---------- */

.lb-promo {
  position: relative;
  overflow: hidden;
  padding: 22px 20px 20px;
  border-radius: var(--radius-lg);
  color: var(--primary-fg);
  border: 1px solid oklch(100% 0 0 / 0.17);
  /* Translucent on purpose. This card runs full width on a phone, and a solid
     fill at that size would black out the lattice behind the whole page. */
  background: linear-gradient(
    159deg,
    oklch(from var(--primary) l c h / 0.78) 8%,
    oklch(from var(--primary-end) l c h / 0.63) 118%
  );
  /* brightness pulls the backdrop down so the white copy still carries in the
     light theme, where the lattice sits on a near white ground. */
  -webkit-backdrop-filter: blur(15px) saturate(1.5) brightness(0.86);
  backdrop-filter: blur(15px) saturate(1.5) brightness(0.86);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.3),
    0 16px 44px oklch(from var(--primary) l c h / 0.3);
}
.lb-promo-eyebrow { color: oklch(100% 0 0 / 0.8); }
.lb-promo-title {
  margin: 8px 0 10px;
  color: var(--primary-fg);
  text-wrap: balance; /* keeps the two line break off a single orphan word */
}
.lb-promo-copy {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: oklch(100% 0 0 / 0.93);
}
.lb-promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.lb-promo-stat {
  padding: 10px 12px;
  border-radius: 14px;
  background: oklch(100% 0 0 / 0.12);
  border: 1px solid oklch(100% 0 0 / 0.16);
}
.lb-promo-fig { display: block; font-size: 27px; line-height: 1.08; color: var(--primary-fg); }
.lb-promo-cap {
  display: block;
  margin-top: 2px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(100% 0 0 / 0.82);
}
.lb-promo-cta {
  width: 100%;
  background: var(--primary-fg);
  color: oklch(from var(--primary) 34% c h);
  border-color: transparent;
  font-weight: 800;
  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.22);
}
.lb-promo-cta:hover { filter: brightness(0.95); }
.lb-cta-ico { display: inline-flex; }

/* ---------- live rail ---------- */

.lb-feed { padding: 14px 14px 6px; }
.lb-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.lb-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
.lb-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--lime);
  box-shadow: 0 0 0 3px var(--lime-glow);
  animation: lb-pulse 2.6s ease-in-out infinite;
}
@keyframes lb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.32; } }

.lb-feed-count { font-size: 11px; color: var(--muted-fg); }
.lb-feed-list { display: flex; flex-direction: column; }
.lb-feed-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-top: 1px solid var(--lb-line);
}
.lb-feed-row:first-child { border-top: 0; }
.lb-feed-row .rarity-dot { flex: 0 0 auto; }
.lb-feed-text { display: flex; flex-direction: column; min-width: 0; }
.lb-feed-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-feed-sub {
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- pinned "you" bar ----------
   A direct child of .lb-page, never of .lb-board. backdrop-filter on the
   board establishes a containing block, and a fixed child of that would
   anchor to the panel instead of the viewport. The glass is on the INNER
   element here, which is safe: the fixed box is the ancestor, not the
   descendant. */

.lb-pin {
  position: fixed;
  z-index: 65;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(100% - 32px, var(--shell-w));
  pointer-events: none;
}
.lb-pin-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 16px;
}
.lb-pin-rank {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-fg);
}
.lb-pin-who { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.lb-pin-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-pin-sub {
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-pin-bar {
  flex: 0 1 170px;
  height: 6px;
  border-radius: 999px;
  background: var(--glass-bg-faint);
  border: 1px solid var(--lb-line);
  overflow: hidden;
}
.lb-pin-bar i { display: block; height: 100%; background: var(--lime); }
.lb-pin-fig { flex: 0 0 auto; font-size: 20px; line-height: 1; }
.lb-pin-chip { flex: 0 0 auto; }
.lb-pin-jump { flex: 0 0 auto; }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .lb-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "promo"
      "board"
      "feed";
  }
  .lb-promo-copy { max-width: 62ch; }
  .lb-promo-grid { max-width: 420px; }
  .lb-promo-cta { width: auto; min-width: 220px; }
}

@media (max-width: 900px) {
  /* The mobile nav owns the bottom of the viewport below this width. */
  .lb-pin {
    bottom: 88px;
    width: min(100% - 24px, var(--shell-w));
  }
  .lb-page { padding-bottom: 24px; }
  /* The pin is fixed, so at the very bottom of the document it floats over
     whatever the last screen holds, and that is the footer. The shell's 96px
     of footer padding clears the mobile nav but not the pin stacked on top of
     it, which left the Blog / FAQ / Terms links unclickable. Only this page
     mounts a pin, so the extra room is asked for only while one exists. */
  #app:has(.lb-pin) .site-footer { padding-bottom: 158px; }
}

@media (max-width: 700px) {
  .lb-controls { justify-content: center; }
  .lb-promo { padding: 20px 17px 18px; }
}

@media (max-width: 560px) {
  .lb-pin-bar { display: none; }
  .lb-pin-inner { gap: 10px; padding: 9px 10px 9px 13px; }
  .lb-pin-fig { font-size: 17px; }
  .lb-promo-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lb-promo-fig { font-size: 23px; }
}

@media (max-width: 420px) {
  .lb-pin-sub { display: none; }
  .lb-pin-rank { font-size: 12px; }
}

/* ---------- accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
  .lb-live-dot { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .lb-promo {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--primary-grad);
  }
}