/* ==========================================================================================
   B24 (ADR-077): THE SEASON PASS -- its chip in the bar, the stash's +, the pass page (the showcase, the season's card,
   the floodlit track), its challenges, the claim's reveal, the stash, buying, the takeover and the full-time tally.
   Linked after gameplan.css, game.css and transfers.css: the tokens, .card/.dcard and the sheet parts come from there.
   Sharp edges; blue only for selection; gold only for the premium lane and the pass's own marks; red only for
   "something to claim". Season 1 is "The Takeover": gold, black and floodlights.
   ========================================================================================== */
:root {
  --sp-gold-1: #fff6d6;
  --sp-gold-2: #f2d27a;
  --sp-gold-3: #d6a844;
  --sp-gold-4: #a8792a;
  --sp-gold-ink: #6e5212;
  --sp-claim: #d62c40;
  --sp-claim-glow: rgba(214, 44, 64, 0.32);
  --sp-night-1: #050a16;
  --sp-night-2: #0b1730;
  --sp-night-3: #12264a;
  --sp-gold-grad: linear-gradient(180deg, var(--sp-gold-1) 0%, var(--sp-gold-2) 42%, var(--sp-gold-3) 72%, var(--sp-gold-4) 100%);
}

/* --- the bar: the chip, in the club block's place (the user, Round 1) ----------------------------------------------- */
.bar-pass {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; align-items: center; gap: clamp(8px, 0.7vw, 12px);
  padding: 0 clamp(12px, 1vw, 18px) 0 clamp(7px, 0.55vw, 10px); flex: none; min-width: 0;
  background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(var(--blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 8px 22px rgba(16, 24, 40, 0.12);
  transition: background var(--t-fast) var(--ease-std), transform var(--t-micro) var(--ease-out);
}
.bar-pass:hover { background: var(--paper); }
.bar-pass:active { transform: scale(0.97); }
.bar-pass:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bar-pass.is-active { background: var(--paper); box-shadow: inset 0 -3px 0 var(--accent), 0 1px 2px rgba(16, 24, 40, 0.1), 0 6px 16px rgba(16, 24, 40, 0.14); }
.bar-pass-star { display: none; width: 18px; height: 18px; flex: none; }
.bar-pass-star svg { width: 100%; height: 100%; display: block; }
.bar-pass-tier {
  position: relative; display: grid; place-items: center; flex: none;
  height: calc(var(--tab-h) * 0.72); min-width: calc(var(--tab-h) * 0.72); padding: 0 4px;
  font-family: var(--font-display); font-weight: 700; font-size: calc(var(--tab-h) * 0.46); line-height: 1; color: var(--ink-900);
  background: var(--paper); box-shadow: inset 0 -2px 0 rgba(16, 21, 31, 0.16), 0 1px 2px rgba(16, 24, 40, 0.12);
  font-variant-numeric: tabular-nums;
}
.bar-pass-tier.is-premium { background: var(--sp-gold-grad); color: var(--sp-gold-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 0 rgba(110, 82, 18, 0.45), 0 1px 3px rgba(110, 82, 18, 0.35); }
.bar-pass-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bar-pass-text b { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.12vw, 21px); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--ink-900); }
.bar-pass-bar { position: relative; display: block; height: 5px; width: clamp(84px, 7.4vw, 140px); background: rgba(16, 21, 31, 0.12); overflow: hidden; }
.bar-pass-bar i { position: absolute; inset: 0 auto 0 0; width: var(--sp-fill, 0%); background: linear-gradient(90deg, var(--sp-gold-4), var(--sp-gold-3) 60%, var(--sp-gold-2)); transition: width 700ms var(--ease-out); }
.sp-dot { position: absolute; right: -5px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--sp-claim); box-shadow: 0 0 0 2px var(--paper); }
/* the bar's chip, away from the pass: a double tap of a beat every few seconds (on the pass's own pages it keeps still:
   the medallions are the ones calling there, see the heartbeat below) */
.bar-pass .sp-dot { animation: sp-dot 4.8s var(--ease-std) infinite; will-change: transform; }
:root[data-career-pass] .bar-pass .sp-dot { animation: none; }
@keyframes sp-dot { 0%, 14%, 100% { transform: none; } 4% { transform: scale(1.32); } 9% { transform: scale(0.94); } }
:root[data-career-pass] .bar-indicator { opacity: 0; }
:root[data-career-pass] .bar-tab.is-active { color: var(--ink-500); }

/* the stash's +, on the purse's right edge: gold, with the stash's count */
.bar-stash {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; align-self: center; display: grid; place-items: center; flex: none;
  height: calc(var(--tab-h) * 0.8); width: calc(var(--tab-h) * 0.8 * 0.82); margin-left: calc(-1 * clamp(8px, 0.8vw, 14px) - 2px);
  color: #3a2400; background: linear-gradient(180deg, #fff3c4 0%, #f3c451 55%, #c0841c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 0 rgba(120, 70, 0, 0.35), 0 4px 12px rgba(16, 24, 40, 0.25);
  transition: transform var(--t-micro) var(--ease-out), filter var(--t-fast);
}
.bar-stash[hidden] { display: none; }
.bar-stash svg { width: 46%; height: 46%; }
.bar-stash:hover { filter: brightness(1.08); transform: translateY(-1px); }
.bar-stash:active { transform: scale(0.94); }
.bar-stash:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bar-stash-count {
  position: absolute; right: -8px; top: -8px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center;
  background: var(--sp-claim); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1; box-shadow: 0 0 0 2px var(--paper);
}

/* --- shared parts ----------------------------------------------------------------------------------------------- */
.sp-btn {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 clamp(18px, 1.5vw, 28px); white-space: nowrap; overflow: hidden;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.05vw, 19px); letter-spacing: 0.08em; text-transform: uppercase;
  transition: transform var(--t-micro) var(--ease-out), filter var(--t-fast), box-shadow var(--t-fast);
}
.sp-btn small { font-family: var(--font-ui); font-weight: 600; font-size: 0.82em; letter-spacing: 0; text-transform: none; opacity: 0.9; }
.sp-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.sp-btn:active { transform: scale(0.97); }
.sp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sp-btn[disabled] { opacity: 0.55; cursor: default; filter: none; transform: none; }
.sp-btn.is-dark { background: var(--dark); color: var(--paper); }
.sp-btn.is-light { background: var(--paper); color: var(--ink-900); box-shadow: inset 0 0 0 2px var(--ink-900); }
.sp-btn.is-ghost { background: var(--surface-ink); color: var(--ink-700); }
.sp-btn.is-claim { background: var(--sp-claim); color: #fff; box-shadow: 0 6px 18px var(--sp-claim-glow); }
.sp-btn.is-claim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.38) 48%, transparent 66%); transform: translateX(-120%); will-change: transform; }
.sp-btn.is-gold { background: var(--sp-gold-grad); color: #2b1d00; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -3px 0 rgba(110, 82, 18, 0.5), 0 8px 22px rgba(168, 121, 42, 0.38); }
.sp-btn.is-gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 66%); transform: translateX(-120%); animation: sp-sheen 3.6s var(--ease-std) infinite; will-change: transform; }
.sp-page .sp-btn.is-gold::after { animation: none; }
.sp-btn.is-small { min-height: 34px; padding: 0 12px; font-size: clamp(12px, 0.85vw, 15px); }
@keyframes sp-sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes sp-sweep { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.sp-btn.is-hold { min-height: 58px; padding: 0 24px; }
.sp-btn.is-hold .hold-fill { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.22); transform: scaleX(0); transform-origin: left; }
.sp-btn.is-hold .hold-label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1; }
.sp-btn.is-hold .hold-label small { font-size: 12px; opacity: 0.72; }

.sp-tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.86); background: rgba(255, 255, 255, 0.12); white-space: nowrap;
}
.sp-tag.is-premium { background: var(--sp-gold-grad); color: #2b1d00; }
.sp-tag.is-free { background: var(--paper); color: var(--ink-900); }
.sp-tag.is-mode-online { background: #1b4ea6; color: #fff; }
.sp-tag.is-mode-offline { background: rgba(255, 255, 255, 0.92); color: var(--ink-900); }
.sp-glyph { display: grid; place-items: center; width: 100%; height: 100%; }
.sp-glyph svg { width: 70%; height: 70%; }

/* --- the page ----------------------------------------------------------------------------------------------------- */
.sp-page {
  --gap: clamp(10px, 1.1vw, 20px);
  position: relative; height: 100%; display: grid; gap: var(--gap);
  grid-template-rows: auto minmax(0, 46fr) minmax(0, 54fr);
}
.sp-page.is-challenges { grid-template-rows: auto minmax(0, 1fr); }
.sp-page .card { transform-origin: 50% 100%; }
.sp-page.is-entering .card { animation: card-rise 560ms var(--ease-out) both; animation-delay: calc(var(--d, 0) * 70ms + 80ms); }
.sp-page .card-face { height: 100%; }

.sp-tabs {
  justify-self: start; position: relative; display: flex; align-items: stretch; height: clamp(40px, 4.4vh, 48px);
  background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(var(--blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 8px 22px rgba(16, 24, 40, 0.12);
}
.sp-tab {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; place-items: center; padding: 0 clamp(16px, 1.4vw, 28px);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.1vw, 20px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500);
  transition: color var(--t-fast), background var(--t-fast);
}
.sp-tab:hover { color: var(--ink-900); }
.sp-tab.is-active { color: var(--ink-900); background: var(--paper); box-shadow: inset 0 -3px 0 var(--accent); }
.sp-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sp-tab .sp-dot { right: 6px; top: 6px; width: 9px; height: 9px; }

.sp-top { display: grid; grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); gap: var(--gap); min-height: 0; }

/* the showcase: the night stage, the reward on its plinth, its words over the dark */
.sp-show .card-face {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  background:
    radial-gradient(ellipse 60% 70% at 68% 8%, rgba(255, 236, 190, 0.26), rgba(255, 236, 190, 0) 62%),
    radial-gradient(ellipse 90% 70% at 66% 118%, var(--sp-night-3), var(--sp-night-1) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 4px rgba(6, 26, 14, 0.2), 0 18px 34px -12px rgba(6, 26, 14, 0.5), 0 46px 90px -34px rgba(6, 26, 14, 0.55);
}
.sp-show.is-premium .card-face { box-shadow: inset 0 3px 0 var(--sp-gold-3), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 4px rgba(6, 26, 14, 0.2), 0 18px 34px -12px rgba(6, 26, 14, 0.5), 0 46px 90px -34px rgba(6, 26, 14, 0.55); }
.sp-show .card-face::before { content: ""; position: absolute; inset: 0; background: url("../stadium/night-stadium.jpeg") center 38% / cover; opacity: 0.2; filter: blur(3px) brightness(0.6) saturate(0.8); pointer-events: none; }
.sp-stage { position: absolute; inset: 0; }
.sp-stage-canvas { position: absolute; inset: 0; display: block; }
.sp-stage::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 62%; background: linear-gradient(90deg, rgba(5, 10, 22, 0.86), rgba(5, 10, 22, 0.42) 58%, rgba(5, 10, 22, 0)); pointer-events: none; }
.sp-stage-art { position: absolute; inset: 0 0 0 38%; display: grid; place-items: center; pointer-events: none; z-index: 1; }
.sp-stage-frame {
  position: relative; display: block; height: 78%; aspect-ratio: 1; max-width: 72%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 0 5px rgba(5, 10, 22, 0.55), 0 22px 46px rgba(0, 0, 0, 0.6);
}
.sp-show.is-premium .sp-stage-frame { box-shadow: 0 0 0 2px var(--sp-gold-3), 0 0 0 6px rgba(5, 10, 22, 0.55), 0 0 34px rgba(240, 200, 110, 0.22), 0 22px 46px rgba(0, 0, 0, 0.6); }
.sp-stage-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 38%); pointer-events: none; }
.sp-stage-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-stage-clip { width: min(78%, 420px); aspect-ratio: 1; object-fit: cover; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12); }
.sp-stage-glyph { width: 34%; aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(circle at 38% 30%, #fffaf0, #f2e3b8 70%, #c9a25a); border-radius: 50%; box-shadow: 0 0 0 4px var(--sp-gold-3), 0 18px 40px rgba(0, 0, 0, 0.5); }
.sp-stage-glyph svg { width: 62%; height: 62%; }
.sp-stage-pair { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 24px); }
.sp-stage-pair figure { margin: 0; display: grid; justify-items: center; gap: 8px; }
.sp-stage-pair img { width: clamp(110px, 11vw, 200px); aspect-ratio: 1; object-fit: cover; box-shadow: 0 0 0 3px var(--sp-gold-3), 0 16px 34px rgba(0, 0, 0, 0.5); }
.sp-stage-pair figcaption { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1vw, 18px); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
.sp-or { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sp-gold-2); }
.sp-stage-value { position: absolute; right: clamp(14px, 1.4vw, 26px); top: clamp(12px, 1.4vh, 22px); text-align: right; line-height: 0.92; }
.sp-stage-value b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 3.2vw, 60px); background: var(--sp-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.45)); }
.sp-stage-value small { font-family: var(--font-display); font-weight: 600; font-size: clamp(12px, 0.85vw, 15px); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.sp-show-copy { position: relative; z-index: 2; align-self: end; display: grid; gap: 8px; padding: clamp(14px, 1.5vw, 28px) clamp(16px, 1.6vw, 30px) 0; max-width: 54%; }
.sp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-show-name { margin: 4px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3vw, 58px); line-height: 0.92; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }
.sp-show.is-premium .sp-show-name { background: linear-gradient(180deg, #ffffff 0%, var(--sp-gold-1) 40%, var(--sp-gold-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.sp-show-line { margin: 0; font-size: clamp(13px, 0.95vw, 17px); font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, 0.82); }
.sp-show-act { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: clamp(12px, 1.4vh, 20px) clamp(16px, 1.6vw, 30px) clamp(14px, 1.6vh, 26px); }
.sp-state { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1vw, 18px); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.86); background: rgba(255, 255, 255, 0.1); }
.sp-state svg { width: 16px; height: 16px; }
.sp-state.is-on { color: #fff; background: rgba(47, 158, 99, 0.85); }

/* the season's card */
.sp-season .card-face { display: flex; flex-direction: column; gap: clamp(8px, 1.2vh, 16px); padding: clamp(12px, 1.2vw, 22px) clamp(14px, 1.3vw, 24px); }
.sp-season-head { gap: 10px; }
.sp-season-head .card-sub { margin-right: auto; }
.sp-season-head .dcard-icon svg { width: 100%; height: 100%; }
.sp-owned { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--sp-gold-grad); color: #2b1d00; }
.sp-owned svg { width: 15px; height: 15px; }
.sp-tierline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(10px, 1vw, 18px); }
.sp-tierbadge {
  position: relative; display: grid; place-items: center; width: clamp(52px, 4.4vw, 78px); aspect-ratio: 1;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 2.6vw, 48px); line-height: 1; color: var(--ink-900);
  background: var(--paper); box-shadow: inset 0 -3px 0 rgba(16, 21, 31, 0.18), 0 2px 6px rgba(16, 24, 40, 0.14);
}
.sp-tierbadge.is-premium { background: var(--sp-gold-grad); color: var(--sp-gold-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -3px 0 rgba(110, 82, 18, 0.45), 0 4px 12px rgba(168, 121, 42, 0.35); }
.sp-tierbadge.is-small { width: 44px; font-size: 26px; }
.sp-tiertext { display: grid; gap: 9px; min-width: 0; }
.sp-tiertext b { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 1.5vw, 28px); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; }
.sp-xpbar { position: relative; height: 10px; background: rgba(16, 21, 31, 0.1); overflow: hidden; }
.sp-xpbar i { position: absolute; inset: 0 auto 0 0; width: var(--sp-fill, 0%); background: linear-gradient(90deg, var(--sp-gold-4), var(--sp-gold-3) 55%, var(--sp-gold-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: width 800ms var(--ease-out); }
.sp-xpbar i::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 8px rgba(255, 236, 170, 0.9); }
.sp-xpnum { font-family: var(--font-display); font-weight: 600; font-size: clamp(13px, 0.95vw, 17px); letter-spacing: 0.04em; color: var(--ink-500); white-space: nowrap; }
.sp-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px clamp(12px, 1.2vw, 22px); font-size: clamp(12.5px, 0.88vw, 15px); font-weight: 500; color: var(--ink-500); }
.sp-stats b { font-family: var(--font-display); font-weight: 700; font-size: 1.18em; color: var(--sp-gold-ink); }
.sp-next { margin-top: auto; display: flex; align-items: center; gap: clamp(8px, 0.8vw, 14px); min-width: 0; }
.sp-next-item { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 0; padding: 4px; transition: background var(--t-fast); }
.sp-next-item:hover { background: var(--surface-ink); }
.sp-next-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sp-next-disc { flex: none; width: clamp(38px, 3vw, 52px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 38% 30%, #fff, #e8ecf2 70%, #c9d0d9); box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(16, 24, 40, 0.22); }
.sp-next-disc.is-premium { background: radial-gradient(circle at 38% 30%, #fffaf0, #f2e3b8 70%, #c9a25a); box-shadow: 0 0 0 2px var(--sp-gold-3), 0 3px 8px rgba(16, 24, 40, 0.22); }
.sp-next-disc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-next-text { display: grid; gap: 2px; min-width: 0; line-height: 1.1; }
.sp-next-text small { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap; }
.sp-next-text b { font-weight: 600; font-size: clamp(12.5px, 0.88vw, 15px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-claimrow { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: rgba(214, 44, 64, 0.07); box-shadow: inset 3px 0 0 var(--sp-claim); }
.sp-claimrow-text { font-size: clamp(13px, 0.92vw, 16px); font-weight: 500; color: var(--ink-700); }
.sp-claimrow-text b { font-family: var(--font-display); font-weight: 700; font-size: 1.2em; color: var(--sp-claim); }
.sp-buy-note { margin: 0; font-size: 13px; font-weight: 500; color: var(--ink-500); }

/* the track: the floodlit pitch at night */
.sp-trackcard .card-face {
  position: relative; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: radial-gradient(ellipse 80% 90% at 50% -10%, #193257, var(--sp-night-1) 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 4px rgba(6, 26, 14, 0.2), 0 18px 34px -12px rgba(6, 26, 14, 0.5), 0 46px 90px -34px rgba(6, 26, 14, 0.55);
}
.sp-track { position: relative; min-height: 0; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sp-track.is-dragging { cursor: grabbing; }
.sp-track-canvas { position: absolute; inset: 0; display: block; }
.sp-track-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* a row of the track (the far medallions, the near ones, the tier numbers): one composited layer each, moved whole by a
   pan (PassTrack3D's header: a row's spots share one depth, so the perspective shifts it as one) */
.sp-row { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; will-change: transform; }
.sp-tnum {
  position: absolute; left: 0; top: 0; padding: 1px 7px; pointer-events: none !important;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 0.95vw, 17px); line-height: 1.15; color: rgba(255, 255, 255, 0.72);
  background: rgba(4, 14, 9, 0.42); transition: opacity var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.sp-tnum.is-reached { color: #fff; background: rgba(16, 21, 31, 0.62); box-shadow: inset 0 -2px 0 var(--sp-gold-3); }
.sp-tnum.is-under-ball { opacity: 0; }

/* the medallions: a reward standing on the touchline */
.sp-medal {
  /* all: unset makes pointer-events inherit -- and the layer above passes events through: take them back */
  all: unset; box-sizing: border-box; position: absolute; left: 0; top: 0; width: var(--size, 64px); height: var(--size, 64px); cursor: pointer; pointer-events: auto;
  transition: filter var(--t-fast) var(--ease-std);
}
.sp-medal.is-static { position: relative; display: inline-block; transform: none; }
.sp-disc {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 36% 28%, #ffffff, #e6eaf0 64%, #b9c2cd);
  box-shadow: 0 0 0 calc(var(--size) * 0.045) #ffffff, 0 calc(var(--size) * 0.1) calc(var(--size) * 0.22) rgba(0, 0, 0, 0.42);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.sp-medal.is-premium .sp-disc { background: radial-gradient(circle at 36% 28%, #fffaf0, #f3e2b2 64%, #c79c48); box-shadow: 0 0 0 calc(var(--size) * 0.05) var(--sp-gold-3), 0 0 0 calc(var(--size) * 0.075) rgba(110, 82, 18, 0.55), 0 calc(var(--size) * 0.1) calc(var(--size) * 0.22) rgba(0, 0, 0, 0.45); }
.sp-art { width: 84%; height: 84%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #0b1526; }
.sp-medal.is-premium .sp-art { background: #120c02; }
.sp-art img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sp-art .sp-glyph { background: radial-gradient(circle at 38% 30%, #ffffff, #e9edf2 70%, #ccd3dc); }
.sp-split { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.sp-split > span { overflow: hidden; }
.sp-split > span + span { box-shadow: inset 2px 0 0 #fff; }
.sp-split img { width: 200%; max-width: none; height: 100%; object-fit: cover; }
.sp-split > span + span img { transform: translateX(-50%); }
.sp-foot { position: absolute; left: 14%; right: 14%; bottom: calc(var(--size) * -0.1); height: calc(var(--size) * 0.18); border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); z-index: -1; }
.sp-mode { position: absolute; left: -6px; top: -4px; z-index: 2; padding: 0 5px; line-height: 1.5; font-family: var(--font-display); font-weight: 700; font-size: clamp(9px, calc(var(--size) * 0.13), 11.5px); letter-spacing: 0.08em; text-transform: uppercase; background: var(--dark); color: #fff; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.sp-mode.is-online { background: #1b4ea6; }
.sp-badge { position: absolute; right: -2px; top: -2px; z-index: 2; display: grid; place-items: center; width: clamp(16px, calc(var(--size) * 0.3), 22px); aspect-ratio: 1; }
.sp-badge svg { width: 62%; height: 62%; }
.sp-badge.is-lock { background: rgba(16, 21, 31, 0.88); color: #fff; }
.sp-badge.is-check { background: var(--ok); color: #fff; }
.sp-claim-tag { position: absolute; left: 50%; top: calc(100% + 3px); z-index: 3; transform: translateX(-50%); padding: 0 7px; line-height: 1.45; font-family: var(--font-display); font-weight: 700; font-size: clamp(10px, calc(var(--size) * 0.15), 13px); letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--sp-claim); white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.sp-medal.is-future { filter: brightness(0.62) saturate(0.7); }
.sp-medal.is-locked .sp-art { filter: grayscale(0.55) brightness(0.86); }
.sp-medal.is-claimed { filter: saturate(0.85) brightness(0.96); }
/* to claim: a red ring, and a glow round it that breathes with the page's heartbeat -- its opacity alone moves (an
   animated box-shadow repaints every frame; an animated scale makes the browser assume the glow may cover everything
   painted after it, and lifts every later medallion into a layer of its own) */
.sp-medal.is-claimable .sp-disc { box-shadow: 0 0 0 calc(var(--size) * 0.05) var(--sp-claim), 0 calc(var(--size) * 0.1) calc(var(--size) * 0.22) rgba(0, 0, 0, 0.42); }
.sp-medal.is-claimable .sp-disc::after {
  content: ""; position: absolute; inset: calc(var(--size) * -0.05); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 calc(var(--size) * 0.16) calc(var(--size) * 0.06) rgba(232, 52, 72, 0.62), 0 0 0 calc(var(--size) * 0.035) rgba(255, 120, 132, 0.5);
  opacity: 0;
}
@keyframes sp-halo { 0%, 100% { opacity: 0; } 45% { opacity: 1; } }
/* the page's heartbeat (PassPage, every 4.8 s): the claimable medallions breathe in a wave along the pitch, then the
   claim buttons shine, then the gold one. One place moves at a time: a frame that moves the track and the top of the page
   together redraws everything between them, the bar's frosted glass with it -- a frame in three lost on a laptop's own
   graphics, and a phone's battery spent on nothing */
.sp-page.is-beat .sp-medal.is-claimable .sp-disc::after { animation: sp-halo 1500ms var(--ease-std) both; animation-delay: calc(var(--wave, 0) * 1ms); }
.sp-page.is-beat .sp-btn.is-claim::after { animation: sp-sweep 800ms var(--ease-std) 2300ms both; }
.sp-page.is-beat .sp-btn.is-gold::after { animation: sp-sweep 900ms var(--ease-std) 3400ms both; }
.sp-medal:hover .sp-disc { transform: translateY(calc(var(--size) * -0.05)) scale(1.04); }
/* the purchase: each premium medallion flares gold in turn, from tier 1 along the pitch */
.sp-track.is-unlocking .sp-medal.is-premium .sp-disc { animation: sp-unlock 900ms cubic-bezier(0.2, 0.9, 0.3, 1.25) both; animation-delay: calc(var(--unlock, 0) * 90ms); }
@keyframes sp-unlock {
  0% { transform: scale(0.82); filter: brightness(0.6); }
  45% { transform: scale(1.22); filter: brightness(1.6) drop-shadow(0 0 calc(var(--size) * 0.3) rgba(255, 214, 120, 0.95)); }
  100% { transform: none; filter: none; }
}
.sp-medal.is-selected .sp-disc { transform: translateY(calc(var(--size) * -0.07)) scale(1.1); box-shadow: 0 0 0 calc(var(--size) * 0.05) var(--accent), 0 0 0 calc(var(--size) * 0.12) var(--accent-glow), 0 calc(var(--size) * 0.14) calc(var(--size) * 0.26) rgba(0, 0, 0, 0.5); animation: none; }
.sp-medal:focus-visible .sp-disc { box-shadow: 0 0 0 calc(var(--size) * 0.05) var(--accent), 0 0 0 calc(var(--size) * 0.12) var(--accent-glow); }

/* the mini-map: 25 cells, the reached gold, a red point where a reward waits */
.sp-mini { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 8px clamp(10px, 1vw, 18px) 10px; background: rgba(4, 9, 18, 0.55); }
.sp-mini-cell { all: unset; box-sizing: border-box; cursor: pointer; position: relative; height: 10px; background: rgba(79, 174, 92, 0.36); transition: background var(--t-fast), transform var(--t-micro); }
.sp-mini-cell:nth-child(even) { background: rgba(79, 174, 92, 0.26); }
.sp-mini-cell.is-reached { background: linear-gradient(180deg, var(--sp-gold-2), var(--sp-gold-3)); }
.sp-mini-cell.is-claim::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--sp-claim); box-shadow: 0 0 0 1.5px #fff; }
.sp-mini-cell:hover { transform: scaleY(1.4); }
.sp-mini-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- the challenges -------------------------------------------------------------------------------------------- */
.sp-chall { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: var(--gap); min-height: 0; }
/* each card no taller than its row (a grid item's least height is its content's): the weeks scroll inside their card */
.sp-chall > .card { min-height: 0; }
.sp-daily .card-face, .sp-weekly .card-face { overflow: hidden; }
.sp-daily .card-face, .sp-weekly .card-face { display: flex; flex-direction: column; padding: clamp(12px, 1.2vw, 22px) clamp(14px, 1.3vw, 24px); min-height: 0; }
.sp-chlist { list-style: none; margin: 0; padding: 0; }
.sp-ch { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: clamp(10px, 1.3vh, 16px) 0; border-bottom: 1px solid rgba(16, 21, 31, 0.08); }
.sp-ch-text { font-weight: 600; font-size: clamp(14px, 1vw, 18px); line-height: 1.25; color: var(--ink-900); }
.sp-ch.is-done .sp-ch-text { color: var(--ink-500); }
.sp-ch-end { display: flex; align-items: center; gap: 10px; }
.sp-ch-xp { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.25vw, 23px); color: var(--sp-gold-ink); }
.sp-ch-xp svg { width: 16px; height: 16px; }
.sp-ch.is-done .sp-ch-xp { color: var(--ok); }
.sp-ch-bar { grid-column: 1 / -1; position: relative; height: 6px; background: rgba(16, 21, 31, 0.08); }
.sp-ch-bar i { position: absolute; inset: 0 auto 0 0; width: var(--sp-fill, 0%); background: var(--ink-700); transition: width 700ms var(--ease-out); }
.sp-ch.is-done .sp-ch-bar i { background: var(--ok); }
.sp-ch-count { grid-column: 1 / -1; margin-top: -2px; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; color: var(--ink-500); }
.sp-boosts { margin-top: auto; display: grid; gap: 8px; padding-top: 12px; }
.sp-boost-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; background: var(--paper-2); }
.sp-boost-item .sp-glyph { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #fff, #e9edf2 70%, #ccd3dc); box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(16, 24, 40, 0.2); }
.sp-boost-item b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; }
.sp-boost-item small { display: block; font-size: 13px; font-weight: 500; color: var(--ink-500); }
.sp-weeks { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(16, 21, 31, 0.3) transparent; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 clamp(16px, 1.6vw, 30px); align-content: start; }
.sp-week { min-width: 0; }
.sp-week h3 { margin: 12px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); }

/* --- the dashboard's card ---------------------------------------------------------------------------------------- */
.dash-grid.is-b18.has-pass { grid-template-areas: "news match table" "news inbox pass"; }
.dash-pass { grid-area: pass; min-width: 0; min-height: 0; }
.dash-pass > .card, .dash-pass .card-face { height: 100%; }
.dcard-pass .card-face { box-shadow: inset 0 3px 0 var(--sp-gold-3), inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 4px rgba(6, 26, 14, 0.16), 0 18px 34px -12px rgba(6, 26, 14, 0.42), 0 46px 90px -34px rgba(6, 26, 14, 0.5); }
.sp-claim-badge { background: var(--sp-claim); }
.sp-card-body { justify-content: space-between; gap: clamp(6px, 1vh, 12px); padding-top: clamp(6px, 1vh, 12px); }
.sp-card-strip { display: flex; align-items: center; gap: clamp(8px, 0.8vw, 14px); padding: 10px 12px 12px; background: radial-gradient(ellipse 90% 120% at 50% -20%, #1d3a62, var(--sp-night-1) 75%); --size: clamp(36px, 3.1vw, 50px); }
.sp-card-strip .sp-medal { flex: none; }
.sp-card-strip-line { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: clamp(12px, 0.85vw, 15px); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.86); white-space: nowrap; }
.sp-card-strip-line b { color: #ff9aa6; font-size: 1.25em; }
.sp-card-row { display: flex; align-items: center; gap: 12px; }
.sp-card-xp { display: grid; gap: 6px; flex: 1; min-width: 0; }
.sp-card-xp small { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-card-line { margin: 0; font-size: clamp(13px, 0.92vw, 16px); font-weight: 500; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-card-line b { color: var(--ink-900); font-weight: 700; }
.sp-card-line.is-claim b { color: var(--sp-claim); }

/* --- the claim's reveal ------------------------------------------------------------------------------------------ */
.sp-reveal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; overflow: hidden; }
.sp-reveal-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(16, 26, 52, 0.84), rgba(3, 6, 14, 0.94) 70%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: sp-fade 300ms var(--ease-std) both; }
.sp-rays {
  position: absolute; left: 50%; top: 40%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(200, 220, 255, 0.07) 0deg 6deg, rgba(200, 220, 255, 0) 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 46%); mask-image: radial-gradient(circle, #000 0%, transparent 46%);
  animation: sp-rays 36s linear infinite, sp-fade 600ms var(--ease-std) both;
}
.sp-reveal.is-premium .sp-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, 0.13) 0deg 6deg, rgba(255, 214, 120, 0) 6deg 18deg); }
@keyframes sp-rays { to { transform: rotate(360deg); } }
@keyframes sp-fade { from { opacity: 0; } }
.sp-reveal-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 24px; max-width: min(92vw, 760px); }
.sp-reveal-stage { position: relative; width: min(74vh, 640px, 86vw); aspect-ratio: 1.45; display: grid; place-items: center; margin: -2vh 0 0; }
/* the light the reward stands in: a warm pool behind it (gold on the premium lane) */
.sp-reveal-stage::before { content: ""; position: absolute; inset: 6% 14% 2%; background: radial-gradient(ellipse 50% 46% at 50% 54%, rgba(190, 210, 255, 0.32), rgba(190, 210, 255, 0) 70%); pointer-events: none; }
.sp-reveal.is-premium .sp-reveal-stage::before { background: radial-gradient(ellipse 50% 46% at 50% 54%, rgba(255, 214, 120, 0.4), rgba(255, 214, 120, 0) 70%); }
.sp-reveal-stage .sp-stage-canvas { position: absolute; inset: 0; }
.sp-reveal-img { max-width: 78%; max-height: 86%; object-fit: contain; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.6)); animation: sp-drop 820ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.sp-reveal-clip { width: 78%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(255, 255, 255, 0.16); animation: sp-drop 820ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.sp-reveal-glyph { width: 52%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #fffaf0, #f2e3b8 70%, #c9a25a); box-shadow: 0 0 0 5px var(--sp-gold-3), 0 22px 44px rgba(0, 0, 0, 0.55); animation: sp-drop 820ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.sp-reveal-glyph svg { width: 62%; height: 62%; }
@keyframes sp-drop { from { opacity: 0; transform: translateY(-34px) scale(0.72); } 60% { opacity: 1; } }
.sp-reveal-kicker { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 1vw, 17px); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); animation: sp-up 520ms var(--ease-out) 260ms both; }
.sp-reveal.is-premium .sp-reveal-kicker { color: var(--sp-gold-2); }
.sp-reveal-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5vw, 92px); line-height: 0.9; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5); animation: sp-up 560ms var(--ease-out) 340ms both; }
.sp-reveal.is-premium .sp-reveal-title { background: linear-gradient(180deg, #ffffff 0%, var(--sp-gold-1) 38%, var(--sp-gold-2) 70%, var(--sp-gold-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.4)); }
.sp-reveal-line { margin: 2px 0 0; max-width: 46ch; font-size: clamp(14px, 1.05vw, 18px); font-weight: 500; color: rgba(255, 255, 255, 0.86); animation: sp-up 560ms var(--ease-out) 420ms both; }
.sp-reveal-where { margin: 0; max-width: 52ch; font-size: clamp(13px, 0.9vw, 15px); font-weight: 500; color: rgba(255, 255, 255, 0.6); animation: sp-up 560ms var(--ease-out) 480ms both; }
.sp-reveal-buttons { display: flex; gap: 12px; margin-top: 14px; animation: sp-up 560ms var(--ease-out) 560ms both; }
.sp-reveal-buttons .sp-btn.is-light { background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7); }
.sp-reveal-buttons .sp-btn.is-dark { background: var(--paper); color: var(--ink-900); }
@keyframes sp-up { from { opacity: 0; transform: translateY(14px); } }
.sp-burst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.sp-pickrow { display: flex; gap: clamp(14px, 2vw, 32px); margin: 14px 0 10px; }
.sp-pickcard { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; gap: 6px; width: clamp(180px, 18vw, 280px); padding: 14px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 2px rgba(255, 214, 120, 0.4); transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast), background var(--t-fast); animation: sp-up 560ms var(--ease-out) both; }
.sp-pickcard:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 2px var(--sp-gold-2), 0 18px 40px rgba(0, 0, 0, 0.45); }
.sp-pickcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sp-pickart { width: 100%; aspect-ratio: 1; overflow: hidden; }
.sp-pickart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-pickcard b { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.6vw, 28px); letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.sp-pickcard small { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.7); line-height: 1.3; }
.sp-manyrow { list-style: none; margin: 18px 0 6px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 1.2vw, 18px); }
.sp-manycard { position: relative; display: grid; justify-items: center; gap: 4px; width: clamp(96px, 9vw, 140px); animation: sp-drop 700ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; animation-delay: calc(var(--i) * 160ms + 200ms); }
.sp-manyart { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #0b1526; box-shadow: 0 0 0 4px #fff, 0 12px 28px rgba(0, 0, 0, 0.5); }
.sp-manycard.is-premium .sp-manyart { box-shadow: 0 0 0 4px var(--sp-gold-3), 0 12px 28px rgba(0, 0, 0, 0.5); }
.sp-manyart img { width: 100%; height: 100%; object-fit: cover; }
.sp-manyart .sp-glyph, .sp-next-disc .sp-glyph { background: radial-gradient(circle at 38% 30%, #ffffff, #e9edf2 70%, #ccd3dc); }
.sp-manycard small { margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.sp-manycard b { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.sp-manycard em { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; background: var(--sp-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-manycard > .sp-mode { position: absolute; left: 0; top: 0; --size: clamp(96px, 9vw, 140px); }

/* --- the stash and buying (sheets) ------------------------------------------------------------------------------- */
.tr-modal.sp-stash-modal .tr-sheet, .tr-modal.sp-buy-modal .tr-sheet { width: min(94vw, 1040px); }
.sp-stash { display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); gap: clamp(14px, 1.6vw, 28px); min-height: min(58vh, 460px); }
.sp-stash-left { display: grid; align-content: start; gap: 12px; min-width: 0; }
.sp-segs { display: flex; gap: 4px; }
.sp-seg { all: unset; box-sizing: border-box; cursor: pointer; padding: 8px 14px; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); background: var(--surface-ink); }
.sp-seg.is-active { background: var(--paper); color: var(--ink-900); box-shadow: inset 0 -3px 0 var(--accent), 0 1px 2px rgba(16, 24, 40, 0.12); }
.sp-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.sp-item {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 150px;
  background: var(--paper-2); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--t-fast), transform var(--t-micro) var(--ease-out);
}
.sp-item:hover { box-shadow: inset 0 0 0 2px rgba(16, 21, 31, 0.16); }
.sp-item.is-on { background: var(--paper); box-shadow: inset 0 0 0 3px var(--accent), 0 6px 16px rgba(16, 24, 40, 0.14); }
.sp-item.is-gold { background: linear-gradient(180deg, #fffaf0, #f6e7bd); }
.sp-item.is-empty { opacity: 0.5; cursor: default; }
.sp-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-item-art { display: grid; place-items: center; min-height: 0; padding: 8px; }
.sp-item-art img { max-width: 82%; max-height: 96px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(16, 24, 40, 0.28)); }
.sp-item-count { position: absolute; right: 6px; top: 6px; padding: 1px 8px; font-family: var(--font-display); font-weight: 700; font-size: 15px; background: var(--dark); color: #fff; }
.sp-item-text { display: grid; gap: 2px; padding: 0 10px 10px; line-height: 1.15; }
.sp-item-text b { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; }
.sp-item-text small { font-size: 12.5px; font-weight: 500; color: var(--ink-500); }
.sp-stash-right { display: grid; align-content: start; gap: 10px; min-width: 0; }
.sp-stash-stage { position: relative; height: clamp(170px, 26vh, 250px); overflow: hidden; background: radial-gradient(ellipse 60% 70% at 50% 6%, rgba(255, 236, 190, 0.28), rgba(255, 236, 190, 0) 60%), radial-gradient(ellipse 90% 70% at 50% 118%, var(--sp-night-3), var(--sp-night-1) 72%); }
.sp-stash-sheet.is-empty .sp-stash-stage { display: none; }
.sp-stash-name { margin: 6px 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2vw, 34px); letter-spacing: 0.03em; text-transform: uppercase; line-height: 1; }
.sp-stash-line { margin: 0; font-size: 14.5px; font-weight: 500; color: var(--ink-500); }
.sp-stash-effect { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; }
.sp-stash-effect li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; background: var(--paper-2); font-weight: 600; }
.sp-stash-effect li span { color: var(--ink-500); font-size: 14px; }
.sp-stash-effect li b { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.sp-stash-effect li i { font-style: normal; color: var(--sp-gold-3); padding: 0 4px; }
.sp-stash-msg, .sp-stash-refusal { margin: 0; padding: 9px 12px; font-size: 14px; font-weight: 600; color: var(--ink-700); background: rgba(217, 137, 31, 0.12); }
.sp-stash-empty b { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; }
.sp-stash-empty p { margin: 6px 0 0; color: var(--ink-500); font-weight: 500; }
.sp-buy { display: grid; gap: 16px; }
.sp-buy-hl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sp-buy-hl li { display: grid; grid-template-rows: auto auto auto 1fr; justify-items: start; align-content: start; gap: 3px; padding: 10px; background: linear-gradient(180deg, #fffaf0, #f6e7bd); box-shadow: inset 0 3px 0 var(--sp-gold-3); min-width: 0; }
.sp-buy-art { width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--sp-night-1); margin-bottom: 4px; }
.sp-buy-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-buy-hl small { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sp-gold-ink); }
.sp-buy-hl b { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; }
.sp-buy-line { font-size: 12.5px; font-weight: 500; color: var(--ink-500); line-height: 1.25; }
.sp-buy-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sp-buy-facts li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; font-weight: 500; color: var(--ink-700); }
.sp-buy-facts svg { width: 20px; height: 20px; color: var(--ok); margin-top: 1px; }
.sp-buy-facts b { color: var(--ink-900); }
.sp-buy-price { display: grid; gap: 2px; margin-right: auto; line-height: 1; }
.sp-buy-price b { font-family: var(--font-display); font-weight: 700; font-size: 34px; }
.sp-buy-price small { font-size: 13px; font-weight: 500; color: var(--ink-500); }
.sp-buy-error { margin: 0; padding: 10px 12px; font-weight: 600; color: #8f1d1d; background: rgba(212, 60, 60, 0.1); }
.sp-buy-sheet .pp-sheet-foot { display: flex; align-items: center; gap: 14px; }

/* --- the takeover -------------------------------------------------------------------------------------------------- */
.sp-takeover { position: fixed; inset: 0; z-index: 85; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; overflow: hidden; animation: sp-fade 400ms var(--ease-std) both; }
.sp-tk-night { position: absolute; inset: 0; background: radial-gradient(ellipse at 34% 30%, rgba(255, 226, 150, 0.16), rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, #03060d, #0a1428 62%, #0d2416); }
.sp-tk-night::before { content: ""; position: absolute; inset: -2%; background: url("../stadium/night-stadium.jpeg") center 60% / cover; opacity: 0.32; filter: blur(2px) brightness(0.42) saturate(0.7); }
.sp-tk-beam { position: absolute; top: -12%; width: 44%; height: 124%; pointer-events: none; mix-blend-mode: screen; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(255, 236, 180, 0.3), rgba(255, 236, 180, 0) 76%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); }
.sp-tk-beam.is-left { left: 2%; animation: sp-beam-l 1700ms var(--ease-out) both; }
.sp-tk-beam.is-right { left: 30%; animation: sp-beam-r 1700ms var(--ease-out) 140ms both; }
@keyframes sp-beam-l { from { transform: rotate(-44deg); opacity: 0; } to { transform: rotate(-16deg); opacity: 1; } }
@keyframes sp-beam-r { from { transform: rotate(44deg); opacity: 0; } to { transform: rotate(14deg); opacity: 1; } }
.sp-tk-stage { position: relative; height: min(84vh, 760px); }
.sp-tk-copy { position: relative; display: grid; justify-items: start; gap: 10px; padding: 0 clamp(20px, 6vw, 110px) 0 0; }
.sp-tk-kicker { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.2vw, 22px); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); animation: sp-up 600ms var(--ease-out) 500ms both; }
.sp-tk-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(56px, 7.4vw, 140px); line-height: 0.86; letter-spacing: 0.02em; text-transform: uppercase; background: linear-gradient(180deg, #fff6d2 0%, #f0cf6e 45%, #b88a24 55%, #f3d674 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.45)); animation: sp-up 700ms var(--ease-out) 620ms both; }
.sp-tk-sub { margin: 0; font-size: clamp(16px, 1.3vw, 22px); font-weight: 500; color: rgba(255, 255, 255, 0.86); animation: sp-up 600ms var(--ease-out) 760ms both; }
.sp-tk-money { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; gap: 6px; animation: sp-up 600ms var(--ease-out) 880ms both; }
.sp-tk-money li { display: flex; align-items: baseline; gap: 12px; }
.sp-tk-money b { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 3.4vw, 64px); line-height: 0.95; color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, 0.5); }
.sp-tk-money span { font-family: var(--font-display); font-weight: 600; font-size: clamp(14px, 1.1vw, 20px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sp-gold-2); }
.sp-tk-line { margin: 0 0 8px; max-width: 44ch; font-size: clamp(14px, 1vw, 17px); font-weight: 500; color: rgba(255, 255, 255, 0.72); animation: sp-up 600ms var(--ease-out) 1000ms both; }
.sp-tk-copy .sp-btn { animation: sp-up 600ms var(--ease-out) 1120ms both; }

/* --- the tally after full time ------------------------------------------------------------------------------------- */
.sp-tally { position: fixed; inset: 0; z-index: 78; display: grid; place-items: center; overflow: hidden; }
.sp-tally-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.18) 60%, rgba(28, 60, 40, 0.3)); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); animation: sp-fade 280ms var(--ease-std) both; }
.sp-tally-body { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.2vh, 14px); width: min(92vw, 880px); animation: sp-up 420ms var(--ease-out) both; }
.sp-tally-kicker { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 1vw, 17px); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-700); }
.sp-tally-total { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 8vw, 128px); line-height: 0.85; color: var(--ink-900); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6); }
.sp-tally-total small { margin-left: 8px; font-size: 0.38em; color: var(--sp-gold-ink); }
.sp-tally-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: min(100%, 520px); }
.sp-tally-line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 16px; background: var(--paper); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), 0 8px 18px -8px rgba(16, 24, 40, 0.3); font-weight: 600; font-size: clamp(14px, 1vw, 17px); opacity: 0; transform: translateY(10px); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); }
.sp-tally-line.is-in { opacity: 1; transform: none; }
.sp-tally-line b { font-family: var(--font-display); font-weight: 700; font-size: 1.25em; color: var(--sp-gold-ink); }
.sp-tally-line.is-weekly b { color: var(--sp-gold-4); }
.sp-tally-track { position: relative; overflow: hidden; width: 100%; height: clamp(110px, 17vh, 160px); background: radial-gradient(ellipse 80% 90% at 50% -10%, #193257, var(--sp-night-1) 72%); box-shadow: 0 2px 4px rgba(6, 26, 14, 0.2), 0 18px 34px -12px rgba(6, 26, 14, 0.5); }
.sp-tally-track .sp-track-canvas { position: absolute; inset: 0; }
.sp-tally-tier { min-height: 96px; display: flex; align-items: center; justify-content: center; gap: 18px; }
.sp-tally-tier.is-in > * { animation: sp-drop 700ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.sp-tally-reached { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2vw, 32px); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); }
.sp-tally-reward { display: grid; justify-items: center; gap: 6px; }
.sp-tally-reward small { font-weight: 600; font-size: 13px; color: var(--ink-700); }
.sp-tally-buttons { display: flex; gap: 12px; }

/* --- landscape phones ---------------------------------------------------------------------------------------------- */
@media (max-height: 520px) {
  .bar-pass { gap: 6px; padding: 0 9px 0 6px; }
  .career-bar:has(.bar-room:not([hidden])) .bar-pass { gap: 5px; padding: 0 7px 0 8px; }
  .career-bar:has(.bar-room:not([hidden])) .bar-pass-text { display: none; }
  .career-bar:has(.bar-room:not([hidden])) .bar-pass-star { display: block; }
  .sp-card-strip-line { display: none; }
  .bar-pass-text b { font-size: 13px; }
  .bar-pass-bar { width: 62px; height: 4px; }
  .bar-pass-text { gap: 4px; }
  /* the phone: the showcase over the season's line down the left, the track the whole height on the right -- both rows
     of medallions at a size a thumb can press (a short track in the laptop's layout shrank them to 30 px) */
  .sp-page { --gap: 7px; }
  .sp-page.is-rewards {
    grid-template-columns: minmax(0, 41fr) minmax(0, 59fr); grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "tabs tabs" "show track" "season track";
  }
  .sp-page.is-rewards .sp-top { display: contents; }
  .sp-page.is-rewards .sp-tabs { grid-area: tabs; }
  .sp-page.is-rewards .sp-show { grid-area: show; min-height: 0; }
  .sp-page.is-rewards .sp-season { grid-area: season; }
  .sp-page.is-rewards .sp-trackcard { grid-area: track; min-height: 0; }
  .sp-page.is-rewards .sp-season .card-face {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tier tier" "claim buy"; align-items: center; gap: 6px 8px;
  }
  .sp-season-head { grid-area: buy; justify-self: end; }
  .sp-season-head .dcard-icon, .sp-season-head .card-title, .sp-season-head .card-sub { display: none; }
  .sp-tierline { grid-area: tier; }
  .sp-stats { display: none; }
  .sp-claimrow { grid-area: claim; margin: 0; padding: 0; background: none; box-shadow: none; }
  .sp-claimrow-text { display: none; }
  .sp-claimrow .sp-btn { width: 100%; }
  .sp-next { grid-area: claim; margin: 0; }
  .sp-buy-note { display: none; }
  .sp-stage-value b { font-size: 26px; }
  .sp-stage-value small { font-size: 10.5px; }
  .sp-stage-frame { height: 74%; }
  .sp-tabs { height: 32px; }
  .sp-tab { padding: 0 12px; font-size: 13px; }
  .sp-show-copy { gap: 4px; padding: 10px 12px 0; max-width: 58%; }
  .sp-tag { height: 19px; padding: 0 6px; font-size: 10.5px; }
  .sp-show-name { font-size: 24px; }
  .sp-show-line { display: none; }
  .sp-show-act { padding: 8px 12px 10px; }
  .sp-btn { min-height: 36px; padding: 0 14px; font-size: 13px; }
  .sp-btn.is-small { min-height: 28px; padding: 0 9px; font-size: 11.5px; }
  .sp-state { min-height: 30px; font-size: 12px; padding: 0 9px; }
  .sp-season .card-face { gap: 6px; padding: 8px 10px; }
  .sp-owned { height: 30px; font-size: 12px; padding: 0 8px; }
  .sp-season-head .card-sub { display: none; }
  .sp-tierbadge { width: 38px; font-size: 24px; }
  .sp-tiertext { gap: 6px; }
  .sp-tiertext b { font-size: 16px; }
  .sp-xpbar { height: 7px; }
  .sp-xpnum { font-size: 12px; }
  .sp-next-item:nth-child(n + 2) { display: none; }
  .sp-next-disc { width: 30px; }
  .sp-next-text small { font-size: 10px; }
  .sp-next-text b { font-size: 12px; }
  .sp-mini { padding: 5px 8px 6px; gap: 2px; }
  .sp-mini-cell { height: 7px; }
  .sp-tnum { font-size: 11px; padding: 0 5px; }
  .sp-ch { padding: 7px 0; }
  .sp-ch-text { font-size: 13px; }
  .sp-ch-xp { font-size: 15px; }
  .sp-boost-item { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 5px 8px; gap: 8px; }
  .sp-boost-item .sp-glyph { width: 30px; height: 30px; }
  .sp-boost-item b { font-size: 13px; }
  .sp-boost-item small { font-size: 11px; }
  .sp-reveal-stage { width: min(74vh, 300px); margin: 0; }
  .sp-reveal-body { gap: 4px; padding: 10px; }
  .sp-reveal-title { font-size: 34px; }
  .sp-reveal-line { font-size: 13px; }
  .sp-reveal-where { display: none; }
  .sp-reveal-buttons { margin-top: 8px; }
  .sp-pickcard { width: 150px; padding: 8px; }
  .sp-takeover { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
  .sp-tk-title { font-size: 48px; }
  .sp-tk-money b { font-size: 28px; }
  .sp-tk-line { display: none; }
  .sp-tally-total { font-size: 54px; }
  .sp-tally-line { padding: 5px 12px; font-size: 13px; }
  .sp-tally-track { height: 84px; }
  .sp-tally-tier { min-height: 56px; }
  .sp-stash { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
  .sp-items { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
  .sp-item { min-height: 104px; }
  .sp-item-art img { max-height: 42px; }
  .sp-stash-stage { height: 84px; }
  /* the phone: an item's detail and its Hold to use within the sheet's first screen, the takeover's two budgets too */
  .sp-stash-right { gap: 5px; }
  .sp-stash-name { margin: 2px 0 0; font-size: 20px; }
  .sp-stash-line { font-size: 12.5px; line-height: 1.3; }
  .sp-stash-effect { margin: 0; gap: 4px; }
  .sp-stash-effect li { padding: 5px 10px; }
  .sp-stash-effect li span { font-size: 12.5px; }
  .sp-stash-effect li b { font-size: 16px; }
  .sp-btn.is-hold { min-height: 46px; }
  .sp-buy-hl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .sp-buy-hl li { grid-template-columns: 54px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 8px; row-gap: 2px; padding: 6px; }
  .sp-buy-art { grid-row: 1 / 3; width: 54px; margin: 0; }
  .sp-buy-hl b { font-size: 14px; }
  .sp-buy-hl small { font-size: 10.5px; }
  .sp-buy-line { display: none; }
  .sp-buy-facts li { font-size: 13px; }
  .sp-buy-price b { font-size: 28px; }
  .sp-item { min-height: 0; }
  .sp-item-text span, .sp-item small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the alpha's Report and full-screen buttons sit in the bottom-right corner: the tiers' strip stops short of them */
  .sp-mini { padding-right: 112px; }
  .sp-card-row { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bar-pass .sp-dot, .sp-medal.is-claimable .sp-disc::after, .sp-btn.is-claim::after, .sp-btn.is-gold::after, .sp-rays { animation: none !important; }
}

/* --- Club → Stadium -------------------------------------------------------------------------------------------- */
.club-tabs { margin-bottom: clamp(8px, 1.1vw, 18px); }
.career-page[data-page="club"]:has(.club-tabs) { display: block; }
.career-page[data-page="club"]:has(.club-tabs).is-active { display: flex; flex-direction: column; }
.club-grid.has-tabs { flex: 1 1 auto; min-height: 0; height: auto; }
.sp-stadium { --gap: clamp(10px, 1.1vw, 20px); height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--gap); }
.sp-stadium.is-entering .card { animation: card-rise 560ms var(--ease-out) both; animation-delay: calc(var(--d, 0) * 70ms + 80ms); }
.sp-st-grid { display: grid; gap: var(--gap); min-height: 0; grid-template-columns: minmax(0, 27fr) minmax(0, 73fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "rail preview" "rail items"; }
.sp-st-rail { grid-area: rail; min-height: 0; }
.sp-st-preview { grid-area: preview; min-height: 0; }
.sp-st-items { grid-area: items; min-width: 0; }
.sp-stadium .card-face { height: 100%; }
.sp-st-rail .card-face { display: flex; flex-direction: column; padding: clamp(12px, 1.2vw, 22px) 0 6px; }
.sp-st-rail .dcard-head { margin: 0 clamp(14px, 1.3vw, 24px); }
.sp-st-slots { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-auto-rows: minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
.sp-st-slot {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 6px clamp(14px, 1.3vw, 24px); box-shadow: inset 4px 0 0 transparent; border-bottom: 1px solid rgba(16, 21, 31, 0.07); transition: background var(--t-fast), box-shadow var(--t-fast);
}
.sp-st-slot:hover { background: var(--surface-ink); }
.sp-st-slot.is-on { background: var(--paper); box-shadow: inset 4px 0 0 var(--accent); }
.sp-st-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sp-st-thumb { width: clamp(46px, 4vw, 64px); aspect-ratio: 1; overflow: hidden; background: var(--sp-night-1); box-shadow: 0 2px 6px rgba(16, 24, 40, 0.2); }
.sp-st-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-st-text { display: grid; gap: 2px; min-width: 0; line-height: 1.1; }
.sp-st-text b { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.1vw, 20px); letter-spacing: 0.06em; text-transform: uppercase; }
.sp-st-text span { font-size: clamp(13px, 0.92vw, 16px); font-weight: 500; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-st-count { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; color: var(--ink-300); }
.sp-st-preview .card-face { position: relative; overflow: hidden; background: var(--sp-night-1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 4px rgba(6, 26, 14, 0.2), 0 18px 34px -12px rgba(6, 26, 14, 0.5), 0 46px 90px -34px rgba(6, 26, 14, 0.55); }
.sp-ground { position: absolute; inset: 0; }
.sp-ground-canvas { position: absolute; inset: 0; display: block; }
.sp-st-label { position: absolute; left: clamp(12px, 1.2vw, 22px); top: clamp(10px, 1.2vh, 18px); z-index: 2; display: grid; gap: 2px; padding: 8px 12px; background: rgba(5, 10, 22, 0.74); }
.sp-st-label b { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.1vw, 20px); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.sp-st-label span { font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.72); }
.sp-st-clip { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(5, 10, 22, 0.45), rgba(5, 10, 22, 0.82)); }
.sp-st-clip video { height: calc(100% - 2 * clamp(10px, 1.6vh, 22px)); width: auto; aspect-ratio: 1; max-width: 92%; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 22px 46px rgba(0, 0, 0, 0.6); }
.sp-st-clip[hidden] { display: none; }
.sp-st-items .card-face { display: flex; flex-direction: column; gap: 8px; padding: clamp(10px, 1.1vw, 18px) clamp(14px, 1.3vw, 24px) clamp(12px, 1.3vh, 18px); }
.sp-st-designs { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(112px, 9.4vw, 150px); gap: 10px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(16, 21, 31, 0.3) transparent; padding-bottom: 4px; }
.sp-st-design { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; padding: 6px; background: var(--paper-2); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--t-fast), transform var(--t-micro) var(--ease-out); }
.sp-st-design:hover { box-shadow: inset 0 0 0 2px rgba(16, 21, 31, 0.18); transform: translateY(-2px); }
.sp-st-design.is-on { background: var(--paper); box-shadow: inset 0 0 0 3px var(--accent), 0 6px 16px rgba(16, 24, 40, 0.14); }
.sp-st-design.is-premium { background: linear-gradient(180deg, #fffaf0, #f6e7bd); }
.sp-st-design.is-locked .sp-st-art img { filter: grayscale(0.5) brightness(0.8); }
.sp-st-design:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-st-art { aspect-ratio: 1; overflow: hidden; background: var(--sp-night-1); }
.sp-st-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-st-design b { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.05; }
.sp-st-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-500); }
.sp-st-status svg { width: 12px; height: 12px; }
.sp-st-status.is-on { color: var(--accent-ink); }
.sp-st-status.is-locked { color: var(--ink-500); }
@media (max-height: 520px) {
  .club-tabs { margin-bottom: 6px; }
  .sp-st-grid { grid-template-columns: minmax(0, 30fr) minmax(0, 70fr); }
  .sp-st-slot { gap: 8px; padding: 3px 10px; }
  .sp-st-thumb { width: 30px; }
  .sp-st-text b { font-size: 12.5px; }
  .sp-st-text span { font-size: 11.5px; }
  .sp-st-count { display: none; }
  .sp-st-designs { grid-auto-columns: 78px; gap: 6px; padding-bottom: 2px; }
  .sp-st-items .card-face { gap: 4px; padding: 6px 10px 6px; }
  .sp-st-items .dcard-head { display: none; }
  .sp-st-design { padding: 4px; gap: 2px; }
  .sp-st-design b { font-size: 12px; }
  .sp-st-status { font-size: 10.5px; }
  .sp-st-label { padding: 4px 8px; }
  .sp-st-label span { display: none; }
}