/* ═══════════════════════════════════════════════════════════════════════════
   season-v2.css — Season Pass remodel.

   The page wears the SEASON's colour, never the user's accent — same rule as the
   home season banner. `--sp-season-primary` is set by topbar.js from
   season.colors.nav; season.js's applyColors() also sets --sp-primary/--sp-secondary
   per rendered season, which matters when browsing the archive.
   ═══════════════════════════════════════════════════════════════════════════ */
#page-season {
  --s:     var(--sp-primary, var(--sp-season-primary, var(--accent)));
  --s-hi:  color-mix(in srgb, var(--s) 62%, #fff);
  --s-lo:  color-mix(in srgb, var(--s) 80%, #000);
  --s-70:  color-mix(in srgb, var(--s) 70%, transparent);
  --s-40:  color-mix(in srgb, var(--s) 40%, transparent);
  --s-20:  color-mix(in srgb, var(--s) 20%, transparent);
  --s-10:  color-mix(in srgb, var(--s) 10%, transparent);
}

/* ── hero ── */
.sp2-hero {
  position: relative; border-radius: 16px; overflow: hidden; padding: 26px 30px 30px;
  background: linear-gradient(125deg, var(--s-20), color-mix(in srgb, var(--s) 5%, transparent) 55%, rgba(20,20,29,.6));
  border: 1px solid var(--s-40);
}
.sp2-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 140% at 88% 40%, var(--s-20), transparent 68%);
}
.sp2-top { position: relative; display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.sp2-badge {
  width: 74px; height: 74px; border-radius: 18px; flex: none; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 30px; font-weight: 800; color: #0b1520; line-height: 1;
  background: linear-gradient(140deg, var(--s-hi), var(--s-lo)); box-shadow: 0 6px 22px var(--s-70);
}
.sp2-badge small { display: block; font-size: 9px; letter-spacing: .14em; font-weight: 800; opacity: .65; margin-top: 1px; }
.sp2-id { flex: 1; min-width: 200px; }
.sp2-name { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.sp2-dates { font-size: 12.5px; color: var(--text-3); font-weight: 600; margin-top: 4px; }
.sp2-pills { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.sp2-pill { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 4px 9px; border-radius: 5px; }
.sp2-pill.live  { background: var(--s); color: #08131c; }
.sp2-pill.warn  { background: rgba(255,208,66,.14); color: #ffcf6b; border: 1px solid rgba(255,208,66,.3); }
.sp2-pill.ghost { background: rgba(255,255,255,.08); border: 1px solid var(--border-strong); color: var(--text-2); }
.sp2-xp { text-align: right; flex: none; }
.sp2-xp-v { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1; color: var(--s-hi); }
.sp2-xp-l { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); font-weight: 700; margin-top: 3px; }

/* ── the interactive track ── */
.sp2-track { position: relative; }
.sp2-rail { position: relative; height: 10px; border-radius: 99px; background: rgba(255,255,255,.10); margin: 52px 0 0; }
.sp2-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--s-lo), var(--s), var(--s-hi)); box-shadow: 0 0 18px var(--s-70); }
.sp2-node {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%; padding: 0;
  background: #12141a; border: 2px solid rgba(255,255,255,.2);
  display: grid; place-items: center; font-size: 11px; cursor: pointer; transition: .16s; z-index: 2; color: inherit;
}
.sp2-node:hover { transform: translate(-50%, -50%) scale(1.24); z-index: 4; }
.sp2-node.got { background: linear-gradient(140deg, var(--s), var(--s-hi)); border-color: var(--s-hi);
  box-shadow: 0 0 14px var(--s-70); color: #08131c; }
.sp2-node.sel { outline: 2px solid #fff; outline-offset: 3px; }
.sp2-node .lv { position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-size: 9.5px; font-weight: 800; color: var(--text-3); letter-spacing: .04em; }
.sp2-node.got .lv { color: var(--s-hi); }
/* prestige overflow — sits above the rail; at the last node it collided with it */
.sp2-over {
  position: absolute; right: 0; top: -42px; display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 99px; white-space: nowrap;
  background: linear-gradient(135deg, #ffd042, #ff9f43); color: #2b1a00; box-shadow: 0 3px 14px rgba(255,208,66,.45);
}
.sp2-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-3);
  margin-top: 12px; font-variant-numeric: tabular-nums; }

/* ── spotlight + sources ── */
.sp2-spot { display: grid; grid-template-columns: 1fr 300px; gap: 18px; margin-top: 24px; }
.sp2-card { border-radius: 14px; background: var(--hv-panel, #14141d); border: 1px solid var(--border); overflow: hidden; }
.sp2-card-h { display: flex; align-items: baseline; gap: 9px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.sp2-card-t { font-family: var(--font-display); font-size: 14px; font-weight: 800; }
.sp2-card-n { font-size: 11.5px; color: var(--text-3); margin-left: auto; }
.sp2-card-b { padding: 16px; }
.sp2-rw-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sp2-rw-lv { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 16px; font-weight: 800; background: var(--s-20); color: var(--s-hi); border: 1px solid var(--s-40); }
.sp2-rw-name { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.sp2-rw-sub { font-size: 11.5px; color: var(--text-3); }
.sp2-rw-state { margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 5px; background: rgba(255,255,255,.06); color: var(--text-3); border: 1px solid var(--border); }
.sp2-rw-state.got { background: var(--s-20); color: var(--s-hi); border-color: var(--s-40); }
.sp2-rw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sp2-rw { padding: 14px; border-radius: 11px; background: rgba(255,255,255,.035); border: 1px solid var(--border); text-align: center; }
.sp2-rw.locked { opacity: .45; }
.sp2-rw-vis { height: 74px; display: grid; place-items: center; margin-bottom: 9px; }
.sp2-rw-l { font-size: 12px; font-weight: 650; line-height: 1.3; }
.sp2-rw-k { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 700; margin-top: 3px; }
.sp2-rw-empty { color: var(--text-3); font-size: 12.5px; grid-column: 1/-1; }
.sp2-equip { margin-top: 9px; width: 100%; padding: 6px; border-radius: 7px; font: inherit; font-size: 11.5px; font-weight: 700;
  background: var(--s-20); border: 1px solid var(--s-40); color: var(--s-hi); cursor: pointer; transition: .15s; }
.sp2-equip:hover { background: var(--s-40); }
/* live reward previews — the point of the spotlight */
.sp2-pv-av { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; background: #2b2b3a; display: block; }
.sp2-pv-frame { padding: 3px; border-radius: 50%; background: conic-gradient(from 0deg, var(--s-hi), var(--s), var(--s-hi)); }
.sp2-pv-swatch { width: 52px; height: 52px; border-radius: 13px; border: 2px solid rgba(255,255,255,.2); }
.sp2-pv-flair { font-size: 34px; }
.sp2-pv-title { font-size: 12px; font-weight: 650; padding: 6px 11px; border-radius: 99px;
  background: rgba(255,255,255,.07); border: 1px solid var(--border); }
.sp2-pv-title b { color: var(--s-hi); }
.sp2-pv-card { width: 62px; height: 40px; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid var(--border); }
.sp2-pv-badge { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; font-size: 26px;
  background: linear-gradient(140deg, var(--s-20), rgba(255,95,188,.10)); border: 1px solid var(--s-40); }

/* ── XP sources ── */
.sp2-src { display: flex; flex-direction: column; gap: 9px; }
.sp2-src-bar { display: flex; height: 11px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.07); margin-bottom: 14px; }
.sp2-src-bar i { display: block; height: 100%; }
.sp2-src-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.sp2-src-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.sp2-src-l { flex: 1; min-width: 0; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp2-src-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.sp2-src-p { font-size: 11px; color: var(--text-3); width: 38px; text-align: right; }

/* ── standings ── */
.sp2-sec { margin-top: 34px; }
.sp2-st { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; transition: .15s; cursor: pointer; }
.sp2-st:hover { background: rgba(255,255,255,.05); }
.sp2-st.me { background: var(--s-10); border: 1px solid var(--s-40); }
.sp2-st-lv { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 800; background: var(--s-20); color: var(--s-hi); }
.sp2-st-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #2b2b3a; flex: none; }
.sp2-st-n { font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp2-st-x { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-2); }
.sp2-st-bar { height: 4px; border-radius: 99px; background: rgba(255,255,255,.09); margin-top: 5px; }
.sp2-st-bar i { display: block; height: 100%; border-radius: 99px; background: var(--s); }

/* the scoring table relocated here keeps the season's colour, not the accent */
#page-season .lb-sc-pts { color: var(--s-hi); }

@media (max-width: 900px) {
  .sp2-spot { grid-template-columns: 1fr; }
  .sp2-name { font-size: 24px; }
  .sp2-hero { padding: 20px 16px 24px; }
  .sp2-badge { width: 60px; height: 60px; font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEFTOVERS BROUGHT INTO THE NEW LANGUAGE
   The blurb, the earn table and the Customize button predated the remodel and
   were still wearing their old styles underneath the new sections.
   ═══════════════════════════════════════════════════════════════════════════ */

/* season description — now inside the hero, under the dates */
.sp2-blurb { margin-top: 12px; max-width: 620px; }
.sp2-theme { font-size: 13px; line-height: 1.55; color: var(--text-2); margin: 0; }
.sp2-feats { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.sp2-feats-l { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); margin-right: 2px; }
.sp2-feat {
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 5px;
  background: var(--s-20); color: var(--s-hi); border: 1px solid var(--s-40);
}

/* the earn table, relocated here when the leaderboard widget was retired —
   restyled from a popover into a section that matches the rest of the page */
/* not .page-inner — that class drags in the page-enter animation (opacity:0 with
   fill-mode backwards) and a max-width/padding this section doesn't want */
.hv-scoring-wrap { margin-top: 34px; }
#page-season .lb-scoring.hv-scoring-section {
  position: static; width: auto; margin: 0;
  border-radius: 14px; background: var(--hv-panel, #14141d);
  border: 1px solid var(--border); box-shadow: none;
  padding: 8px; max-height: none; overflow: visible;
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px;
}
#page-season .lb-sc-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border); margin: 0;
}
#page-season .lb-sc-pts {
  font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--s-hi); min-width: 64px;
}
#page-season .lb-sc-desc { font-size: 12.5px; color: var(--text-2); }

/* customize */
.sp2-cust-row { display: flex; justify-content: center; margin-top: 30px; }
.sp2-cust-btn {
  padding: 12px 28px; border-radius: 10px; font: inherit; font-family: var(--font-display);
  font-size: 13.5px; font-weight: 800; cursor: pointer; transition: .16s;
  background: linear-gradient(135deg, var(--s-hi), var(--s-lo)); color: #08131c;
  border: none; box-shadow: 0 5px 18px var(--s-40);
}
.sp2-cust-btn:hover { transform: translateY(-2px); box-shadow: 0 9px 26px var(--s-70); }