/* ============================================================
   SkinSignal / the leaderboard, signed out
   js/leaderboard.js (setPublic, renderPublic) and leaderboard.html's
   [data-lbp] blocks. Every rule is scoped to body.lb--public or the .lbp
   classes only the signed out view draws, so the signed in ladder is
   exactly as css/leaderboard.css draws it.

   The layout: the hero across the top (the words left, the podium
   right), the table on the left with Your spot beside it, the close
   strip across the foot.

   Gold is prestige (the first place, the title's last words, the rank
   names), blue is the interface (the way in, the marks, hover). No
   green and no red: those mean the market, not the ladder. No values
   anywhere, and nothing here styles one.
   ============================================================ */

/* The public blocks carry `hidden` until js/leaderboard.js raises them;
   their own display rules must never outrank it, or the signed in page
   would draw them too. */
[data-lbp][hidden] { display: none !important; }

.lb--public .lb-head,
.lb--public #you,
.lb--public #board { display: none; }

.lb--public .lb-wrap { max-width: 1320px; }
.lb--public .lb-wrap > * + * { margin-top: clamp(20px, 2vw, 28px); }

.lbp-gold { color: #e4ae39; }
.lbp-eyebrow {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e4ae39;
}

/* ---------- The hero ---------- */
.lbp-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: end;
  gap: clamp(20px, 2.6vw, 44px);
}
.lbp-hero__copy { align-self: center; padding-bottom: clamp(0px, 2vw, 28px); }
.lbp-title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 800;
  font-size: clamp(40px, 4.6vw, 70px);
  line-height: 0.96;
  letter-spacing: -0.014em;
  color: #f4f1ea;
}
.lbp-title > span { display: block; }
.lbp-lede { max-width: 520px; margin: 18px 0 0; font-family: var(--font-body); font-size: clamp(15.5px, 1.05vw, 18px); line-height: 1.6; color: #b4bac5; }
.lbp-marks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
  margin: clamp(22px, 2.4vw, 34px) 0 0;
  padding: 0;
  list-style: none;
}
.lbp-marks li { display: flex; gap: 10px; align-items: flex-start; font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: #8a919e; }
.lbp-marks svg { flex: none; width: 24px; height: 24px; fill: none; stroke: #6aa0ff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lbp-marks b {
  display: block;
  margin-bottom: 3px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8fb6ff;
}

/* ---------- The podium: a prestige display, not a trophy shelf ---------- */
.lbp-stage { position: relative; padding-top: 8px; }
.lbp-stage--sample { padding-top: 42px; }
.lbp-stage::before {
  content: "";
  position: absolute;
  inset: -6% -4% 0;
  pointer-events: none;
  background:
    radial-gradient(34% 46% at 50% 36%, rgba(228, 174, 57, 0.13), rgba(228, 174, 57, 0) 72%),
    radial-gradient(56% 50% at 50% 70%, rgba(61, 127, 255, 0.1), rgba(61, 127, 255, 0) 74%);
}
/* the stage line the plinths stand on */
.lbp-stage::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(61, 127, 255, 0), rgba(106, 160, 255, 0.7) 22%, rgba(228, 174, 57, 0.55) 50%, rgba(106, 160, 255, 0.7) 78%, rgba(61, 127, 255, 0));
  box-shadow: 0 0 18px rgba(61, 127, 255, 0.45);
}
.lbp-stage__sample {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  translate: -50% 0;
  margin: 0;
  padding: 4px 11px;
  border: 1px solid rgba(228, 174, 57, 0.45);
  border-radius: 999px;
  background: rgba(14, 12, 8, 0.85);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #f1cf7a;
}
.lbp-stage__sample[hidden] { display: none; }

.lbp-podium {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 1fr);
  grid-template-areas: "two one three";
  align-items: end;
  gap: clamp(10px, 1.2vw, 18px);
  margin: 0;
  padding: 0 0 0;
  list-style: none;
}
.lbp-pod { --metal: 176, 190, 214; min-width: 0; }
.lbp-pod--1 { grid-area: one; --metal: 228, 174, 57; }
.lbp-pod--2 { grid-area: two; --metal: 143, 182, 255; }
.lbp-pod--3 { grid-area: three; --metal: 190, 150, 118; }

.lbp-pod__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.lbp-pod__emblem {
  position: relative;
  z-index: 1;
  display: block;
  width: 72%;
  max-width: 170px;
  aspect-ratio: 1;
  margin-bottom: -14%;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 22px rgba(var(--metal), 0.16));
  transition: translate var(--hover-dur, 200ms) var(--ease, ease);
}
.lbp-pod--1 .lbp-pod__emblem { width: 80%; max-width: 236px; margin-bottom: -12%; }
.lbp-pod__emblem picture, .lbp-pod__emblem img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* no emblem (loading, open, error): a quiet ring where the art will sit */
.lbp-pod__emblem.is-empty { filter: none; }
.lbp-pod__emblem.is-empty::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px solid rgba(var(--metal), 0.2);
  background: radial-gradient(circle, rgba(var(--metal), 0.07), rgba(var(--metal), 0) 70%);
}

.lbp-pod__plinth {
  position: relative;
  width: 100%;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 9px;
  min-height: 168px;
  padding: calc(14% + 12px) 12px 18px;
  border: 1px solid rgba(var(--metal), 0.28);
  border-bottom: 0;
  border-radius: 14px 14px 3px 3px;
  background:
    linear-gradient(180deg, rgba(var(--metal), 0.07), rgba(var(--metal), 0) 38%),
    linear-gradient(180deg, #111723, #07090f);
  box-shadow: inset 0 1px 0 rgba(var(--metal), 0.4), 0 30px 60px -24px rgba(0, 0, 0, 0.95);
  text-align: center;
}
.lbp-pod--1 .lbp-pod__plinth { min-height: 222px; border-color: rgba(var(--metal), 0.45); box-shadow: inset 0 1px 0 rgba(var(--metal), 0.6), 0 0 40px -18px rgba(var(--metal), 0.5), 0 30px 60px -24px rgba(0, 0, 0, 0.95); }
.lbp-pod--3 .lbp-pod__plinth { min-height: 148px; }

.lbp-pod__place {
  padding: 3px 11px;
  border: 1px solid rgba(var(--metal), 0.6);
  border-radius: 999px;
  background: rgba(6, 8, 12, 0.8);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 13px;
  color: rgb(var(--metal));
}
.lbp-pod--1 .lbp-pod__place { font-size: 15px; box-shadow: 0 0 16px -4px rgba(var(--metal), 0.55); }
.lbp-pod__who { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; min-width: 0; }
.lbp-pod__avatar { flex: none; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #141a24; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.lbp-pod__name {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: #f4f1ea;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lbp-pod--1 .lbp-pod__name { font-size: 17px; }
.lbp-pod__name--open { color: #8a919e; font-weight: 500; }
.lbp-pod__rank {
  max-width: 100%;
  padding: 3px 10px;
  border: 1px solid rgba(var(--metal), 0.55);
  border-radius: 7px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--metal));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lbp-pod__rank--open { border-style: dashed; color: #7f8794; border-color: rgba(255, 255, 255, 0.16); }
a.lbp-pod__card:hover .lbp-pod__emblem { translate: 0 -4px; }
a.lbp-pod__card:focus-visible { outline: 2px solid rgba(118, 166, 255, 0.85); outline-offset: 4px; border-radius: 14px; }

.lbp-bar { display: block; width: 62%; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); }
.lbp-bar--sm { width: 40%; height: 10px; }
.lbp-podium.is-loading .lbp-bar,
.lbp-podium.is-loading .lbp-pod__emblem.is-empty::before { animation: lbpPulse 1.6s ease-in-out infinite; }

/* The one marker every sample carries. */
.lbp-tag {
  padding: 2px 8px;
  border: 1px solid rgba(228, 174, 57, 0.45);
  border-radius: 999px;
  background: rgba(228, 174, 57, 0.07);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f1cf7a;
  white-space: nowrap;
}
.lbp-face--mono { display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: #8a919e; }
.lbp-pod__avatar.lbp-face--mono { font-size: 12px; }
.lbp-face--none { display: block; }

/* ---------- The table and Your spot ---------- */
.lbp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 350px);
  gap: clamp(16px, 1.6vw, 24px);
  align-items: start;
}
.lbp-board,
.lbp-spot {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005)), #090d14;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.lbp-board { min-width: 0; padding: 20px clamp(14px, 1.6vw, 22px) 14px; }
.lbp-board__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 4px 16px; }
.lbp-board__title { margin: 0 4px 0 0; font-family: var(--font-display); font-stretch: 100%; font-weight: 800; font-size: clamp(20px, 1.6vw, 25px); color: #f4f1ea; }
.lbp-chip {
  padding: 3px 9px;
  border: 1px solid rgba(61, 127, 255, 0.35);
  border-radius: 999px;
  background: rgba(61, 127, 255, 0.08);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9fc0ff;
}
.lbp-chip--sample { border-color: rgba(228, 174, 57, 0.45); background: rgba(228, 174, 57, 0.08); color: #f1cf7a; }
.lbp-chip[hidden] { display: none; }
.lbp-board__meta { margin-left: auto; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.04em; color: #7f8794; }
.lbp-quiet { margin: 0 4px 12px; font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: #8a919e; }

.lbp-thead,
.lbp-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.25fr) minmax(0, 1fr) 64px;
  align-items: center;
  column-gap: 12px;
}
.lbp-thead {
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7f8794;
}
.lbp-thead span:last-child { text-align: right; }
.lbp-row {
  position: relative;
  min-height: 64px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--hover-dur, 200ms) ease;
}
.lbp-tbody .lbp-row:first-child { border-top: 0; }
a.lbp-row:hover { background: linear-gradient(90deg, rgba(61, 127, 255, 0.07), rgba(61, 127, 255, 0) 75%); }
a.lbp-row:focus-visible { outline: 2px solid rgba(118, 166, 255, 0.85); outline-offset: -2px; border-radius: 10px; }
.lbp-row__pos { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 16px; color: #d5dae3; font-variant-numeric: tabular-nums; }
.lbp-row__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lbp-row__avatar { flex: none; width: 38px; height: 38px; border-radius: 10px; object-fit: cover; background: #141a24; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.lbp-row__avatar.lbp-face--mono { font-size: 15px; }
.lbp-row__name { min-width: 0; overflow: hidden; font-family: var(--font-body); font-weight: 600; font-size: 14.5px; color: #f4f1ea; text-overflow: ellipsis; white-space: nowrap; }
.lbp-row__rank { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lbp-row__emblem { position: relative; flex: none; display: block; width: 40px; height: 40px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)); }
.lbp-row__emblem picture, .lbp-row__emblem img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lbp-row__tier {
  min-width: 0;
  padding: 3px 9px;
  border: 1px solid rgba(228, 174, 57, 0.42);
  border-radius: 7px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #f1cf7a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lbp-row__end { display: flex; justify-content: flex-end; }
.lbp-row__arrow { position: relative; width: 22px; height: 22px; color: #6f7785; transition: color var(--hover-dur, 200ms) ease, translate var(--hover-dur, 200ms) var(--ease, ease); }
.lbp-row__arrow::after { content: ""; position: absolute; left: 5px; top: 7px; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; rotate: 45deg; }
a.lbp-row:hover .lbp-row__arrow { color: #8fb6ff; translate: 2px 0; }

.lbp-more {
  display: block;
  margin: 10px auto 2px;
  padding: 9px 16px;
  border: 1px solid rgba(76, 141, 255, 0.4);
  border-radius: 9px;
  background: rgba(10, 18, 34, 0.5);
  font-family: var(--font-body);
  font-size: 13px;
  color: #d5dae3;
  cursor: pointer;
  transition: border-color var(--hover-dur, 200ms) ease;
}
.lbp-more:hover { border-color: rgba(118, 166, 255, 0.85); }
.lbp-more:focus-visible { outline: 2px solid rgba(118, 166, 255, 0.85); outline-offset: 2px; }

.lbp-state { padding: clamp(26px, 3vw, 40px) 16px; text-align: center; }
.lbp-state__title { margin: 0; font-family: var(--font-display); font-stretch: 100%; font-weight: 800; font-size: clamp(19px, 1.5vw, 23px); color: #f4f1ea; }
.lbp-state__line { margin: 8px 0 0; font-family: var(--font-body); font-size: 14px; color: #8a919e; }
.lbp-state .cta { margin-top: 18px; }

.lbp-skel { display: grid; gap: 6px; }
.lbp-skel span { display: block; height: 58px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); animation: lbpPulse 1.6s ease-in-out infinite; }

/* ---------- Your spot ---------- */
.lbp-spot {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 2vw, 28px);
  border-color: rgba(228, 174, 57, 0.3);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 230, 170, 0.06);
}
.lbp-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(80% 50% at 100% 0%, rgba(228, 174, 57, 0.08), rgba(228, 174, 57, 0) 70%);
}
.lbp-spot > * { position: relative; }
.lbp-spot__title { margin: 10px 0 0; font-family: var(--font-display); font-stretch: 100%; font-weight: 800; font-size: clamp(27px, 2.1vw, 34px); line-height: 1.02; color: #f4f1ea; }
.lbp-spot__title > span { display: block; }
.lbp-spot__line { margin: 12px 0 18px; font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: #b4bac5; }
.lbp-spot__cta { width: 100%; justify-content: center; }
.lbp-spot__reveal { display: grid; gap: 0; margin: 18px 0 0; }
.lbp-spot__reveal > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.lbp-spot__reveal dt { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #8fb6ff; }
.lbp-spot__reveal dd { margin: 0; font-family: var(--font-body); font-size: 13px; color: #8a919e; text-align: right; }
.lbp-spot__seat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px dashed rgba(228, 174, 57, 0.3);
  border-radius: 12px;
  background: rgba(228, 174, 57, 0.035);
}
.lbp-spot__hash { font-family: var(--font-display); font-stretch: 100%; font-weight: 800; font-size: 34px; line-height: 1; color: rgba(228, 174, 57, 0.55); }
.lbp-spot__blank { display: block; height: 2px; max-width: 64px; border-radius: 2px; background: rgba(228, 174, 57, 0.45); }
.lbp-spot__claim { grid-column: 1 / -1; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #c9a24e; }
.lbp-spot__trust { margin: 16px 0 0; font-family: var(--font-body); font-size: 12px; line-height: 1.7; color: #7f8794; }
.lbp-spot__trust > span:not([aria-hidden]) { white-space: nowrap; }

/* ---------- The close ---------- */
.lbp-close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  padding: clamp(20px, 2vw, 28px) clamp(20px, 2.4vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background:
    radial-gradient(60% 120% at 0% 50%, rgba(228, 174, 57, 0.06), rgba(228, 174, 57, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005)), #090d14;
}
.lbp-close__line { margin: 0; font-family: var(--font-display); font-stretch: 100%; font-weight: 800; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.1; color: #f4f1ea; }
.lbp-close__line > span { display: block; }
.lbp-close__act { display: flex; flex-wrap: wrap; gap: 12px; }

@keyframes lbpPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ============================================================
   NARROWER
   ============================================================ */
@media (max-width: 1080px) {
  .lbp-hero { grid-template-columns: minmax(0, 1fr); }
  .lbp-hero__copy { padding-bottom: 0; }
  .lbp-stage { max-width: 720px; width: 100%; margin: 0 auto; }
}

@media (max-width: 900px) {
  .lbp-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Phone: #1 across the top, #2 and #3 side by side under it. Rows keep
   the rank name; it moves under the player rather than going away. */
@media (max-width: 640px) {
  .lbp-marks { grid-template-columns: minmax(0, 1fr); }
  .lbp-podium { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "one one" "two three"; row-gap: 22px; }
  .lbp-pod--1 .lbp-pod__emblem { width: 52%; }
  .lbp-pod--1 .lbp-pod__plinth { min-height: 0; }
  .lbp-pod__plinth, .lbp-pod--3 .lbp-pod__plinth { min-height: 0; border-bottom: 1px solid rgba(var(--metal), 0.28); border-radius: 14px; }
  .lbp-stage::after { display: none; }
  .lbp-stage--sample { padding-top: 8px; }
  .lbp-stage__sample { position: static; translate: none; display: table; margin: 0 auto 10px; }
  .lbp-stage__sample[hidden] { display: none; }
  .lbp-board__meta { margin-left: 0; flex-basis: 100%; }
  .lbp-thead { display: none; }
  .lbp-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas: "pos who end" "pos rank end";
    row-gap: 6px;
    padding: 12px 8px;
  }
  .lbp-row__pos { grid-area: pos; font-size: 14px; }
  .lbp-row__who { grid-area: who; }
  .lbp-row__rank { grid-area: rank; padding-left: 50px; }
  .lbp-row__end { grid-area: end; }
  .lbp-row__emblem { width: 30px; height: 30px; }
  .lbp-close { flex-direction: column; align-items: stretch; }
  .lbp-close__act .cta { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lbp-pod__emblem, .lbp-row, .lbp-row__arrow, .lbp-more { transition: none; }
  a.lbp-pod__card:hover .lbp-pod__emblem, a.lbp-row:hover .lbp-row__arrow { translate: none; }
  .lbp-skel span,
  .lbp-podium.is-loading .lbp-bar,
  .lbp-podium.is-loading .lbp-pod__emblem.is-empty::before { animation: none; }
}