/*
 * player_detail.css — scoped stylesheet for the shared _player_detail.pug
 * partial (Wave 6a de-:root refactor, 2026-07-31).
 *
 * WHY THIS FILE EXISTS
 *   Four templates used to load ALL of dashboard.css just to style the
 *   player-detail partial: team_owner/player.pug, franchise_player.pug,
 *   public/player_view.pug, and league_view.pug. Because dashboard.css
 *   loads after app.css / marketing.css, its `:root` token block silently
 *   clobbered canon tokens (--gold, --font-display, --font-mono, --line,
 *   --text-muted, --accent-color, --rating-*, ...) across the WHOLE page.
 *   This file carries only the player-detail rules, with the dashboard
 *   token values pinned under a `.pd-scope` class instead of `:root`, so
 *   the partial renders pixel-identical while the rest of each page keeps
 *   its own design system. Every host wraps the partial (and any sibling
 *   elements that reuse these classes, e.g. the my-team boost cart) in a
 *   `.pd-scope` element.
 *
 * PROVENANCE NOTE
 *   The rules below are verbatim copies of two regions of the retired
 *   dashboard.css (deleted 2026-07-31, Wave 6b step 3, when its last
 *   consumer layout.pug was retired):
 *     - "RATING BAND COLORS (Phase 7)"      (dashboard.css ~1611-1723)
 *     - "PLAYER DETAIL STYLES (Wave 6)"     (dashboard.css ~3382-4110)
 *   THIS FILE is now the canonical home of those rules. Rules that only
 *   league_view uses (.modern-card-header h3, .box-score-player*,
 *   .position-cell) live in league_detail.css / league_view.pug instead.
 *
 * SCOPING CONTRACT
 *   - Token DEFINITIONS live on `.pd-scope` (never `:root`).
 *   - `--text` is deliberately NOT pinned here: on layout_app hosts the
 *     html[data-theme] canon value always outranked dashboard's :root copy,
 *     and marketing.css already uses the same #f4f1ea — pinning it would
 *     CHANGE pages instead of preserving them.
 *   - `--rating-99` is likewise not pinned (dashboard.css never defined it;
 *     app.css supplies it on app hosts, the in-rule fallbacks cover the rest).
 *   - The light-theme override mirrors app.css's legacy-alias inversion so
 *     light mode keeps behaving exactly as it did with dashboard.css loaded.
 *   - Rule SELECTORS stay unscoped (verbatim copies) so specificity and
 *     the cascade match dashboard.css exactly when both files load.
 *
 * Cache busting: hosts append ?v=<cssVersion>; safe_pug.ts hashes this file
 * together with league_detail.css so edits here roll the token automatically.
 */

/* ─── PLAYER-DETAIL DESIGN TOKENS (scoped — the whole point) ────── */
.pd-scope {
  /* Strokes */
  --line:        rgba(244, 241, 234, 0.07);
  --line-strong: rgba(244, 241, 234, 0.14);

  /* Type (values dashboard.css:39 uses today; --text intentionally absent) */
  --text-muted:  #8e93a3;
  --text-dim:    #7e8499;

  /* Accents */
  --accent-color: #e63946;
  --gold:         #fdb913;
  --success:      #4cd5a3;

  /* Surfaces */
  --bg-base:   #08090d;
  --bg-elev-1: #0e1118;
  --bg-elev-2: #161a23;

  /* Typography stacks */
  --font-display: "Saira Semi Condensed", "Arial Black", system-ui, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "Manrope", system-ui, -apple-system, sans-serif;
}
/* Light-theme inversion parity: app.css re-aliases the --bg-elev-* legacy
   tokens to canon surfaces under html[data-theme="light"] at HIGHER
   specificity than dashboard's :root, so light mode always won these even
   with dashboard.css loaded. Reproduce that exact behavior inside the
   scope. (Marketing pages never set data-theme="light" — dark-only.) */
html[data-theme="light"] .pd-scope {
  --bg-elev-1: var(--surface);
  --bg-elev-2: var(--surface-2);
  --bg-elev-3: var(--surface-3);
}

/* ─── RATING BAND COLORS (Phase 7) ──────────────────────────────
   Discrete threshold bands instead of continuous gradient. Each
   rating-driven element picks up a solid color via these classes. */
.pd-scope {
  /* BPV2-S11 #157: rebalanced rating bands — elite tier used to be
     dark forest green (#0d6e3f) which read as "muted" / "muddy" next
     to lower tiers. User asked for bright/light green at the top so
     90+ OVR pops. New ramp goes: dark-red → orange → yellow → lime →
     bright green at the top, with each step visually brighter as the
     rating climbs. The "elite" tier is the brightest visible green,
     not the darkest one. */
  --rating-elite:    #5be38a;
  --rating-great:    #36c168;
  --rating-good:     #28a94f;
  --rating-fair:     #9ad12e;
  --rating-avg:      #e8c628;
  --rating-below:    #e89328;
  --rating-poor:     #dc5a35;
  --rating-bad:      #c92e2e;
  --rating-terrible: #7a1d1d;
  /* Foreground (text) color on each chip. User feedback (#158): 95+
     ratings need white text — the dark green readability on the bright
     green chip wasn't reading at a glance. White across the elite/great/
     good tier with the slight dark-text exception kept only for the
     fair/avg yellow/lime chips (which need dark text for AA contrast). */
  --rating-elite-fg:    #ffffff;
  --rating-great-fg:    #ffffff;
  --rating-good-fg:     #ffffff;
  --rating-fair-fg:     #1a2806;
  --rating-avg-fg:      #2b220a;
  --rating-below-fg:    #ffffff;
  --rating-poor-fg:     #ffffff;
  --rating-bad-fg:      #ffffff;
  --rating-terrible-fg: #ffffff;
}
/* 99 OVR — Madden 99 Club. Multi-stop gold gradient that reads as
   metallic + glossy: dark amber rim on top edge, bright "leaf gold"
   highlight band 30% in, deeper amber center, second highlight near
   the bottom — mimics the bevel-and-emboss treatment Madden Ultimate
   Team uses on its 99-OVR cards. A pseudo-element ::after sweeps a
   diagonal sheen across the badge for the live-shine effect.
   The classifier emits .rating-band-99 only when value === 99. */
.rating-band-99 {
  position: relative;
  background: linear-gradient(
    180deg,
    #a8740c 0%,
    #fdd23a 18%,
    #fff4a8 35%,
    #fdb913 55%,
    #c9890a 75%,
    #f7d04e 92%,
    #8a5e08 100%
  ) !important;
  color: #3a2200 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65),
    0 -1px 0 rgba(0, 0, 0, 0.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 0 0 1px #a8740c,
    0 0 26px -2px rgba(253, 185, 19, 0.7),
    0 6px 18px -6px rgba(0, 0, 0, 0.6) !important;
  overflow: hidden;
  isolation: isolate;
}
/* Glossy diagonal sweep — runs from top-left to bottom-right every
   3.2s so the badge looks like a polished gold inlay catching light. */
.rating-band-99::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 48%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.55) 52%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: rating99-sweep 3.2s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}
/* Subtle horizontal highlight band locked at the bevel midline. */
.rating-band-99::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 28%,
    rgba(255, 255, 255, 0.35) 35%,
    transparent 42%
  );
  pointer-events: none;
}
@keyframes rating99-sweep {
  0%      { transform: translateX(-100%); }
  60%     { transform: translateX(100%); }
  100%    { transform: translateX(100%); }
}
.rating-band-elite    { background: var(--rating-elite)    !important; color: var(--rating-elite-fg)    !important; }
.rating-band-great    { background: var(--rating-great)    !important; color: var(--rating-great-fg)    !important; }
.rating-band-good     { background: var(--rating-good)     !important; color: var(--rating-good-fg)     !important; }
.rating-band-fair     { background: var(--rating-fair)     !important; color: var(--rating-fair-fg)     !important; }
.rating-band-avg      { background: var(--rating-avg)      !important; color: var(--rating-avg-fg)      !important; }
.rating-band-below    { background: var(--rating-below)    !important; color: var(--rating-below-fg)    !important; }
.rating-band-poor     { background: var(--rating-poor)     !important; color: var(--rating-poor-fg)     !important; }
.rating-band-bad      { background: var(--rating-bad)      !important; color: var(--rating-bad-fg)      !important; }
.rating-band-terrible { background: var(--rating-terrible) !important; color: var(--rating-terrible-fg) !important; }

/* =====================================================================
   PLAYER DETAIL STYLES (Wave 6 / W6-25, 2026-05-13; extracted to this
   scoped file in Wave 6a, 2026-07-31 — see header note)
   ===================================================================== */

/* PLAYER HERO CARD */
.player-card-hero {
  position: relative;
  background:
    radial-gradient(circle at 80% 0%, rgba(230, 57, 70, 0.18), transparent 55%),
    radial-gradient(circle at 20% 100%, rgba(253, 185, 19, 0.10), transparent 55%),
    linear-gradient(180deg,
      rgba(28, 32, 48, 0.85) 0%,
      rgba(8, 11, 16, 0.55) 60%,
      rgba(8, 11, 16, 0.7) 100%);
  border: 1px solid color-mix(in srgb, var(--accent-color) 22%, var(--line, rgba(244,241,234,0.08)));
  border-radius: 18px;
  padding: 1.85rem 1.6rem 1.65rem;
  overflow: hidden;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px) saturate(140%);
}
.player-card-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(to right,
    var(--accent-color, #e63946) 0%,
    var(--gold, #fdb913) 50%,
    transparent 90%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent-color) 55%, transparent);
  pointer-events: none;
}

/* OVR badge */
.player-ovr-hero {
  width: 128px; height: 128px;
  margin: 0 auto 1.4rem;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3.8rem;
  letter-spacing: -0.025em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  background: var(--rating-bad);
  box-shadow:
    0 14px 32px -8px rgba(0, 0, 0, 0.7),
    inset 0 -3px 0 rgba(0, 0, 0, 0.22),
    inset 0 2px 0 rgba(255, 255, 255, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  position: relative;
  font-variant-numeric: tabular-nums;
}
.player-ovr-hero::after {
  content: "";
  position: absolute; inset: 4px;
  border-radius: 14px;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.12), transparent 55%);
  pointer-events: none;
}

.player-name-hero {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text);
  margin-bottom: 0.55rem;
  line-height: 1.05;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

/* Dev-trait badge */
.player-dev-hero {
  display: flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  padding: 0.55rem 1.1rem;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold, #fdb913) 12%, rgba(8,11,16,0.65)),
    rgba(8,11,16,0.6));
  border: 1px solid color-mix(in srgb, var(--gold, #fdb913) 32%, var(--line));
  border-radius: 999px;
  width: fit-content;
  margin: 1.1rem auto 0;
  box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--gold, #fdb913) 35%, transparent);
}
.player-dev-hero img {
  width: 24px; height: 24px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
.player-dev-hero span {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold, #fdb913);
}

/* Player portrait */
.player-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.05;
  max-width: 240px;
  margin: 0 auto 1.4rem;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--accent-color) 40%, var(--line-strong));
  box-shadow:
    0 16px 38px -10px rgba(0, 0, 0, 0.68),
    0 0 0 4px rgba(8, 11, 16, 0.55),
    0 0 28px color-mix(in srgb, var(--accent-color) 18%, transparent);
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.12), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,0.45), transparent 60%);
}
.player-portrait-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.player-portrait-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 6rem;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.player-portrait-num {
  position: absolute;
  top: 0.65rem; right: 0.65rem;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--text);
  letter-spacing: -0.02em;
}
.player-portrait-team {
  position: absolute;
  top: 0.65rem; left: 0.65rem;
}

.player-meta-hero {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.player-meta-chip {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.player-meta-chip.is-position {
  background: var(--accent-color);
  color: var(--text);
  border-color: var(--accent-color);
}
.player-meta-chip.is-team {
  background: var(--bg-base);
  color: var(--text-muted);
}

/* STATS TILES */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (max-width: 575.98px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .stats-grid .stat-tile { padding: 0.85rem 0.65rem; }
  .stats-grid .stat-tile-value { font-size: 1.65rem; }
}
.stat-tile {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent-color) 4%, rgba(28,32,48,0.55)),
    rgba(8,11,16,0.6));
  border: 1px solid color-mix(in srgb, var(--accent-color) 18%, var(--line));
  border-radius: 12px;
  padding: 1.1rem 0.9rem 1rem;
  text-align: center;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.03);
}
.stat-tile::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--accent-color), var(--gold), transparent);
  opacity: 0.55;
  transition: opacity 200ms ease;
}
.stat-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent-color) 38%, transparent);
  box-shadow:
    0 12px 26px -6px color-mix(in srgb, var(--accent-color) 35%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
.stat-tile:hover::before { opacity: 1; }
.stat-tile-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.stat-tile-value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: -0.015em;
  color: var(--text);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ATTRIBUTES PANELS + BARS */
.attributes-panel {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem 1.4rem;
  position: relative;
  overflow: hidden;
}
.attributes-panel::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 22px; height: 1px;
  background: var(--gold);
}
.attributes-panel-header {
  display: flex; align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.attributes-panel-header i {
  color: var(--accent-color);
  font-size: 1.05rem;
}
.attributes-panel-header h3,
.attributes-panel-header h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  margin: 0;
}
.attr-bar-single { margin-bottom: 0.85rem; }
.attr-bar-single:last-child { margin-bottom: 0; }
.attr-bar-single-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.4rem;
  gap: 0.5rem;
}
.attr-bar-single-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.attr-bar-single-value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--text);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  padding: 0.1rem 0.5rem;
  border-radius: 6px;
  background: rgba(8,11,16,0.45);
  border: 1px solid var(--line);
  min-width: 40px;
  text-align: center;
}
.attr-bar-single.is-elite-99 .attr-bar-single-value,
.attr-bar-single[data-band="99"] .attr-bar-single-value {
  color: #fff; border-color: var(--rating-99, #f5d000); background: var(--rating-99, #c89e00);
  box-shadow: 0 0 14px color-mix(in srgb, var(--rating-99, #f5d000) 55%, transparent);
}
.attr-bar-single[data-band="elite"] .attr-bar-single-value {
  color: #fff; border-color: var(--rating-elite, #4cd5a3); background: var(--rating-elite, #1e8e5f);
}
.attr-bar-single[data-band="great"] .attr-bar-single-value {
  color: #fff; border-color: rgba(76,213,163,0.35); background: rgba(76,213,163,0.18);
}
.attr-bar-single-track {
  height: 10px;
  background: linear-gradient(180deg, rgba(8,11,16,0.85), rgba(8,11,16,0.6));
  border: 1px solid var(--line, rgba(244,241,234,0.08));
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
}
.attr-bar-single-fill {
  height: 100%;
  width: calc(var(--stat-value, 0) * 1%);
  background: linear-gradient(90deg,
    var(--rating-bad, #c92e2e) 0%,
    var(--rating-poor, #d05c2e) 35%,
    var(--rating-fair, #d8a13a) 60%,
    var(--rating-good, #67c167) 75%,
    var(--rating-great, #4cd5a3) 87%,
    var(--rating-elite, #1e8e5f) 100%);
  background-size: 100% 100%;
  transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 0 10px color-mix(in srgb, var(--accent-color) 25%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.18);
  position: relative;
}
.attr-bar-single[data-band="elite"] .attr-bar-single-fill,
.attr-bar-single[data-band="99"] .attr-bar-single-fill {
  box-shadow:
    0 0 18px color-mix(in srgb, var(--rating-elite, #4cd5a3) 65%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.32);
}
.attr-bar-single[data-band="99"] .attr-bar-single-fill {
  background: linear-gradient(90deg, var(--gold, #fdb913), color-mix(in srgb, var(--gold, #fdb913) 60%, #fff));
  box-shadow: 0 0 22px color-mix(in srgb, var(--gold, #fdb913) 70%, transparent);
}

/* ABILITY CHIPS */
.ability-chip {
  position: relative;
  padding: 1.1rem 1.15rem 1rem 1.35rem;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent-color) 4%, rgba(28,32,48,0.65)),
    rgba(8,11,16,0.55));
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  box-shadow:
    0 8px 22px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.03);
}
.ability-chip::before {
  content: "";
  position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 4px; border-radius: 0 4px 4px 0;
  background: var(--accent-color);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent-color) 55%, transparent);
  transition: background 200ms ease, box-shadow 200ms ease;
}
.ability-chip:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}
.ability-chip.is-locked {
  opacity: 0.55;
  background: linear-gradient(180deg, rgba(28,32,48,0.45), rgba(8,11,16,0.5));
}
.ability-chip.is-locked::before {
  background: var(--text-dim);
  box-shadow: none;
}
.ability-chip-head {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
}
/* Ability icon (2026-05-28). 36px square, sits to the left of the
   rank pill + title in .ability-chip-head. Matches the Discord
   player-card iconography. X-Factor variant gets a red ring +
   halo so the primary ability reads at a glance, same as the
   Discord renderer's primary treatment. */
.ability-chip-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(8, 11, 16, 0.55);
  border: 1px solid var(--line-strong);
  padding: 2px;
  flex-shrink: 0;
}
.ability-chip-icon.is-xfactor {
  border-color: #e54545;
  box-shadow:
    0 0 0 1px rgba(229, 69, 69, 0.55),
    0 0 14px rgba(229, 69, 69, 0.45);
}
.ability-chip.is-locked .ability-chip-icon {
  filter: grayscale(1);
  opacity: 0.7;
}
.ability-chip-rank {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  font-weight: 800;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  text-transform: uppercase;
  background: rgba(8,11,16,0.55);
  color: var(--text-muted);
  border: 1px solid var(--line-strong);
  flex-shrink: 0;
}
.ability-chip-rank.is-bronze   { background: rgba(205, 127, 50, 0.18); color: #d99355; border-color: rgba(205, 127, 50, 0.45); }
.ability-chip-rank.is-silver   { background: rgba(192, 192, 192, 0.18); color: #e0e0e0; border-color: rgba(192, 192, 192, 0.45); }
.ability-chip-rank.is-gold     {
  background: linear-gradient(180deg, rgba(253, 185, 19, 0.22), rgba(253, 185, 19, 0.10));
  color: var(--gold);
  border-color: rgba(253, 185, 19, 0.55);
  box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 35%, transparent);
}
.ability-chip-rank.is-platinum {
  background: linear-gradient(180deg, rgba(228, 228, 240, 0.22), rgba(228, 228, 240, 0.10));
  color: #f0f0fa;
  border-color: rgba(228, 228, 240, 0.55);
  box-shadow: 0 0 14px rgba(228, 228, 240, 0.4);
}
/* `is-x-factor` is what the template actually emits — the class is built from
   the resolved rank ("X-Factor".toLowerCase()), so the underscore / no-separator
   spellings alone never matched and X-Factors fell back to the plain pill. */
.ability-chip-rank.is-x-factor,
.ability-chip-rank.is-x_factor,
.ability-chip-rank.is-xfactor,
.ability-chip-rank.is-elite    {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 65%, #000));
  color: #fff;
  border-color: var(--accent-color);
  box-shadow:
    0 0 18px color-mix(in srgb, var(--accent-color) 65%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.3);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.ability-chip.rank-bronze::before { background: #cd7f32; box-shadow: 0 0 14px rgba(205,127,50,0.4); }
.ability-chip.rank-silver::before { background: #d8d8d8; box-shadow: 0 0 14px rgba(192,192,192,0.4); }
.ability-chip.rank-gold::before   { background: var(--gold); box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 55%, transparent); }
.ability-chip.rank-platinum::before { background: #e4e4f0; box-shadow: 0 0 14px rgba(228,228,240,0.5); }
.ability-chip.rank-x-factor, .ability-chip.rank-x_factor, .ability-chip.rank-xfactor, .ability-chip.rank-elite {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent-color) 14%, rgba(28,32,48,0.65)),
    rgba(8,11,16,0.6));
  border-color: color-mix(in srgb, var(--accent-color) 38%, var(--line));
  box-shadow:
    0 14px 32px color-mix(in srgb, var(--accent-color) 28%, rgba(0,0,0,0.4)),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
.ability-chip-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  flex: 1; min-width: 0;
  line-height: 1.1;
  /* Single-word titles (CONDUCTOR, GUNSLINGER) have no break opportunity, so
     `min-width: 0` alone still let the text run past the flex box and over the
     OVR lock chip on narrow phones. Break inside the word instead. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ability-chip-locked {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 700;
  /* Never let a long ability title squeeze or overrun the OVR gate. */
  flex-shrink: 0;
  white-space: nowrap;
}
.ability-chip-desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* CONTRACT */
.contract-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}
.contract-row:last-child { border-bottom: 0; }
.contract-label {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.contract-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--text);
  font-feature-settings: "tnum";
}
.contract-value.positive { color: var(--success); }
.contract-value.negative { color: var(--accent-color); }

/* ROSTER UPDATES (upgrade-row) */
.upgrade-row {
  display: flex; align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.85rem;
  background: var(--bg-elev-2);
  border-radius: 10px;
  border: 1px solid var(--line);
  margin-bottom: 0.5rem;
}
.upgrade-row.is-pending {
  border-color: rgba(255, 215, 0, 0.35);
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.05), transparent);
}
.upgrade-row.is-applied { border-color: rgba(76, 213, 163, 0.25); }
.upgrade-row-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1; }
.upgrade-row-body { flex: 1; min-width: 0; }
.upgrade-row-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  letter-spacing: 0.01em;
}
.upgrade-row-meta {
  display: flex; gap: 0.85rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.18rem;
  font-family: var(--font-mono);
}
.upgrade-cost { color: var(--gold); font-weight: 600; }
.upgrade-row-status {
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffd700;
  flex-shrink: 0;
  font-family: var(--font-mono);
}

/* WEEKLY STATS TABLES */
.weekly-stats-section { border-top: 1px solid var(--line); }
.weekly-stats-section:first-child { border-top: 0; }
.box-score-table.is-weekly td.stat a.wk-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: color 140ms ease, background 140ms ease;
}
.box-score-table.is-weekly td.stat a.wk-link:hover {
  color: var(--accent-color);
  background: rgba(230, 57, 70, 0.10);
}
.box-score-table.is-weekly td.stat a.wk-link i { font-size: 0.76rem; opacity: 0.55; }
.box-score-table.is-weekly td.stat a.wk-link:hover i { opacity: 1; }
.weekly-stats-section-title {
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-color);
  font-weight: 700;
  background: rgba(244, 241, 234, 0.02);
  border-bottom: 1px solid var(--line);
}

/* BOX SCORE TABLES */
.box-score-table { margin: 0; }
.box-score-table th {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--line-strong);
  padding: 0.7rem 0.85rem;
  background: rgba(244, 241, 234, 0.02);
}
.box-score-table th.stat { text-align: center; }
.box-score-table td {
  padding: 0.7rem 0.85rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.88rem;
}
.box-score-table td.stat {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
}
.box-score-table td.stat.is-good { color: var(--success); }
.box-score-table td.stat.is-bad  { color: var(--accent-color); }
.box-score-table td.stat.is-good.is-zero,
.box-score-table td.stat.is-bad.is-zero { color: var(--text-dim); }

@media (max-width: 767.98px) {
  .box-score-table th,
  .box-score-table td { padding: 0.55rem 0.6rem; font-size: 0.82rem; }
  .box-score-table th { font-size: 0.76rem; }
  .box-score-table th:first-child,
  .box-score-table td:first-child {
    position: sticky; left: 0; z-index: 1;
    min-width: 132px; max-width: 132px;
    background: var(--bg-elev-2);
    border-right: 1px solid var(--line-strong);
    box-shadow: 6px 0 8px -8px rgba(0,0,0,0.6);
  }
  .box-score-table thead th:first-child {
    background: rgba(244, 241, 234, 0.04);
    z-index: 2;
  }
}
@media (max-width: 419.98px) {
  .box-score-table .is-secondary,
  .box-score-table .position-cell { display: none; }
  .box-score-table th,
  .box-score-table td { padding: 0.5rem 0.45rem; }
  .box-score-table th:first-child,
  .box-score-table td:first-child {
    min-width: 110px; max-width: 110px;
  }
}
@media (max-width: 767.98px) {
  .box-score-table.is-weekly th:first-child,
  .box-score-table.is-weekly td:first-child {
    /* 2026-07-30 (operator, TestFlight): 56-64px clipped the ↗ arrow on
       two-digit weeks ("WK 19" + icon ≈ 70px), so players couldn't tell
       the rows are tappable. Widen enough for text + arrow; overflow
       stays hidden as the backstop against bleed into the next column. */
    min-width: 72px; max-width: 78px;
    padding-left: 0.55rem;
    overflow: hidden;
  }
  .box-score-table.is-weekly td.stat a.wk-link { white-space: nowrap; max-width: 100%; }
  .box-score-table.is-weekly td.stat a.wk-link i { font-size: 0.7rem; opacity: 0.8; }
}
@media (max-width: 419.98px) {
  .box-score-table.is-weekly th:first-child,
  .box-score-table.is-weekly td:first-child {
    min-width: 70px; max-width: 76px;
  }
  /* 2026-07-30: the arrow is the ONLY affordance that these rows open a
     box score — it must survive the narrowest widths (was display:none).
     The wider column above makes room for it. */
  .box-score-table.is-weekly td.stat a.wk-link i { display: inline-block; }
}