/* ---- Leaderboard look ------------------------------------------------------
   Tabs with line icons, a podium for the top three, rank circles, a "You · #N"
   jump, skeleton rows while loading. Used by the global and friends boards.
   Rows keep data-gravity-id / ranked-list-row for leaderboard-gravity.js. */
.lb-card{--gold:#e6b84a;--silver:#b9c3cf;--bronze:#cf8f5a;overflow:clip;text-transform:none}
.lb-icon{display:block;width:16px;height:16px;flex:none}

/* Header: tabs, ranking modes, find me. Stays on top while the list scrolls. */
.lb-head{position:sticky;top:0;z-index:6;display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--surface);border-bottom:1px solid var(--outline-subtle);border-radius:8px 8px 0 0;box-shadow:0 6px 12px -8px #0008}
.lb-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:3px;border-radius:10px;background:var(--site-bg);border:1px solid var(--outline-subtle)}
.lb-tab{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;padding:8px 6px;border-radius:7px;color:var(--prose-3);font:600 13px/1.2 var(--font-ui);white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s,box-shadow .15s}
.lb-tab span{overflow:hidden;text-overflow:ellipsis}
.lb-tab:hover{color:var(--prose-2);background:color-mix(in srgb,var(--surface-raised) 55%,transparent)}
.lb-tab.is-on{color:var(--prose);background:var(--surface-raised);box-shadow:0 1px 2px #0003,inset 0 0 0 1px var(--outline-subtle)}
.lb-tab.is-on .lb-icon{color:var(--gold)}
.lb-tab:focus-visible,.lb-mode:focus-visible,.lb-findme:focus-visible,.lb-more:focus-visible{outline:2px solid var(--prose);outline-offset:2px}
.lb-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lb-modes{display:inline-flex;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--outline-subtle);max-width:100%;overflow-x:auto;scrollbar-width:none}
.lb-modes::-webkit-scrollbar{display:none}
.lb-mode{padding:4px 11px;border-radius:999px;color:var(--prose-3);font:600 12px/1.4 var(--font-ui);white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s}
.lb-mode:hover{color:var(--prose-2)}
.lb-mode.is-on{background:var(--surface-raised);color:var(--prose)}
.lb-findme{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:5px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);background:color-mix(in srgb,var(--gold) 10%,transparent);color:var(--gold);font:650 12px/1.3 var(--font-ui);font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer;transition:background-color .15s,transform .15s}
.lb-findme:hover{background:color-mix(in srgb,var(--gold) 18%,transparent)}
.lb-findme:active{transform:scale(.97)}

/* Its own layer: number cards (z-index 10 inside) stay under the sticky header. */
.lb-body{position:relative;z-index:0;min-height:400px}

/* Podium: 2nd · 1st · 3rd */
.lb-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:10px;padding:26px 12px 14px;background:radial-gradient(60% 90% at 50% 0,color-mix(in srgb,var(--gold) 9%,transparent),transparent 70%);border-bottom:1px solid var(--outline-subtle)}
.lb-podium-card{--pc:var(--gold);position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:22px 10px 12px;border-radius:12px;text-align:center;border:1px solid color-mix(in srgb,var(--pc) 35%,var(--outline-subtle));background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 13%,var(--surface)),var(--surface) 75%);animation:lb-rise .45s cubic-bezier(.2,.8,.3,1) backwards}
.lb-podium-card.is-top-1{order:2;padding-top:28px;padding-bottom:16px;box-shadow:0 10px 30px color-mix(in srgb,var(--gold) 14%,transparent)}
.lb-podium-card.is-top-2{--pc:var(--silver);order:1;animation-delay:.07s}
.lb-podium-card.is-top-3{--pc:var(--bronze);order:3;animation-delay:.14s}
.lb-podium-card.is-you{outline:2px solid color-mix(in srgb,var(--gold) 60%,transparent);outline-offset:2px}
.lb-medal{position:absolute;top:-13px;left:50%;translate:-50% 0;display:grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:var(--pc);color:#1b1608;font:800 12px/1 var(--font-ui);box-shadow:0 0 0 3px var(--surface)}
.lb-podium-card.is-top-1 .lb-medal{height:30px;min-width:30px}
.lb-medal .lb-icon{width:17px;height:17px;stroke-width:2.2}
.lb-podium-avatar{display:block;border-radius:50%;transition:transform .2s}
.lb-podium-avatar:hover{transform:scale(1.05)}
.lb-podium-avatar img{display:block;width:54px;height:54px;border-radius:50%;object-fit:cover;background:var(--surface-raised);border:2px solid var(--pc);box-shadow:0 0 0 4px color-mix(in srgb,var(--pc) 16%,transparent)}
.lb-podium-card.is-top-1 .lb-podium-avatar img{width:68px;height:68px}
.lb-podium-name{display:flex;align-items:center;justify-content:center;gap:6px;max-width:100%;min-width:0;font-size:13px}
.lb-podium-name>a{min-width:0}
.lb-podium-card .title-tag{max-width:100%}
.lb-podium-values{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:100%;min-width:0;margin-top:2px}
.lb-podium-values .leaderboard-score{width:auto;flex:none;text-align:center}
.lb-podium-values .lb-total{flex-direction:column;align-items:center;gap:0}
.lb-podium-values .lb-sub{font-size:12.5px;color:var(--prose-2)}
.lb-podium-card.is-top-1 .lb-total-value{font-size:19px}
.lb-podium-foot{display:flex;align-items:center;justify-content:center;gap:8px;min-height:24px;margin-top:auto}
.lb-podium-foot .leaderboard-hearts{width:auto;flex:none;min-width:0}

/* Rows */
.lb-row{position:relative;display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 14px;border-top:1px solid var(--outline-subtle);transition:background-color .15s;animation:lb-in .32s ease-out backwards;animation-delay:calc(var(--i,0) * 22ms)}
.lb-list>.lb-row:first-child{border-top:0}
.lb-row:hover{background:color-mix(in srgb,var(--surface-raised) 55%,transparent)}
.lb-row.is-you{box-shadow:inset 3px 0 0 var(--gold)}
.lb-row.is-you:not(.ranked-list-row){background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 11%,transparent),transparent 60%)}
.lb-row.is-found,.lb-podium-card.is-found{animation:lb-found 1.6s ease-out}
.lb-rank{display:grid;place-items:center;flex:none;min-width:30px;height:30px;padding:0 6px;border-radius:999px;background:var(--surface-raised);color:var(--prose-3);font:700 12px/1 var(--font-mono);font-variant-numeric:tabular-nums}
.lb-row.is-top-1 .lb-rank{background:var(--gold);color:#1b1608}
.lb-row.is-top-2 .lb-rank{background:var(--silver);color:#14181d}
.lb-row.is-top-3 .lb-rank{background:var(--bronze);color:#1d1107}
.lb-row.is-you .lb-rank{color:var(--gold);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 55%,transparent)}
.lb-row.is-you.is-top .lb-rank{color:#1b1608}
.lb-who{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.lb-name{gap:7px}
.lb-name img{width:26px!important;height:26px!important}
.lb-name>a{font-size:13.5px}
.lb-age{font-size:11px;line-height:1.2;color:var(--prose-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-who>.lb-age{padding-left:32px}
.lb-you{flex:none;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold);font:700 10px/1.3 var(--font-ui);letter-spacing:.05em;text-transform:uppercase}
.lb-values{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:0 0 auto;width:auto;max-width:52%;min-width:0}
.lb-sub{font-size:12px;color:var(--prose-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-total{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.lb-total-value{font:700 15px/1.3 var(--font-mono);color:var(--prose);font-variant-numeric:tabular-nums}
.lb-row .leaderboard-hearts{width:56px;flex:0 0 56px}

/* Loading, empty, more */
.lb-skel-row{display:flex;align-items:center;gap:12px;height:54px;padding:0 14px;border-top:1px solid var(--outline-subtle)}
.lb-skel-row:first-child{border-top:0}
.lb-skel-row i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--surface-raised) 0,color-mix(in srgb,var(--surface-raised) 40%,var(--outline)) 50%,var(--surface-raised) 100%) 0 0/200% 100%;animation:lb-shimmer 1.3s linear infinite}
.lb-skel-row i:nth-child(1){width:30px;height:30px;border-radius:50%}
.lb-skel-row i:nth-child(2){flex:0 1 180px}
.lb-skel-row i:nth-child(3){width:96px;height:24px;margin-left:auto}
.lb-skel-row:nth-child(2n) i:nth-child(2){flex-basis:130px}
.lb-skel-row:nth-child(3n) i:nth-child(2){flex-basis:210px}
.lb-empty{display:grid;justify-items:center;gap:12px;padding:64px 16px;color:var(--prose-3);font-size:13.5px;text-align:center}
.lb-empty>.lb-icon{width:34px;height:34px;opacity:.55}
.lb-more{display:block;margin:12px auto 16px;padding:8px 18px;border-radius:999px;border:1px solid var(--outline);background:var(--surface-raised);color:var(--prose-2);font:600 13px/1.3 var(--font-ui);cursor:pointer;transition:color .15s,border-color .15s}
.lb-more:hover:not(:disabled){color:var(--prose);border-color:var(--outline-strong)}
.lb-more:disabled{opacity:.6;cursor:default}

@keyframes lb-in{from{opacity:0;transform:translateY(6px)}}
@keyframes lb-rise{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes lb-shimmer{to{background-position:-200% 0}}
@keyframes lb-found{0%,40%{box-shadow:inset 3px 0 0 var(--gold),inset 0 0 0 2px var(--gold);background-color:color-mix(in srgb,var(--gold) 16%,transparent)}}
@media (prefers-reduced-motion:reduce){.lb-row,.lb-podium-card,.lb-skel-row i{animation:none}}

/* Tablets and phones */
@media (max-width:640px){
  .lb-head{padding:8px;gap:8px}
  .lb-tab{font-size:12px;gap:5px;padding:8px 4px}
  .lb-podium{gap:6px;padding:24px 8px 12px}
  .lb-podium-card{padding:20px 5px 10px;gap:5px}
  .lb-podium-card.is-top-1{padding-top:24px}
  .lb-podium-avatar img{width:42px;height:42px}
  .lb-podium-card.is-top-1 .lb-podium-avatar img{width:52px;height:52px}
  .lb-podium-name{font-size:12px}
  .lb-podium-card .title-tag{font-size:8px}
  .lb-podium-values .number-card{padding-left:6px!important;padding-right:6px!important}
  .lb-podium-values .number-card>span{font-size:12px;letter-spacing:-.02em}
  .lb-row{gap:9px;padding:8px 10px;min-height:50px}
  .lb-rank{min-width:26px;height:26px;font-size:11px}
  .lb-name img{width:22px!important;height:22px!important}
  .lb-name>a{font-size:12.5px}
  .lb-who>.lb-age{padding-left:28px}
  .lb-values{flex-direction:column;align-items:flex-end;gap:2px;max-width:46%}
  .lb-values .leaderboard-score{width:auto;flex:none;font-size:11px}
  .lb-values .number-card>span{font-size:13px;letter-spacing:-.02em}
  .lb-row .leaderboard-hearts{width:auto;flex:0 0 auto;min-width:30px}
}
@media (max-width:400px){
  .lb-tab{flex-direction:column;gap:3px;font-size:11px;padding:6px 2px}
  .lb-podium-card .title-tag{display:none}
}