/* Bridge layer: reconciles design-system patterns with the legacy
   leaderboards.css that migrated pages still share with unmigrated ones.

   Migrated pages load this AFTER leaderboards.css. Every selector here is
   deliberately more specific than the leaderboards.css rule it overrides;
   that extra specificity is the point, not an accident. When a page stops
   importing leaderboards.css entirely, its rules here can be deleted.

   Requires ds_tokens.css and ds_patterns.css. */

/* --- legacy panels on a design-system page --------------------------------
   Pages that opt in with `ps-page` but still render `.leaderboards-panel`
   sections (the replay analysis page, the player profile, the parts of the
   stats screens that keep a JS-driven widget) would otherwise show two panel
   languages side by side: leaderboards.css uses a 1.4rem radius over a
   blue-tinted gradient, the design system an 8px radius over a warm one.

   Harmonising the surface here is what makes a partially migrated page read
   as one page. It is deliberately only the surface -- padding, layout and
   every panel variant's own rules are untouched, and any variant that sets
   its own background at equal or higher specificity still wins.

   (0,2,0) beats leaderboards.css's (0,1,0) even though it loads later. */

.ps-page .leaderboards-panel {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 231, 158, 0.05), rgba(0, 0, 0, 0.1)),
    var(--surface-panel-strong);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 240, 200, 0.08);
}

/* The section heads inside those panels carry the eyebrow + title pairing the
   design system expresses as a band; align their type so the two read alike. */
.ps-page .leaderboards-kicker {
  color: var(--gold-200);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ps-page .leaderboards-section-head h2,
.ps-page .recent-games-results-heading h2 {
  font-family: var(--font-title);
  letter-spacing: 0.05em;
}

/* Link defaults from ds_patterns must not make gold primary buttons gold-on-gold. */
.ps-page a.leaderboards-primary-button,
.ps-page a.leaderboards-primary-button:hover,
.ps-page a.leaderboards-primary-button:focus-visible {
  color: #29160a;
}