/* BigPool UI refresh — leaderboard (podium, your standing, ranked list). Shared design language from app.css (Oct 2026). */
.lb-page { max-width: 920px; display: flex; flex-direction: column; gap: 16px; }
.lb-page > * { flex-shrink: 0; }
.lb-head h1 { margin: 6px 0 6px; font: 900 clamp(32px, 4vw, 44px)/1.02 BigPoolDisplay, var(--font-heading); letter-spacing: -0.01em; }
.lb-head .eyebrow { color: var(--gold); }
.lb-head p { margin: 0; color: var(--muted); }

/* Period / scope switcher */
.lb-scopes { display: inline-flex; align-self: flex-start; gap: 2px; padding: 4px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.025); }
.lb-scopes .filter { min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 800 12.5px var(--font-heading); white-space: nowrap; cursor: pointer; transition: color .18s, background .18s; }
.lb-scopes .filter:hover { color: var(--text); }
.lb-scopes .filter.active { color: #eafff1; background: linear-gradient(180deg, rgba(104,211,145,0.24), rgba(104,211,145,0.1)); box-shadow: inset 0 0 0 1px rgba(104,211,145,0.35); }

/* Tier chips */
.lb-tier { display: inline-flex; align-items: center; width: fit-content; height: 18px; padding: 0 7px; border-radius: 999px; border: 1px solid rgba(205,140,80,0.35); background: rgba(205,140,80,0.12); color: #e7b98a; font: 800 9.5px var(--font-heading); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.lb-tier.tier-silver { color: #dfe6ea; border-color: rgba(200,210,216,0.32); background: rgba(200,210,216,0.08); }
.lb-tier.tier-gold { color: #f0cf78; border-color: rgba(217,180,93,0.4); background: rgba(217,180,93,0.12); }
.lb-tier.tier-diamond { color: #9eeaf5; border-color: rgba(142,233,243,0.38); background: rgba(77,188,207,0.1); }
.lb-tier.tier-master { color: #f3b5ff; border-color: rgba(214,140,240,0.4); background: rgba(190,110,230,0.12); }

/* Podium */
.lb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; margin-top: 18px; }
.lb-podium-2 { grid-template-columns: repeat(2, minmax(0, 220px)); justify-content: center; }
.lb-podium-1 { grid-template-columns: minmax(0, 260px); justify-content: center; }
.lb-podium-card { position: relative; overflow: visible; isolation: isolate; display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 26px 12px 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(170deg, #121813, #0b0f0c); color: var(--text); text-align: center; text-decoration: none; box-shadow: 0 24px 50px -36px rgba(0,0,0,0.9); transition: transform .2s, border-color .2s, box-shadow .2s; }
.lb-podium-card:hover { transform: translateY(-3px); }
.lb-podium-card .avatar { width: 62px; height: 62px; font-size: 18px; }
.lb-medal { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font: 900 13px var(--font-heading); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); }
.lb-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 14px var(--font-heading); }
.lb-name em, .lb-who em { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(104,211,145,0.14); color: var(--green-bright); font: 800 9.5px var(--font-heading); font-style: normal; letter-spacing: 0.8px; text-transform: uppercase; vertical-align: 1px; }
.lb-podium-rating { margin-top: 2px; font: 900 26px/1 BigPoolDisplay, var(--font-heading); font-variant-numeric: tabular-nums; }
.lb-podium-card small { color: var(--muted); font: 700 11.5px var(--font-heading); font-variant-numeric: tabular-nums; }
/* 1st — gold, tallest */
.lb-place-1 { padding-top: 34px; padding-bottom: 22px; border-color: rgba(217,180,93,0.45); background: radial-gradient(120% 80% at 50% 0%, rgba(217,180,93,0.22), transparent 62%), linear-gradient(170deg, #16170f, #0b0f0c); box-shadow: 0 30px 60px -34px rgba(0,0,0,0.95), 0 0 50px -26px rgba(217,180,93,0.75); }
.lb-place-1::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: 20px 20px 0 0; background: linear-gradient(90deg, transparent, rgba(217,180,93,0.9), transparent); }
.lb-place-1 .avatar { width: 84px; height: 84px; font-size: 24px; box-shadow: 0 0 0 3px var(--gold), 0 0 26px rgba(217,180,93,0.5); }
.lb-place-1 .lb-medal { top: -17px; width: 34px; height: 34px; font-size: 15px; color: #2b1d04; background: radial-gradient(circle at 35% 30%, #ffe9a8, #d9b45d 55%, #9c7a2e); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2), 0 0 18px rgba(217,180,93,0.6); }
.lb-place-1 .lb-podium-rating { color: var(--gold); font-size: 34px; text-shadow: 0 0 28px rgba(217,180,93,0.4); }
.lb-place-1 .lb-name { font-size: 16px; }
/* 2nd — silver */
.lb-place-2 { border-color: rgba(200,210,216,0.28); background: radial-gradient(120% 80% at 50% 0%, rgba(200,210,216,0.1), transparent 62%), linear-gradient(170deg, #131714, #0b0f0c); }
.lb-place-2 .avatar { box-shadow: 0 0 0 2px #c3ccd2; }
.lb-place-2 .lb-medal { color: #1a1d20; background: radial-gradient(circle at 35% 30%, #f4f7f9, #b8c2ca 55%, #7d8790); }
/* 3rd — bronze */
.lb-place-3 { border-color: rgba(205,140,80,0.3); background: radial-gradient(120% 80% at 50% 0%, rgba(205,140,80,0.12), transparent 62%), linear-gradient(170deg, #151510, #0b0f0c); }
.lb-place-3 .avatar { box-shadow: 0 0 0 2px #c48a55; }
.lb-place-3 .lb-medal { color: #2b1a07; background: radial-gradient(circle at 35% 30%, #f3cfa8, #c48a55 55%, #8a5a2e); }
.lb-podium-card.is-me { outline: 2px solid rgba(104,211,145,0.55); outline-offset: 2px; }

/* Your standing — pinned to the bottom of the viewport while you scroll the list. */
.lb-you { position: sticky; bottom: 14px; z-index: 5; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border-radius: 16px; border: 1px solid rgba(104,211,145,0.4); background: linear-gradient(90deg, rgba(22,44,31,0.96), rgba(13,19,15,0.96) 70%); color: var(--text); text-decoration: none; box-shadow: 0 18px 40px -18px rgba(0,0,0,0.9), 0 0 30px -20px rgba(104,211,145,0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .18s; }
.lb-you:hover { border-color: rgba(104,211,145,0.7); }
.lb-you-rank { display: grid; justify-items: center; min-width: 54px; padding-right: 12px; border-right: 1px solid rgba(255,255,255,0.1); }
.lb-you-rank small { color: var(--green); font: 800 9px var(--font-heading); letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; }
.lb-you-rank b { font: 900 22px/1.1 BigPoolDisplay, var(--font-heading); font-variant-numeric: tabular-nums; }
.lb-you .avatar { box-shadow: 0 0 0 2px rgba(104,211,145,0.6); }
.lb-you .lb-who > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lb-you .lb-who > span em { margin: 0; padding: 0; background: none; color: var(--muted); font: 700 11.5px var(--font-heading); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.lb-you-rating { display: grid; justify-items: end; }
.lb-you-rating b { font: 900 22px/1.1 BigPoolDisplay, var(--font-heading); font-variant-numeric: tabular-nums; }
.lb-you-rating small { color: var(--muted); font: 800 9px var(--font-heading); letter-spacing: 1.2px; text-transform: uppercase; }

/* Ranked list */
.lb-list { display: grid; gap: 6px; }
.lb-list-head, .lb-row { display: grid; grid-template-columns: 36px 40px minmax(0, 1fr) 130px 72px 64px; align-items: center; gap: 12px; }
.lb-list-head { padding: 0 16px 2px; color: var(--muted); font: 800 10px var(--font-heading); letter-spacing: 1.3px; text-transform: uppercase; }
.lb-list-head span:first-child { grid-column: 1; text-align: center; }
.lb-list-head span:nth-child(2) { grid-column: 2 / 4; }
.lb-list-head span:last-child { text-align: right; }
.lb-row { padding: 10px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.06); background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.012)); color: var(--text); text-decoration: none; transition: border-color .18s, background .18s, transform .18s; }
.lb-row:hover { border-color: rgba(104,211,145,0.3); transform: translateY(-1px); }
.lb-row.is-me { border-color: rgba(104,211,145,0.4); background: linear-gradient(90deg, rgba(104,211,145,0.13), rgba(255,255,255,0.015) 65%); box-shadow: inset 3px 0 0 var(--green); }
.lb-pos { color: var(--text-soft); font: 900 17px BigPoolDisplay, var(--font-heading); text-align: center; font-variant-numeric: tabular-nums; }
.lb-who { display: grid; gap: 4px; min-width: 0; }
.lb-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 14px var(--font-heading); }
.lb-wr { display: grid; gap: 5px; }
.lb-wr b { font: 800 13px var(--font-heading); font-variant-numeric: tabular-nums; }
.lb-wr i { display: block; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
.lb-wr s { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3fa66c, var(--green-bright)); text-decoration: none; }
.lb-rec { color: var(--muted); font: 700 13px var(--font-heading); font-variant-numeric: tabular-nums; }
.lb-rating { font: 900 19px BigPoolDisplay, var(--font-heading); text-align: right; font-variant-numeric: tabular-nums; }
.lb-page > .empty { border-radius: 20px; }
.lb-page .pagination { margin-top: 4px; }

@media (max-width: 720px) {
  .lb-page { gap: 14px; }
  .lb-head h1 { font-size: 34px; }
  .lb-scopes { display: flex; align-self: stretch; overflow-x: auto; scrollbar-width: none; }
  .lb-scopes::-webkit-scrollbar { display: none; }
  .lb-scopes .filter { flex: 1 0 auto; padding: 0 12px; }
  .lb-podium { gap: 8px; margin-top: 20px; }
  .lb-podium-card { padding: 22px 6px 12px; border-radius: 16px; gap: 5px; }
  .lb-podium-card .avatar { width: 48px; height: 48px; font-size: 15px; }
  .lb-place-1 { padding-top: 28px; padding-bottom: 16px; }
  .lb-place-1 .avatar { width: 64px; height: 64px; font-size: 19px; }
  .lb-name, .lb-place-1 .lb-name { font-size: 12.5px; }
  .lb-name em { display: none; }
  .lb-podium-rating { font-size: 21px; }
  .lb-place-1 .lb-podium-rating { font-size: 26px; }
  .lb-podium-card small { font-size: 10.5px; }
  .lb-podium-card .lb-tier { font-size: 8.5px; padding: 0 6px; }
  .lb-you { bottom: 10px; gap: 10px; padding: 9px 12px 9px 8px; }
  .lb-you-rank { min-width: 46px; padding-right: 10px; }
  .lb-you-rank b, .lb-you-rating b { font-size: 19px; }
  .lb-list-head { display: none; }
  .lb-row { grid-template-columns: 26px 36px minmax(0, 1fr) auto auto; gap: 10px; padding: 9px 12px 9px 8px; }
  .lb-row .avatar { width: 36px; height: 36px; }
  .lb-wr { display: none; }
  .lb-rec { font-size: 12px; }
  .lb-rating { font-size: 17px; min-width: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-podium-card, .lb-podium-card:hover, .lb-row, .lb-row:hover { transition: none; transform: none; }
}