/* Leaderboard (mobile first). One column of cards on phones; prizes side by side from 640px.
   Site tokens from main.css; no tables, no hairlines: surfaces are separated by tone. */

.lb { padding: 1.5rem 0 3.5rem; }
.lb-inner { max-width: 40rem; display: grid; gap: 1.4rem; }

.lb-head { display: grid; gap: .55rem; }
.lb-title {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; line-height: 1;
  font-size: clamp(2.3rem, 11vw, 3.6rem); margin: 0;
}
.lb-round { margin: 0; color: var(--text); font-size: 1rem; }
.lb-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.lb-bar span { display: block; height: 100%; border-radius: inherit; background: var(--gold); min-width: 4px; }
.lb-status {
  margin: .3rem 0 0; padding: .8rem 1rem; border-radius: 14px; background: var(--surface-2);
  font-size: var(--fs-sm); line-height: 1.45; color: var(--text);
}
.lb-status--open { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }

/* Prize places */
.lb-podium { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.lb-prize {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "place name score" "place reward score";
  align-items: center; column-gap: .9rem; row-gap: .1rem;
  padding: .95rem 1.05rem; border-radius: 18px; background: var(--surface);
}
.lb-prize-place {
  grid-area: place; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  font-weight: 700; font-size: .95rem; background: var(--surface-2); color: var(--text);
}
.lb-prize--1 .lb-prize-place { background: var(--gold); color: #1b1408; }
.lb-prize--2 .lb-prize-place { background: color-mix(in srgb, var(--text-2) 40%, var(--surface)); }
.lb-prize--3 .lb-prize-place { background: color-mix(in srgb, #b07a46 55%, var(--surface)); color: #fff; }
.lb-prize-name { grid-area: name; font-weight: 600; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-prize-reward { grid-area: reward; font-size: var(--fs-sm); color: var(--text-2); }
.lb-prize-score { grid-area: score; font-weight: 600; font-variant-numeric: tabular-nums; }
.lb-prize--1 { background: color-mix(in srgb, var(--gold) 14%, var(--surface)); }

/* Your place */
.lb-you {
  display: grid; gap: .2rem; padding: 1rem 1.1rem; border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); line-height: 1.45;
}
.lb-you strong { font-size: 1.05rem; }
.lb-you span { color: var(--text); font-size: var(--fs-sm); }

/* Ranked list */
.lb-h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; letter-spacing: -.01em; margin: 0 0 .7rem; }
.lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.lb-row {
  display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: .7rem;
  min-height: 60px; padding: .55rem 1rem; border-radius: 14px; background: var(--surface);
}
.lb-row.is-me { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.lb-rank { font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; text-align: center; }
.lb-who { display: grid; min-width: 0; }
.lb-who strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-who em { font-style: normal; color: var(--text-2); font-weight: 500; }
.lb-who span { font-size: .82rem; color: var(--text-2); }
.lb-score { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.lb-score small { font-weight: 500; color: var(--text-2); margin-left: .2rem; font-size: .75rem; }
.lb-list--compact .lb-row { min-height: 48px; }

.lb-empty {
  display: grid; gap: .3rem; padding: 1.3rem 1.1rem; border-radius: 16px; background: var(--surface-2); text-align: center;
}
.lb-empty span { color: var(--text-2); font-size: var(--fs-sm); }

.lb-how p { margin: 0 0 .5rem; line-height: 1.55; color: var(--text); }

.lb-past-item { border-radius: 14px; background: var(--surface-2); padding: 0 1rem; margin-bottom: .5rem; }
.lb-past-item summary { min-height: 52px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.lb-past-item[open] { padding-bottom: 1rem; }
.lb-past-item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }

@media (min-width: 640px) {
  .lb { padding: 3rem 0 5rem; }
  .lb-podium { grid-template-columns: repeat(3, 1fr); }
  .lb-prize { grid-template-columns: 1fr; grid-template-areas: "place" "name" "reward" "score"; text-align: center; justify-items: center; padding: 1.3rem 1rem; row-gap: .35rem; }
  .lb-prize-name { max-width: 100%; }
}

/* Home-page block (src/views/pages/referral.js leaderboardTeaser): copy and CTAs beside the board. */
.lb-home { display: grid; gap: 1.6rem; }
.lb-home-copy { display: grid; gap: .8rem; align-content: start; min-width: 0; }
.lb-home-copy .lb-status { margin: 0; }
.lb-home-ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .4rem; }
.lb-home-board { display: grid; gap: .8rem; min-width: 0; }
.lb-home .lb-podium { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .lb-home { grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: start; }
}
@media (min-width: 640px) {
  .lb-home .lb-podium { grid-template-columns: repeat(3, 1fr); }
}