/* A club standings sheet: quiet numbered ranks, clear figures and useful controls. */
.leaderboard-page {
  --lb-surface: var(--ps-bg-surface, #fff);
  --lb-soft: var(--ps-bg-elevated, #f0f3ed);
  --lb-ink: var(--ps-text-primary, #223b30);
  --lb-muted: var(--ps-text-secondary, #67736a);
  --lb-line: var(--ps-border, #e3e7dd);
  --lb-accent: #38674d;
  --lb-gold: #92743a;
  --lb-current: #edf4e9;
  --lb-avatar: #edf0e5;
  min-height: 100svh;
  width: 100%;
  padding: 32px 24px max(40px, env(safe-area-inset-bottom));
  background: var(--ps-bg-base, #f5f5f0);
  color: var(--lb-ink);
}
.theme-dark .leaderboard-page {
  --lb-accent: #b2cdaa;
  --lb-gold: #d2bb80;
  --lb-current: #1c3028;
  --lb-avatar: #27372e;
}
.leaderboard-page *, .leaderboard-page *::before, .leaderboard-page *::after { box-sizing: border-box; }
.leaderboard-page [hidden] { display: none !important; }
.leaderboard-page :is(h1, h2, p) { margin: 0; }
.leaderboard-page button, .leaderboard-page select { font: inherit; }
.leaderboard-page button { cursor: pointer; }
.leaderboard-page :is(a, button, select) { -webkit-tap-highlight-color: transparent; }
.leaderboard-page :is(a, button, select):focus-visible { outline: 2px solid var(--lb-gold); outline-offset: 4px; }
.leaderboard-page [data-icon] { display: inline-flex; flex: none; }
.leaderboard-page .ps-icon { width: 18px; height: 18px; flex: none; }
.leaderboard-content { width: min(100%, 960px); margin-inline: auto; }
.leaderboard-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #2d5142;
  border-radius: 24px;
  background: #1c4034;
  color: #f5f2e7;
}
.theme-dark .leaderboard-header { background: #1a332b; border-color: #304b3e; }
.leaderboard-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -100px;
  top: -170px;
  width: 390px;
  height: 390px;
  border: 1px solid #d8bf7814;
  border-radius: 50%;
  box-shadow: 0 0 0 34px #d8bf7805, 0 0 0 68px #d8bf7804;
  pointer-events: none;
}
.leaderboard-utility { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 28px 0; }
.leaderboard-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: #e1e8d8;
  font-size: 12px;
  text-decoration: none;
}
.leaderboard-back .ps-icon { width: 15px; height: 15px; }
.leaderboard-back:hover { color: #fff; }
.leaderboard-filter-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #e4ecd62e;
  border-radius: 10px;
  background: #ffffff08;
  color: #eff1e5;
  font-size: 12px !important;
  transition: background-color 160ms;
}
.leaderboard-filter-toggle:hover, .leaderboard-filter-toggle.is-active { background: #ffffff16; border-color: #d1ba7b77; }
.leaderboard-filter-count {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding-inline: 4px;
  border-radius: 5px;
  background: #d9c184;
  color: #203e2f;
  font-size: 10px;
  font-weight: 700;
}
.leaderboard-heading { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 18px 28px 0; }
.leaderboard-title { min-width: 0; }
.leaderboard-eyebrow { color: #d5c18d; font-size: calc(9px * var(--ps-font-scale, 1)); font-weight: 550; letter-spacing: .15em; line-height: 1.5; }
.leaderboard-title h1 {
  margin-top: 7px;
  color: #f5f2e7;
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(clamp(34px, 4.4vw, 52px) * var(--ps-font-scale, 1));
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.055em;
  text-transform: none;
}
.leaderboard-title h1 > span { color: #d6be7d; }
.leaderboard-page .leaderboard-summary {
  flex: none;
  max-width: 100%;
  margin-bottom: 4px;
  color: #d5dfcc;
  font-size: calc(11px * var(--ps-font-scale, 1));
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}
.leaderboard-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 24px 22px 20px;
  padding: 5px;
  border: 1px solid #dce8d51a;
  border-radius: 14px;
  background: #0c251d4d;
}
.leaderboard-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 10px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #c8d6c3;
  font-size: calc(12px * var(--ps-font-scale, 1));
  font-weight: 550;
  line-height: 1.2;
  transition: background-color 160ms, color 160ms;
}
.leaderboard-tabs .ps-icon { width: 16px; height: 16px; }
.leaderboard-tabs button:hover { background: #f0f5e812; color: #fff; }
.leaderboard-tabs button[aria-selected="true"] { background: #f1efdf; color: #214b37; box-shadow: 0 2px 6px #071e1a24; }
.leaderboard-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 20px 28px 0;
  padding: 16px;
  border: 1px solid #e3ead323;
  border-radius: 13px;
  background: #ffffff05;
}
.leaderboard-filters > div { min-width: 0; }
.leaderboard-filters-header { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.leaderboard-filters-header strong { color: #e5ebdb; font-size: 12px; font-weight: 550; }
.leaderboard-clear { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--lb-line); border-radius: 9px; background: var(--lb-soft); color: var(--lb-accent); font-size: 12px !important; font-weight: 550; text-decoration: none; }
.leaderboard-clear .ps-icon { width: 14px; height: 14px; }
.leaderboard-filters-header .leaderboard-clear { padding: 0; min-height: 32px; border: 0; background: transparent; color: #d9c284; }
.leaderboard-filters label { display: block; margin-bottom: 6px; color: #c2d0bb; font-size: 11px; line-height: 1.4; }
.leaderboard-filters select { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: 10px 30px 10px 11px; border: 1px solid var(--lb-line); border-radius: 8px; background: var(--lb-surface); color: var(--lb-ink); font-size: 14px; text-overflow: ellipsis; cursor: pointer; }
.leaderboard-board { margin-top: 18px; overflow: hidden; border: 1px solid var(--lb-line); border-radius: 20px; background: var(--lb-surface); box-shadow: 0 8px 24px #14332104; }
.leaderboard-board-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; padding: 24px 26px 20px; }
.leaderboard-board-heading h2 { flex: 1 0 auto; max-width: 100%; color: var(--lb-ink); font-family: Georgia, "Times New Roman", serif; font-size: calc(22px * var(--ps-font-scale, 1)); font-weight: 400; letter-spacing: -.025em; line-height: 1.25; text-transform: none; }
.leaderboard-scope { min-width: 0; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lb-muted); font-size: 11px; line-height: 1.5; }
.leaderboard-columns { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 26px; border-block: 1px solid var(--lb-line); background: color-mix(in srgb, var(--lb-soft) 60%, var(--lb-surface)); color: var(--lb-muted); font-size: 9px; font-weight: 550; line-height: 1.5; letter-spacing: .11em; text-transform: uppercase; }
.leaderboard-list { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 18px; }
.leaderboard-row {
  position: relative;
  display: grid;
  grid-template-columns: 42px 44px minmax(0, 1fr) minmax(80px, auto);
  align-items: center;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
  min-height: 82px;
  padding: 15px 8px;
  border-bottom: 1px solid var(--lb-line);
  color: var(--lb-ink);
  text-decoration: none;
  transition: background-color 160ms;
}
.leaderboard-row:last-child { border-bottom: 0; }
.leaderboard-row:hover { background: var(--lb-soft); }
.leaderboard-rank { display: block; color: var(--lb-muted); font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 400; line-height: 1.2; font-variant-numeric: tabular-nums; text-align: center; letter-spacing: -.04em; }
.leaderboard-row:is([data-rank="1"], [data-rank="2"], [data-rank="3"]) .leaderboard-rank { color: var(--lb-gold); }
.leaderboard-row[data-rank="1"] { background: color-mix(in srgb, var(--lb-gold) 5%, var(--lb-surface)); }
.leaderboard-row[data-rank="null"] .leaderboard-rank { font-family: inherit; font-size: 10px; line-height: 1.4; letter-spacing: .02em; }
.leaderboard-avatar { display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--lb-accent) 15%, var(--lb-line)); border-radius: 50%; background: var(--lb-avatar); color: var(--lb-accent); font-family: Georgia, "Times New Roman", serif; font-size: 16px; font-weight: 400; letter-spacing: -.03em; }
.leaderboard-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.leaderboard-player { min-width: 0; }
.leaderboard-player strong { display: flex; align-items: center; gap: 8px; min-width: 0; color: inherit; font-size: calc(14px * var(--ps-font-scale, 1)); font-weight: 550; line-height: 1.4; }
.leaderboard-player [data-name] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-player small { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lb-muted); font-size: calc(11px * var(--ps-font-scale, 1)); line-height: 1.4; }
.leaderboard-player .leaderboard-you { flex: none; padding: 2px 5px; border: 1px solid color-mix(in srgb, var(--lb-accent) 25%, transparent); border-radius: 4px; color: var(--lb-accent); font-size: 8px; font-weight: 600; letter-spacing: .05em; line-height: 1.4; text-transform: uppercase; }
.leaderboard-row.is-current { background: var(--lb-current); box-shadow: inset 3px 0 var(--lb-accent); }
.leaderboard-row.is-current .leaderboard-rank { color: var(--lb-accent); }
.leaderboard-value { min-width: 0; text-align: right; }
.leaderboard-value strong { display: block; color: var(--lb-accent); font-size: calc(23px * var(--ps-font-scale, 1)); font-weight: 550; font-variant-numeric: tabular-nums; line-height: 1.15; letter-spacing: -.04em; overflow-wrap: anywhere; }
.leaderboard-value small { display: block; margin-top: 3px; color: var(--lb-muted); font-size: 9px; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; }
.leaderboard-value.coins strong { color: var(--lb-gold); }
.leaderboard-value.no-value strong { max-width: 104px; margin-left: auto; color: var(--lb-muted); font-size: calc(11px * var(--ps-font-scale, 1)); font-weight: 400; line-height: 1.4; letter-spacing: 0; }
.leaderboard-footer { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 22px 24px; border-top: 1px solid var(--lb-line); background: var(--lb-surface); color: var(--lb-muted); font-size: 10px; line-height: 1.5; text-align: center; }
.leaderboard-footer-line { flex: 0 1 32px; height: 1px; background: var(--lb-line); }
.leaderboard-loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 190px; padding: 24px; color: var(--lb-muted); font-size: 13px; }
.leaderboard-spinner { flex: none; width: 23px; height: 23px; border: 2px solid var(--lb-line); border-top-color: var(--lb-accent); border-radius: 50%; animation: leaderboard-spin .9s linear infinite; }
.leaderboard-empty, .leaderboard-load-error { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 44px 24px; color: var(--lb-muted); font-size: 13px; line-height: 1.65; text-align: center; }
.leaderboard-state-mark { display: grid !important; place-items: center; width: 48px; height: 48px; margin-bottom: 4px; border: 1px solid var(--lb-line); border-radius: 50%; background: var(--lb-soft); color: var(--lb-accent); }
.leaderboard-state-mark .ps-icon { width: 21px; height: 21px; }
.leaderboard-empty h2 { color: var(--lb-ink); font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 400; letter-spacing: -.03em; }
.leaderboard-empty p, .leaderboard-load-error p { max-width: 38ch; }
.leaderboard-count-error { flex-direction: row; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; padding: 16px 26px; border-bottom: 1px solid var(--lb-line); background: var(--lb-soft); text-align: left; }
.leaderboard-count-error p { flex: 1 1 240px; max-width: none; }
@keyframes leaderboard-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  .leaderboard-page { padding: 16px 12px max(28px, env(safe-area-inset-bottom)); }
  .leaderboard-header { border-radius: 19px; }
  .leaderboard-utility { padding: 10px 18px 0; }
  .leaderboard-filter-toggle { min-height: 44px; }
  .leaderboard-heading { gap: 10px; padding: 12px 18px 0; }
  .leaderboard-title h1 { font-size: calc(36px * var(--ps-font-scale, 1)); }
  .leaderboard-eyebrow { font-size: calc(8px * var(--ps-font-scale, 1)); letter-spacing: .12em; }
  .leaderboard-page .leaderboard-summary { margin: 0; font-size: 11px; }
  .leaderboard-tabs { margin: 16px 12px 14px; }
  .leaderboard-tabs button { flex-direction: column; gap: 6px; min-height: 54px; padding: 8px 2px; font-size: calc(11px * var(--ps-font-scale, 1)); }
  .leaderboard-tabs .ps-icon { width: 15px; height: 15px; }
  .leaderboard-filters { margin: 14px 18px 0; padding: 12px; gap: 12px; grid-template-columns: minmax(0, 1fr); }
  .leaderboard-filters select { font-size: 16px; }
  .leaderboard-board { margin-top: 14px; border-radius: 17px; }
  .leaderboard-board-heading { padding: 18px 18px 16px; }
  .leaderboard-board-heading h2 { font-size: calc(20px * var(--ps-font-scale, 1)); }
  .leaderboard-scope { max-width: 100%; font-size: 10px; }
  .leaderboard-columns { padding-inline: 18px; }
  .leaderboard-list { padding-inline: 10px; }
  .leaderboard-row { grid-template-columns: 30px 38px minmax(0, 1fr) 70px; gap: 9px; min-height: 76px; padding: 14px 6px; }
  .leaderboard-rank { font-size: 21px; }
  .leaderboard-avatar { width: 38px; height: 38px; font-size: 14px; }
  .leaderboard-player strong { gap: 5px; font-size: calc(12px * var(--ps-font-scale, 1)); }
  .leaderboard-player small { font-size: 10px; }
  .leaderboard-value strong { font-size: calc(21px * var(--ps-font-scale, 1)); }
  .leaderboard-value small { font-size: 8px; }
  .leaderboard-value.no-value strong { max-width: 100%; font-size: calc(10px * var(--ps-font-scale, 1)); }
  .leaderboard-footer { padding: 20px 14px; gap: 8px; font-size: 9px; }
}
@media (max-width: 360px) {
  .leaderboard-title h1 { font-size: calc(32px * var(--ps-font-scale, 1)); }
  .leaderboard-row { grid-template-columns: 28px 32px minmax(0, 1fr) 62px; gap: 7px; padding-inline: 4px; }
  .leaderboard-avatar { width: 32px; height: 32px; font-size: 12px; }
  .leaderboard-rank { font-size: 19px; }
  .leaderboard-player strong { font-size: calc(11px * var(--ps-font-scale, 1)); }
  .leaderboard-player .leaderboard-you { padding-inline: 3px; font-size: 7px; }
  .leaderboard-value strong { font-size: calc(19px * var(--ps-font-scale, 1)); }
}
@media (prefers-reduced-motion: reduce) {
  .leaderboard-page :is(a, button) { transition: none; }
  .leaderboard-spinner { animation: none; }
}