/* ============================================================
   SkinSignal / css / leaderboard.css
   The Ladder page, in the product's own material: the dashboard plates
   (css/surface-tokens.css), the site type system (Saira for display,
   Inter for words, JetBrains Mono for figures), the real tier emblems,
   and exactly two colours doing work: #3d7fff for "you", and the medal
   metals for the podium. Rides css/style.css for the shell.

   THE ONE LAYOUT DECISION WORTH STATING: the row is a grid rather than
   a table, because the value column is present on some rows and absent
   on others. In a table an opted out user needs an empty cell, and an
   empty cell in a money column reads as "zero" or as "hiding
   something". A grid lets the column simply not exist for that row.
   ============================================================ */

:root {
  --lb-gold: #e4ae39;
  --lb-silver: #c8ccd2;
  --lb-bronze: #cd8b52;
  --lb-blue: #3d7fff;

  /* the dashboard .mod plate, exactly */
  --lb-plate: var(--surface-panel);
  --lb-plate-edge:
    inset 0 1px 0 var(--edge-top),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 12px 32px -16px rgba(0, 0, 0, 0.9);

  --lb-gap: clamp(18px, 2vw, 28px);
  --lb-radius: 18px;
  --lb-radius-sm: 14px;
  --lb-pad: clamp(18px, 2vw, 28px);
  --lb-ease: cubic-bezier(0.16, 0.84, 0.32, 1);
}

.lb-main { position: relative; }
/* The same faint grain as the prestige page, behind everything. */
.lb-main::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 6px);
}
.lb-wrap {
  position: relative; z-index: 1; max-width: 1080px; margin: 0 auto;
  padding: clamp(28px, 3.6vw, 48px) clamp(16px, 3vw, 32px) clamp(40px, 6vw, 72px);
}
/* ONE rhythm: header, your spot, podium, list, all one gap apart */
.lb-wrap > * + *, #board > * + * { margin-top: var(--lb-gap); }
#you:empty { display: none; }
#board > .lb-note { margin-top: 16px; }
.lb-main + .footer { margin-top: 0; }

/* ---------- HEADER ---------- */

.lb-eyebrow {
  margin: 0; font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--lb-gold);
}
.lb-head__title {
  margin: 12px 0 14px; font-family: var(--font-display); font-stretch: var(--display-hero);
  font-weight: 700; font-size: clamp(40px, 6vw, 76px); line-height: 1; letter-spacing: -0.02em;
  color: var(--text);
}
.lb-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.lb-head__coverage {
  margin: 0; font-family: var(--font-body); font-weight: 300; font-size: clamp(15px, 1.6vw, 18px);
  color: var(--muted);
}
.lb-head__coverage b {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.92em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.lb-head__updated {
  margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 10px;
  border-radius: 999px; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--edge);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
}
.lb-head__updated::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lb-blue);
  box-shadow: 0 0 0 3px rgba(61, 127, 255, 0.16);
}
.lb-head__updated[hidden] { display: none; }

/* ---------- EMBLEMS: full art, no crop, no frame ----------
   The medallions are already shaped art on transparency, so they sit on
   the plate bare. A square gloss over them (the prestige page's) reads
   as a box at these sizes, so the leaderboard leaves it off. */

.lb-emblem { display: inline-flex; flex: none; align-items: center; justify-content: center; position: relative; }
.lb-emblem picture, .lb-emblem img { width: 100%; height: 100%; display: block; object-fit: contain; }
.lb-emblem--none { border-radius: 50%; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }

/* ---------- YOUR SPOT ---------- */

.lb-you {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: clamp(16px, 2.4vw, 32px); padding: var(--lb-pad);
  border: 1px solid var(--edge); border-radius: var(--lb-radius);
  background: var(--lb-plate); box-shadow: var(--lb-plate-edge);
}
/* the one tint: a wash in the mark's corner, coloured by the state */
.lb-you::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 220px at 0% 0%, var(--lb-you-wash, transparent), transparent 70%);
}
.lb-you > * { position: relative; }
.lb-you--on     { --lb-you-wash: rgba(61, 127, 255, 0.12); border-color: rgba(61, 127, 255, 0.22); }
.lb-you--below  { --lb-you-wash: rgba(61, 127, 255, 0.08); }
.lb-you--locked { --lb-you-wash: rgba(228, 174, 57, 0.09); border-color: rgba(228, 174, 57, 0.18); }

.lb-you__mark { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lb-you__emblem { width: 76px; height: 76px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5)); }
.lb-you__fig {
  font-family: var(--font-display); font-stretch: var(--display-hero); font-weight: 700;
  font-size: clamp(36px, 4.6vw, 56px); line-height: 1; letter-spacing: -0.02em;
  color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lb-you--on .lb-you__fig, .lb-you--below .lb-you__fig { color: #a8c4ff; }
/* No number is ever drawn where the server sent none: the mark is a
   bare, dimmed hash, not a blurred or fake figure. */
.lb-you__fig--locked { color: rgba(255, 255, 255, 0.14); }
.lb-you--locked .lb-you__fig--locked { color: rgba(228, 174, 57, 0.4); }

.lb-you__text { min-width: 0; }
.lb-you__eyebrow {
  margin: 0 0 6px; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--faint);
}
.lb-you__title {
  margin: 0; font-family: var(--font-display); font-stretch: var(--display-header); font-weight: 600;
  font-size: clamp(19px, 2.2vw, 24px); letter-spacing: -0.01em; line-height: 1.15; color: var(--text);
}
.lb-you__line {
  margin: 6px 0 0; max-width: 58ch; font-family: var(--font-body); font-weight: 300; font-size: 14.5px;
  line-height: 1.5; color: var(--muted);
}
.lb-you__meta { margin: 8px 0 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); }
.lb-you__act { display: flex; }

/* ---------- PODIUM ---------- */

.lb-podium {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end;
  gap: clamp(12px, 1.6vw, 20px);
}
/* The array's order is 1, 2, 3 (and stays that way for screen readers
   and on a phone); on a wide screen 1st stands in the middle. */
.lb-podium__slot--silver { order: 1; }
.lb-podium__slot--gold   { order: 2; }
.lb-podium__slot--bronze { order: 3; }

.lb-pod {
  --medal: var(--lb-gold);
  --medal-rgb: 228, 174, 57;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 18px var(--lb-pad) 20px;
  border: 1px solid var(--edge); border-radius: var(--lb-radius);
  background: var(--lb-plate); box-shadow: var(--lb-plate-edge);
  color: inherit; text-decoration: none;
  transition: transform 260ms var(--lb-ease), border-color 200ms ease;
}
.lb-pod--silver { --medal: var(--lb-silver); --medal-rgb: 200, 204, 210; }
.lb-pod--bronze { --medal: var(--lb-bronze); --medal-rgb: 205, 139, 82; }
/* the metal: a lit hairline across the top and a low wash under it */
.lb-pod::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--medal-rgb), 0.85), transparent);
}
.lb-pod::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(260px 160px at 50% 0%, rgba(var(--medal-rgb), 0.1), transparent 72%);
}
.lb-pod > * { position: relative; z-index: 1; }
a.lb-pod:hover { transform: translateY(-3px); border-color: rgba(var(--medal-rgb), 0.3); }

.lb-pod__head { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.lb-pod__place {
  font-family: var(--font-display); font-stretch: var(--display-wide); font-weight: 700;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--medal);
}
.lb-pod__you {
  padding: 3px 8px; border-radius: 999px; background: rgba(61, 127, 255, 0.16);
  font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #a8c4ff;
}
.lb-pod__emblem {
  width: 104px; height: 104px; margin: 10px 0 12px;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 10px rgba(var(--medal-rgb), 0.18));
  transition: transform 320ms var(--lb-ease);
}
a.lb-pod:hover .lb-pod__emblem { transform: scale(1.04); }
.lb-pod--gold { padding-top: 22px; padding-bottom: 26px; }
.lb-pod--gold .lb-pod__emblem { width: 136px; height: 136px; margin: 12px 0 16px; }

.lb-pod__id { display: flex; align-items: center; justify-content: center; gap: 9px; max-width: 100%; min-width: 0; }
.lb-pod__avatar {
  width: 28px; height: 28px; flex: none; border-radius: 8px; object-fit: cover;
  background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--edge);
}
.lb-pod__name {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: var(--font-display); font-stretch: var(--display-header); font-weight: 600;
  font-size: 18px; letter-spacing: -0.01em; color: var(--text);
}
.lb-pod--gold .lb-pod__name { font-size: 21px; }
.lb-pod__tier {
  margin-top: 6px; font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--medal-rgb), 0.85);
}
.lb-pod__foot {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 14px;
  margin-top: 14px; padding-top: 12px; width: 100%; border-top: 1px solid var(--edge);
}
.lb-pod__cards { font-family: var(--font-body); font-size: 12px; color: var(--faint); }
.lb-pod--you { border-color: rgba(61, 127, 255, 0.35); }

/* ---------- THE LIST ---------- */

.lb-list {
  border: 1px solid var(--edge); border-radius: var(--lb-radius);
  background: var(--lb-plate); box-shadow: var(--lb-plate-edge); overflow: hidden;
}
.lb-list__head {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px;
  padding: 12px 20px 10px; border-bottom: 1px solid var(--edge);
  font-family: var(--font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint);
}
.lb-list__col--pos { text-align: right; }

.lb-row {
  display: grid; grid-template-columns: 48px 44px 36px minmax(0, 1fr) auto; align-items: center;
  gap: 14px; padding: 10px 20px; border-top: 1px solid var(--edge);
  color: inherit; text-decoration: none;
  transition: background-color 160ms ease;
}
.lb-list__head + .lb-row { border-top: 0; }
.lb-row:hover { background: rgba(255, 255, 255, 0.025); }

.lb-row__pos {
  font-family: var(--font-mono); font-size: 13px; color: var(--faint); text-align: right;
  font-variant-numeric: tabular-nums;
}
.lb-row--top .lb-row__pos { color: var(--text); }
.lb-row__emblem { width: 44px; height: 44px; transition: transform 260ms var(--lb-ease); }
.lb-row:hover .lb-row__emblem { transform: scale(1.08); }

.lb-row__avatar {
  width: 36px; height: 36px; display: block; border-radius: 9px; object-fit: cover;
  background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--edge);
}
.lb-row__who { min-width: 0; }
.lb-row__name {
  font-family: var(--font-body); font-size: 15px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-row__sub { display: flex; align-items: center; gap: 10px; margin-top: 3px; min-width: 0; }
.lb-row__rank {
  font-family: var(--font-display); font-stretch: var(--display-label); font-weight: 600;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245, 242, 236, 0.78);
  white-space: nowrap;
}
.lb-row__cards { font-family: var(--font-body); font-size: 12px; color: var(--faint); white-space: nowrap; }
.lb-row__cards::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px 2px 0; border-radius: 50%; background: currentColor; opacity: 0.6; vertical-align: middle; }

/* The viewer's own row (members only: the server names it). The whole
   point of the page is finding yourself in it, so it is marked clearly. */
.lb-row--you { background: rgba(61, 127, 255, 0.08); box-shadow: inset 3px 0 0 var(--lb-blue); }
.lb-row--you:hover { background: rgba(61, 127, 255, 0.12); }
.lb-row--you .lb-row__pos { color: #a8c4ff; }

/* "Show my row": one pulse on arrival, then still. */
.is-flash { animation: lbFlash 1.4s ease-out 1; }
@keyframes lbFlash {
  0%   { box-shadow: inset 3px 0 0 var(--lb-blue), inset 0 0 0 1px rgba(61, 127, 255, 0.7); }
  100% { box-shadow: inset 3px 0 0 var(--lb-blue), inset 0 0 0 1px rgba(61, 127, 255, 0); }
}
.lb-pod.is-flash { animation-name: lbFlashPod; }
@keyframes lbFlashPod {
  0%   { box-shadow: var(--lb-plate-edge), 0 0 0 2px rgba(61, 127, 255, 0.7); }
  100% { box-shadow: var(--lb-plate-edge), 0 0 0 2px rgba(61, 127, 255, 0); }
}

a.lb-row:focus-visible, a.lb-pod:focus-visible { outline: 2px solid rgba(168, 196, 255, 0.8); outline-offset: -2px; }

/* ---------- ARRIVAL: the podium rises, the rows follow ---------- */

.lb-ready .lb-pod { animation: lbRise 560ms var(--lb-ease) both; }
.lb-ready .lb-podium__slot--gold .lb-pod   { animation-delay: 60ms; }
.lb-ready .lb-podium__slot--silver .lb-pod { animation-delay: 140ms; }
.lb-ready .lb-podium__slot--bronze .lb-pod { animation-delay: 200ms; }
.lb-ready .lb-row { animation: lbIn 420ms var(--lb-ease) both; animation-delay: calc(240ms + var(--i, 0) * 22ms); }
.lb-ready .lb-row.is-flash { animation: lbFlash 1.4s ease-out 1; }
.lb-ready .lb-pod.is-flash { animation: lbFlashPod 1.4s ease-out 1; }
@keyframes lbRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lbIn   { from { opacity: 0; transform: translateY(6px); }  to { opacity: 1; transform: none; } }

/* ---------- STATES: empty, updating, failed, loading ---------- */

.lb-state {
  max-width: 620px; margin: clamp(10px, 3vw, 40px) auto 0; text-align: center;
  padding: clamp(28px, 4vw, 48px); border: 1px solid var(--edge); border-radius: var(--lb-radius);
  background: var(--lb-plate); box-shadow: var(--lb-plate-edge);
}
.lb-state__title {
  margin: 0 0 10px; font-family: var(--font-display); font-stretch: var(--display-hero); font-weight: 700;
  font-size: clamp(24px, 3.2vw, 36px); letter-spacing: -0.02em; color: var(--text);
}
.lb-state__line {
  margin: 0 auto; max-width: 48ch; font-family: var(--font-body); font-weight: 300; font-size: 15.5px;
  line-height: 1.5; color: var(--muted);
}
.lb-state .cta { margin-top: 20px; }

.lb-skel__podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); align-items: end; }
.lb-skel__podium span { height: 250px; border-radius: var(--lb-radius); background: var(--lb-plate); box-shadow: var(--lb-plate-edge); }
.lb-skel__podium span:nth-child(2) { height: 290px; }
.lb-skel__rows { margin-top: var(--lb-gap); border-radius: var(--lb-radius); background: var(--lb-plate); box-shadow: var(--lb-plate-edge); overflow: hidden; }
.lb-skel__rows span { display: block; height: 64px; border-top: 1px solid var(--edge); }
.lb-skel__rows span:first-child { border-top: 0; }
.lb-skel { animation: lbSkel 1.6s ease-in-out infinite; }
@keyframes lbSkel { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } }

.lb-note {
  margin: 16px 0 0; font-family: var(--font-body); font-size: 12px; line-height: 1.6; color: var(--faint);
}

/* ---------- SMALLER SCREENS ---------- */

@media (max-width: 820px) {
  .lb-podium { grid-template-columns: minmax(0, 1fr); }
  .lb-podium__slot--silver, .lb-podium__slot--gold, .lb-podium__slot--bronze { order: 0; }
  /* on a phone each podium card is a wide plate: emblem left, name right */
  .lb-pod {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas:
      "emb head" "emb id" "emb tier" "emb foot";
    align-items: center; justify-items: start; text-align: left; column-gap: 16px; row-gap: 2px;
    padding: 16px 18px;
  }
  .lb-pod--gold { padding: 18px; }
  .lb-pod__emblem, .lb-pod--gold .lb-pod__emblem { grid-area: emb; width: 84px; height: 84px; margin: 0; }
  .lb-pod--gold .lb-pod__emblem { width: 96px; height: 96px; }
  .lb-pod__head { grid-area: head; }
  .lb-pod__id { grid-area: id; justify-content: flex-start; }
  .lb-pod__tier { grid-area: tier; margin-top: 2px; }
  .lb-pod__foot { grid-area: foot; justify-content: flex-start; margin-top: 8px; padding-top: 8px; }
  .lb-pod::after { background: radial-gradient(200px 140px at 0% 50%, rgba(var(--medal-rgb), 0.1), transparent 72%); }
  .lb-skel__podium { grid-template-columns: minmax(0, 1fr); }
  .lb-skel__podium span, .lb-skel__podium span:nth-child(2) { height: 120px; }

  .lb-you { grid-template-columns: auto minmax(0, 1fr); }
  .lb-you__act { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .lb-list__head { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 10px 12px 8px; gap: 10px; }
  .lb-row { grid-template-columns: 30px 36px 28px minmax(0, 1fr) auto; gap: 10px; padding: 9px 12px; }
  .lb-row__emblem { width: 36px; height: 36px; }
  .lb-row__avatar { width: 28px; height: 28px; border-radius: 7px; }
  .lb-row__name { font-size: 14px; }
  .lb-row__cards { display: none; }
  .lb-you { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lb-you__emblem { width: 60px; height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-ready .lb-pod, .lb-ready .lb-row, .lb-skel, .is-flash,
  .lb-ready .lb-row.is-flash, .lb-ready .lb-pod.is-flash { animation: none; }
  .lb-pod, .lb-pod__emblem, .lb-row, .lb-row__emblem { transition: none; }
  a.lb-pod:hover, a.lb-pod:hover .lb-pod__emblem, .lb-row:hover .lb-row__emblem { transform: none; }
  /* the flash still marks the row, just without moving */
  .is-flash { box-shadow: inset 3px 0 0 var(--lb-blue), inset 0 0 0 1px rgba(61, 127, 255, 0.5); }
}