/* ============================================================
   World Cup 2026 — Premium Design System
   Scoped via .wc-scope class to avoid collisions with global theme
   ============================================================ */

.wc-scope {
  /* Palette — pitch green, host-country accents, trophy gold */
  --wc-ink:        #0a1f44;       /* deep navy headlines */
  --wc-ink-soft:   #1f3a68;
  --wc-pitch:      #0e6e3a;       /* pitch green */
  --wc-pitch-soft: #14a05a;
  --wc-gold:       #d4af37;       /* trophy gold */
  --wc-gold-soft:  #f1d27a;
  --wc-red:        #c8102e;       /* USA / CAN red */
  --wc-blue:       #2563eb;       /* sky / USA blue */
  --wc-mex-green:  #006847;
  --wc-mex-red:    #ce1126;
  --wc-paper:      #fbfaf6;
  --wc-card:       #ffffff;
  --wc-line:       rgba(10, 31, 68, 0.08);
  --wc-text:       #2b3a55;
  --wc-text-soft:  #5d6b85;
  --wc-shadow-sm:  0 2px 6px rgba(10, 31, 68, .06);
  --wc-shadow-md:  0 12px 30px -10px rgba(10, 31, 68, .18);
  --wc-shadow-lg:  0 30px 60px -20px rgba(10, 31, 68, .28);
  --wc-glow:       0 0 0 1px rgba(212, 175, 55, .35), 0 8px 24px -8px rgba(212, 175, 55, .35);

  /* Gradients */
  --wc-grad-hero:  linear-gradient(135deg, #050d1f 0%, #0a1f44 35%, #0e6e3a 100%);
  --wc-grad-pitch: linear-gradient(180deg, #0e6e3a 0%, #14a05a 100%);
  --wc-grad-gold:  linear-gradient(135deg, #f1d27a 0%, #d4af37 50%, #b8941f 100%);
  --wc-grad-flag:  linear-gradient(90deg, #c8102e 0%, #c8102e 33%, #ffffff 33%, #ffffff 66%, #006847 66%, #006847 100%);

  --wc-radius:     16px;
  --wc-radius-sm:  10px;
  --wc-radius-lg:  24px;
}

/* ============== layout ============== */
.wc-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px 5rem;
  color: var(--wc-text);
  font-feature-settings: "ss01", "cv11";
}
.wc-section { margin: 4rem 0; scroll-margin-top: 96px; }
.wc-section-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--wc-ink);
  margin: 0 0 .35rem;
  letter-spacing: -0.01em;
  font-weight: 800;
}
.wc-section-kicker {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wc-gold);
  background: rgba(212, 175, 55, .12);
  padding: .35rem .7rem;
  border-radius: 999px;
  margin-bottom: .9rem;
}
.wc-section-lede {
  color: var(--wc-text-soft);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 70ch;
  margin: 0 0 1.6rem;
}

/* ============== HERO ============== */
.wc-hero {
  position: relative;
  margin: 1.5rem 0 3.5rem;
  padding: 3.5rem 2rem 3rem;
  border-radius: var(--wc-radius-lg);
  background: var(--wc-grad-hero);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--wc-shadow-lg);
}
.wc-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(212,175,55,.30), transparent 38%),
    radial-gradient(circle at 88% 82%, rgba(20,160,90,.32), transparent 42%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 96px);
  z-index: -1;
}
.wc-hero::after {
  content: "";
  position: absolute; inset: auto -10% -50% -10%;
  height: 60%;
  background:
    radial-gradient(ellipse at center, rgba(212,175,55,.25), transparent 60%);
  filter: blur(40px);
  z-index: -1;
}
.wc-hero-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--wc-gold-soft);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(212,175,55,.35);
  padding: .45rem .9rem; border-radius: 999px;
  backdrop-filter: blur(8px);
}
.wc-hero-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--wc-gold); box-shadow: 0 0 8px var(--wc-gold);
}
.wc-hero h1 {
  margin: 1rem 0 .8rem;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #fff;
  text-wrap: balance;
}
.wc-hero h1 em {
  font-style: normal;
  background: var(--wc-grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wc-hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.65;
  color: rgba(255,255,255,.85);
  max-width: 62ch;
  margin: 0 0 1.6rem;
}
.wc-hero-meta {
  display: flex; flex-wrap: wrap; gap: 1.2rem 2rem;
  font-size: .85rem;
  color: rgba(255,255,255,.75);
  margin-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1.2rem;
}
.wc-hero-meta b { color: #fff; font-weight: 700; }

.wc-cta-row { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .25rem; }
.wc-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.3rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  border: 1px solid transparent;
}
.wc-btn-primary {
  background: var(--wc-grad-gold);
  color: #0a1f44;
  box-shadow: 0 8px 24px -8px rgba(212,175,55,.6);
}
.wc-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(212,175,55,.7); }
.wc-btn-ghost {
  background: rgba(255,255,255,.06);
  color: #fff;
  border-color: rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}
.wc-btn-ghost:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }

/* ============== match ticker ============== */
.wc-ticker {
  position: relative;
  margin: 2.5rem 0;
  padding: 0;
  background: linear-gradient(180deg, #0a1f44 0%, #050d1f 100%);
  border-radius: var(--wc-radius);
  overflow: hidden;
  box-shadow: var(--wc-shadow-md);
}
.wc-ticker-head {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.2rem;
  background: rgba(0,0,0,.3);
  border-bottom: 1px solid rgba(212,175,55,.18);
  color: #fff;
  font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
}
.wc-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--wc-red);
  animation: wc-pulse 1.4s ease-in-out infinite;
}
@keyframes wc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,16,46,.7); }
  50%      { box-shadow: 0 0 0 8px rgba(200,16,46,0); }
}
.wc-ticker-track {
  display: flex; gap: 1rem;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.wc-ticker-track::-webkit-scrollbar { height: 6px; }
.wc-ticker-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 999px; }
.wc-mini-match {
  flex: 0 0 220px;
  scroll-snap-align: start;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: .75rem .9rem;
  color: #fff;
  font-size: .85rem;
}
.wc-mini-match .when {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wc-gold-soft); margin-bottom: .5rem;
}
.wc-mini-match .pair {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 700;
}
.wc-mini-match .vs { color: rgba(255,255,255,.4); font-weight: 500; padding: 0 .4rem; }

/* ============== card grids ============== */
.wc-grid {
  display: grid;
  gap: 1.2rem;
}
.wc-grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.wc-grid-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.wc-card {
  position: relative;
  background: var(--wc-card);
  border-radius: var(--wc-radius);
  border: 1px solid var(--wc-line);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
  display: flex; flex-direction: column;
}
.wc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--wc-shadow-md);
  border-color: rgba(212,175,55,.4);
}
.wc-card-media {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--wc-grad-hero);
  overflow: hidden;
}
.wc-card-media-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem; color: rgba(212,175,55,.55);
  background:
    radial-gradient(circle at 30% 30%, rgba(20,160,90,.4), transparent 55%),
    var(--wc-grad-hero);
}
.wc-card-media-placeholder::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 32px);
}
.wc-card-badge {
  position: absolute; top: .8rem; left: .8rem;
  background: var(--wc-grad-gold);
  color: #0a1f44;
  padding: .3rem .65rem; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: var(--wc-shadow-sm);
}
.wc-card-flag {
  position: absolute; top: .8rem; right: .8rem;
  font-size: 1.6rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.wc-card-body { padding: 1.1rem 1.2rem 1.3rem; flex: 1; display: flex; flex-direction: column; }
.wc-card-title {
  font-size: 1.15rem; font-weight: 800;
  color: var(--wc-ink); margin: 0 0 .25rem;
  letter-spacing: -0.01em;
}
.wc-card-sub {
  color: var(--wc-text-soft); font-size: .85rem; margin: 0 0 .75rem;
}
.wc-card-stats {
  display: flex; gap: 1.1rem;
  font-size: .78rem;
  color: var(--wc-text-soft);
  margin-top: auto;
  padding-top: .8rem;
  border-top: 1px solid var(--wc-line);
}
.wc-card-stats b {
  display: block;
  font-size: 1.05rem; font-weight: 800;
  color: var(--wc-ink);
}

/* ============== team chips ============== */
.wc-conf-block { margin-bottom: 2.2rem; }
.wc-conf-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem;
  margin-bottom: 1rem;
  padding-bottom: .65rem;
  border-bottom: 2px solid var(--wc-ink);
  position: relative;
}
.wc-conf-head::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 80px; height: 2px;
  background: var(--wc-grad-gold);
}
.wc-conf-name { font-size: 1.3rem; font-weight: 800; color: var(--wc-ink); margin: 0; }
.wc-conf-slots { font-size: .75rem; font-weight: 700; color: var(--wc-text-soft); letter-spacing: .08em; text-transform: uppercase; }
.wc-team-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .55rem;
}
.wc-team-chip {
  display: flex; align-items: center; gap: .55rem;
  padding: .65rem .85rem;
  background: var(--wc-card);
  border: 1px solid var(--wc-line);
  border-radius: 10px;
  font-weight: 600; color: var(--wc-ink); font-size: .92rem;
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.wc-team-chip:hover { transform: translateY(-2px); box-shadow: var(--wc-shadow-sm); border-color: var(--wc-gold); }
.wc-team-flag { font-size: 1.25rem; line-height: 1; }
.wc-team-status {
  margin-inline-start: auto;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: .15rem .45rem; border-radius: 4px;
}
.wc-team-status.qualified { background: rgba(20,160,90,.12); color: var(--wc-pitch); }
.wc-team-status.host      { background: rgba(212,175,55,.18); color: #8a6e1f; }
.wc-team-status.likely    { background: rgba(37,99,235,.12); color: var(--wc-blue); }
.wc-team-status.tbd       { background: rgba(0,0,0,.06); color: var(--wc-text-soft); }

/* ============== content / SEO copy ============== */
.wc-prose { max-width: 70ch; margin: 0 auto; }
.wc-prose h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  color: var(--wc-ink);
  margin: 2.5rem 0 .8rem;
  font-weight: 800; letter-spacing: -0.015em;
}
.wc-prose h3 {
  font-size: 1.18rem; color: var(--wc-ink);
  margin: 1.6rem 0 .55rem; font-weight: 700;
}
.wc-prose p { line-height: 1.78; color: var(--wc-text); margin: 0 0 1.05rem; font-size: 1.02rem; }
.wc-prose ul, .wc-prose ol { line-height: 1.75; color: var(--wc-text); padding-inline-start: 1.25rem; }
.wc-prose li { margin-bottom: .35rem; }
.wc-prose a { color: var(--wc-blue); text-decoration: underline; text-underline-offset: 3px; }
.wc-prose strong { color: var(--wc-ink); }

.wc-pull {
  margin: 2rem 0;
  padding: 1.25rem 1.4rem 1.25rem 1.6rem;
  border-inline-start: 4px solid var(--wc-gold);
  background: linear-gradient(90deg, rgba(212,175,55,.08), transparent);
  border-radius: 0 var(--wc-radius-sm) var(--wc-radius-sm) 0;
  color: var(--wc-ink);
  font-size: 1.08rem; line-height: 1.6; font-weight: 500;
}

/* ============== FAQ ============== */
.wc-faq details {
  background: var(--wc-card);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-radius-sm);
  padding: 1rem 1.1rem;
  margin-bottom: .65rem;
  transition: border-color .15s, box-shadow .2s;
}
.wc-faq details[open] { border-color: var(--wc-gold); box-shadow: var(--wc-shadow-sm); }
.wc-faq summary {
  cursor: pointer; font-weight: 700; color: var(--wc-ink);
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  font-size: 1.02rem;
}
.wc-faq summary::-webkit-details-marker { display: none; }
.wc-faq summary::after {
  content: "+"; font-size: 1.4rem; font-weight: 400;
  color: var(--wc-gold); transition: transform .2s;
}
.wc-faq details[open] summary::after { transform: rotate(45deg); }
.wc-faq details > p { margin: .8rem 0 0; color: var(--wc-text); line-height: 1.7; }

/* ============== inline affiliate ============== */
.wc-aff {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin: 2rem 0;
}
.wc-aff-card {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.2rem 1.3rem;
  background: var(--wc-card);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-radius);
  text-decoration: none;
  color: var(--wc-ink);
  transition: transform .15s, box-shadow .25s, border-color .15s;
  position: relative;
  overflow: hidden;
}
.wc-aff-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--wc-grad-gold);
}
.wc-aff-card:hover {
  transform: translateY(-3px); box-shadow: var(--wc-shadow-md);
  border-color: var(--wc-gold);
}
.wc-aff-icon { font-size: 1.6rem; line-height: 1; }
.wc-aff-title { font-weight: 800; font-size: 1rem; margin: .15rem 0 0; }
.wc-aff-sub { font-size: .82rem; color: var(--wc-text-soft); }
.wc-aff-cta {
  margin-top: .55rem; font-size: .78rem; font-weight: 800;
  color: var(--wc-blue); letter-spacing: .04em;
}

/* ============== nav between pages ============== */
.wc-pillnav {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 1.5rem 0 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--wc-line);
}
.wc-pillnav a {
  padding: .55rem 1rem; border-radius: 999px;
  font-size: .86rem; font-weight: 700;
  color: var(--wc-ink-soft);
  background: var(--wc-card);
  border: 1px solid var(--wc-line);
  text-decoration: none;
  transition: all .15s;
}
.wc-pillnav a:hover { border-color: var(--wc-gold); color: var(--wc-ink); transform: translateY(-1px); }
.wc-pillnav a.active {
  background: var(--wc-ink); color: #fff; border-color: var(--wc-ink);
}

/* ============== footer / breadcrumb (premium pill) ============== */
.wc-crumbs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--wc-text-soft);
  margin: 1.25rem 0 1.25rem;
  padding: .55rem 1rem;
  background: color-mix(in oklab, var(--wc-ink) 5%, transparent);
  border: 1px solid color-mix(in oklab, var(--wc-ink) 10%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px -8px rgba(10,30,60,.18);
  max-width: 100%;
}
.wc-crumbs a {
  color: var(--wc-text-soft);
  text-decoration: none;
  transition: color .2s ease;
}
.wc-crumbs a:hover { color: var(--wc-gold, var(--wc-ink)); }
.wc-crumbs a:first-of-type::before {
  content: "⌂";
  display: inline-block;
  margin-right: .4rem;
  font-size: 1em;
  color: var(--wc-gold, var(--wc-ink));
  transform: translateY(-1px);
}
.wc-crumbs > span {
  color: var(--wc-ink);
  font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  .wc-crumbs {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 4px 14px -8px rgba(0,0,0,.5);
  }
}

/* ============== reveal animation ============== */
.wc-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.wc-reveal.in { opacity: 1; transform: none; }

/* ============== responsive ============== */
@media (max-width: 720px) {
  .wc-hero { padding: 2.5rem 1.4rem 2.2rem; }
  .wc-hero-meta { gap: .8rem 1.4rem; font-size: .78rem; }
  .wc-section { margin: 3rem 0; }
  .wc-team-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ============== RTL adjustments ============== */
[dir="rtl"] .wc-aff-card::before { left: auto; right: 0; }
[dir="rtl"] .wc-pull { border-inline-start: 4px solid var(--wc-gold); }

/* ============== dark mode harmony ============== */
[data-theme="dark"] .wc-scope {
  --wc-paper:      #0b1224;
  --wc-card:       #131c33;
  --wc-line:       rgba(255,255,255,.08);
  --wc-text:       #d8dcea;
  --wc-text-soft:  #97a2bf;
  --wc-ink:        #f1f5ff;
  --wc-ink-soft:   #c2cce0;
}

/* ============================================================
   Groups, Standings, Matches — premium WC25 immersive layer
   ============================================================ */
.wc-pagehead{padding:48px 0 24px;text-align:center}
.wc-pagehead-title{font-size:clamp(2rem,5vw,3.6rem);line-height:1.05;margin:8px 0 12px;letter-spacing:-.02em}
.wc-pagehead-title em{background:linear-gradient(135deg,#ff3d6a,#ffb938);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal}
.wc-pagehead-sub{max-width:720px;margin:0 auto;color:var(--wc-muted,#94a3b8);font-size:1.05rem}

.wc-section-title{font-size:clamp(1.4rem,2.6vw,2rem);margin:0 0 16px;letter-spacing:-.01em}
.wc-section{padding:32px 0}
.wc-muted{color:var(--wc-muted,#94a3b8)}
.wc-muted-sm{font-size:.875rem;margin-top:8px}
.wc-link{color:#ff7a3a;text-decoration:none;font-weight:600}
.wc-link:hover{text-decoration:underline}
.wc-back{margin:24px 0 48px}

/* Groups grid + tables */
.wc-groups-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:900px){.wc-groups-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1280px){.wc-groups-grid{grid-template-columns:repeat(3,1fr)}}
.wc-group-card{background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px;color:inherit;text-decoration:none;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.wc-group-card:hover{transform:translateY(-2px);border-color:rgba(255,61,106,.35);box-shadow:0 18px 40px -28px rgba(255,61,106,.6)}
.wc-standings.is-compact .wc-standings-table{font-size:.8rem}
.wc-standings-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.wc-standings-group{font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:.85rem;color:#ffb938}
.wc-standings-table{width:100%;border-collapse:collapse;font-size:.92rem}
.wc-standings-table th,.wc-standings-table td{padding:8px 6px;text-align:center;border-bottom:1px solid rgba(255,255,255,.05)}
.wc-standings-table thead th{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;font-weight:600}
.wc-standings-table .t-team{text-align:left;display:flex;align-items:center;gap:8px;min-width:0}
.wc-standings-table .t-pos{width:28px;font-weight:700;color:#94a3b8}
.wc-standings-table .t-pts strong{font-size:1.05rem;color:#fff}
.wc-team-flag{font-size:1.2rem;line-height:1}
.wc-team-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.wc-standings-table tr.is-leader{background:linear-gradient(90deg,rgba(255,185,56,.12),transparent)}
.wc-standings-table tr.is-leader .t-pos{color:#ffb938}
.wc-qbadge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.wc-qbadge.q-q{background:rgba(34,197,94,.18);color:#86efac}
.wc-qbadge.q-playoff{background:rgba(234,179,8,.18);color:#fde047}
.wc-qbadge.q-out{background:rgba(239,68,68,.18);color:#fca5a5}
.wc-qbadge.q-tbd{background:rgba(148,163,184,.18);color:#cbd5e1}

.wc-group-fixtures{border-top:1px solid rgba(255,255,255,.06);padding-top:12px}
.wc-group-fixtures-title{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin:0 0 10px}
.wc-group-fixtures-list{display:grid;gap:8px}

/* Match cards */
.wc-mcard{display:block;background:linear-gradient(160deg,rgba(15,23,42,.6),rgba(15,23,42,.3));border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;color:inherit;text-decoration:none;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.wc-mcard:hover{transform:translateY(-2px);border-color:rgba(255,122,58,.4);box-shadow:0 14px 36px -24px rgba(255,122,58,.55)}
.wc-mcard-top{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;margin-bottom:10px}
.wc-mcard-live{display:inline-flex;align-items:center;gap:6px;color:#fca5a5;font-weight:800}
.wc-mcard-live .dot{width:8px;height:8px;border-radius:50%;background:#ef4444;animation:wcpulse 1.4s ease-in-out infinite}
.wc-mcard-ft{color:#94a3b8;font-weight:700}
.wc-mcard-when{color:#cbd5e1;font-weight:600}
.wc-mcard-body{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.wc-mcard-team{display:flex;align-items:center;gap:8px;min-width:0}
.wc-mcard-team.is-away{justify-content:flex-end;text-align:right}
.wc-mcard-flag{font-size:1.4rem;line-height:1}
.wc-mcard-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-mcard-score{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;min-width:64px;text-align:center;color:#fff}
.wc-mcard.status-scheduled .wc-mcard-score{font-size:1rem;color:#94a3b8}
.wc-mcard-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:.78rem;color:#94a3b8}
.wc-countdown{font-weight:700;color:#ffb938}

/* Board */
.wc-board{display:flex;flex-direction:column;gap:18px}
.wc-board-tabs{display:flex;gap:6px;flex-wrap:wrap;background:rgba(255,255,255,.03);padding:6px;border-radius:12px;border:1px solid rgba(255,255,255,.06)}
.wc-tab{flex:1 1 auto;min-width:80px;background:transparent;border:0;color:#cbd5e1;padding:10px 14px;border-radius:8px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.78rem;cursor:pointer;transition:background .2s ease,color .2s ease}
.wc-tab:hover{color:#fff}
.wc-tab.is-active{background:linear-gradient(135deg,#ff3d6a,#ff7a3a);color:#fff;box-shadow:0 8px 24px -12px rgba(255,61,106,.6)}
.wc-board-filters{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:700px){.wc-board-filters{grid-template-columns:repeat(3,1fr)}}
.wc-board-filters label{display:flex;flex-direction:column;gap:4px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8}
.wc-board-filters select{appearance:none;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#fff;padding:10px 12px;border-radius:10px;font-size:.95rem;cursor:pointer}
.wc-board-filters select:focus{outline:2px solid #ff7a3a;outline-offset:2px}
.wc-board-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){.wc-board-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.wc-board-grid{grid-template-columns:repeat(3,1fr)}}
.wc-board-empty{text-align:center;color:#94a3b8;padding:40px}

/* Match hero */
.wc-mhero{position:relative;overflow:hidden;border-radius:24px;margin:24px 0;padding:48px 24px;background:radial-gradient(ellipse at top,rgba(255,61,106,.25),transparent 60%),linear-gradient(160deg,#0b1220,#1a0a1f);border:1px solid rgba(255,255,255,.08)}
.wc-mhero-bg{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;opacity:.08;font-size:clamp(8rem,30vw,20rem);pointer-events:none;user-select:none}
.wc-mhero-flag-l{transform:translateX(-15%) rotate(-8deg)}
.wc-mhero-flag-r{transform:translateX(15%) rotate(8deg)}
.wc-mhero-inner{position:relative;text-align:center;display:flex;flex-direction:column;gap:18px;align-items:center}
.wc-mhero-round{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#ffb938;font-weight:800}
.wc-mhero-teams{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;width:100%;max-width:760px}
.wc-mhero-team{display:flex;flex-direction:column;align-items:center;gap:8px}
.wc-mhero-bigflag{font-size:clamp(3rem,9vw,5rem);line-height:1}
.wc-mhero-bigname{font-size:clamp(1rem,2.4vw,1.4rem);font-weight:800;letter-spacing:-.01em}
.wc-mhero-score{font-size:clamp(1.6rem,5vw,2.6rem);font-weight:900;color:#fff;display:flex;flex-direction:column;align-items:center;gap:6px}
.wc-vs{font-size:.9rem;letter-spacing:.2em;color:#94a3b8;font-weight:700}
.wc-live-pulse{font-size:.7rem;letter-spacing:.12em;background:#ef4444;color:#fff;padding:3px 10px;border-radius:999px;animation:wcpulse 1.4s ease-in-out infinite}
.wc-mhero-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;color:#cbd5e1;font-size:.92rem}
.wc-mhero-countdown{display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(255,255,255,.04);padding:14px 24px;border-radius:14px;border:1px solid rgba(255,255,255,.08)}
.wc-mhero-countdown-label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#94a3b8}
.wc-mhero-countdown-val{font-size:1.6rem;font-weight:800;color:#ffb938;font-variant-numeric:tabular-nums}

/* Timeline */
.wc-timeline{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:14px}
.wc-timeline-item{display:grid;grid-template-columns:60px 18px 1fr;gap:12px;align-items:center}
.wc-timeline-time{font-weight:800;color:#ffb938;font-variant-numeric:tabular-nums}
.wc-timeline-dot{width:12px;height:12px;border-radius:50%;background:#ff7a3a;box-shadow:0 0 0 4px rgba(255,122,58,.18)}

/* Stats */
.wc-stats{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:14px}
.wc-stat-row{display:grid;grid-template-columns:60px 1fr 60px;align-items:center;font-size:.92rem}
.wc-stat-h{text-align:left;font-weight:700}
.wc-stat-a{text-align:right;font-weight:700}
.wc-stat-label{text-align:center;color:#94a3b8;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.wc-stat-bar{display:flex;height:8px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.06);margin-top:6px}
.wc-stat-bar-h{background:linear-gradient(90deg,#ff3d6a,#ff7a3a);transition:width .8s ease}
.wc-stat-bar-a{background:linear-gradient(90deg,#3b82f6,#60a5fa);transition:width .8s ease}

/* Venue card */
.wc-venue-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px;margin-top:12px}
.wc-venue-card h3{margin:0 0 6px;font-size:1.2rem}
.wc-venue-card p{margin:0 0 10px;color:#cbd5e1}

/* Pillnav fits 7 items */
.wc-pillnav{flex-wrap:wrap}

/* Animations */
@keyframes wcpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.15)}}
@media (prefers-reduced-motion: reduce){
  .wc-mcard:hover,.wc-group-card:hover{transform:none}
  .wc-mcard-live .dot,.wc-live-pulse{animation:none}
}

/* RTL adjustments */
[dir="rtl"] .wc-mcard-team.is-away{justify-content:flex-start;text-align:left}
[dir="rtl"] .wc-mhero-flag-l{transform:translateX(15%) rotate(8deg)}
[dir="rtl"] .wc-mhero-flag-r{transform:translateX(-15%) rotate(-8deg)}

/* =====================================================================
   World Cup 2026 — Teams hub v2 (refonte premium, scoped .wc-teams-v2)
   ===================================================================== */
.wc-teams-v2 { --wc-radius-lg: 18px; --wc-card-elev: 0 6px 24px rgba(8,15,35,.08); }
.wc-teams-v2 .wc-section-title { letter-spacing:-.01em; }

/* --- Command Center --- */
.wc-tcc { padding-top: 2rem; }
.wc-tcc-head { display:flex; flex-direction:column; gap:.25rem; margin-bottom:1rem; }
.wc-tcc-sub { color: var(--wc-text-soft); font-size:.9rem; margin:.25rem 0 0; }
.wc-tcc-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:.75rem; }
@media (min-width: 720px) { .wc-tcc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .wc-tcc-grid { grid-template-columns: repeat(6, 1fr); } }
.wc-tcc-card {
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,0)) , var(--wc-card-bg, #fff);
  border:1px solid var(--wc-border, rgba(0,0,0,.08));
  border-radius: var(--wc-radius-lg);
  padding: 1rem 1.1rem; display:flex; flex-direction:column; gap:.25rem;
  box-shadow: var(--wc-card-elev);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wc-tcc-card:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(8,15,35,.12); }
.wc-tcc-num { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; line-height:1.05; color: var(--wc-text); }
.wc-tcc-den { font-size: .85rem; font-weight: 500; color: var(--wc-text-soft); margin-left:.2rem; }
.wc-tcc-lbl { font-size:.78rem; text-transform:uppercase; letter-spacing:.6px; color: var(--wc-text-soft); }
.wc-tcc-card--next { grid-column: span 2; }
@media (min-width:1080px) { .wc-tcc-card--next { grid-column: span 2; } }
.wc-tcc-next { font-weight:700; font-size:1rem; }
.wc-tcc-next-meta { font-size:.82rem; color:var(--wc-text-soft); }

/* --- Filters --- */
.wc-tfilters-wrap { position: sticky; top:0; z-index:30; padding-top:0; padding-bottom:0; }
.wc-tfilters {
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  padding:.7rem .8rem; margin:.5rem 0 1rem;
  background: color-mix(in oklab, var(--wc-card-bg, #fff) 85%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border:1px solid var(--wc-border, rgba(0,0,0,.08));
  border-radius: var(--wc-radius-lg);
  box-shadow: var(--wc-card-elev);
}
.wc-tf-search { display:flex; align-items:center; gap:.4rem; flex:1 1 220px; min-width:0;
  background: var(--wc-bg-soft, rgba(0,0,0,.04)); border-radius: 999px; padding:.45rem .8rem; color: var(--wc-text-soft); }
.wc-tf-search input { flex:1; min-width:0; background:transparent; border:0; outline:0; color: var(--wc-text); font-size:.95rem; }
.wc-tfilters select { padding:.5rem .7rem; border-radius: 999px; border:1px solid var(--wc-border, rgba(0,0,0,.1)); background: var(--wc-card-bg, #fff); color: var(--wc-text); font-size:.85rem; }
.wc-tf-reset { padding:.5rem .9rem; border-radius:999px; border:1px solid var(--wc-border, rgba(0,0,0,.1)); background:transparent; color:var(--wc-text-soft); cursor:pointer; font-size:.8rem; }
.wc-tf-reset:hover { color: var(--wc-text); border-color: var(--wc-text-soft); }

/* --- Grid premium --- */
.wc-tgp-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:.8rem; flex-wrap:wrap; }
.wc-tgp-count { color:var(--wc-text-soft); font-size:.85rem; }
.wc-tgp-grid { display:grid; gap:1rem; grid-template-columns: 1fr; }
@media (min-width:640px)  { .wc-tgp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width:980px)  { .wc-tgp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width:1280px) { .wc-tgp-grid { grid-template-columns: repeat(4, 1fr); } }
.wc-tgp-empty { color:var(--wc-text-soft); text-align:center; padding:2rem; }

.wc-tcard { position:relative; border-radius: var(--wc-radius-lg); overflow:hidden;
  background: var(--wc-card-bg, #fff); border:1px solid var(--wc-border, rgba(0,0,0,.08));
  box-shadow: var(--wc-card-elev);
  opacity:0; transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease, box-shadow .25s ease;
}
.wc-tcard.is-in { opacity:1; transform:none; }
.wc-tcard:hover { box-shadow: 0 16px 40px rgba(8,15,35,.16); }
.wc-tcard::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background: var(--wc-conf, #888); opacity:.9; }
.wc-tcard-link { color:inherit; text-decoration:none; display:block; }

.wc-tcard-media { position:relative; aspect-ratio: 16/9; background: #0b1220; overflow:hidden; }
.wc-tcard-media img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s ease; }
.wc-tcard:hover .wc-tcard-media img { transform: scale(1.06); }
.wc-tcard-overlay { position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%); }
.wc-tcard-status { position:absolute; top:.6rem; left:.6rem; padding:.18rem .55rem; border-radius:999px;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  background: rgba(255,255,255,.9); color:#222; }
.wc-tcard-status--host { background:#f3d04c; color:#3a2a00; }
.wc-tcard-status--qualified { background:#0fb87a; color:#fff; }
.wc-tcard-status--likely { background:rgba(255,255,255,.85); color:#1a2a4c; }
.wc-tcard-status--tbd { background:rgba(255,255,255,.5); color:#222; }
.wc-tcard-conf { position:absolute; top:.6rem; right:.6rem; padding:.18rem .55rem;
  border-radius:999px; background: rgba(0,0,0,.55); color:#fff;
  font-size:.7rem; font-weight:700; letter-spacing:.5px; }
.wc-tcard-credit { position:absolute; bottom:.4rem; right:.5rem; z-index:3;
  font-size:.62rem; color:rgba(255,255,255,.8); text-decoration:none;
  padding:.1rem .4rem; background: rgba(0,0,0,.4); border-radius:4px; }

.wc-tcard-body { padding: .9rem 1rem 1.1rem; display:flex; flex-direction:column; gap:.75rem; }
.wc-tcard-title { display:flex; align-items:center; gap:.7rem; }
.wc-tcard-flag { font-size:1.9rem; line-height:1; }
.wc-tcard-title h3 { margin:0; font-size:1.05rem; font-weight:700; color:var(--wc-text); }
.wc-tcard-nick { font-size:.75rem; color:var(--wc-text-soft); text-transform:uppercase; letter-spacing:.5px; }
.wc-tcard-stats { list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(4, 1fr); gap:.4rem; }
.wc-tcard-stats li { display:flex; flex-direction:column; align-items:flex-start; padding:.4rem .5rem;
  background: var(--wc-bg-soft, rgba(0,0,0,.04)); border-radius:10px; }
.wc-tcard-stats b { font-size:.95rem; font-weight:800; color: var(--wc-conf, var(--wc-text)); }
.wc-tcard-stats span { font-size:.65rem; color:var(--wc-text-soft); text-transform:uppercase; letter-spacing:.5px; }

.wc-tcard-next { display:flex; flex-direction:column; gap:.1rem; padding:.55rem .7rem;
  border-left:3px solid var(--wc-conf, #888); background: var(--wc-bg-soft, rgba(0,0,0,.04));
  border-radius: 0 10px 10px 0; }
.wc-tcard-next-tag { font-size:.68rem; text-transform:uppercase; letter-spacing:.6px; color: var(--wc-text-soft); }
.wc-tcard-next-opp { font-weight:700; font-size:.92rem; }
.wc-tcard-next-ven { font-size:.75rem; color: var(--wc-text-soft); }
.wc-tcard-cta { align-self:flex-start; font-size:.82rem; color: var(--wc-conf, var(--wc-text)); font-weight:700;
  transition: gap .25s ease; }
.wc-tcard:hover .wc-tcard-cta { letter-spacing:.02em; }

/* --- Groups snapshot --- */
.wc-gsnap-head { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.wc-gsnap-grid { display:grid; gap:.85rem; grid-template-columns: 1fr; }
@media (min-width:640px)  { .wc-gsnap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width:960px)  { .wc-gsnap-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width:1280px) { .wc-gsnap-grid { grid-template-columns: repeat(4, 1fr); } }
.wc-gsnap-card { background: var(--wc-card-bg, #fff); border:1px solid var(--wc-border, rgba(0,0,0,.08));
  border-radius: var(--wc-radius-lg); padding:.8rem .9rem; box-shadow: var(--wc-card-elev); }
.wc-gsnap-card header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.5rem; }
.wc-gsnap-card header span { font-size:.72rem; color:var(--wc-text-soft); text-transform:uppercase; letter-spacing:.5px; }
.wc-gsnap-card ol { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.25rem; }
.wc-gsnap-card li { display:grid; grid-template-columns: 1.2rem 1fr auto auto; gap:.5rem; align-items:center;
  padding:.32rem .45rem; border-radius:8px; font-size:.85rem; }
.wc-gsnap-card li.is-q { background: color-mix(in oklab, #0fb87a 14%, transparent); }
.wc-gsnap-rank { color: var(--wc-text-soft); font-weight:700; }
.wc-gsnap-name { font-weight:600; }
.wc-gsnap-pts b { font-weight:800; }
.wc-gsnap-gd { font-size:.75rem; color:var(--wc-text-soft); width:2.5rem; text-align:right; }

/* --- Fixtures strip --- */
.wc-fxstrip-head { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.wc-fxstrip-grid { display:grid; gap:1.25rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .wc-fxstrip-grid { grid-template-columns: 1fr 1fr; } }
.wc-fxstrip-sub { font-size:.95rem; margin:0 0 .6rem; color:var(--wc-text-soft); text-transform:uppercase; letter-spacing:.5px; }
.wc-fxstrip-grid ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.4rem; }
.wc-fxstrip-row { display:grid; grid-template-columns: 100px 1fr auto; gap:.6rem; align-items:center;
  padding:.55rem .8rem; border:1px solid var(--wc-border, rgba(0,0,0,.08));
  border-radius:12px; background: var(--wc-card-bg, #fff); box-shadow: var(--wc-card-elev); font-size:.88rem; }
.wc-fxstrip-row.is-live .wc-fxstrip-when { color:#d93434; font-weight:800; }
.wc-fxstrip-when { font-size:.78rem; color:var(--wc-text-soft); font-weight:700; }
.wc-fxstrip-teams b { font-weight:700; }
.wc-fxstrip-teams em { color:var(--wc-text-soft); font-style:normal; padding:0 .4rem; font-weight:700; }
.wc-fxstrip-venue { font-size:.75rem; color:var(--wc-text-soft); }
.wc-fxstrip-empty { color:var(--wc-text-soft); padding:.5rem .8rem; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wc-tcard { opacity:1; transform:none; transition: none; }
  .wc-tcard-media img { transition: none; }
}

/* Dark surfaces inherit existing wc-* vars; ensure soft backgrounds adapt */
@media (prefers-color-scheme: dark) {
  .wc-teams-v2 { --wc-bg-soft: rgba(255,255,255,.06); --wc-card-bg: #131a2c; --wc-border: rgba(255,255,255,.08); }
}