/* 江湖排行榜（docs/features/leaderboard.md）：丙款「千江月輪」。深淺主題跟著 data-theme 走。 */
:root, [data-theme="dark"] {
  --lb-panel: #141C27; --lb-track: #0F1216; --lb-ink: #9DC0E0; --lb-on: #9DC0E0; --lb-on-ink: #0F1216;
  --lb-lit: #EEF2F6; --lb-dim: #223042; --lb-crater: #D5DDE6; --lb-ring: #5B8DB8;
  --lb-seg: #5B8DB8; --lb-seg-hot: #9DC0E0; --lb-seg-empty: #1F2834; --lb-me: #1B2533;
  --lb-gold: #E3B34C; --lb-silver: #A9B6C4; --lb-bronze: #C58A5A;
}
[data-theme="light"] {
  --lb-panel: #F2F6FB; --lb-track: #E3EAF2; --lb-ink: #2F5F8F; --lb-on: #3F6E9E; --lb-on-ink: #FFFFFF;
  --lb-lit: #FFFFFF; --lb-dim: #DCE4EE; --lb-crater: #E7EDF4; --lb-ring: #3F6E9E;
  --lb-seg: #3F6E9E; --lb-seg-hot: #2B5683; --lb-seg-empty: #DCE4EE; --lb-me: #E3EAF2;
  --lb-gold: #7E5A0C; --lb-silver: #5B6672; --lb-bronze: #8A5226;
}
@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --lb-panel: #F2F6FB; --lb-track: #E3EAF2; --lb-ink: #2F5F8F; --lb-on: #3F6E9E; --lb-on-ink: #FFFFFF;
    --lb-lit: #FFFFFF; --lb-dim: #DCE4EE; --lb-crater: #E7EDF4; --lb-ring: #3F6E9E;
    --lb-seg: #3F6E9E; --lb-seg-hot: #2B5683; --lb-seg-empty: #DCE4EE; --lb-me: #E3EAF2;
    --lb-gold: #7E5A0C; --lb-silver: #5B6672; --lb-bronze: #8A5226;
  }
}

#navRank[hidden], #mRank[hidden] { display: none; }

.lb-pop { width: min(680px, 100%); height: min(780px, calc(100dvh - 32px)); box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--lb-panel); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; outline: none; }
.lb-pop header { display: flex; align-items: center; gap: 10px; padding: 16px 18px 0; }
.lb-pop header .lb-moon { width: 20px; height: 20px; color: var(--lb-ink); flex-shrink: 0; }
.lb-pop h2 { margin: 0; flex: 1; min-width: 0; font-family: var(--serif, serif); font-size: 18px; font-weight: 700; letter-spacing: .08em; }
.lb-pop .lb-close { width: 44px; height: 44px; margin-right: -10px; padding: 0; justify-content: center; border: 0; background: transparent; color: var(--muted); }
.lb-pop .lb-close:hover { color: var(--ink); background: transparent; }

.lb-tabs-wrap { min-width: 0; margin: 12px 18px 0; background: var(--lb-track); border: 1px solid var(--line); border-radius: 999px; --hscroll-fade: var(--lb-track); }
.lb-tabs-wrap::before { border-radius: inherit; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.lb-tabs-wrap::after { border-radius: inherit; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.lb-tabs { display: flex; gap: 4px; padding: 4px; border-radius: inherit; overflow-x: auto; scroll-padding-inline: 48px; scrollbar-width: none; -ms-overflow-style: none; }
.lb-tabs::-webkit-scrollbar { display: none; }
.lb-tabs button { flex: 1 0 auto; min-width: 0; height: 40px; padding: 0 10px; justify-content: center; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); font-size: 14px; white-space: nowrap; }
.lb-tabs button[aria-selected="true"] { background: var(--lb-on); color: var(--lb-on-ink); font-weight: 700; }
.lb-tabs button:focus-visible { outline: 2px solid var(--lb-ring); outline-offset: 2px; }
.lb-sub { margin: 8px 22px 0; font-size: 12px; color: var(--muted); }

.lb-body { flex: 1; min-height: 0; overflow-y: auto; outline: none; }
.lb-body:focus-visible { box-shadow: inset 0 0 0 2px var(--lb-ring); }
.lb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; padding: 18px 30px 12px; }
.lb-podium > div { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; text-align: center; }
.lb-podium svg { display: block; }
.lb-podium .p1 svg { width: 104px; height: 104px; }
.lb-podium .p2 svg { width: 78px; height: 78px; }
.lb-podium .p3 svg { width: 70px; height: 70px; }
.lb-podium .lb-place { font-family: var(--serif, serif); font-size: 13px; }
.lb-podium .p1 .lb-place { color: var(--lb-gold); }
.lb-podium .p2 .lb-place { color: var(--lb-silver); }
.lb-podium .p3 .lb-place { color: var(--lb-bronze); }
.lb-podium .lb-name { font-size: 15px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-podium .p1 .lb-name { font-size: 17px; }
.lb-podium .me .lb-name { text-decoration: underline; text-decoration-color: var(--lb-ring); text-underline-offset: 4px; }

.lb-list { list-style: none; margin: 0; padding: 0 22px; border-top: 1px solid var(--line); }
.lb-row, .lb-me { display: grid; grid-template-columns: 36px minmax(0, 10em) minmax(0, 1fr) 128px; align-items: center; gap: 10px; }
.lb-row { height: 44px; border-bottom: 1px solid var(--lb-track); }
.lb-row.me { background: var(--lb-me); margin: 0 -22px; padding: 0 22px; }
.lb-rank { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-rank.m1, .lb-rank.m2, .lb-rank.m3 { font-weight: 700; }
.lb-rank.m1 { color: var(--lb-gold); } .lb-rank.m2 { color: var(--lb-silver); } .lb-rank.m3 { color: var(--lb-bronze); }
.lb-n { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-val { font-size: 14px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-bar { display: flex; gap: 3px; align-items: center; min-width: 0; }
.lb-bar i { flex: 1; height: 6px; border-radius: 3px; background: var(--lb-seg-empty); }
.lb-bar i.f { background: var(--lb-seg); }
.lb-bar i.h { background: var(--lb-seg-hot); box-shadow: 0 0 6px var(--lb-seg-hot); }
.lb-empty { padding: 40px 22px; text-align: center; color: var(--muted); font-size: 14px; }

.lb-me { flex-shrink: 0; height: 58px; padding: 0 22px; border-top: 1px solid var(--line-strong); background: var(--lb-me); }
.lb-me .lb-rank { font-weight: 700; color: var(--lb-ink); }
.lb-me .lb-n { font-weight: 700; }
.lb-me .lb-you { font-weight: 400; font-size: 12px; color: var(--muted); }
.lb-me .lb-bar i { height: 7px; }
.lb-me.off { display: flex; justify-content: center; color: var(--muted); font-size: 13px; }

@media (max-width: 640px) {
  .lb-pop header { padding: 14px 14px 0; }
  .lb-pop h2 { font-size: 17px; }
  .lb-tabs-wrap { margin: 10px 14px 0; border-radius: 22px; }
  .lb-tabs button { height: auto; min-height: 38px; padding: 4px 10px; font-size: 12px; line-height: 1.15; text-align: center; border-radius: 18px; }
  .lb-sub { margin: 8px 16px 0; }
  .lb-podium { gap: 6px; padding: 16px 12px 10px; }
  .lb-podium .p1 svg { width: 84px; height: 84px; }
  .lb-podium .p2 svg { width: 64px; height: 64px; }
  .lb-podium .p3 svg { width: 58px; height: 58px; }
  .lb-podium .lb-name { font-size: 14px; }
  .lb-podium .p1 .lb-name { font-size: 15px; }
  .lb-list { padding: 0 14px; }
  .lb-row.me { margin: 0 -14px; padding: 0 14px; }
  .lb-row, .lb-me { grid-template-columns: 26px minmax(0, 1fr) 64px 104px; gap: 8px; }
  .lb-bar { gap: 2px; }
  .lb-row { height: auto; min-height: 44px; padding: 4px 0; }
  .lb-val { white-space: normal; line-height: 1.25; overflow-wrap: anywhere; }
  .lb-me { padding: 0 14px; }
}