.leaderboard {
  display: flex; flex-direction: column; min-width: 0;
  max-width: 640px; margin-inline: auto; width: 100%;
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  padding: var(--space-5) var(--space-5) var(--space-6);
}
.lb-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-bottom: var(--space-4); }
.lb-head__name { font-family: var(--soul-font-display); font-size: var(--text-lg); font-weight: var(--soul-display-weight); color: var(--text-primary); }
.lb-head__sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); margin-top: 2px; }
.lb-head__spacer { flex: 1; }
.lb-when {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-secondary);
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
}
.lb-when .material-symbols-rounded { font-size: 13px; }

.lb-row {
  display: grid;
  grid-template-columns: 28px 36px minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  transition: background var(--duration-fast) var(--ease-out);
}
.lb-row:hover { background: var(--surface-hover); }
.lb-row .avatar { width: 36px; height: 36px; }
.lb-rank {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums; color: var(--text-tertiary); text-align: center;
}
.lb-row--top .lb-rank { color: var(--accent-primary); }
.lb-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-context { margin-top: 1px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-delta {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums; color: var(--text-tertiary);
}
.lb-delta .material-symbols-rounded { font-size: 14px; }
.lb-delta--up { color: var(--status-success-text); }
.lb-score {
  font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums; color: var(--text-primary); text-align: right;
}
.lb-score small { display: block; font-family: var(--font-mono); font-size: 9px; font-weight: var(--weight-medium); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); }
.lb-you {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 9px; font-weight: var(--weight-bold);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  border-radius: var(--radius-full);
  padding: 1px var(--space-2);
  margin-left: var(--space-2);
}
.lb-row--me { background: var(--accent-subtle); }
.lb-row--me-pinned {
  position: sticky; bottom: var(--space-3);
  background: var(--surface-base);
  border: 1px solid var(--accent-muted);
  box-shadow: var(--shadow-md);
}

.lb-podium { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: var(--space-3); padding: var(--space-5) 0 var(--space-6); }
.lb-podium__spot { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0; }
.lb-podium__spot--1 { order: 2; }
.lb-podium__spot--2 { order: 1; }
.lb-podium__spot--3 { order: 3; }
.lb-podium__spot .avatar { width: 48px; height: 48px; }
.lb-podium__spot--1 .avatar { width: 64px; height: 64px; }
.lb-podium__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lb-podium__score { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); font-variant-numeric: tabular-nums; color: var(--text-primary); line-height: 1; }
.lb-podium__base {
  width: 100%;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--surface-sunken);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: var(--weight-extrabold);
  color: var(--text-disabled);
  font-size: var(--text-xl);
}
.lb-podium__spot--1 .lb-podium__base { height: 84px; background: var(--accent-subtle); color: var(--accent-primary); }
.lb-podium__spot--2 .lb-podium__base { height: 60px; }
.lb-podium__spot--3 .lb-podium__base { height: 44px; }

.lb-row--pulse { grid-template-columns: 36px minmax(0, 1fr) auto; }
.lb-bar { margin-top: var(--space-1-5); height: 8px; border-radius: var(--radius-full); background: var(--surface-sunken); position: relative; overflow: hidden; }
.lb-bar__fill { position: absolute; inset: 0 auto 0 0; width: var(--pct, 50%); border-radius: var(--radius-full); background: linear-gradient(90deg, var(--accent-primary), var(--accent-hover)); }

.lb-tier { border-radius: var(--radius-xl); padding-bottom: var(--space-1); margin-bottom: var(--space-2); }
.lb-tier__label {
  display: flex; align-items: center; gap: var(--space-1-5);
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.lb-tier__label .material-symbols-rounded { font-size: 14px; }
.lb-tier--promote { background: color-mix(in srgb, var(--status-success) 7%, transparent); }
.lb-tier--promote .lb-tier__label { color: var(--status-success-text); }
.lb-tier--demote { background: color-mix(in srgb, var(--status-warning) 8%, transparent); }
.lb-tier--demote .lb-tier__label { color: var(--status-warning-text); }
.lb-tier .lb-row:hover { background: color-mix(in srgb, var(--surface-base) 55%, transparent); }

.lb-streaks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.lb-streak {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-5) var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border-radius: var(--radius-xl);
  text-align: center;
}
.lb-streak .avatar { width: 40px; height: 40px; }
.lb-streak__days {
  display: inline-flex; align-items: baseline; gap: var(--space-1);
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-extrabold);
  font-variant-numeric: tabular-nums; color: var(--text-primary); line-height: 1;
}
.lb-streak__days .material-symbols-rounded { font-size: 20px; color: var(--accent-primary); align-self: center; }
.lb-week { display: flex; gap: 4px; }
.lb-week__d { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--border-default); }
.lb-week__d--on { background: var(--accent-primary); }

.lb-spotlight { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
.lb-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  min-width: 0;
}
.lb-card__eyebrow {
  display: flex; align-items: center; gap: var(--space-1-5);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-primary);
}
.lb-card__eyebrow .material-symbols-rounded { font-size: 14px; }
.lb-card__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-primary); line-height: 1.2; }
.lb-card__stat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); }
.lb-card__blurb { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); }

.award-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.award-chip {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  padding: 2px var(--space-3) 2px 2px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-secondary);
}
.award-chip__coin {
  width: 24px; height: 24px; border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: var(--brand-600); color: var(--text-on-accent);
}
.award-chip__coin--2 { background: var(--brand-400); }
.award-chip__coin--3 { background: var(--brand-200); color: var(--brand-800); }
.award-chip__coin .material-symbols-rounded { font-size: 14px; }

.lb-band {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  min-width: 0;
}
.lb-band .avatar-group .avatar { width: 24px; height: 24px; }
.lb-band__text { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-band__text strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.lb-band .post-action { margin-left: auto; flex: none; }

.lb-zone {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface-base);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.lb-zone .lb-row { padding-block: var(--space-1-5); }
.lb-zone__door { display: flex; justify-content: center; padding-top: var(--space-2); }