/* 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. */

/* --- stats subnav rendered as hero tabs ---------------------------------
   partials/stats_nav.html emits `.leaderboards-subnav` and takes an opt-in
   `nav_variant="ps-phero-rail"`. The links carry no per-link class, so the
   `.ps-phero-tab` appearance is applied by descent. `.leaderboards-subnav a`
   is (0,1,1) and loads later, so these selectors are (0,2,1) to win. */

.leaderboards-subnav.ps-phero-rail {
  /* Pages fully migrated off leaderboards.css get no base rule for the nav,
     so the layout properties are declared here rather than inherited. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  z-index: 1;
  gap: 0.35rem;
  margin: 0;
  overflow-x: visible;
  border: 0;
  border-top: 2px solid rgba(213, 177, 101, 0.4);
  border-radius: 0;
  background: none;
}

/* `.leaderboards-page .leaderboards-subnav a` is the same specificity as this
   selector, so which rule wins per property depends only on which properties
   each one declares. That legacy rule sets `display: grid`, `place-items` and
   `min-height: 3rem`; leaving them undeclared here made the rail 48px tall on
   every page that loads leaderboards.css and 34px on Stats Overview, which
   does not. The DS rule therefore states the tab's whole box rather than
   inheriting the parts the legacy rule happens to own. */
.leaderboards-subnav.ps-phero-rail > a {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0.5rem 0.95rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* The reference gives the tabs a 44px touch target below 640px. */
@media (max-width: 640px) {
  .leaderboards-subnav.ps-phero-rail > a {
    min-height: 44px;
    padding: 0.62rem 1rem;
  }
}

.leaderboards-subnav.ps-phero-rail > a:hover,
.leaderboards-subnav.ps-phero-rail > a:focus-visible {
  background: none;
  color: var(--text-gold-strong);
}

.leaderboards-subnav.ps-phero-rail > a.is-active {
  border-color: var(--gold-400);
  background: linear-gradient(180deg, rgba(31, 50, 82, 0.9), rgba(14, 24, 42, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.16), 0 2px 10px rgba(0, 0, 0, 0.5);
  color: var(--gold-100);
}

/* The legacy active-tab underline is the old shell's affordance; the DS tab
   signals current state with its own border and fill instead. */
.leaderboards-subnav.ps-phero-rail > a.is-active::after {
  content: none;
}

/* --- 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;
}