/* leaderboard — page styles (layout only, plus the medal art). Tokens and shared components only
   (see docs/DESIGN.md). */
@layer pages {
  .lb-page .table-wrap { overflow-x: auto; }
  .lb-page .place-cell { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; }
  .lb-page .only-phone { display: none; }
  .lb-mine { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
  .lb-mine .chip img { width: 20px; height: 20px; }

  /* Medals for the first three: small struck-metal discs (game art, the same in both themes). */
  .lb-medal { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
    font: var(--fw-bold) var(--fs-md) / 1 var(--font-display); font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 3px rgba(0, 0, 0, .22), 0 0 0 1px rgba(0, 0, 0, .2), 0 2px 6px rgba(0, 0, 0, .28); }
  /* Each metal once: highlight, light, mid, shadow and the ink struck on it. The podium step of
     the same place reuses it. */
  .lb-medal.gold, .lb-step.step-1 { --metal-hi: #fff7cf; --metal-1: #ffd84a; --metal-2: #dfa60e; --metal-lo: #a06e00; --metal-ink: #4a3300; }
  .lb-medal.silver, .lb-step.step-2 { --metal-hi: #ffffff; --metal-1: #e4e9ef; --metal-2: #b3bdca; --metal-lo: #7a8799; --metal-ink: #27303b; }
  .lb-medal.bronze, .lb-step.step-3 { --metal-hi: #ffe3c8; --metal-1: #eaa66d; --metal-2: #bf733a; --metal-lo: #83451b; --metal-ink: #3a1e08; }
  .lb-medal.gold, .lb-medal.silver, .lb-medal.bronze { color: var(--metal-ink);
    background: radial-gradient(circle at 32% 26%, var(--metal-hi) 0 9%, var(--metal-1) 34%, var(--metal-2) 66%, var(--metal-lo) 100%); }
  .lb-place { display: inline-grid; place-items: center; width: 30px; font: var(--fw-semibold) var(--fs-md) / 1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text-3); }

  /* The podium: second, first, third. */
  .lb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); align-items: end; }
  .lb-step { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-4) var(--sp-5); text-align: center; overflow: hidden; }
  .lb-step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; }
  .lb-step.step-1 { padding-top: var(--sp-10); padding-bottom: var(--sp-6); }
  .lb-step.step-1::before, .lb-step.step-2::before, .lb-step.step-3::before { background: linear-gradient(90deg, var(--metal-lo), var(--metal-1), var(--metal-lo)); }
  .lb-step .lb-medal { width: 44px; height: 44px; margin-bottom: var(--sp-1); font-size: var(--fs-h2); }
  .lb-step.step-1 .lb-medal { width: 52px; height: 52px; font-size: var(--fs-stat); }
  .lb-step .flag.big { margin: var(--sp-1) 0; }
  .lb-step-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--fw-semibold) var(--fs-h3) / 1.3 var(--font-ui); }
  .lb-step-country { max-width: 100%; color: var(--text-2); font-size: var(--fs-sm); }
  .lb-step-metric { font: var(--fw-semibold) var(--fs-h2) / 1.2 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .01em; }

  /* The table. Names read like the shared text links; your own row carries the brand edge. */
  .lb-table th.lb-rank, .lb-table td.lb-rank { width: 76px; }
  .lb-name { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .lb-page a.who { font-weight: var(--fw-semibold); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px;
    transition: text-decoration-color var(--t-fast), color var(--t-fast); }
  .lb-page a.who:hover { color: var(--text); text-decoration-color: var(--brand); }
  .lb-page .lb-step-name.who { text-decoration: none; }
  .lb-metric { font-weight: var(--fw-semibold); }
  .lb-table tr.me { background: color-mix(in srgb, var(--brand-soft) 70%, transparent); }
  .lb-table tr.me td:first-child { box-shadow: inset 3px 0 0 var(--brand); }

  @media (max-width: 560px) {
    .lb-page > .tabs .tab { padding: 0 var(--sp-3); }
    .lb-page > .tabs .tab img, .lb-page > .tabs .tab .icon { display: none; }
    .lb-page .col-country { display: none; }
    .lb-mine { align-items: flex-start; }
    .lb-page .only-phone { display: inline-flex; gap: var(--sp-2); }
    .lb-page .only-phone .flag { width: 18px; height: 12px; }
    .lb-table th, .lb-table td { padding-left: var(--sp-2); padding-right: var(--sp-2); }
    .lb-table th.lb-rank, .lb-table td.lb-rank { width: 44px; padding-left: var(--sp-1); }
    .lb-table td:last-child, .lb-table th:last-child { padding-right: 0; }
    .lb-podium { gap: var(--sp-2); }
    .lb-step { padding: var(--sp-4) var(--sp-2); gap: var(--sp-1); }
    .lb-step.step-1 { padding-top: var(--sp-6); }
    .lb-step-name { font-size: var(--fs-ui); }
    .lb-step-country { display: none; }
    .lb-step-metric { font-size: var(--fs-md); }
    .lb-step .flag.big { width: 48px; height: 32px; }
  }
}