/* g:leaderboard — "Le classement" (module: leaderboard)
   Night sky + stars, rank badge (split-flap numeral), ranked rows with 2px bars, my row gold. */
.scene.lb { background: linear-gradient(to top, #0b1220, #141f33); }
.lb .stars { position: absolute; inset: 0; z-index: 0; }
.lb .spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(90% 42% at 50% 20%, rgba(42, 63, 99, 0.6), transparent 70%); }
.lb .wash { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: radial-gradient(75% 55% at 50% 72%, rgba(201, 164, 92, 0.4), transparent 72%); }
.lb .fg { padding-top: calc(var(--safe-top) + 72px); padding-bottom: calc(var(--safe-bottom) + 72px); }

/* header */
.lb .kicker { font-family: var(--display); font-style: italic; font-weight: 300; font-size: 17px; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--clay); font-variation-settings: var(--wonk); margin: 0 0 10px; }
.lb .title { font-variation-settings: "opsz" 96; }

/* rank badge: 56px split-flap numeral + "OF 42" + italic flourish */
.lb-badge { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; min-height: 64px; margin: 18px 0 14px; }
.lb-badge .numwrap { display: flex; flex-direction: column; align-items: flex-start; }
.lb-badge .numeral { font-family: var(--display); font-weight: 300; font-size: 56px; line-height: 1; letter-spacing: -0.03em; font-variation-settings: "opsz" 144; color: var(--cream); transition: color 0.5s ease, text-shadow 0.5s ease; }
.lb-badge .numeral.p1 { color: var(--gold); text-shadow: 0 0 22px rgba(201, 164, 92, 0.45); }
.lb-badge .numeral.p2 { color: #d9d9d9; text-shadow: 0 0 22px rgba(217, 217, 217, 0.3); }
.lb-badge .numeral.p3 { color: #c98f62; text-shadow: 0 0 22px rgba(184, 115, 51, 0.35); }
.lb-badge .numeral.dash { color: var(--cream-60); }
.lb-badge .numeral.flap { gap: 2px; perspective: 400px; }
.lb-badge .numeral.flap .digit { width: 0.58em; border-radius: 4px; }
.lb-badge .numeral.flap .digit .top { border-bottom-color: rgba(244, 238, 227, 0.1); }
.lb-badge .numeral.dash { font-style: italic; font-variation-settings: var(--wonk); }
.lb-badge .of { margin-top: 8px; color: var(--cream-60); white-space: nowrap; }
.lb-badge .flourish { align-self: center; margin: -18px 0 0; font-family: var(--display); font-style: italic; font-weight: 300; font-size: 16px; line-height: 1.32; color: var(--cream-60); font-variation-settings: var(--wonk); text-wrap: pretty; }
.lb-badge .flourish .retry { display: inline-block; margin-top: 6px; padding: 6px 0; min-height: var(--tap); font-style: normal; font-variation-settings: normal; color: var(--cream-60); }

/* rows: 32px rank · name · points, 2px bar under name+points, hairline dividers */
.lb-list { list-style: none; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); flex: 1; min-height: 0; overflow: hidden; } /* full-bleed box so my row can slide in from the right without clipping */
.lb-list::before { content: ""; display: block; height: var(--hairline); background: var(--cream-12); }
.lb .row { position: relative; display: grid; grid-template-columns: 32px 1fr auto; grid-template-rows: auto 2px; column-gap: 12px; row-gap: 7px; align-items: baseline; min-height: 48px; padding: 9px 0 8px; border-bottom: var(--hairline) solid var(--cream-12); }
.lb .row .rank { grid-row: 1 / span 2; align-self: start; position: relative; font-family: var(--display); font-weight: 300; font-size: 20px; line-height: 20px; letter-spacing: -0.01em; color: var(--cream-60); white-space: nowrap; }
.lb .row .rank .tie { font-style: normal; font-size: 11px; vertical-align: 0.3em; margin-right: 1px; color: var(--cream-30); }
.lb .row .rank .you { display: inline-block; line-height: 20px; color: var(--gold); }
.lb .row .pip { position: absolute; left: -15px; top: 5px; width: 10px; height: 10px; border-radius: 50%; }
.lb .row .pip.p1 { background: var(--gold); box-shadow: 0 0 10px rgba(201, 164, 92, 0.55); }
.lb .row .pip.p2 { background: #c0c0c0; }
.lb .row .pip.p3 { background: #b87333; }
.lb .row .name { font: 500 15px/20px var(--sans); color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb .row .pts { font-family: var(--display); font-weight: 400; font-size: 18px; line-height: 20px; color: var(--cream); white-space: nowrap; }
.lb .row .pts.none { font: var(--caps-xs); letter-spacing: var(--caps-xs-track); text-transform: uppercase; color: var(--cream-60); line-height: 20px; }
.lb .row .bar { grid-column: 2 / span 2; height: 2px; border-radius: 1px; background: var(--cream-12); overflow: hidden; align-self: end; }
.lb .row .bar i { display: block; height: 100%; width: 100%; border-radius: 1px; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; background: rgba(201, 164, 92, 0.55); }
.lb .row.top3 .bar i { background: linear-gradient(90deg, var(--gold), var(--clay)); }

/* me */
.lb .row.mine { margin: 4px -14px; padding: 9px 14px 8px; border: 1px solid var(--gold); border-radius: var(--r-s); background: rgba(201, 164, 92, 0.12); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.lb .row.mine .pip { left: -12px; top: 5px; }
.lb .row.mine .pts { color: var(--gold); }
.lb .row.mine .bar i { background: var(--gold); }
.lb .row.mine.top3 .bar i { background: linear-gradient(90deg, var(--gold), var(--clay)); }
.lb .row.mine .ring { position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid var(--gold); opacity: 0; pointer-events: none; }
.lb .row.mine .sweep { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.lb .row.mine .sweep b { position: absolute; top: -30%; bottom: -30%; left: 0; width: 38%; transform: translateX(-140%) skewX(-14deg); background: linear-gradient(90deg, transparent, rgba(244, 238, 227, 0.18) 50%, transparent); }
.lb .row.mine .glow { position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; background: radial-gradient(70% 120% at 50% 50%, rgba(201, 164, 92, 0.3), transparent 75%); }
.lb .row.mine.pinned { margin-top: 2px; }

/* "… n more …" + loading */
.lb .row.more, .lb .row.wait { display: flex; justify-content: center; align-items: center; min-height: 30px; padding: 0; color: var(--cream-30); border-bottom: 0; }
.lb .row.wait { min-height: 48px; color: var(--cream-60); }

/* CTA */
.lb .cta { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .lb .row.mine .ring, .lb .row.mine .glow, .lb .row.mine .sweep, .lb .wash { display: none; }
  .lb-badge .numeral { transition: none; }
}