html, body, #root { background: #07111f; color: #f8fafc; color-scheme: dark; }
.sub-nav { position: sticky; top: 0; z-index: 60; background: rgba(7,17,32,.92); border-bottom: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(14px); }
.sub-nav__inner { min-height: 64px; display: flex; align-items: center; gap: 18px; min-width: 0; }
.sub-nav__links { margin-left: auto; display: flex; gap: 5px; align-items: center; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sub-nav__links::-webkit-scrollbar { display: none; }
.sub-nav__links a { flex: 0 0 auto; }
.sub-nav__links a { color: #b8c9dc; text-decoration: none; font-weight: 800; font-size: 13px; padding: 8px 10px; border-radius: 999px; white-space: nowrap; }
.sub-nav__links a.is-active, .sub-nav__links a:hover { background: rgba(255,255,255,.08); color: #f8fafc; }
.sub-hero { background: radial-gradient(circle at 80% 20%, rgba(26,111,196,.28), transparent 34%), linear-gradient(135deg, #07111f, #0a1a2f 64%, #102b4d); color: #f8fafc; padding: clamp(58px, 8vw, 100px) 0; overflow: hidden; }
.sub-hero__inner { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: clamp(28px, 5vw, 56px); align-items: center; }
.sub-hero h1 { margin: 0 0 16px; max-width: 12em; font-size: clamp(34px, 5vw, 62px); line-height: 1.08; letter-spacing: 0; }
.sub-hero__lead { margin: 0; max-width: 62ch; color: #b8c9dc; font-size: clamp(15px,1.5vw,18px); }
.hero-stat-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 22px; box-shadow: var(--shadow-dark); display: grid; gap: 8px; color: #f8fafc; }
.hero-stat-card b { font-size: 22px; }
.hero-stat-card small, .hero-stat-card span { color: #b8c9dc; }
.hero-stat-card strong { font-family: var(--font-num); font-size: 64px; line-height: .9; color: var(--gold); }
.hero-stat-card em { font-style: normal; font-weight: 900; color: #f8fafc; }
.team-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 24px; }
.team-stats article { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 14px; }
.team-stats b { display: block; color: #f8fafc; font-size: 20px; }
.team-stats span { color: #b8c9dc; font-size: 12px; }
.sub-analysis { background: linear-gradient(180deg, #edf5ff, #fff); color: #101a2a; border: 1px solid #cfe0f2; border-left: 5px solid var(--blue); border-radius: var(--radius); padding: clamp(24px, 4vw, 38px); box-shadow: var(--shadow); }
.sub-analysis h2 { margin: 0 0 10px; font-size: clamp(24px,3vw,34px); }
.sub-analysis p:last-child { margin: 0; color: #405064; }
.sub-ratingbar { display: grid; gap: 8px; color: #101a2a; }
.sub-ratingbar + .sub-ratingbar { margin-top: 12px; }
.sub-ratingbar div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.sub-ratingbar span { color: #6a788b; font-weight: 800; }
.sub-ratingbar i { display: block; height: 10px; border-radius: 999px; background: #eaf1f8; overflow: hidden; border: 1px solid #dbe5f0; }
.sub-ratingbar i span { display: block; height: 100%; border-radius: inherit; }
.sub-radar { color: #f8fafc; }
.sub-radar .radar__axis-label, .section--dark .radar__axis-label { color: #F8FAFC; fill: #F8FAFC; stroke: rgba(0,0,0,.65); paint-order: stroke; text-shadow: 0 1px 6px rgba(0,0,0,.75); filter: drop-shadow(0 1px 6px rgba(0,0,0,.75)); }
.strength-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.strength-grid article, .match-list article, .sub-team-card, .player-card, .squad-group, .related-links a { background: #fff; color: #101a2a; border: 1px solid #dbe5f0; border-radius: var(--radius); box-shadow: 0 4px 18px rgba(7,17,32,.08); }
.strength-grid article { padding: 20px; }
.strength-grid h3 { margin: 0 0 10px; }
.strength-grid ul { margin: 0; padding-left: 1.1em; color: #405064; }
.table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: 0 4px 18px rgba(7,17,32,.06); }
.sub-table { width: 100%; border-collapse: collapse; min-width: 760px; background: #fff; color: #101a2a; }
.sub-table th { background: #0a1a2f; color: #f8fafc; text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.sub-table th, .sub-table td { padding: 12px 14px; border-bottom: 1px solid #dbe5f0; vertical-align: middle; }
.sub-table td { color: #405064; }
.sub-table td b, .rank { color: #101a2a; font-weight: 900; }
.sub-table .flag { vertical-align: middle; margin-right: 8px; }
.fixture-card { white-space: nowrap; font-weight: 900; color: #101a2a !important; }
.broadcast-badge { display: inline-flex; align-items: center; gap: 6px; background: #eaf1f8; color: #102b4d; border: 1px solid #dbe5f0; border-radius: 999px; padding: 4px 9px; font-size: 12px; font-weight: 900; white-space: nowrap; }
.broadcast-badge svg { width: 14px; height: 14px; }
.match-list { display: grid; gap: 12px; }
.match-list article { padding: 16px; display: grid; gap: 6px; }
.match-list h3 { margin: 0; }
.match-list p, .match-list small { margin: 0; color: #6a788b; }
.sub-team-card { overflow: hidden; }
.sub-team-card__body { padding: 18px; display: grid; gap: 12px; }
.sub-team-card__head { display: flex; align-items: center; gap: 12px; }
.sub-team-card__head h3 { margin: 0; font-size: 19px; }
.sub-team-card__head p { margin: 0; color: #6a788b; font-family: var(--font-label); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.sub-team-card__head em { margin-left: auto; font-style: normal; font-weight: 900; background: #eaf1f8; color: #102b4d; border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.sub-team-card strong { font-family: var(--font-num); font-size: 48px; line-height: .9; color: #102b4d; }
.sub-team-card p { color: #405064; margin: 0; }
.sub-team-card a, .related-links a { color: #1a6fc4; font-weight: 900; text-decoration: none; }
.compare-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.mini-grid, .view-grid, .featured-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.view-card, .featured-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #f8fafc; border-radius: var(--radius); padding: 18px; }
.view-card p, .featured-card p { color: #b8c9dc; margin-bottom: 0; }
.player-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.player-card { padding: 18px; display: grid; grid-template-columns: 1fr 190px; gap: 14px; align-items: center; }
.player-card h3 { margin: 4px 0; font-size: 22px; }
.player-card p, .player-card em { color: #6a788b; font-style: normal; }
.player-card strong { display: block; font-family: var(--font-num); font-size: 46px; color: #102b4d; line-height: 1; }
.player-card ul { grid-column: 1 / -1; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.player-card li { background: #f4f7fb; border-radius: 10px; padding: 9px 10px; color: #405064; font-size: 13px; }
.player-card li b { display: block; color: #101a2a; }
.squad-section { display: grid; gap: 12px; }
.squad-group button { width: 100%; display: flex; justify-content: space-between; align-items: center; background: #0a1a2f; color: #f8fafc; border: 0; padding: 13px 16px; border-radius: var(--radius) var(--radius) 0 0; font: inherit; cursor: pointer; }
.squad-list { display: grid; }
.squad-list div { display: grid; grid-template-columns: 1.3fr 1.2fr 80px 1fr; gap: 10px; padding: 10px 14px; border-top: 1px solid #dbe5f0; align-items: center; }
.squad-list small, .squad-list em { color: #6a788b; font-style: normal; }
.squad-list b { color: #101a2a; }
.related-links { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.related-links a { padding: 14px; display: flex; align-items: center; gap: 8px; }
.related-links svg { width: 15px; height: 15px; margin-left: auto; }
.sub-disclaimer { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 20px; color: #b8c9dc; }
.sub-disclaimer h2 { display: flex; align-items: center; gap: 8px; color: #f8fafc; font-size: 15px; margin: 0 0 8px; }
.sub-disclaimer svg { width: 16px; height: 16px; }
.sub-disclaimer p { margin: 0; font-size: 12.5px; }
.page-footer { background: #050b16; color: #b8c9dc; padding: 42px 0; }
@media (max-width: 980px) { .sub-hero__inner, .player-card { grid-template-columns: 1fr; } .compare-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .player-card ul, .related-links, .team-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } .sub-nav__links a:not(.is-active) { display: none; } }
@media (max-width: 760px) { .sub-nav__inner { min-height: 58px; } .sub-hero { padding: 44px 0; } .strength-grid, .mini-grid, .view-grid, .featured-grid, .player-grid, .compare-grid, .related-links { grid-template-columns: 1fr; } .squad-list div { grid-template-columns: 1fr 74px; } .squad-list small, .squad-list em { grid-column: 1 / -1; } .table-wrap { margin-inline: -14px; border-radius: 0; } .sub-table { min-width: 720px; } }

.section--navy { background: #07182a; color: #f8fafc; }
.section--navy .section-head h2 { color: #f8fafc; }
.section--navy .section-head p:last-child { color: #c7d5e8; }
.section--navy .view-card { background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.18); box-shadow: 0 14px 34px rgba(0,0,0,.22); }
.section--navy .view-card h3 { color: #f8fafc; }
.section--navy .view-card p { color: #d6e2f1; }
/* 20260607 lower-page dark alignment and radar score fixes */
html, body, #root {
  background: #07111f !important;
  color: #f8fafc !important;
  color-scheme: dark;
}
body { color-scheme: dark; }
.section { background: #07111f; color: #f8fafc; }
.section--tint { background: #0b1b2d !important; color: #f8fafc !important; }
.section--dark, .section--navy { background: #050e1b !important; color: #f8fafc !important; }
.section-head h2 { color: #f8fafc; }
.section-head p:last-child { color: #c7d5e8; max-width: 68ch; }
.sub-hero { background: radial-gradient(circle at 78% 18%, rgba(218,163,60,.16), transparent 30%), radial-gradient(circle at 18% 88%, rgba(26,111,196,.24), transparent 34%), linear-gradient(135deg, #050b16, #07182a 58%, #0d2746); }
.hero-stat-card,
.team-stats article,
.sub-analysis,
.strength-grid article,
.match-list article,
.sub-team-card,
.player-card,
.squad-group,
.related-links a,
.featured-card,
.view-card,
.radar-panel,
.card {
  background: rgba(255,255,255,.065) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.22) !important;
}
.sub-analysis { border-left-color: #5ba8ff !important; }
.sub-analysis p:last-child,
.strength-grid ul,
.match-list p,
.match-list small,
.sub-team-card p,
.player-card p,
.player-card em,
.squad-list small,
.squad-list em,
.view-card p,
.featured-card p { color: #c7d5e8 !important; }
.sub-team-card__head p,
.hero-stat-card small,
.hero-stat-card span,
.team-stats span { color: #aebfd3 !important; }
.sub-team-card strong,
.player-card strong,
.sub-table td b,
.rank,
.squad-list b { color: #f3c765 !important; }
.sub-team-card__head em,
.broadcast-badge {
  background: rgba(91,168,255,.14) !important;
  color: #eaf2ff !important;
  border: 1px solid rgba(91,168,255,.28) !important;
}
.sub-ratingbar { color: #f8fafc !important; }
.sub-ratingbar span { color: #c7d5e8 !important; }
.sub-ratingbar i { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.12) !important; }
.table-wrap { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 44px rgba(0,0,0,.2); }
.sub-table { background: #0b1b2d !important; color: #f8fafc !important; }
.sub-table th { background: #050b16 !important; color: #f8fafc !important; border-bottom-color: rgba(255,255,255,.16) !important; }
.sub-table td { color: #c7d5e8 !important; border-bottom-color: rgba(255,255,255,.09) !important; }
.fixture-card { color: #f8fafc !important; }
.player-card li { background: rgba(255,255,255,.055) !important; color: #c7d5e8 !important; border: 1px solid rgba(255,255,255,.1); }
.player-card li b { color: #f8fafc !important; }
.squad-group button { background: #050b16 !important; border-bottom: 1px solid rgba(255,255,255,.12); }
.squad-list div { border-top-color: rgba(255,255,255,.09) !important; }
.sub-disclaimer { background: rgba(255,255,255,.055) !important; border-color: rgba(255,255,255,.14) !important; color: #c7d5e8 !important; }

.group-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); gap: 22px; align-items: stretch; }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; align-items: stretch; }
.compare-grid { align-items: stretch; }
.sub-team-card { display: flex; flex-direction: column; min-width: 0; }
.sub-team-card__body { flex: 1; display: grid; grid-template-rows: auto auto minmax(4.8em, auto) auto auto; align-content: start; }
.sub-team-card--compact .sub-team-card__body { grid-template-rows: auto auto minmax(4em, 1fr) auto; }
.sub-team-card__summary { line-height: 1.65; min-height: 4.8em; }
.sub-team-card a { align-self: start; color: #6bb4ff !important; }
.sub-team-card .sub-radar { margin-top: 4px; }

.sub-radar { color: rgba(234,242,255,.82); display: grid; gap: 12px; justify-items: center; min-width: 0; }
.sub-radar svg { width: min(100%, var(--radar-size, 330px)); height: auto; overflow: visible; }
.sub-radar--compact svg { width: min(100%, 178px); }
.sub-radar--multi { align-content: start; }
.sub-radar--multi svg { width: min(100%, 330px); }
.sub-radar .radar__axis-label,
.section--dark .radar__axis-label {
  fill: #F8FAFC !important;
  color: #F8FAFC !important;
  stroke: rgba(0,0,0,.68) !important;
  stroke-width: 4.5px !important;
  paint-order: stroke !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.75) !important;
}
.radar-score-list { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.radar-score-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 7px 9px; border-radius: 10px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); color: #dce8f8; font-weight: 800; }
.radar-score-list span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; white-space: nowrap; }
.radar-score-list i,
.radar-score-group h3 i,
.radar-legend i { width: 8px; height: 8px; border-radius: 999px; display: inline-block; flex: none; }
.radar-score-list b { color: #f3c765; font-family: var(--font-num); font-size: 16px; }
.radar-score-list--compact { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
.radar-score-list--compact li { padding: 6px 7px; }
.radar-score-list--compact span { font-size: 11px; }
.radar-score-list--compact b { font-size: 14px; }
.radar-score-groups { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.radar-score-group { min-width: 0; border-radius: 12px; padding: 10px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); }
.radar-score-group h3 { margin: 0 0 8px; display: flex; align-items: center; gap: 7px; color: #f8fafc; font-size: 13px; }
.player-radar { display: grid; gap: 8px; justify-items: center; min-width: 0; }
.player-radar svg { width: min(100%, 160px); height: auto; color: rgba(234,242,255,.82); }
.player-radar .radar-score-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
.player-radar .radar-score-list span { font-size: 10.5px; }
.player-card { grid-template-columns: minmax(0,1fr) minmax(210px, .72fr); align-items: start; }
.player-card__intro { min-width: 0; }

.related-links a { min-height: 52px; gap: 10px; }
.related-flag { width: 26px; height: 18px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.22); flex: 0 0 26px; }
.related-flag svg { width: 26px !important; height: 18px !important; margin: 0 !important; display: block; }
.related-links a > svg { width: 15px; height: 15px; margin-left: auto; flex: none; }

@media (max-width: 1100px) {
  .group-layout { grid-template-columns: 1fr; }
  .radar-score-groups { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .section { background: #07111f; }
  .team-grid, .radar-score-groups, .radar-score-list { grid-template-columns: 1fr; }
  .radar-score-list--compact, .player-radar .radar-score-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sub-team-card__body { grid-template-rows: auto; }
  .sub-team-card__summary { min-height: 0; }
  .player-card { grid-template-columns: 1fr; }
  .sub-radar--multi svg { width: min(100%, 300px); }
  .sub-radar--multi .radar { width: min(82vw, 300px); margin-inline: auto; }
  .sub-radar .radar__axis-label { font-size: 14px !important; stroke-width: 4px !important; }
}

@media (max-width: 760px) {
  .compare-grid .sub-team-card { min-height: 620px; }
}

/* 20260607 hero image and overlay */
.sub-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #07111f !important;
  min-height: clamp(360px, 42vw, 560px);
  display: grid;
  align-items: center;
}
.sub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hero-desktop, url("/worldcup2026/public/worldcup2026/hero-group-f-desktop.png"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.01);
}
.sub-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 80% 16%, rgba(218,163,60,.18), transparent 32%),
    linear-gradient(90deg, rgba(5,11,22,.96) 0%, rgba(7,17,31,.86) 46%, rgba(7,17,31,.58) 100%),
    linear-gradient(180deg, rgba(5,11,22,.42), rgba(5,11,22,.92));
}
.sub-hero__inner {
  position: relative;
  z-index: 2;
}
.sub-hero h1,
.sub-hero__lead,
.sub-hero .eyebrow,
.sub-hero .team-stats,
.hero-stat-card {
  text-shadow: 0 2px 14px rgba(0,0,0,.52);
}
@media (max-width: 760px) {
  .sub-hero {
    min-height: 520px;
    padding: 48px 0 42px;
  }
  .sub-hero::before {
    background-image: var(--hero-mobile, url("/worldcup2026/public/worldcup2026/hero-group-f-mobile.png"));
    background-position: center top;
  }
  .sub-hero::after {
    background:
      linear-gradient(180deg, rgba(5,11,22,.84) 0%, rgba(7,17,31,.74) 42%, rgba(5,11,22,.96) 100%),
      radial-gradient(circle at 50% 20%, rgba(26,111,196,.18), transparent 42%);
  }
}

.page-group-f {
  --hero-desktop: url("/worldcup2026/public/worldcup2026/hero-group-f-desktop.png");
  --hero-mobile: url("/worldcup2026/public/worldcup2026/hero-group-f-mobile.png");
}
.page-team-japan {
  --hero-desktop: url("/worldcup2026/public/worldcup2026/hero-japan-desktop.png");
  --hero-mobile: url("/worldcup2026/public/worldcup2026/hero-japan-mobile.png");
}
.page-team-netherlands {
  --hero-desktop: url("/worldcup2026/public/worldcup2026/hero-netherlands-desktop.png");
  --hero-mobile: url("/worldcup2026/public/worldcup2026/hero-netherlands-mobile.png");
}
.page-team-sweden {
  --hero-desktop: url("/worldcup2026/public/worldcup2026/hero-sweden-desktop.png");
  --hero-mobile: url("/worldcup2026/public/worldcup2026/hero-sweden-mobile.png");
}
.page-team-tunisia {
  --hero-desktop: url("/worldcup2026/public/worldcup2026/hero-tunisia-desktop.png");
  --hero-mobile: url("/worldcup2026/public/worldcup2026/hero-tunisia-mobile.png");
}
/* 20260607 bars, readable hero, and intended light sections */
.section:not(.section--dark):not(.section--navy),
.section--tint {
  background: #f4f7fb !important;
  color: #101a2a !important;
}
.section:not(.section--dark):not(.section--navy) .section-head h2,
.section--tint .section-head h2 { color: #101a2a !important; }
.section:not(.section--dark):not(.section--navy) .section-head p:last-child,
.section--tint .section-head p:last-child { color: #405064 !important; }
.section:not(.section--dark):not(.section--navy) .eyebrow,
.section--tint .eyebrow { color: #c18b21 !important; }
.section:not(.section--dark):not(.section--navy) .sub-analysis,
.section:not(.section--dark):not(.section--navy) .strength-grid article,
.section:not(.section--dark):not(.section--navy) .match-list article,
.section:not(.section--dark):not(.section--navy) .sub-team-card,
.section:not(.section--dark):not(.section--navy) .player-card,
.section:not(.section--dark):not(.section--navy) .squad-group,
.section:not(.section--dark):not(.section--navy) .related-links a,
.section:not(.section--dark):not(.section--navy) .card,
.section:not(.section--dark):not(.section--navy) .ability-panel,
.section--tint .sub-analysis,
.section--tint .strength-grid article,
.section--tint .match-list article,
.section--tint .sub-team-card,
.section--tint .player-card,
.section--tint .squad-group,
.section--tint .related-links a,
.section--tint .card,
.section--tint .ability-panel {
  background: #ffffff !important;
  color: #101a2a !important;
  border-color: #dbe5f0 !important;
  box-shadow: 0 8px 24px rgba(7,17,32,.08) !important;
}
.section:not(.section--dark):not(.section--navy) .sub-analysis p:last-child,
.section:not(.section--dark):not(.section--navy) .strength-grid ul,
.section:not(.section--dark):not(.section--navy) .match-list p,
.section:not(.section--dark):not(.section--navy) .match-list small,
.section:not(.section--dark):not(.section--navy) .sub-team-card p,
.section:not(.section--dark):not(.section--navy) .player-card p,
.section:not(.section--dark):not(.section--navy) .player-card em,
.section:not(.section--dark):not(.section--navy) .squad-list small,
.section:not(.section--dark):not(.section--navy) .squad-list em,
.section--tint .sub-analysis p:last-child,
.section--tint .strength-grid ul,
.section--tint .match-list p,
.section--tint .match-list small,
.section--tint .sub-team-card p,
.section--tint .player-card p,
.section--tint .player-card em,
.section--tint .squad-list small,
.section--tint .squad-list em { color: #405064 !important; }
.section:not(.section--dark):not(.section--navy) .sub-team-card strong,
.section:not(.section--dark):not(.section--navy) .player-card strong,
.section:not(.section--dark):not(.section--navy) .sub-table td b,
.section:not(.section--dark):not(.section--navy) .rank,
.section:not(.section--dark):not(.section--navy) .squad-list b,
.section--tint .sub-team-card strong,
.section--tint .player-card strong,
.section--tint .sub-table td b,
.section--tint .rank,
.section--tint .squad-list b { color: #102b4d !important; }
.section:not(.section--dark):not(.section--navy) .sub-ratingbar,
.section--tint .sub-ratingbar { color: #101a2a !important; }
.section:not(.section--dark):not(.section--navy) .sub-ratingbar span,
.section--tint .sub-ratingbar span { color: #6a788b !important; }
.section:not(.section--dark):not(.section--navy) .sub-ratingbar i,
.section--tint .sub-ratingbar i { background: #eaf1f8 !important; border-color: #dbe5f0 !important; }
.section:not(.section--dark):not(.section--navy) .table-wrap,
.section--tint .table-wrap { background: #fff !important; border-color: #dbe5f0 !important; box-shadow: 0 8px 24px rgba(7,17,32,.08) !important; }
.section:not(.section--dark):not(.section--navy) .sub-table,
.section--tint .sub-table { background: #fff !important; color: #101a2a !important; }
.section:not(.section--dark):not(.section--navy) .sub-table th,
.section--tint .sub-table th { background: #0a1a2f !important; color: #f8fafc !important; }
.section:not(.section--dark):not(.section--navy) .sub-table td,
.section--tint .sub-table td { color: #405064 !important; border-bottom-color: #dbe5f0 !important; }

.ability-panel { border-radius: var(--radius); padding: clamp(18px, 3vw, 28px); }
.group-layout--bars { align-items: stretch; }
.ability-bars { display: grid; gap: 14px; width: min(100%, 680px); margin-inline: auto; }
.ability-bars h3 { margin: 0 0 2px; color: inherit; font-size: 18px; }
.ability-bar { display: grid; gap: 7px; }
.ability-bar__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ability-bar__head span { color: inherit; font-weight: 900; }
.ability-bar__head b { font-family: var(--font-num); font-size: 22px; line-height: 1; color: #102b4d; }
.ability-bar__track { height: 13px; border-radius: 999px; background: #e7eef6; border: 1px solid #d6e1ee; overflow: hidden; }
.ability-bar__track i { display: block; height: 100%; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.ability-bars--compact { gap: 10px; width: 100%; }
.ability-bars--compact .ability-bar__head b { font-size: 18px; }
.ability-bars--compact .ability-bar__track { height: 10px; }
.section--dark .ability-panel,
.section--dark .ability-bars,
.section--navy .ability-panel,
.section--navy .ability-bars { color: #f8fafc; }
.section--dark .ability-bar__head b,
.section--navy .ability-bar__head b { color: #f3c765; }
.section--dark .ability-bar__track,
.section--navy .ability-bar__track { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.player-radar { width: 100%; justify-items: stretch; }
.player-card { grid-template-columns: minmax(0, .88fr) minmax(260px, 1fr); }
.player-card .ability-bars { margin: 0; }
.player-card .ability-bars--compact .ability-bar__head span { font-size: 12px; }
.player-card .ability-bars--compact .ability-bar__head b { font-size: 17px; }
.player-card--metrics { grid-template-columns: minmax(0, .82fr) minmax(280px, 1fr); }
.player-metrics { display: grid; gap: 12px; min-width: 0; }
.player-metrics__bars { display: grid; gap: 9px; }
.player-metric { display: grid; gap: 6px; }
.player-metric__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.player-metric__head span { color: inherit; font-size: 12px; font-weight: 900; }
.player-metric__head b { color: #102b4d; font-family: var(--font-num); font-size: 17px; line-height: 1; white-space: nowrap; }
.player-metric__track { height: 10px; border-radius: 999px; background: #e7eef6; border: 1px solid #d6e1ee; overflow: hidden; }
.player-metric__track i { display: block; height: 100%; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.player-metric--text,
.player-position-notes article { border-radius: 10px; padding: 9px 10px; background: #f4f7fb; border: 1px solid #dbe5f0; }
.player-metric--text .player-metric__head { align-items: flex-start; flex-direction: column; gap: 4px; }
.player-metric--text .player-metric__head b { color: #405064; font-family: inherit; font-size: 12px; line-height: 1.45; white-space: normal; }
.player-position-notes { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.player-position-notes b { display: block; color: #101a2a; font-size: 12px; margin-bottom: 4px; }
.player-position-notes p { margin: 0; color: #405064; font-size: 12px; line-height: 1.55; }

.sub-hero::after {
  background:
    radial-gradient(circle at 80% 16%, rgba(218,163,60,.10), transparent 34%),
    linear-gradient(90deg, rgba(5,16,36,.78) 0%, rgba(5,16,36,.42) 48%, rgba(5,16,36,.12) 100%),
    linear-gradient(180deg, rgba(5,16,36,.06), rgba(5,16,36,.34)) !important;
}
@media (max-width: 760px) {
  .sub-hero::after {
    background:
      linear-gradient(180deg, rgba(5,16,36,.54) 0%, rgba(5,16,36,.28) 44%, rgba(5,16,36,.70) 100%),
      radial-gradient(circle at 50% 18%, rgba(26,111,196,.10), transparent 45%) !important;
  }
  .player-card { grid-template-columns: 1fr; }
  .ability-bars { width: 100%; }
  .player-position-notes { grid-template-columns: 1fr; }
}

/* 20260607 explicit section themes */
.section--light,
.section--tint {
  background: #f4f7fb !important;
  color: #101a2a !important;
}
.section--tint {
  background: #eef4fb !important;
}
.section--dark,
.section--navy {
  background:
    radial-gradient(circle at 80% 0%, rgba(218,163,60,.09), transparent 28%),
    linear-gradient(180deg, #07111f, #081a2f) !important;
  color: #f8fafc !important;
}
.section--navy {
  background:
    radial-gradient(circle at 16% 8%, rgba(26,111,196,.12), transparent 30%),
    linear-gradient(180deg, #07182a, #081a2f) !important;
}
.section--light .section-head h2,
.section--tint .section-head h2,
.section--light h2,
.section--tint h2,
.section--light h3,
.section--tint h3 {
  color: #101a2a !important;
}
.section--light .section-head p:last-child,
.section--tint .section-head p:last-child,
.section--light p,
.section--tint p,
.section--light li,
.section--tint li,
.section--light small,
.section--tint small,
.section--light em,
.section--tint em {
  color: #405064 !important;
}
.section--dark .section-head h2,
.section--navy .section-head h2,
.section--dark h2,
.section--navy h2,
.section--dark h3,
.section--navy h3 {
  color: #f8fafc !important;
}
.section--dark .section-head p:last-child,
.section--navy .section-head p:last-child,
.section--dark p,
.section--navy p,
.section--dark li,
.section--navy li,
.section--dark small,
.section--navy small,
.section--dark em,
.section--navy em {
  color: #cbd5e1 !important;
}
.section--light .sub-analysis,
.section--light .strength-grid article,
.section--light .match-list article,
.section--light .sub-team-card,
.section--light .player-card,
.section--light .squad-group,
.section--light .related-links a,
.section--light .card,
.section--light .ability-panel,
.section--tint .sub-analysis,
.section--tint .strength-grid article,
.section--tint .match-list article,
.section--tint .sub-team-card,
.section--tint .player-card,
.section--tint .squad-group,
.section--tint .related-links a,
.section--tint .card,
.section--tint .ability-panel {
  background: #ffffff !important;
  color: #101a2a !important;
  border-color: rgba(15,23,42,.12) !important;
  box-shadow: 0 8px 24px rgba(7,17,32,.08) !important;
}
.section--dark .sub-analysis,
.section--dark .strength-grid article,
.section--dark .match-list article,
.section--dark .sub-team-card,
.section--dark .player-card,
.section--dark .squad-group,
.section--dark .related-links a,
.section--dark .card,
.section--dark .ability-panel,
.section--dark .radar-panel,
.section--navy .sub-analysis,
.section--navy .strength-grid article,
.section--navy .match-list article,
.section--navy .sub-team-card,
.section--navy .player-card,
.section--navy .squad-group,
.section--navy .related-links a,
.section--navy .card,
.section--navy .ability-panel,
.section--navy .radar-panel {
  background: rgba(255,255,255,.065) !important;
  color: #f8fafc !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.22) !important;
}
.section--light .sub-team-card strong,
.section--light .player-card strong,
.section--light .sub-table td b,
.section--light .rank,
.section--light .squad-list b,
.section--light .ability-bar__head b,
.section--tint .sub-team-card strong,
.section--tint .player-card strong,
.section--tint .sub-table td b,
.section--tint .rank,
.section--tint .squad-list b,
.section--tint .ability-bar__head b {
  color: #102b4d !important;
}
.section--dark .sub-team-card strong,
.section--dark .player-card strong,
.section--dark .sub-table td b,
.section--dark .rank,
.section--dark .squad-list b,
.section--dark .ability-bar__head b,
.section--navy .sub-team-card strong,
.section--navy .player-card strong,
.section--navy .sub-table td b,
.section--navy .rank,
.section--navy .squad-list b,
.section--navy .ability-bar__head b {
  color: #f3c765 !important;
}
.section--light .table-wrap,
.section--tint .table-wrap {
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.12) !important;
}
.section--light .sub-table,
.section--tint .sub-table {
  background: #fff !important;
  color: #101a2a !important;
}
.section--light .sub-table th,
.section--tint .sub-table th {
  background: #0a1a2f !important;
  color: #f8fafc !important;
}
.section--light .sub-table td,
.section--tint .sub-table td {
  color: #405064 !important;
  border-bottom-color: #dbe5f0 !important;
}
.section--dark .sub-table,
.section--navy .sub-table {
  background: #0b1b2d !important;
  color: #f8fafc !important;
}
.section--dark .sub-table th,
.section--navy .sub-table th {
  background: #050b16 !important;
  color: #f8fafc !important;
}
.section--dark .sub-table td,
.section--navy .sub-table td {
  color: #cbd5e1 !important;
  border-bottom-color: rgba(255,255,255,.1) !important;
}
.section--light .broadcast-badge,
.section--tint .broadcast-badge,
.section--light .sub-team-card__head em,
.section--tint .sub-team-card__head em {
  background: #eaf1f8 !important;
  color: #102b4d !important;
  border-color: #dbe5f0 !important;
}
.section--dark .broadcast-badge,
.section--navy .broadcast-badge,
.section--dark .sub-team-card__head em,
.section--navy .sub-team-card__head em {
  background: rgba(91,168,255,.14) !important;
  color: #eaf2ff !important;
  border-color: rgba(91,168,255,.28) !important;
}
.section--light .player-card li,
.section--tint .player-card li {
  background: #f4f7fb !important;
  color: #405064 !important;
  border-color: #dbe5f0 !important;
}
.section--light .player-card li b,
.section--tint .player-card li b {
  color: #101a2a !important;
}
.section--light .squad-group button,
.section--tint .squad-group button {
  background: #0a1a2f !important;
  color: #f8fafc !important;
}
.section--dark .squad-group button,
.section--navy .squad-group button {
  background: #050b16 !important;
  color: #f8fafc !important;
}
.section--light .sub-team-card a,
.section--light .related-links a,
.section--tint .sub-team-card a,
.section--tint .related-links a {
  color: #1a6fc4 !important;
}
.section--dark .sub-team-card a,
.section--dark .related-links a,
.section--navy .sub-team-card a,
.section--navy .related-links a {
  color: #6bb4ff !important;
}

/* 20260607 final actual dark computed-style lock */
.wc-section-dark {
  background-color: #07111f !important;
  color: #f8fafc !important;
}
.sub-nav.wc-section-dark {
  background-color: rgba(7,17,32,.96) !important;
  color: #f8fafc !important;
}
.sub-hero.wc-section-dark {
  background-color: #07111f !important;
  color: #f8fafc !important;
}
.section--dark.wc-section-dark,
.section--navy.wc-section-dark,
.page-footer.wc-section-dark {
  background-color: #07111f !important;
  background-image:
    radial-gradient(circle at 78% 0%, rgba(232,193,90,.10), transparent 30%),
    linear-gradient(180deg, #07111f 0%, #081a2f 56%, #07111f 100%) !important;
  color: #f8fafc !important;
}
.wc-section-light {
  background-color: #f4f7fb !important;
  color: #101a2a !important;
}
.section--tint.wc-section-light {
  background-color: #eef4fb !important;
}
.wc-card-dark,
.wc-section-dark .hero-stat-card,
.wc-section-dark .team-stats article,
.wc-section-dark .sub-team-card,
.wc-section-dark .radar-panel,
.wc-section-dark .ability-panel,
.wc-section-dark .card,
.wc-section-dark .featured-card,
.wc-section-dark .view-card,
.wc-section-dark .sub-disclaimer {
  background-color: #10233a !important;
  color: #f8fafc !important;
  border-color: rgba(255,255,255,.14) !important;
}
.wc-section-dark .section-head h2,
.wc-section-dark h1,
.wc-section-dark h2,
.wc-section-dark h3,
.wc-section-dark .hero-stat-card b,
.wc-section-dark .sub-team-card strong,
.wc-section-dark .player-card strong,
.wc-section-dark .ability-bar__head span {
  color: #f8fafc !important;
}
.wc-section-dark .section-head p:last-child,
.wc-section-dark p,
.wc-section-dark small,
.wc-section-dark li,
.wc-section-dark em,
.wc-section-dark .sub-hero__lead,
.wc-section-dark .sub-team-card p,
.wc-section-dark .featured-card p,
.wc-section-dark .view-card p {
  color: #cbd5e1 !important;
}
.wc-section-dark .ability-bar__head b,
.wc-section-dark .sub-ratingbar b,
.wc-section-dark .radar-score-list b,
.wc-section-dark .hero-stat-card strong {
  color: #f3c765 !important;
}
.wc-section-light h2,
.wc-section-light h3,
.wc-section-light .section-head h2 {
  color: #101a2a !important;
}
.wc-section-light p,
.wc-section-light small,
.wc-section-light li,
.wc-section-light em,
.wc-section-light .section-head p:last-child {
  color: #405064 !important;
}

/* 20260607 subpage actual dark world: dark section canvas, readable light cards only */
body:not(.page-top) .wc-section-light,
body:not(.page-top) .section--tint.wc-section-light {
  background-color: #07111f !important;
  background-image:
    radial-gradient(circle at 16% 0%, rgba(26,111,196,.12), transparent 30%),
    linear-gradient(180deg, #07111f 0%, #081a2f 56%, #07111f 100%) !important;
  color: #f8fafc !important;
}
body:not(.page-top) .wc-section-light .section-head h2,
body:not(.page-top) .wc-section-light > .wrap > .section-head h2,
body:not(.page-top) .wc-section-light > .wrap > h2,
body:not(.page-top) .wc-section-light > .wrap > h3 {
  color: #f8fafc !important;
}
body:not(.page-top) .wc-section-light .section-head p:last-child,
body:not(.page-top) .wc-section-light > .wrap > p,
body:not(.page-top) .wc-section-light .data-note {
  color: #cbd5e1 !important;
}
body:not(.page-top) .wc-section-light .eyebrow {
  color: #e8c15a !important;
}
body:not(.page-top) .wc-section-light .sub-analysis,
body:not(.page-top) .wc-section-light .strength-grid article,
body:not(.page-top) .wc-section-light .match-list article,
body:not(.page-top) .wc-section-light .player-card,
body:not(.page-top) .wc-section-light .squad-group,
body:not(.page-top) .wc-section-light .related-links a,
body:not(.page-top) .wc-section-light .table-wrap {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #101a2a !important;
  border-color: rgba(15,23,42,.12) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
}
body:not(.page-top) .wc-section-light .sub-analysis h2,
body:not(.page-top) .wc-section-light .strength-grid article h3,
body:not(.page-top) .wc-section-light .player-card h3,
body:not(.page-top) .wc-section-light .related-links a,
body:not(.page-top) .wc-section-light .sub-table td b,
body:not(.page-top) .wc-section-light .rank,
body:not(.page-top) .wc-section-light .squad-list b {
  color: #101a2a !important;
}
body:not(.page-top) .wc-section-light .sub-analysis p,
body:not(.page-top) .wc-section-light .strength-grid article li,
body:not(.page-top) .wc-section-light .match-list article p,
body:not(.page-top) .wc-section-light .match-list article small,
body:not(.page-top) .wc-section-light .player-card p,
body:not(.page-top) .wc-section-light .player-card em,
body:not(.page-top) .wc-section-light .player-card li,
body:not(.page-top) .wc-section-light .squad-list small,
body:not(.page-top) .wc-section-light .squad-list em,
body:not(.page-top) .wc-section-light .sub-table td {
  color: #405064 !important;
}
body:not(.page-top) .wc-section-light .sub-table {
  background-color: #ffffff !important;
  color: #101a2a !important;
}
body:not(.page-top) .wc-section-light .sub-table th,
body:not(.page-top) .wc-section-light .squad-group button {
  background-color: #0a1a2f !important;
  color: #f8fafc !important;
}

/* Higher specificity than .section:not(.section--dark):not(.section--navy) */
body.page-group-f section.section.section--light.wc-section-light,
body[class*="page-team-"] section.section.section--light.wc-section-light {
  background-color: #07111f !important;
  background-image:
    radial-gradient(circle at 16% 0%, rgba(26,111,196,.12), transparent 30%),
    linear-gradient(180deg, #07111f 0%, #081a2f 56%, #07111f 100%) !important;
  color: #f8fafc !important;
}
body.page-group-f section.section.section--light.wc-section-light .section-head h2,
body[class*="page-team-"] section.section.section--light.wc-section-light .section-head h2 {
  color: #f8fafc !important;
}
body.page-group-f section.section.section--light.wc-section-light .section-head p:last-child,
body[class*="page-team-"] section.section.section--light.wc-section-light .section-head p:last-child,
body.page-group-f section.section.section--light.wc-section-light .data-note,
body[class*="page-team-"] section.section.section--light.wc-section-light .data-note {
  color: #cbd5e1 !important;
}

/* 20260607 final split: light mode may use light cards; dark mode has no white backgrounds */
@media (prefers-color-scheme: light) {
  body:not(.page-top) html,
  body:not(.page-top),
  body:not(.page-top) #root {
    background: #f4f7fb !important;
    color: #101a2a !important;
  }
  body:not(.page-top) .wc-section-light,
  body:not(.page-top) .section--tint.wc-section-light,
  body.page-group-f section.section.section--light.wc-section-light,
  body[class*="page-team-"] section.section.section--light.wc-section-light {
    background-color: #f4f7fb !important;
    background-image: none !important;
    color: #101a2a !important;
  }
  body:not(.page-top) .section--tint.wc-section-light {
    background-color: #eef4fb !important;
  }
  body:not(.page-top) .wc-section-light .section-head h2,
  body:not(.page-top) .wc-section-light > .wrap > .section-head h2,
  body:not(.page-top) .wc-section-light > .wrap > h2,
  body:not(.page-top) .wc-section-light > .wrap > h3 {
    color: #101a2a !important;
  }
  body:not(.page-top) .wc-section-light .section-head p:last-child,
  body:not(.page-top) .wc-section-light > .wrap > p,
  body:not(.page-top) .wc-section-light .data-note {
    color: #405064 !important;
  }
  body:not(.page-top) .wc-section-light .sub-analysis,
  body:not(.page-top) .wc-section-light .strength-grid article,
  body:not(.page-top) .wc-section-light .match-list article,
  body:not(.page-top) .wc-section-light .player-card,
  body:not(.page-top) .wc-section-light .squad-group,
  body:not(.page-top) .wc-section-light .related-links a,
  body:not(.page-top) .wc-section-light .table-wrap {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #101a2a !important;
    border-color: rgba(15,23,42,.12) !important;
  }
  body:not(.page-top) .wc-section-dark,
  body:not(.page-top) .section--dark.wc-section-dark,
  body:not(.page-top) .section--navy.wc-section-dark,
  body:not(.page-top) .page-footer.wc-section-dark {
    background-color: #07111f !important;
    color: #f8fafc !important;
  }
}

/* 20260608 remaining major pages */
.extra-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.extra-card,
.goods-page-card {
  background: #ffffff;
  color: #101a2a;
  border: 1px solid #dbe5f0;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 8px 24px rgba(7,17,32,.08);
}

.extra-card > span,
.goods-page-card > span {
  display: inline-block;
  margin-bottom: 8px;
  color: #b88722;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.extra-card h3,
.extra-card .best-third-card__value,
.goods-page-card h3 {
  margin: 0 0 10px;
  color: #101a2a;
  font-size: 20px;
}
.best-third-card__value { display: block; font-weight: 700; }

.extra-card p,
.goods-page-card p {
  margin: 0 0 12px;
  color: #405064;
}

.goods-page-card ul {
  margin: 0;
  padding-left: 1.1em;
  color: #405064;
}

.extra-bars {
  background: #10233a;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding: 20px;
}

.player-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.mini-player-list {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.mini-player-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 10px;
  background: #f8fbff;
}

.mini-player-list b,
.mini-player-list strong {
  color: #101a2a;
}

.mini-player-list span,
.mini-player-list small {
  color: #405064;
}

.mini-player-list strong {
  grid-row: span 2;
  font-family: var(--font-num);
  font-size: 28px;
}

.text-link {
  color: #1a6fc4;
  font-weight: 900;
  text-decoration: none;
}

.section--dark .extra-card,
.section--dark .goods-page-card,
.section--navy .extra-card,
.section--navy .goods-page-card {
  background: #10233a;
  color: #f8fafc;
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 44px rgba(0,0,0,.24);
}

.section--dark .extra-card h3,
.section--dark .extra-card .best-third-card__value,
.section--dark .goods-page-card h3,
.section--navy .extra-card h3,
.section--navy .extra-card .best-third-card__value,
.section--navy .goods-page-card h3 {
  color: #f8fafc;
}

.section--dark .extra-card p,
.section--dark .goods-page-card p,
.section--navy .extra-card p,
.section--navy .goods-page-card p,
.section--dark .goods-page-card ul,
.section--navy .goods-page-card ul {
  color: #cbd5e1;
}

@media (max-width: 980px) {
  .extra-card-grid,
  .player-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .extra-card-grid,
  .player-directory {
    grid-template-columns: 1fr;
  }
}

@media (prefers-color-scheme: dark) {
  body:not(.page-top) html,
  body:not(.page-top),
  body:not(.page-top) #root {
    background: #07111f !important;
    color: #f8fafc !important;
  }
  body:not(.page-top) .section,
  body:not(.page-top) .wc-section-light,
  body:not(.page-top) .wc-section-dark,
  body:not(.page-top) .section--tint.wc-section-light,
  body.page-group-f section.section.section--light.wc-section-light,
  body[class*="page-team-"] section.section.section--light.wc-section-light {
    background-color: #07111f !important;
    background-image:
      radial-gradient(circle at 16% 0%, rgba(26,111,196,.12), transparent 30%),
      linear-gradient(180deg, #07111f 0%, #081a2f 56%, #07111f 100%) !important;
    color: #f8fafc !important;
  }
  body:not(.page-top) .sub-analysis,
  body:not(.page-top) .strength-grid article,
  body:not(.page-top) .match-list article,
  body:not(.page-top) .sub-team-card,
  body:not(.page-top) .player-card,
  body:not(.page-top) .squad-group,
  body:not(.page-top) .related-links a,
  body:not(.page-top) .table-wrap,
  body:not(.page-top) .ability-panel,
  body:not(.page-top) .card,
  body:not(.page-top) .featured-card,
  body:not(.page-top) .view-card,
  body:not(.page-top) .sub-disclaimer,
  body:not(.page-top) .hero-stat-card,
  body:not(.page-top) .team-stats article {
    background-color: #10233a !important;
    background-image: none !important;
    color: #f8fafc !important;
    border-color: rgba(255,255,255,.14) !important;
  }
  body:not(.page-top) .sub-table,
  body:not(.page-top) .sub-table th,
  body:not(.page-top) .sub-table td,
  body:not(.page-top) .squad-group button,
  body:not(.page-top) .squad-list div,
  body:not(.page-top) .player-card li {
    background-color: #10233a !important;
    color: #f8fafc !important;
    border-color: rgba(255,255,255,.12) !important;
  }
  body:not(.page-top) .sub-table th,
  body:not(.page-top) .squad-group button {
    background-color: #081a2f !important;
  }
  body:not(.page-top) .section-head h2,
  body:not(.page-top) h1,
  body:not(.page-top) h2,
  body:not(.page-top) h3,
  body:not(.page-top) .sub-table td b,
  body:not(.page-top) .rank,
  body:not(.page-top) .squad-list b {
    color: #f8fafc !important;
  }
  body:not(.page-top) p,
  body:not(.page-top) small,
  body:not(.page-top) li,
  body:not(.page-top) em,
  body:not(.page-top) .section-head p:last-child,
  body:not(.page-top) .sub-table td {
    color: #cbd5e1 !important;
  }
}

/* 20260607 color-mode correction: no solid-white cards inside dark-mode subpages */
@media (prefers-color-scheme: dark) {
  body:not(.page-top) .wc-section-light .sub-analysis,
  body:not(.page-top) .wc-section-light .strength-grid article,
  body:not(.page-top) .wc-section-light .match-list article,
  body:not(.page-top) .wc-section-light .sub-team-card,
  body:not(.page-top) .wc-section-light .player-card,
  body:not(.page-top) .wc-section-light .squad-group,
  body:not(.page-top) .wc-section-light .related-links a,
  body:not(.page-top) .wc-section-light .table-wrap,
  body:not(.page-top) .wc-section-light .card,
  body:not(.page-top) .wc-section-light .ability-panel,
  body:not(.page-top) .wc-section-light .featured-card,
  body:not(.page-top) .wc-section-light .view-card,
  body:not(.page-top) .wc-section-light .team-stats article {
    background: #10233a !important;
    background-color: #10233a !important;
    background-image: none !important;
    color: #f8fafc !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.24) !important;
  }

  body:not(.page-top) .wc-section-light .sub-table,
  body:not(.page-top) .wc-section-light .sub-table th,
  body:not(.page-top) .wc-section-light .sub-table td,
  body:not(.page-top) .wc-section-light .squad-group button,
  body:not(.page-top) .wc-section-light .squad-list div,
  body:not(.page-top) .wc-section-light .player-card li {
    background: #10233a !important;
    background-color: #10233a !important;
    color: #f8fafc !important;
    border-color: rgba(255,255,255,.12) !important;
  }

  body:not(.page-top) .wc-section-light .sub-table th,
  body:not(.page-top) .wc-section-light .squad-group button {
    background: #081a2f !important;
    background-color: #081a2f !important;
  }

  body:not(.page-top) .wc-section-light .sub-analysis h2,
  body:not(.page-top) .wc-section-light .strength-grid article h3,
  body:not(.page-top) .wc-section-light .match-list article h3,
  body:not(.page-top) .wc-section-light .sub-team-card strong,
  body:not(.page-top) .wc-section-light .player-card h3,
  body:not(.page-top) .wc-section-light .player-card strong,
  body:not(.page-top) .wc-section-light .related-links a,
  body:not(.page-top) .wc-section-light .sub-table td b,
  body:not(.page-top) .wc-section-light .rank,
  body:not(.page-top) .wc-section-light .squad-list b,
  body:not(.page-top) .wc-section-light .ability-bar__head span {
    color: #f8fafc !important;
  }

  body:not(.page-top) .wc-section-light .sub-analysis p,
  body:not(.page-top) .wc-section-light .strength-grid article li,
  body:not(.page-top) .wc-section-light .match-list article p,
  body:not(.page-top) .wc-section-light .match-list article small,
  body:not(.page-top) .wc-section-light .player-card p,
  body:not(.page-top) .wc-section-light .player-card em,
  body:not(.page-top) .wc-section-light .player-card li,
  body:not(.page-top) .wc-section-light .squad-list small,
  body:not(.page-top) .wc-section-light .squad-list em,
  body:not(.page-top) .wc-section-light .sub-table td,
  body:not(.page-top) .wc-section-light .related-links small {
    color: #cbd5e1 !important;
  }
}

/* 20260607 color-mode final specificity lock */
@media (prefers-color-scheme: dark) {
  body:not(.page-top) section.section.section--light.wc-section-light :is(.sub-analysis, .strength-grid article, .match-list article, .sub-team-card, .player-card, .squad-group, .related-links a, .table-wrap, .card, .ability-panel, .featured-card, .view-card, .team-stats article),
  body:not(.page-top) section.section.section--tint.wc-section-light :is(.sub-analysis, .strength-grid article, .match-list article, .sub-team-card, .player-card, .squad-group, .related-links a, .table-wrap, .card, .ability-panel, .featured-card, .view-card, .team-stats article) {
    background: #10233a !important;
    color: #f8fafc !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.24) !important;
  }

  body:not(.page-top) section.section.section--light.wc-section-light :is(.sub-table, .sub-table td, .squad-list div, .player-card li),
  body:not(.page-top) section.section.section--tint.wc-section-light :is(.sub-table, .sub-table td, .squad-list div, .player-card li) {
    background: #10233a !important;
    color: #f8fafc !important;
    border-color: rgba(255,255,255,.12) !important;
  }

  body:not(.page-top) section.section.section--light.wc-section-light :is(.sub-table th, .squad-group button),
  body:not(.page-top) section.section.section--tint.wc-section-light :is(.sub-table th, .squad-group button) {
    background: #081a2f !important;
    color: #f8fafc !important;
    border-color: rgba(255,255,255,.12) !important;
  }

  body:not(.page-top) section.section.section--light.wc-section-light :is(h2, h3, strong, b, .rank, .sub-table td b, .squad-list b, .player-card li b, .ability-bar__head span),
  body:not(.page-top) section.section.section--tint.wc-section-light :is(h2, h3, strong, b, .rank, .sub-table td b, .squad-list b, .player-card li b, .ability-bar__head span) {
    color: #f8fafc !important;
  }

  body:not(.page-top) section.section.section--light.wc-section-light :is(p, small, li, em, td, .sub-table td, .squad-list small, .squad-list em, .related-links small),
  body:not(.page-top) section.section.section--tint.wc-section-light :is(p, small, li, em, td, .sub-table td, .squad-list small, .squad-list em, .related-links small) {
    color: #cbd5e1 !important;
  }
}

/* 20260608 independent rating rank badges */
.rating-with-rank {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.rating-with-rank > strong {
  display: inline-block;
}

.rating-with-rank--hero {
  margin: 4px 0 2px;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: #eaf2ff !important;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.hero-stat-card .rank-badge,
.team-stats .rank-badge,
.sub-team-card .rank-badge {
  color: #eaf2ff !important;
}

.team-stats article {
  display: grid;
  gap: 4px;
  align-content: start;
}

.sub-table .rank-badge {
  background: rgba(26,111,196,.12);
  border-color: rgba(26,111,196,.28);
  color: #dce8f8 !important;
}

@media (prefers-color-scheme: light) {
  .section--light .sub-table .rank-badge,
  .section--tint .sub-table .rank-badge {
    background: #eaf1f8;
    border-color: #dbe5f0;
    color: #102b4d !important;
  }
}

@media (max-width: 760px) {
  .rating-with-rank {
    gap: 8px;
  }

  .hero-stat-card .rating-with-rank {
    align-items: flex-end;
  }

  .rank-badge {
    min-height: 26px;
    padding: 5px 9px;
    font-size: 11px;
  }
}

/* 20260608 light mode final: subpage reading sections use white canvas, not gray bands */
@media (prefers-color-scheme: light) {
  body:not(.page-top),
  body:not(.page-top) #root {
    background: #ffffff !important;
    color: #101a2a !important;
  }

  body:not(.page-top) .section,
  body:not(.page-top) .section--light,
  body:not(.page-top) .section--tint,
  body:not(.page-top) .wc-section-light,
  body.page-group-f section.section.section--light.wc-section-light,
  body.page-group-f section.section.section--tint.wc-section-light,
  body[class*="page-team-"] section.section.section--light.wc-section-light,
  body[class*="page-team-"] section.section.section--tint.wc-section-light {
    background: #ffffff !important;
    background-image: none !important;
    color: #101a2a !important;
  }

  body:not(.page-top) .section--dark,
  body:not(.page-top) .section--navy,
  body:not(.page-top) .wc-section-dark,
  body:not(.page-top) .page-footer.wc-section-dark {
    background-color: #07111f !important;
    color: #f8fafc !important;
  }

  body:not(.page-top) .wc-section-light .section-head h2,
  body:not(.page-top) .wc-section-light > .wrap > .section-head h2,
  body:not(.page-top) .section.section--light.wc-section-light .section-head h2,
  body:not(.page-top) .section.section--tint.wc-section-light .section-head h2,
  body:not(.page-top) .wc-section-light > .wrap > h2,
  body:not(.page-top) .wc-section-light > .wrap > h3,
  body:not(.page-top) .wc-section-light :is(.sub-analysis h2, .strength-grid article h3, .match-list article h3, .player-card h3, .related-links a, .sub-table td b, .rank, .squad-list b) {
    color: #101a2a !important;
    -webkit-text-fill-color: #101a2a !important;
    opacity: 1 !important;
  }

  body:not(.page-top) .wc-section-light .section-head p:last-child,
  body:not(.page-top) .section.section--light.wc-section-light .section-head p:last-child,
  body:not(.page-top) .section.section--tint.wc-section-light .section-head p:last-child,
  body:not(.page-top) .wc-section-light > .wrap > p,
  body:not(.page-top) .wc-section-light .data-note,
  body:not(.page-top) .wc-section-light :is(.sub-analysis p, .strength-grid article li, .match-list article p, .match-list article small, .player-card p, .player-card em, .player-card li, .squad-list small, .squad-list em, .sub-table td, .related-links small) {
    color: #405064 !important;
    -webkit-text-fill-color: #405064 !important;
    opacity: 1 !important;
  }

  body:not(.page-top) .wc-section-light .eyebrow,
  body:not(.page-top) .section.section--light.wc-section-light .eyebrow,
  body:not(.page-top) .section.section--tint.wc-section-light .eyebrow {
    color: #b88722 !important;
    -webkit-text-fill-color: #b88722 !important;
    opacity: 1 !important;
  }

  body:not(.page-top) .wc-section-light :is(.sub-analysis, .strength-grid article, .match-list article, .sub-team-card, .player-card, .squad-group, .related-links a, .table-wrap, .card, .ability-panel, .featured-card, .view-card, .team-stats article) {
    background: #ffffff !important;
    color: #101a2a !important;
    border-color: rgba(15,23,42,.12) !important;
  }

  body:not(.page-top) .wc-section-light :is(.sub-table, .sub-table td, .squad-list div, .player-card li) {
    background: #ffffff !important;
    color: #405064 !important;
    border-color: rgba(15,23,42,.10) !important;
  }

  body:not(.page-top) .wc-section-light :is(.sub-table th, .squad-group button) {
    background: #0a1a2f !important;
    color: #f8fafc !important;
    border-color: rgba(15,23,42,.14) !important;
  }

  body.page-group-f section.section.section--light.wc-section-light .section-head h2,
  body.page-group-f section.section.section--tint.wc-section-light .section-head h2,
  body[class*="page-team-"] section.section.section--light.wc-section-light .section-head h2,
  body[class*="page-team-"] section.section.section--tint.wc-section-light .section-head h2,
  body.page-group-f section.section.section--light.wc-section-light > .wrap > h2,
  body.page-group-f section.section.section--tint.wc-section-light > .wrap > h2,
  body[class*="page-team-"] section.section.section--light.wc-section-light > .wrap > h2,
  body[class*="page-team-"] section.section.section--tint.wc-section-light > .wrap > h2 {
    color: #101a2a !important;
    -webkit-text-fill-color: #101a2a !important;
    opacity: 1 !important;
  }

  body.page-group-f section.section.section--light.wc-section-light .section-head p:last-child,
  body.page-group-f section.section.section--tint.wc-section-light .section-head p:last-child,
  body[class*="page-team-"] section.section.section--light.wc-section-light .section-head p:last-child,
  body[class*="page-team-"] section.section.section--tint.wc-section-light .section-head p:last-child {
    color: #405064 !important;
    -webkit-text-fill-color: #405064 !important;
    opacity: 1 !important;
  }
}

/* 20260608 remaining pages final color-scheme lock */
@media (prefers-color-scheme: light) {
  body:not(.page-top) .section.section--light.wc-section-light,
  body:not(.page-top) .section.section--tint.wc-section-light,
  body:not(.page-top) .wc-section-light {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #101a2a !important;
  }

  body:not(.page-top) .wc-section-light :is(.section-head h2, h2, h3, b, strong) {
    color: #101a2a !important;
    -webkit-text-fill-color: #101a2a !important;
  }

  body:not(.page-top) .wc-section-light :is(.section-head p:last-child, p, small, li, em, td) {
    color: #405064 !important;
    -webkit-text-fill-color: #405064 !important;
  }
}

@media (prefers-color-scheme: dark) {
  body:not(.page-top) .section.section--light.wc-section-light,
  body:not(.page-top) .section.section--tint.wc-section-light,
  body:not(.page-top) .wc-section-light {
    background: #07111f !important;
    background-color: #07111f !important;
    background-image:
      radial-gradient(circle at 16% 0%, rgba(26,111,196,.12), transparent 30%),
      linear-gradient(180deg, #07111f 0%, #081a2f 56%, #07111f 100%) !important;
    color: #f8fafc !important;
  }

  body:not(.page-top) .wc-section-light :is(.extra-card, .goods-page-card, .mini-player-list article) {
    background: #10233a !important;
    color: #f8fafc !important;
    border-color: rgba(255,255,255,.14) !important;
  }

  body:not(.page-top) .wc-section-light :is(.extra-card h3, .extra-card .best-third-card__value, .goods-page-card h3, .mini-player-list b, .mini-player-list strong) {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
  }

  body:not(.page-top) .wc-section-light :is(.extra-card p, .goods-page-card p, .goods-page-card li, .mini-player-list span, .mini-player-list small) {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
  }
}

/* Data sync projection cards */
.projection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.projection-grid strong {
  display: block;
  color: #f6d36b;
  font-family: "Saira Condensed", sans-serif;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1;
  margin: 6px 0 10px;
}

@media (max-width: 760px) {
  .projection-grid {
    grid-template-columns: 1fr;
  }
}


/* Phase 2-3 data presentation */
.probability-table th,
.probability-table td { white-space: nowrap; }
.probability-insight { margin-top: 18px; }
.rating-details { margin-top: 12px; }
.rating-details summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #0b1f3a;
  color: #f8fafc;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.16);
}
.rating-details .table-wrap { margin-top: 14px; }
.rating-group-cards { margin-top: 18px; }


/* Phase 2-3 mobile overflow containment */
@media (max-width: 760px) {
  html,
  body,
  #root { max-width: 100%; overflow-x: hidden; }
  body:not(.page-top) .wrap {
    width: min(100% - 24px, 1160px);
    max-width: calc(100vw - 24px);
  }
  body:not(.page-top) .two-col,
  body:not(.page-top) .group-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body:not(.page-top) .extra-bars,
  body:not(.page-top) .sub-analysis,
  body:not(.page-top) .extra-card,
  body:not(.page-top) .sub-team-card,
  body:not(.page-top) .radar-panel,
  body:not(.page-top) .ability-panel,
  body:not(.page-top) .featured-card,
  body:not(.page-top) .view-card {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  body:not(.page-top) .sub-ratingbar,
  body:not(.page-top) .sub-ratingbar div,
  body:not(.page-top) .sub-ratingbar i {
    min-width: 0;
    max-width: 100%;
  }
  body:not(.page-top) .sub-ratingbar div {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  body:not(.page-top) .table-wrap {
    margin-inline: 0 !important;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body:not(.page-top) .sub-table {
    min-width: 680px;
  }
  body:not(.page-top) .probability-table {
    min-width: 760px;
  }
}


/* Phase 2-4 knockout probability UI */
.knockout-outlook-grid,
.knockout-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.knockout-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.knockout-main-card {
  display: grid;
  gap: 14px;
}
.knockout-bars {
  display: grid;
  gap: 12px;
}
.knockout-bar__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  color: #f8fafc;
  font-weight: 800;
}
.knockout-bar__head span { color: #cbd5e1; }
.knockout-bar__head b { color: #f6d36b; font-family: "Saira Condensed", sans-serif; font-size: 22px; }
.knockout-bar__track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.13);
  overflow: hidden;
}
.knockout-bar__track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0 18px rgba(244,123,32,.18);
}
.knockout-bars--compact { gap: 8px; margin-top: 12px; }
.knockout-bars--compact .knockout-bar__head b { font-size: 17px; }
.knockout-bars--compact .knockout-bar__track { height: 7px; }
.knockout-rank {
  display: block;
  color: #f6d36b;
  font-family: "Saira Condensed", sans-serif;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1;
  margin: 8px 0 12px;
}
.knockout-team-card .flag { margin-bottom: 8px; }
.knockout-team-card h3 { margin-top: 0; }
@media (max-width: 980px) {
  .knockout-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .knockout-outlook-grid,
  .knockout-card-grid { grid-template-columns: 1fr; }
  .knockout-bar__head { align-items: center; }
}


/* 20260609 player rating explanation */
.rating-method-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.rating-method-grid--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rating-method-card p {
  line-height: 1.9;
}
@media (max-width: 980px) {
  .rating-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rating-method-grid,
  .rating-method-grid--compact { grid-template-columns: 1fr; }
}
.rating-method-formula {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid rgba(245, 178, 73, 0.34);
  border-radius: 8px;
  background: rgba(245, 178, 73, 0.10);
  color: #f8fafc;
  font-weight: 800;
  line-height: 1.75;
}
.rating-method-card ul {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding-left: 1.1em;
}
.rating-method-card li {
  line-height: 1.8;
  color: inherit;
}
.wc-section-light .rating-method-formula {
  color: #102033;
  background: rgba(245, 178, 73, 0.16);
  border-color: rgba(180, 112, 20, 0.30);
}
@media (prefers-color-scheme: dark) {
  .wc-section-light .rating-method-formula {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    background: rgba(245, 178, 73, 0.13) !important;
    border-color: rgba(245, 178, 73, 0.36) !important;
  }
}

/* 20260609 predictions dashboard */
.prediction-result-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.prediction-result-card {
  padding: 17px;
  display: grid;
  gap: 8px;
  min-height: 178px;
}
.prediction-result-card span,
.best-third-team-card span {
  color: #f2c94c;
  font-family: "Saira Condensed", sans-serif;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.prediction-result-card h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 16px;
}
.prediction-result-card strong {
  display: block;
  color: #f8fafc;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.05;
}
.prediction-result-card p {
  margin: 0;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.75;
}
.prediction-group-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.prediction-group-card {
  padding: 18px;
  display: grid;
  gap: 14px;
}
.prediction-group-card__head,
.progress-card__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.prediction-group-card__head span,
.progress-card__head span,
.title-rank-card span {
  color: #f2c94c;
  font-family: "Saira Condensed", sans-serif;
  font-weight: 800;
  letter-spacing: .04em;
}
.prediction-group-card__head b {
  color: #f8fafc;
}
.prediction-standings {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.prediction-standings li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
}
.prediction-standings span {
  color: #cbd5e1;
  font-size: 13px;
}
.prediction-card-details summary,
.prediction-group-detail summary {
  cursor: pointer;
  color: #f2c94c;
  font-weight: 800;
}
.prediction-card-details .table-wrap {
  margin-top: 10px;
}
.prediction-pct {
  font-weight: 800;
  color: inherit;
  white-space: nowrap;
}
.prediction-group-tables {
  display: grid;
  gap: 14px;
}
.prediction-team-prob-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.prediction-team-prob-grid--compact {
  grid-template-columns: 1fr;
}
.prediction-team-prob-card {
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 8px;
  background: #ffffff;
  color: #102033;
  padding: 12px;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}
.prediction-team-prob-card--compact {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.12);
  color: #f8fafc;
  box-shadow: none;
}
.prediction-team-prob-card__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 8px;
}
.prediction-team-prob-card__head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}
.prediction-team-prob-card__head b {
  color: inherit;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prediction-team-prob-card__head em {
  color: #b97318;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}
.prediction-team-prob-card--compact .prediction-team-prob-card__head span,
.prediction-team-prob-card--compact .prediction-mini-bar span {
  color: #cbd5e1;
}
.prediction-team-prob-card--compact .prediction-team-prob-card__head em,
.prediction-team-prob-card--compact .prediction-mini-bar b {
  color: #f8fafc;
}
.best-third-grid,
.title-ranking-grid,
.progress-card-grid,
.japan-path-grid {
  display: grid;
  gap: 16px;
}
.best-third-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.best-third-card p {
  line-height: 1.8;
}
.best-third-team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.best-third-team-card {
  padding: 16px;
  display: grid;
  gap: 10px;
}
.best-third-team-card h3 {
  margin: 4px 0;
  color: #f8fafc;
}
.best-third-team-card small {
  color: #cbd5e1;
}
.best-third-team-card.is-group-f {
  border-color: rgba(245,178,73,.46);
}
.best-third-set-detail {
  margin-top: 16px;
}
.prediction-bracket-wrap {
  display: grid;
  gap: 18px;
}
.bracket-summary {
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.bracket-summary span {
  color: #f2c94c;
  font-weight: 800;
}
.bracket-summary b {
  font-size: clamp(22px, 2.6vw, 36px);
  color: #f8fafc;
}
.bracket-summary small {
  color: #cbd5e1;
}
.prediction-bracket {
  display: grid;
  grid-template-columns: 2.2fr 1.55fr 1.1fr 1fr 1fr 1fr;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.bracket-round {
  min-width: 180px;
  display: grid;
  align-content: start;
  gap: 10px;
}
.bracket-round h3 {
  margin: 0;
  color: #f2c94c;
  font-family: "Saira Condensed", sans-serif;
}
.bracket-match {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px;
  padding: 10px;
  background: rgba(16,35,58,.86);
}
.bracket-match small,
.bracket-match em {
  color: #cbd5e1;
  font-style: normal;
  line-height: 1.45;
}
.bracket-match p {
  display: grid;
  gap: 5px;
  margin: 6px 0;
}
.bracket-match span {
  color: #cbd5e1;
}
.bracket-match .is-winner,
.bracket-match b {
  color: #f8fafc;
  font-weight: 900;
}
.bracket-match--upset {
  border-color: rgba(245,178,73,.45);
}
.progress-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.progress-card,
.title-rank-card,
.japan-path-panel {
  padding: 18px;
}
.progress-card.is-japan {
  border-color: rgba(239,51,64,.55);
  box-shadow: 0 0 0 1px rgba(239,51,64,.18);
}
.progress-card.is-group-f:not(.is-japan) {
  border-color: rgba(245,178,73,.34);
}
.prediction-mini-bar {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.prediction-mini-bar div,
.japan-path-row {
  display: grid;
  grid-template-columns: minmax(74px, 1fr) minmax(0, 2fr) auto;
  gap: 10px;
  align-items: center;
}
.prediction-mini-bar div {
  grid-template-columns: 1fr auto;
}
.prediction-mini-bar span,
.japan-path-row span {
  color: #cbd5e1;
  font-size: 13px;
}
.prediction-mini-bar b,
.japan-path-row b {
  color: #f8fafc;
  white-space: nowrap;
}
.prediction-mini-bar i,
.japan-path-row i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}
.prediction-mini-bar em,
.japan-path-row em {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.japan-path-row em {
  background: linear-gradient(90deg, #2f80ed, #f2c94c);
}
.title-ranking-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.title-rank-card h3 {
  margin: 8px 0 12px;
  color: #f8fafc;
}
.title-rank-card small {
  color: #cbd5e1;
}
.wc-section-light .title-rank-card h3,
.wc-section-light .title-rank-card small,
.wc-section-light .title-rank-card .prediction-mini-bar span,
.wc-section-light .title-rank-card .prediction-mini-bar b {
  color: #102033;
}
.japan-path-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.japan-path-panel h3 {
  margin-top: 0;
}
@media (max-width: 1100px) {
  .prediction-group-grid,
  .progress-card-grid,
  .prediction-result-grid,
  .best-third-team-grid,
  .prediction-team-prob-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .title-ranking-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .prediction-result-grid,
  .prediction-group-grid,
  .best-third-grid,
  .best-third-team-grid,
  .progress-card-grid,
  .prediction-team-prob-grid,
  .title-ranking-grid,
  .japan-path-grid {
    grid-template-columns: 1fr;
  }
  .prediction-bracket {
    grid-template-columns: 1fr;
    overflow-x: visible;
  }
  .bracket-round {
    min-width: 0;
  }
  .prediction-mini-bar div,
  .japan-path-row {
    grid-template-columns: 1fr auto;
  }
  .japan-path-row i {
    grid-column: 1 / -1;
  }
}

/* Full schedule page */
.schedule-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.schedule-filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.schedule-filter-tabs button {
  border: 1px solid rgba(15, 23, 42, .14);
  background: #ffffff;
  color: #102033;
  border-radius: 999px;
  padding: 9px 13px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(9, 18, 32, .06);
}
.schedule-filter-tabs button.is-active,
.schedule-filter-tabs button:hover {
  background: #10233a;
  color: #f8fafc;
  border-color: rgba(242, 201, 76, .55);
}
.schedule-date-groups {
  display: grid;
  gap: 12px;
}
.schedule-date-detail summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.schedule-date-list {
  display: grid;
  gap: 8px;
  padding-top: 12px;
}
.schedule-line {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px 14px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 8px;
  background: #ffffff;
  color: #102033;
}
.schedule-line span {
  color: #475569;
  font-weight: 800;
  font-size: 12px;
}
.schedule-line b {
  color: #0f172a;
  font-size: 14px;
}
.schedule-line small {
  grid-column: 2;
  color: #475569;
  line-height: 1.6;
}
.page-schedule .sub-table td,
.page-schedule .sub-table th {
  vertical-align: top;
}
.page-schedule .sub-table td:nth-child(7) {
  min-width: 220px;
}
@media (max-width: 880px) {
  .schedule-summary-grid { grid-template-columns: 1fr; }
  .schedule-filter-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
  .schedule-filter-tabs::-webkit-scrollbar { display: none; }
  .schedule-filter-tabs button { flex: 0 0 auto; }
  .schedule-line { grid-template-columns: 1fr; }
  .schedule-line small { grid-column: auto; }
}

/* 20260610 theme readability pass */
.sub-hero .btn--outline {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  background: rgba(7, 17, 31, .66) !important;
  border-color: rgba(255,255,255,.42) !important;
}
.sub-hero .btn--outline:hover {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.62) !important;
}
.wc-section-light .rating-method-formula {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
}
body:not(.page-top) .wc-section-light p.rating-method-formula {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
}
@media (prefers-color-scheme: dark) {
  .wc-section-light .rating-method-formula {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    background: rgba(245, 178, 73, .13) !important;
    border-color: rgba(245, 178, 73, .38) !important;
  }
  body:not(.page-top) .wc-section-light p.rating-method-formula {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
  }
}

/* 20260610 prediction probability cards: avoid white cards in dark mode */
@media (prefers-color-scheme: dark) {
  .page-predictions .wc-section-light .prediction-team-prob-card,
  .page-predictions .wc-section-light .prediction-card-details .table-wrap {
    background: #172435 !important;
    color: #f8fafc !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
  }
  .page-predictions .wc-section-light .prediction-team-prob-card__head span,
  .page-predictions .wc-section-light .prediction-mini-bar span {
    color: #d7e2f1 !important;
    -webkit-text-fill-color: #d7e2f1 !important;
  }
  .page-predictions .wc-section-light .prediction-team-prob-card__head b,
  .page-predictions .wc-section-light .prediction-mini-bar b {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
  }
  .page-predictions .wc-section-light .prediction-team-prob-card__head em {
    color: #f3c765 !important;
    -webkit-text-fill-color: #f3c765 !important;
  }
  .page-predictions .wc-section-light .prediction-mini-bar i {
    background: rgba(255,255,255,.14) !important;
  }
}

/* 20260610 player metric cards: use real rating fields plus position notes */
@media (prefers-color-scheme: dark) {
  body:not(.page-top) .wc-section-light .player-metric--text,
  body:not(.page-top) .wc-section-light .player-position-notes article {
    background: #172435 !important;
    color: #d7e2f1 !important;
    border-color: rgba(255,255,255,.14) !important;
  }
  body:not(.page-top) .wc-section-light .player-metric__head b,
  body:not(.page-top) .wc-section-light .player-position-notes b {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
  }
  body:not(.page-top) .wc-section-light .player-position-notes p,
  body:not(.page-top) .wc-section-light .player-metric--text .player-metric__head b {
    color: #d7e2f1 !important;
    -webkit-text-fill-color: #d7e2f1 !important;
  }
  body:not(.page-top) .wc-section-light .player-metric__track {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.16) !important;
  }
}