/* ============================================================
   leaderboard.css, gold/silver/bronze podium + ranked rows.
   Used by the Rankings page (full board) and the homepage teaser
   (medal accents only). Builds on site.css tokens.
   ============================================================ */
:root{
  --gold-1:#ffe487; --gold-2:#ffc23d; --gold-3:#e89412;
  --silver-1:#eef3f9; --silver-2:#c2cdda; --silver-3:#8b97a7;
  --bronze-1:#ffcf9e; --bronze-2:#f0944a; --bronze-3:#bf6a2c;
}

/* ============================================================
   PODIUM (top 3)
   ============================================================ */
.podium{
  display:grid; grid-template-columns:1fr 1.18fr 1fr; gap:16px; align-items:end;
  margin-bottom:18px;
}
.pod{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:20px; padding:26px 20px 22px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  box-shadow:inset 0 0 0 1px var(--line-2), 0 30px 70px -44px #000;
  display:grid; justify-items:center; gap:11px; text-align:center;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.pod:hover{ transform:translateY(-5px); }
/* static metallic outline per place */
.pod::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; z-index:2; pointer-events:none;
  background:var(--rim,var(--line-2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.pod--1{ --rim:linear-gradient(150deg,#ffe487,#e89412 36%,#ffd54a 62%,#b9760a); }
.pod--1::after{ padding:2px; }
.pod--2{ --rim:linear-gradient(150deg,#ffffff,#9aa7b8 42%,#eef3f9 66%,#76838f); }
.pod--3{ --rim:linear-gradient(150deg,#ffd0a0,#bf6a2c 42%,#f0944a 66%,#9c5421); }
.pod__place{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.pod__ava{ position:relative; width:74px; height:74px; border-radius:20px; display:grid; place-items:center; }
.pod__ava .img{ width:62px; height:62px; border-radius:15px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.pod__ring{ position:absolute; inset:-4px; border-radius:24px; padding:3px; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.pod__medal{ position:absolute; bottom:-8px; left:50%; transform:translateX(-50%);
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-weight:700; font-size:12px; color:#1a1206;
  box-shadow:0 4px 10px -3px #000, inset 0 0 0 1px rgba(255,255,255,.3); z-index:3; }
.pod__name{ font-weight:700; font-size:17px; letter-spacing:-.01em; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pod__ret{ font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums; }
.pod__sub{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }

/* gold (1st) */
.pod--1{ padding-top:48px; }
.pod--1 .pod__ring{ background:conic-gradient(from 0deg,var(--gold-1),var(--gold-3),var(--gold-2),var(--gold-1)); }
.pod--1 .pod__medal{ background:linear-gradient(180deg,var(--gold-1),var(--gold-3)); }
.pod--1 .pod__name{ color:#fff; }
.pod--1 .pod__ret{ font-size:30px; color:var(--gold-1); text-shadow:0 0 22px color-mix(in oklab,var(--gold-2) 60%,transparent); }
.pod--1{
  background:linear-gradient(180deg,color-mix(in oklab,var(--gold-3) 15%,var(--panel-2)),var(--panel));
  box-shadow:0 0 42px -16px color-mix(in oklab,var(--gold-2) 75%,transparent), 0 34px 80px -44px #000;
}
.pod--1 .pod__ava{ width:88px; height:88px; }
.pod--1 .pod__ava .img{ width:74px; height:74px; border-radius:18px; }
/* crown */
.crown{ position:absolute; top:15px; left:50%; transform:translateX(-50%); width:42px; height:27px; z-index:4; filter:drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.crown svg{ width:100%; height:100%; }
/* gold accent under the winner's avatar */
.pod--1 .pod__ava{ filter:drop-shadow(0 0 16px color-mix(in oklab,var(--gold-2) 55%,transparent)); }

/* silver (2nd) */
.pod--2 .pod__ring{ background:conic-gradient(from 0deg,var(--silver-1),var(--silver-3),var(--silver-2),var(--silver-1)); }
.pod--2 .pod__medal{ background:linear-gradient(180deg,var(--silver-1),var(--silver-3)); color:#1a2230; }
.pod--2 .pod__ret{ font-size:23px; color:var(--silver-1); }
.pod--2{ box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--silver-2) 30%,transparent), 0 0 30px -20px color-mix(in oklab,var(--silver-1) 60%,transparent), 0 30px 70px -44px #000; }

/* bronze (3rd) */
.pod--3 .pod__ring{ background:conic-gradient(from 0deg,var(--bronze-1),var(--bronze-3),var(--bronze-2),var(--bronze-1)); }
.pod--3 .pod__medal{ background:linear-gradient(180deg,var(--bronze-1),var(--bronze-3)); color:#241307; }
.pod--3 .pod__ret{ font-size:23px; color:var(--bronze-1); }
.pod--3{ box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--bronze-2) 32%,transparent), 0 0 30px -20px color-mix(in oklab,var(--bronze-2) 55%,transparent), 0 30px 70px -44px #000; }

/* ============================================================
   RANKED ROWS (4+)
   ============================================================ */
.rk-list{ display:grid; gap:8px; }
.rk-row{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:16px;
  padding:14px 18px; border-radius:13px;
  background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .2s, box-shadow .3s, background .3s;
}
.rk-row:hover{ transform:translateX(3px); box-shadow:inset 0 0 0 1px var(--line-2), 0 0 0 1px color-mix(in oklab,var(--g-glow) 22%,transparent); }
.rk-row__rank{ font-family:var(--mono); font-weight:700; font-size:16px; color:var(--faint); font-variant-numeric:tabular-nums; text-align:center; }
.rk-row__who{ display:flex; align-items:center; gap:13px; min-width:0; }
.rk-row__ava{ width:36px; height:36px; border-radius:11px; flex:none; box-shadow:inset 0 0 0 1px var(--line-2); }
.rk-row__name{ font-weight:600; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rk-row__delta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--faint); margin-top:2px; }
.rk-row__delta .up{ color:var(--g-glow); } .rk-row__delta .dn{ color:var(--r-lift); }
.rk-row__ret{ font-family:var(--mono); font-weight:700; font-size:16px; font-variant-numeric:tabular-nums; color:var(--g-glow); white-space:nowrap; }
.rk-row__ret.neg{ color:var(--r-lift); }
.rk-row__bar{ grid-column:1 / -1; height:3px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:4px; }
.rk-row__bar > i{ display:block; height:100%; border-radius:3px; width:0; transition:width 1.1s cubic-bezier(.2,.7,.2,1); background:linear-gradient(90deg,var(--g-calm),var(--g-glow)); }
.rk-row__bar > i.neg{ background:linear-gradient(90deg,var(--r-calm),var(--r-lift)); }

/* you */
.rk-row.me{ background:linear-gradient(90deg,color-mix(in oklab,var(--g-calm) 12%,var(--panel)),var(--panel)); box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--g-glow) 38%,transparent), 0 0 26px -12px color-mix(in oklab,var(--g-glow) 60%,transparent); }
.rk-row.me .rk-row__name::after{ content:"you"; font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:#04240f; background:var(--g-glow); margin-left:9px; padding:2px 7px; border-radius:6px; vertical-align:middle; }

/* ============================================================
   HOMEPAGE TEASER, medal accents on existing .lb__ rows
   ============================================================ */
.leaderboard .lb__row:nth-child(1) .lb__rank{ color:var(--gold-2); }
.leaderboard .lb__row:nth-child(2) .lb__rank{ color:var(--silver-1); }
.leaderboard .lb__row:nth-child(3) .lb__rank{ color:var(--bronze-2); }
.leaderboard .lb__row:nth-child(1){ background:linear-gradient(90deg,color-mix(in oklab,var(--gold-3) 12%,transparent),transparent 70%); box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold-2) 26%,transparent); }
.leaderboard .lb__row:nth-child(1) .lb__ava{ box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--gold-2) 70%,transparent), 0 0 14px -2px color-mix(in oklab,var(--gold-2) 60%,transparent); }
.leaderboard .lb__row:nth-child(2) .lb__ava{ box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--silver-2) 70%,transparent); }
.leaderboard .lb__row:nth-child(3) .lb__ava{ box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--bronze-2) 70%,transparent); }
/* nudge the crown glyph down so its ink center sits level with the "1" digit;
   the chess-king glyph rides high in its em box, so `middle` floated it above. */
.leaderboard .lb__row:nth-child(1) .lb__rank::after{ content:"\2654"; margin-left:5px; font-size:14px; line-height:1; vertical-align:-0.05em; color:var(--gold-1); }
.leaderboard .lb__row:nth-child(1) .lb__bar > i{ background:linear-gradient(90deg,var(--gold-3),var(--gold-1)); }

@media (max-width:560px){
  .podium{ grid-template-columns:1fr; }
  .pod--1{ order:-1; padding-top:42px; }
}