/* ═══════════════════════════════════════════════
   WC2026 Predictor — Pro Redesign v2.0
   Telegraph-matching + enhanced polish
═══════════════════════════════════════════════ */

/* ── Self-hosted fonts: Barlow Condensed (headings) + Barlow (body) ── */
@font-face { font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/barlow-400-viet.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/barlow-400-latext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/barlow-400-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/barlow-500-viet.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/barlow-500-latext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/barlow-500-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/barlow-600-viet.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/barlow-600-latext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/barlow-600-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/barlowcond-600-viet.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/barlowcond-600-latext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/barlowcond-600-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/barlowcond-700-viet.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/barlowcond-700-latext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/barlowcond-700-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/barlowcond-800-viet.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/barlowcond-800-latext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/barlowcond-800-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ── Variables ── */
:root {
  --wc-bg:           #ffffff;
  --wc-dark:         #0f0f0f;
  --wc-accent:       #e8000d;
  --wc-teal:         #009aa6;
  --wc-teal-light:   #e0f5f7;
  --wc-teal-mid:     #b2e4e9;
  --wc-gold:         #c9a84c;
  --wc-pitch:        #1b5e20;
  --wc-border:       #e2e2e2;
  --wc-border-mid:   #c8c8c8;
  --wc-muted:        #6b6b6b;
  --wc-gray-bg:      #f5f5f5;
  --wc-gray-light:   #fafafa;
  --wc-shadow-sm:    0 1px 3px rgba(0,0,0,.08);
  --wc-shadow-md:    0 3px 12px rgba(0,0,0,.10);
  --wc-shadow-lg:    0 8px 32px rgba(0,0,0,.14);
  --wc-radius-xs:    2px;
  --wc-radius:       4px;
  --wc-radius-md:    8px;
  --wc-radius-lg:    12px;
  --wc-ease:         cubic-bezier(.25,.46,.45,.94);
  --wc-spring:       cubic-bezier(.34,1.56,.64,1);
  --wc-t:            .16s;
}

/* ── Base ── */
.wc2026-app {
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--wc-dark); background: var(--wc-bg); line-height: 1.5;
}
.wc2026-app *, .wc2026-app *::before, .wc2026-app *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.wc2026-app button:not(.wc2026-match-team) { cursor: pointer; border: none; background: none; font: inherit; line-height: inherit; }
.wc2026-app .wc2026-match-team { cursor: pointer; font: inherit; line-height: inherit; }
.wc2026-app img { display: block; }
.wc2026-app a { color: inherit; text-decoration: none; }

/* ══════════════════════════════════════════════
   HERO — World Cup Atmosphere
══════════════════════════════════════════════ */
.wc2026-hero {
  position: relative; min-height: 90svh; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; background: #3a0018;
}

/* ── Background: deep crimson → purple ── */
/* Confetti canvas */
.wc2026-hero__confetti {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}

.wc2026-hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 60%, rgba(140,0,30,.8) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 85% 30%, rgba(20,30,160,.7) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(80,0,50,.5) 0%, transparent 65%),
    linear-gradient(145deg, #5a0020 0%, #3a0035 30%, #1e0055 60%, #0c0035 85%, #060018 100%);
}

/* ── Paint splash + football SVG (top-right) ── */
.wc2026-hero__deco {
  position: absolute; top: 0; right: 0;
  width: 55%; max-width: 700px; height: auto;
  pointer-events: none;
  animation: decoFloat 8s ease-in-out infinite;
  transform-origin: center top;
}
@keyframes decoFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(.5deg); }
}

/* ── Player silhouette (bottom-left) ── */
.wc2026-hero__player {
  position: absolute; bottom: 0; left: 0;
  width: 160px; height: auto; pointer-events: none;
  opacity: .8;
  animation: playerFloat 4s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes playerFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ── Spotlight glows ── */
.wc2026-hero__spot {
  position: absolute; border-radius: 50%;
  filter: blur(80px); pointer-events: none;
}
.wc2026-hero__spot--l {
  width: 500px; height: 500px; top: 0; left: -80px;
  background: radial-gradient(ellipse, rgba(180,20,50,.4), transparent 65%);
  animation: spotL 7s ease-in-out infinite;
}
.wc2026-hero__spot--r {
  width: 450px; height: 500px; top: -80px; right: -60px;
  background: radial-gradient(ellipse, rgba(20,50,200,.4), transparent 65%);
  animation: spotL 7s ease-in-out infinite reverse;
}
.wc2026-hero__spot--c {
  width: 600px; height: 350px; top: 0; left: 50%; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,.18), transparent 65%);
  animation: spotC 5s ease-in-out infinite;
}
@keyframes spotL {
  0%,100% { opacity:.5; transform: scale(1); }
  50%      { opacity:.9; transform: scale(1.12); }
}
@keyframes spotC {
  0%,100% { opacity:.35; }
  50%      { opacity:.75; }
}

/* ── Particles ── */
.wc2026-hero__particles {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.wc2026-hero__particles span {
  position: absolute; border-radius: 50%;
  animation: particleRise var(--dur,8s) ease-in-out var(--dl,0s) infinite; opacity: 0;
}
.wc2026-hero__particles span:nth-child(odd)  { width:3px;height:3px; background:rgba(201,168,76,.8); }
.wc2026-hero__particles span:nth-child(even) { width:2px;height:2px; background:rgba(255,255,255,.6); }
.wc2026-hero__particles span:nth-child(1)  { left:8%;  top:85%; --dur:9s;  --dl:0s;   }
.wc2026-hero__particles span:nth-child(2)  { left:16%; top:70%; --dur:7s;  --dl:-2s;  }
.wc2026-hero__particles span:nth-child(3)  { left:24%; top:90%; --dur:11s; --dl:-4s;  }
.wc2026-hero__particles span:nth-child(4)  { left:32%; top:75%; --dur:8s;  --dl:-1s;  }
.wc2026-hero__particles span:nth-child(5)  { left:40%; top:88%; --dur:10s; --dl:-3s;  }
.wc2026-hero__particles span:nth-child(6)  { left:50%; top:78%; --dur:6s;  --dl:-5s;  }
.wc2026-hero__particles span:nth-child(7)  { left:58%; top:92%; --dur:9s;  --dl:-2s;  }
.wc2026-hero__particles span:nth-child(8)  { left:66%; top:72%; --dur:7s;  --dl:-6s;  }
.wc2026-hero__particles span:nth-child(9)  { left:74%; top:85%; --dur:12s; --dl:-1s;  }
.wc2026-hero__particles span:nth-child(10) { left:82%; top:68%; --dur:8s;  --dl:-4s;  }
.wc2026-hero__particles span:nth-child(11) { left:90%; top:80%; --dur:10s; --dl:-3s;  }
.wc2026-hero__particles span:nth-child(12) { left:5%;  top:40%; --dur:14s; --dl:-7s;  }
.wc2026-hero__particles span:nth-child(13) { left:20%; top:30%; --dur:11s; --dl:-2s;  }
.wc2026-hero__particles span:nth-child(14) { left:45%; top:20%; --dur:9s;  --dl:-5s;  }
.wc2026-hero__particles span:nth-child(15) { left:70%; top:35%; --dur:13s; --dl:-1s;  }
.wc2026-hero__particles span:nth-child(16) { left:88%; top:25%; --dur:8s;  --dl:-6s;  }
.wc2026-hero__particles span:nth-child(17) { left:12%; top:55%; --dur:10s; --dl:-3s;  }
.wc2026-hero__particles span:nth-child(18) { left:35%; top:50%; --dur:7s;  --dl:-8s;  }
.wc2026-hero__particles span:nth-child(19) { left:60%; top:60%; --dur:11s; --dl:-4s;  }
.wc2026-hero__particles span:nth-child(20) { left:78%; top:45%; --dur:9s;  --dl:-2s;  }
.wc2026-hero__particles span:nth-child(21) { left:3%;  top:15%; --dur:15s; --dl:-9s;  }
.wc2026-hero__particles span:nth-child(22) { left:95%; top:55%; --dur:12s; --dl:-5s;  }
.wc2026-hero__particles span:nth-child(23) { left:50%; top:10%; --dur:8s;  --dl:-7s;  }
.wc2026-hero__particles span:nth-child(24) { left:28%; top:15%; --dur:10s; --dl:-3s;  }
@keyframes particleRise {
  0%   { opacity:0; transform:translateY(0) scale(1); }
  15%  { opacity:1; }
  85%  { opacity:.5; }
  100% { opacity:0; transform:translateY(-100px) scale(1.6); }
}

/* ── Content ── */
.wc2026-hero__content {
  position: relative; z-index: 2; text-align: center;
  padding: 20px 24px; max-width: 700px; width: 100%;
  opacity: 0; /* hidden until fonts loaded — prevents swap jank */
}
.wc2026-app.wc2026-fonts-ready .wc2026-hero__content {
  opacity: 1; transition: opacity .3s ease;
}
.wc2026-hero__kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--wc-gold); margin-bottom: 8px;
}
.wc2026-hero__kicker-line {
  display: block; width: 32px; height: 1px; opacity: .6;
}
.wc2026-hero__kicker .wc2026-hero__kicker-line:first-child {
  background: linear-gradient(90deg, transparent, var(--wc-gold));
}
.wc2026-hero__kicker .wc2026-hero__kicker-line:last-child {
  background: linear-gradient(90deg, var(--wc-gold), transparent);
}

/* ── Trophy ── */
.wc2026-hero__trophy {
  width: 100px; height: 160px; margin: 0 auto 4px;
}

/* ── Title ── */
.wc2026-hero__title {
  font-family: 'Barlow Condensed', Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 5.2vw, 64px);
  font-weight: 800; line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 14px;
  /* Unified gradient: white at top → rich gold at bottom */
  background: linear-gradient(
    170deg,
    #ffffff  0%,
    #fff9f0 28%,
    #ffe88a 55%,
    #ffd740 72%,
    #ffb300 100%
  );
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter:
    drop-shadow(0 2px 10px rgba(0,0,0,.9))
    drop-shadow(0 0 40px rgba(200,30,60,.35))
    drop-shadow(0 0 20px rgba(60,0,160,.25));
}
.wc2026-hero__title span { display: block; white-space: nowrap; }

/* ── Subtitle ── */
.wc2026-hero__subtitle {
  font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.55);
  max-width: 680px; margin: 0 auto 10px;
  white-space: normal; word-break: keep-all;
}

/* ── Stats strip ── */
.wc2026-hero__stats {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; padding: 14px 36px;
  background: linear-gradient(135deg, rgba(30,10,50,.75) 0%, rgba(60,30,10,.65) 100%);
  border: 1.5px solid rgba(201,168,76,.55);
  border-radius: 100px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 0 0 1px rgba(201,168,76,.2),
    0 12px 40px rgba(0,0,0,.6),
    0 0 60px rgba(201,168,76,.2),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(201,168,76,.15);
  width: fit-content; margin: 0 auto 14px;
}
.wc2026-hero__stat { text-align: center; min-width: 80px; }
.wc2026-hero__stat strong {
  display: block; font-size: 28px; font-weight: 800; line-height: 1;
  color: #ffd97a;
  text-shadow: 0 0 24px rgba(201,168,76,.9), 0 0 8px rgba(201,168,76,.7), 0 2px 0 rgba(0,0,0,.5);
}
.wc2026-hero__stat span {
  font-size: 9px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255,255,255,.75);
  margin-top: 4px; display: block;
}
.wc2026-hero__stat-sep {
  color: rgba(201,168,76,.6); font-size: 22px;
  text-shadow: 0 0 12px rgba(201,168,76,.7);
}

/* ── Flags Grid ── */
.wc2026-hero__flags {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 4px;
  width: 100%; max-width: 100%;
  margin: 0 0 14px;
  padding: 10px;
  background: linear-gradient(135deg, rgba(20,8,45,.85) 0%, rgba(10,20,60,.8) 100%);
  border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 12px 36px rgba(0,0,0,.6),
    0 0 60px rgba(120,80,220,.25),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.wc2026-hero__flag-item {
  display: flex; align-items: center; justify-content: center;
  padding: 2px; border-radius: 4px;
  opacity: .63;
  filter: contrast(1.1) saturate(1.2);
  transition: transform .25s var(--wc-spring), opacity .25s, filter .25s;
  cursor: default;
  position: relative;
  aspect-ratio: 4/3;
}
.wc2026-hero__flag-item img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; border-radius: 2px;
  image-rendering: -webkit-optimize-contrast;
}
@keyframes flagPulse {
  0%   { transform: scale(1);    opacity: .63; filter: contrast(1.1) saturate(1.2) brightness(1)    drop-shadow(0 0 0px transparent); }
  20%  { transform: scale(1.22); opacity: 1;   filter: contrast(1.15) saturate(1.3) brightness(1.25) drop-shadow(0 0 9px rgba(201,168,76,1)); }
  55%  { transform: scale(1.14); opacity: 1;   filter: contrast(1.12) saturate(1.25) brightness(1.12) drop-shadow(0 0 6px rgba(201,168,76,.7)); }
  100% { transform: scale(1);    opacity: .63; filter: contrast(1.1) saturate(1.2) brightness(1)    drop-shadow(0 0 0px transparent); }
}
.wc2026-hero__flag-item--active {
  animation: flagPulse 1.3s cubic-bezier(.22,1,.36,1) both;
  z-index: 2;
}

/* ── CTA Button — breathing glow + shimmer sweep ── */
.wc2026-hero__btn-wrap {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  align-items: stretch;
  justify-content: center;
  width: 100%; max-width: 620px; margin: 0 auto;
}
@keyframes btnGlowBreathe {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%       { opacity: .9; transform: scale(1.08); }
}
@keyframes aiGlowBreathe {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%       { opacity: 1; transform: scale(1.1); }
}

/* AI prediction button — steel blue neon */
.wc2026-hero__ai-btn {
  position: relative; overflow: hidden;
  flex: 1 1 0; justify-content: center;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 20px 20px;
  background: linear-gradient(135deg, #50b8ff 0%, #1e90ff 45%, #42aaff 100%) !important;
  color: #ffffff !important;
  font-size: 13px !important; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: 100px !important;
  border: 1px solid rgba(150,220,255,.65) !important;
  box-shadow:
    0 5px 24px rgba(0,0,0,.5),
    0 0 22px rgba(60,180,255,1),
    0 0 50px rgba(30,160,255,.85),
    0 0 90px rgba(10,140,255,.45),
    inset 0 1px 0 rgba(220,245,255,.35),
    inset 0 -2px 0 rgba(0,0,0,.25);
  transition: transform .22s var(--wc-ease), box-shadow .22s var(--wc-ease), opacity .2s;
  cursor: pointer;
  white-space: nowrap;
}
.wc2026-hero__ai-btn::after {
  content: '';
  position: absolute; inset: 0; border-radius: 100px;
  background: linear-gradient(100deg, transparent 20%, rgba(160,215,255,.38) 50%, transparent 80%);
  transform: translateX(-120%);
  animation: aiShimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes aiShimmer {
  0%        { transform: translateX(-120%); }
  60%, 100% { transform: translateX(140%); }
}
.wc2026-hero__ai-btn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 12px 40px rgba(0,100,220,.55),
    0 0 30px rgba(80,200,255,1),
    0 0 65px rgba(40,180,255,.9),
    0 0 110px rgba(20,160,255,.55),
    inset 0 1px 0 rgba(220,245,255,.4),
    inset 0 -2px 0 rgba(0,0,0,.25);
}
.wc2026-hero__ai-btn:active  { transform: translateY(0) scale(.98); }
.wc2026-hero__ai-btn:disabled {
  opacity: .65; cursor: wait; transform: none;
}

/* AI pick flash — box-shadow is GPU-composited, no layout reflow */
@keyframes aiPickFlash {
  0%   { box-shadow: 0 0 0 0 rgba(160,100,255,.0); }
  28%  { box-shadow: 0 0 0 3px rgba(160,100,255,.82), 0 4px 18px rgba(160,100,255,.22); }
  100% { box-shadow: 0 0 0 7px rgba(160,100,255,.0); }
}
.wc2026-ai-picking { animation: aiPickFlash .56s ease-out both; }

/* Rank slot fill — transform+opacity are compositor-only, zero layout cost */
@keyframes aiSlotFill {
  0%   { opacity: 0; transform: translateX(-10px); }
  55%  { opacity: 1; transform: translateX(1.5px); }
  100% { opacity: 1; transform: translateX(0); }
}
.wc2026-ai-fill { animation: aiSlotFill .24s cubic-bezier(.2,.8,.4,1) both; }

/* Match winner pulse — teal glow signals confirmed pick */
@keyframes aiWinPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,200,160,.0); }
  35%  { box-shadow: 0 0 0 3px rgba(0,200,160,.82), 0 0 16px rgba(0,200,160,.3); }
  100% { box-shadow: 0 0 0 6px rgba(0,200,160,.0); }
}
.wc2026-ai-win { animation: aiWinPulse .44s ease-out both; }

/* AI button spinner */
@keyframes aiSpin { to { transform: rotate(360deg); } }
.wc2026-ai-spin { animation: aiSpin .8s linear infinite; flex-shrink: 0; }

.wc2026-hero__cta {
  position: relative; overflow: hidden;
  flex: 1 1 0 !important; justify-content: center !important;
  display: inline-flex !important; align-items: center; gap: 10px;
  padding: 20px 20px !important;
  background: linear-gradient(
    145deg,
    #a86020 0%, #c8902e 22%,
    #e8c050 50%, #f0d060 62%,
    #d4a030 80%, #b07018 100%
  ) !important;
  color: #2a0e00 !important;
  font-size: 13px !important; font-weight: 800; letter-spacing: .18em !important;
  border-radius: 100px !important; text-transform: uppercase;
  border: none !important;
  box-shadow:
    0 5px 24px rgba(0,0,0,.45),
    0 0 22px rgba(210,165,50,.55),
    0 0 50px rgba(200,150,40,.3),
    inset 0 1px 0 rgba(255,255,190,.5),
    inset 0 -2px 0 rgba(0,0,0,.18) !important;
  transition: transform .22s var(--wc-ease), box-shadow .22s var(--wc-ease) !important;
  animation: none !important;
  cursor: pointer;
}
/* Surface shimmer sweep across button */
.wc2026-hero__cta::after {
  content: '';
  position: absolute; inset: 0; border-radius: 100px;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,200,.5) 50%, transparent 80%);
  transform: translateX(-120%);
  animation: ctaShimmer 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaShimmer {
  0%       { transform: translateX(-120%); }
  55%, 100% { transform: translateX(140%); }
}
.wc2026-hero__cta:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow:
    0 12px 40px rgba(201,168,76,.55),
    inset 0 1px 0 rgba(255,255,190,.55),
    inset 0 -2px 0 rgba(0,0,0,.18) !important;
}
.wc2026-hero__cta:active { transform: translateY(0) scale(.98) !important; }

/* AI running — lock interactive elements only, scroll still works */
#wc2026-app[data-ai-locked] .wc2026-team-option,
#wc2026-app[data-ai-locked] .wc2026-rank-slot,
#wc2026-app[data-ai-locked] .wc2026-third-tile,
#wc2026-app[data-ai-locked] .wc2026-match-team,
#wc2026-app[data-ai-locked] .js-start-btn,
#wc2026-app[data-ai-locked] .js-reset-btn,
#wc2026-app[data-ai-locked] .js-share-btn {
  pointer-events: none !important;
  user-select: none !important;
  cursor: default !important;
}

/* ══════════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════════ */
.wc2026-section { padding: 48px 0; background: var(--wc-bg); }
.wc2026-section--groups { background: var(--wc-bg); padding: 48px 0 56px; }
.wc2026-section--third  { background: var(--wc-bg); }
.wc2026-section__inner  { max-width: 1240px; margin: 0 auto; }

/* Lock states — no dimming, sections visible at full opacity */
.wc2026-section--locked {
  pointer-events: none; user-select: none;
  transition: opacity .5s var(--wc-ease), filter .5s var(--wc-ease);
}
.wc2026-section--unlocked {
  opacity: 1; pointer-events: auto; filter: none;
  animation: fadeSlideUp .4s var(--wc-ease) both;
}
.wc2026-section--locked .wc2026-section__inner { position: relative; }
.wc2026-section--locked .wc2026-section__inner::after {
  content: ''; position: absolute; inset: 0; cursor: not-allowed;
}

/* ── Stage Header ── */
.wc2026-stage-header { margin-bottom: 28px; }
.wc2026-stage-header__title {
  font-family: 'Barlow Condensed', Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700; color: var(--wc-dark);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 6px; line-height: 1.1;
  display: flex; align-items: center; gap: 12px;
}
/* Accent bar before title */
.wc2026-stage-header__title::before {
  content: ''; display: block; width: 4px;
  height: 1em; background: var(--wc-accent);
  border-radius: 2px; flex-shrink: 0;
}
.wc2026-stage-header__sub {
  font-size: 14px; color: var(--wc-muted); line-height: 1.5;
  padding-left: 16px; border-left: 4px solid transparent;
}

/* ══════════════════════════════════════════════
   GROUPS
══════════════════════════════════════════════ */
.wc2026-groups-progress {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px; font-size: 13px; font-weight: 500; color: var(--wc-muted);
}
.wc2026-groups-progress__bar-wrap {
  flex: 1; max-width: 240px; height: 5px;
  background: rgba(0,0,0,.1); border-radius: 3px; overflow: hidden;
}
.wc2026-groups-progress__bar {
  height: 100%; background: var(--wc-teal); border-radius: 3px;
  transition: width .4s var(--wc-ease);
}

/* Groups grid — 4 cols on desktop (Telegraph layout) */
.wc2026-groups-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
}

/* ── Group Card ── */
.wc2026-group-card {
  background: var(--wc-bg); border: 1px solid var(--wc-border);
  border-radius: var(--wc-radius-md); overflow: hidden;
  box-shadow: var(--wc-shadow-sm);
  transition: box-shadow var(--wc-t) var(--wc-ease);
}
.wc2026-group-card:hover { box-shadow: var(--wc-shadow-md); }
.wc2026-group-card--complete { border-color: rgba(0,154,166,.3); }

.wc2026-group-card__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 13px; background: var(--wc-gray-bg);
  border-bottom: 1px solid var(--wc-border);
}
.wc2026-group-card--complete .wc2026-group-card__header {
  background: linear-gradient(90deg, rgba(0,154,166,.08) 0%, var(--wc-gray-bg) 100%);
}
.wc2026-group-card__name {
  font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--wc-dark);
}
.wc2026-group-card--complete .wc2026-group-card__name::after {
  content: ' ✓'; color: var(--wc-teal); font-size: 10px;
}
.wc2026-group-card__badge {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 20px;
}
.wc2026-group-card__badge--weak   { background: #efefef; color: #888; }
.wc2026-group-card__badge--strong { background: #fff0e6; color: #c05000; }

/* Team option row */
.wc2026-group-card__teams {
  display: flex; align-items: center; padding: 7px 8px 6px;
  border-bottom: 1px solid var(--wc-border); gap: 5px;
}
.wc2026-team-option {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 5px; padding: 6px 8px;
  border-radius: 20px; cursor: pointer;
  border: 1.5px solid var(--wc-border); background: var(--wc-bg);
  transition: all var(--wc-t) var(--wc-ease); flex: 1; min-width: 0;
  user-select: none; box-shadow: var(--wc-shadow-sm);
  white-space: nowrap;
}
.wc2026-team-option:hover {
  border-color: var(--wc-teal); background: var(--wc-teal-light);
  box-shadow: 0 2px 8px rgba(0,154,166,.18);
}
.wc2026-team-option--placed { opacity: .22; pointer-events: none; }
.wc2026-flag img {
  width: 22px; height: 16px; object-fit: cover; flex-shrink: 0;
  border-radius: 2px; border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.wc2026-team-option__code {
  font-size: 10px; font-weight: 800; letter-spacing: .05em;
  color: var(--wc-dark); text-transform: uppercase;
  line-height: 1; overflow: hidden; text-overflow: ellipsis;
}

/* Rank slots */
.wc2026-group-card__ranking { padding: 0; }
.wc2026-rank-slot {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px;
  padding: 6px 11px 6px 0;
  border-left: 3px solid transparent;
  border-bottom: 1px solid #f0f0f0;
  transition: background var(--wc-t) var(--wc-ease);
  cursor: default; position: relative;
}
.wc2026-rank-slot:last-child { border-bottom: none; }

/* Left colored accent border per rank */
.wc2026-rank-slot[data-rank="1"] { border-left-color: var(--wc-teal); padding-left: 4px; }
.wc2026-rank-slot[data-rank="2"] { border-left-color: rgba(0,154,166,.45); padding-left: 4px; }
.wc2026-rank-slot[data-rank="3"] { border-left-color: #f97316; padding-left: 4px; border-top: 1px dashed #f0f0f0; }
.wc2026-rank-slot[data-rank="4"] { border-left-color: #d4d8dc; padding-left: 4px; border-top: 1px dashed #f0f0f0; }

/* Filled slot: rank 1+2 = xanh lá (đã vào vòng trong), rank 3 = cam nhạt */
.wc2026-rank-slot--filled[data-rank="1"] { background: rgba(22,163,74,.09); }
.wc2026-rank-slot--filled[data-rank="2"] { background: rgba(22,163,74,.05); }
.wc2026-rank-slot--filled[data-rank="3"] { background: rgba(249,115,22,.04); }

.wc2026-rank-slot--filled { cursor: grab; }
.wc2026-rank-slot--filled:hover { background: var(--wc-gray-light) !important; }
.wc2026-rank-slot--drag-over { background: var(--wc-teal-light) !important; }
/* Dragging: look identical to normal — no opacity fade */
.wc2026-rank-slot--dragging {
  opacity: 1 !important;
  outline: 2px dashed var(--wc-teal);
  outline-offset: -2px;
  background: rgba(0,154,166,.06) !important;
}

/* Rank number badge — prominent medals */
.wc2026-rank-slot__num {
  width: 24px; height: 24px; border-radius: 50%;
  background: #ebebeb; color: #c0c0c0;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all var(--wc-t) var(--wc-ease);
}
.wc2026-rank-slot--filled .wc2026-rank-slot__num {
  background: #444; color: #fff;
}
/* Gold rank 1 — gradient + glow */
.wc2026-rank-slot[data-rank="1"].wc2026-rank-slot--filled .wc2026-rank-slot__num {
  background: linear-gradient(145deg, #f5d860 0%, #c9a030 55%, #9e7818 100%);
  color: #fff; box-shadow: 0 2px 7px rgba(201,160,48,.55);
}
/* Silver rank 2 */
.wc2026-rank-slot[data-rank="2"].wc2026-rank-slot--filled .wc2026-rank-slot__num {
  background: linear-gradient(145deg, #cdd8e0 0%, #8a9ba8 55%, #6b808e 100%);
  color: #fff; box-shadow: 0 2px 6px rgba(138,155,168,.42);
}
/* Bronze rank 3 */
.wc2026-rank-slot[data-rank="3"].wc2026-rank-slot--filled .wc2026-rank-slot__num {
  background: linear-gradient(145deg, #c49866 0%, #a0764e 55%, #7c5636 100%);
  color: #fff; box-shadow: 0 2px 6px rgba(160,118,78,.42);
}
/* Rank 4 — dark badge */
.wc2026-rank-slot[data-rank="4"].wc2026-rank-slot--filled .wc2026-rank-slot__num {
  background: #888; color: #fff;
}
/* Rank 4 — eliminated look: muted flag + name */
.wc2026-rank-slot[data-rank="4"].wc2026-rank-slot--filled .wc2026-rank-slot__team {
  color: var(--wc-muted);
}
.wc2026-rank-slot[data-rank="4"].wc2026-rank-slot--filled .wc2026-rank-slot__team img {
  filter: grayscale(.55) opacity(.6);
}
.wc2026-rank-slot[data-rank="4"].wc2026-rank-slot--filled .wc2026-rank-slot__num {
  opacity: .65;
}

/* Team content — fixed height to match filled/empty */
.wc2026-rank-slot__team {
  flex: 1; display: flex; align-items: center; gap: 8px;
  height: 26px;
  font-size: 16px; font-weight: 500; color: #c0c0c0;
  min-width: 0; overflow: hidden;
}
.wc2026-rank-slot--filled .wc2026-rank-slot__team {
  color: var(--wc-dark); font-weight: 600;
}
.wc2026-rank-slot__team img {
  width: 26px; height: 20px; object-fit: cover;
  border-radius: var(--wc-radius-xs); flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.08);
}

/* Drag handle — 6 dots on LEFT side (order:-1), always visible when filled */
.wc2026-rank-slot__drag-handle {
  display: none;
  width: 15px; align-items: center; justify-content: center;
  cursor: grab; flex-shrink: 0; color: #d4d4d4;
  order: -1; /* pulls to the far-left of the flex row */
  transition: color var(--wc-t);
}
.wc2026-rank-slot--filled .wc2026-rank-slot__drag-handle { display: flex; }
.wc2026-rank-slot--filled:hover .wc2026-rank-slot__drag-handle { color: #999; }
.wc2026-rank-slot__drag-handle svg { display: block; pointer-events: none; }

/* Remove button — show on hover only, with tooltip */
.wc2026-rank-slot__remove {
  display: none !important;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.07);
  border: 1.5px solid rgba(0,0,0,.08);
  color: #888;
  cursor: pointer; flex-shrink: 0;
  align-items: center; justify-content: center;
  transition: all .15s var(--wc-ease);
  position: relative; text-transform: none !important;
  padding: 0 !important; font-size: 0 !important; /* hide any text, show only SVG */
}
.wc2026-rank-slot--filled:hover .wc2026-rank-slot__remove {
  display: flex !important;
}
.wc2026-rank-slot__remove:hover {
  background: #ffe8e8;
  border-color: var(--wc-accent);
  color: var(--wc-accent);
  transform: scale(1.12);
}
/* Tooltip "Xóa" */
.wc2026-rank-slot__remove::before {
  content: 'Xóa';
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%; transform: translateX(-50%);
  background: rgba(10,10,10,.85);
  color: #fff;
  font-size: 10px; font-weight: 600;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .15s;
  letter-spacing: .02em; text-transform: none;
}
.wc2026-rank-slot__remove:hover::before { opacity: 1; }

/* ══════════════════════════════════════════════
   THIRD-PLACE — Telegraph style
══════════════════════════════════════════════ */

/* Outer panel */
.wc2026-third-panel {
  background: #f0f0f0; border-radius: var(--wc-radius-md);
  border: 1px solid #d8d8d8; overflow: hidden;
}
.wc2026-third-panel__hd {
  padding: 10px 16px; background: #e8e8e8;
  border-bottom: 1px solid #d8d8d8;
}

/* Counter — plain bold text inside panel header */
.wc2026-third-counter {
  font-size: 13px; font-weight: 700; color: var(--wc-dark);
}
.wc2026-third-counter--complete { color: #16a34a; }

/* 2-column list — no gap */
.wc2026-third-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}

/* Flat list row */
.wc2026-third-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border-bottom: 1px solid #ddd;
  border-left: 3px solid transparent;
  cursor: pointer; user-select: none;
  transition: background var(--wc-t) var(--wc-ease);
}
/* Left column gets vertical divider */
.wc2026-third-tile:nth-child(odd)  { border-right: 1px solid #ddd; }
/* Remove bottom border from last 2 rows */
.wc2026-third-tile:nth-last-child(-n+2) { border-bottom: none; }

.wc2026-third-tile:hover:not(.wc2026-third-tile--disabled) { background: rgba(0,0,0,.03); }

/* Selected state — teal accent */
.wc2026-third-tile--selected {
  background: rgba(0,154,166,.07) !important;
  border-left-color: var(--wc-teal);
}

/* Disabled */
.wc2026-third-tile--disabled { opacity: .32; pointer-events: none; }

/* Checkbox — LEFT side */
.wc2026-third-tile__check {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid #bbb; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: transparent; transition: all var(--wc-t) var(--wc-ease);
}
.wc2026-third-tile--selected .wc2026-third-tile__check {
  background: var(--wc-teal); border-color: var(--wc-teal); color: #fff;
}
.wc2026-third-tile__check svg { width: 10px; height: 10px; stroke-width: 3; }

/* Flag */
.wc2026-third-tile__flag { flex-shrink: 0; }
.wc2026-third-tile__flag img {
  width: 28px; height: 21px; object-fit: cover; display: block;
  border-radius: 2px; border: 1px solid rgba(0,0,0,.09);
}

/* Name */
.wc2026-third-tile__name {
  flex: 1; font-size: 14px; font-weight: 500; color: var(--wc-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

/* ══════════════════════════════════════════════
   BRACKET — Match Grid
══════════════════════════════════════════════ */
/* R32: 4 columns (Telegraph layout) */
.wc2026-section--bracket[data-round="ro32"] .wc2026-matches-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
/* Default matches grid */
.wc2026-matches-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
/* R16: 4 columns × 2 rows */
.wc2026-section--bracket[data-round="ro16"] .wc2026-matches-grid {
  grid-template-columns: repeat(4, 1fr); gap: 12px;
}
/* QF: 4 columns × 1 row */
.wc2026-section--bracket[data-round="qf"] .wc2026-matches-grid {
  grid-template-columns: repeat(4, 1fr); gap: 12px;
}
/* Final: 1 column, full width */
.wc2026-section--bracket[data-round="final"] .wc2026-matches-grid {
  grid-template-columns: 1fr;
}

/* ── Match Tile — Telegraph pixel-perfect ── */
.wc2026-match-tile {
  background: #efefef; border: none;
  border-radius: 10px; overflow: hidden;
  box-shadow: none;
  transition: box-shadow var(--wc-t) var(--wc-ease);
}
.wc2026-match-tile:hover { box-shadow: 0 2px 12px rgba(0,0,0,.12); }

/* Header: bold match ID + muted date, no border */
.wc2026-match-tile__meta {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px 8px; background: transparent;
  font-size: 13px; font-weight: 700; color: var(--wc-dark);
  border-bottom: none;
}
.wc2026-match-tile__id { font-weight: 700; color: var(--wc-dark); font-size: 13px; }
.wc2026-match-tile__dot { color: #aaa; font-weight: 400; }
.wc2026-match-tile__date { font-weight: 400; font-size: 12.5px; color: #555; }

/* Teams: 2 white cells with gap inside gray card */
.wc2026-match-tile__teams {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px; padding: 0 7px 7px;
}

/* ── Team cell: white rounded box ── */
.wc2026-match-team {
  background: #fff; border-radius: 7px;
  border: 2px solid transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px 10px 14px; text-align: center; gap: 10px;
  position: relative; min-height: 118px;
  transition: border-color var(--wc-t) var(--wc-ease), opacity var(--wc-t) var(--wc-ease);
  cursor: pointer; text-transform: none;
}
.wc2026-match-team:hover:not(.wc2026-match-team--winner):not(.wc2026-match-team--tbd) {
  border-color: rgba(0,154,166,.35);
}

/* Winner: light green bg + teal border */
.wc2026-match-team--winner {
  background: #edfaf4;
  border-color: var(--wc-teal);
}
.wc2026-match-team--winner .wc2026-match-team__name { color: var(--wc-dark); font-weight: 700; }
.wc2026-match-team--winner .wc2026-match-team__radio {
  background: var(--wc-teal); border-color: var(--wc-teal);
  display: flex; align-items: center; justify-content: center;
}
.wc2026-match-team--winner .wc2026-match-team__radio::after {
  content: ''; position: absolute;
  width: 4px; height: 8px; background: transparent;
  border: 2px solid #fff; border-top: none; border-left: none;
  top: 50%; left: 50%; transform: translate(-50%, -65%) rotate(45deg);
}

/* Loser fades when a winner is picked (CSS :has) */
.wc2026-match-tile:has(.wc2026-match-team--winner) .wc2026-match-team:not(.wc2026-match-team--winner) {
  opacity: 0.42;
}

/* Flag */
.wc2026-match-team__flag { width: auto; flex-shrink: 0; }
.wc2026-match-team__flag img {
  width: 64px; height: 48px; object-fit: cover;
  border-radius: 4px; border: 1px solid rgba(0,0,0,.08);
}
.wc2026-match-team__flag--placeholder {
  width: 64px; height: 48px;
  background: linear-gradient(90deg, #e4e4e4 25%, #d4d4d4 50%, #e4e4e4 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 4px; display: flex;
  align-items: center; justify-content: center;
}
.wc2026-match-team__flag--placeholder::after {
  content: '';
  width: 26px; height: 26px; opacity: .28;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cline x1='4' y1='22' x2='4' y2='15'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Team name — regular weight, not uppercase */
.wc2026-match-team__name {
  font-size: 13px; font-weight: 500; color: var(--wc-dark);
  text-align: center; white-space: normal; line-height: 1.3;
  min-height: 2.6em; /* reserve 2 lines so both cells align regardless of name length */
  display: flex; align-items: center; justify-content: center;
  transition: color var(--wc-t);
}
.wc2026-match-team__name--placeholder { color: var(--wc-muted); font-weight: 400; font-style: italic; }

/* Radio — absolute top-right of each white cell */
.wc2026-match-team__radio {
  position: absolute; top: 7px; right: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #bbb; flex-shrink: 0;
  transition: all var(--wc-t) var(--wc-spring);
}

/* ── SF / Final — larger flags, more padding ── */
.wc2026-section--bracket[data-round="sf"] .wc2026-match-tile,
.wc2026-section--bracket[data-round="final"] .wc2026-match-tile {
  border-radius: 12px;
}
.wc2026-section--bracket[data-round="sf"] .wc2026-match-team {
  padding: 28px 16px 20px; gap: 12px; min-height: 160px;
}
.wc2026-section--bracket[data-round="sf"] .wc2026-match-team__flag img,
.wc2026-section--bracket[data-round="sf"] .wc2026-match-team__flag--placeholder {
  width: 76px; height: 57px;
}
.wc2026-section--bracket[data-round="sf"] .wc2026-match-team__name { font-size: 15px; font-weight: 600; }
.wc2026-section--bracket[data-round="sf"] .wc2026-match-team__radio { display: none; }
.wc2026-section--bracket[data-round="final"] .wc2026-match-team {
  padding: 40px 20px 28px; gap: 14px; min-height: 200px;
}
.wc2026-section--bracket[data-round="final"] .wc2026-match-team__flag img,
.wc2026-section--bracket[data-round="final"] .wc2026-match-team__flag--placeholder {
  width: 96px; height: 72px;
}
.wc2026-section--bracket[data-round="final"] .wc2026-match-team__name { font-size: 20px; font-weight: 700; }
.wc2026-section--bracket[data-round="final"] .wc2026-match-team__radio { display: none; }

/* Show checkmark for winner in SF / Final */
.wc2026-section--bracket[data-round="sf"] .wc2026-match-team--winner .wc2026-match-team__radio,
.wc2026-section--bracket[data-round="final"] .wc2026-match-team--winner .wc2026-match-team__radio {
  display: flex; align-items: center; justify-content: center;
  background: var(--wc-teal); border-color: var(--wc-teal);
}
.wc2026-section--bracket[data-round="sf"] .wc2026-match-team--winner .wc2026-match-team__radio::after,
.wc2026-section--bracket[data-round="final"] .wc2026-match-team--winner .wc2026-match-team__radio::after {
  content: ''; position: absolute;
  width: 4px; height: 8px;
  border-radius: 0; background: transparent;
  border: 2px solid #fff; border-top: none; border-left: none;
  top: 50%; left: 50%; transform: translate(-50%, -65%) rotate(45deg);
}

/* TBD state */
.wc2026-match-team--tbd .wc2026-match-team__name { color: var(--wc-muted); }
.wc2026-match-team--tbd .wc2026-match-team__radio { display: none; }

/* ══════════════════════════════════════════════
   RESULT SCREEN — hidden until champion selected
══════════════════════════════════════════════ */
.wc2026-result {
  display: none;
  background: #08182e; padding: 46px 0 41px; position: relative; overflow: hidden;
}
.wc2026-result--visible {
  display: block;
  animation: resultReveal .7s cubic-bezier(.25,.46,.45,.94) both;
}
@keyframes resultReveal {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Atmospheric background */
/* Canvas background behind result content */
.wc2026-result__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.wc2026-result__inner {
  position: relative; z-index: 3;
}
.wc2026-result::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0,80,30,.5) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(8,30,80,.75) 0%, transparent 60%);
}
.wc2026-result::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--wc-accent), var(--wc-gold), var(--wc-teal));
}
.wc2026-result__inner {
  position: relative; z-index: 1;
  max-width: 600px; margin: 0 auto; padding: 0 24px; text-align: center;
}
.wc2026-result__hero { margin-bottom: 23px; }
.wc2026-result__heading {
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin-bottom: 13px;
}
.wc2026-result__crown {
  font-size: 52px;
  display: block; width: 100px; margin: 0 auto -21px;
  transform: scale(0.8); transform-origin: top center;
  animation: bounceIn .7s var(--wc-spring) both;
}
.wc2026-result__champion-flag {
  margin: 0 auto 15px; width: 134px;
  animation: flagReveal .6s var(--wc-ease) .2s both;
}
.wc2026-result__champion-flag img {
  width: 134px; height: 101px; object-fit: cover; display: block;
  border-radius: 10px;
  border: 3px solid rgba(255,255,255,.45);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 20px 56px rgba(0,0,0,.55),
    0 0 40px rgba(201,168,76,.3);
}
.wc2026-result__champion-name {
  font-family: 'Barlow Condensed', Georgia, serif; font-size: 52px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 8px;
  background: linear-gradient(160deg, #ffe87a 0%, #ffd040 30%, #c9a84c 60%, #ffe87a 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(201,168,76,.8)) drop-shadow(0 0 40px rgba(201,168,76,.4));
  animation: fadeSlideUp .5s var(--wc-ease) .3s both;
}
.wc2026-result__cta {
  display: flex; justify-content: center; margin: 0 0 11px;
  animation: fadeSlideUp .5s var(--wc-ease) .36s both;
}
.wc2026-result__cta-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; max-width: 100%;
  padding: 11px 20px;
  border-radius: var(--wc-radius-md);
  font-family: 'Barlow', sans-serif;
  font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #061224 !important;
  background: linear-gradient(135deg, #fff0a4 0%, #d7b64f 48%, #b58d2d 100%);
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: 0 10px 28px rgba(0,0,0,.28), 0 0 22px rgba(201,168,76,.28);
  transition: transform var(--wc-t) var(--wc-ease), box-shadow var(--wc-t) var(--wc-ease);
}
.wc2026-result__cta-link:hover,
.wc2026-result__cta-link:focus {
  color: #061224 !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.34), 0 0 30px rgba(201,168,76,.42);
}
.wc2026-result__cta-link:focus-visible {
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 3px;
}
.wc2026-result__tagline {
  font-size: 15px; color: rgba(255,255,255,.55);
  animation: fadeSlideUp .5s var(--wc-ease) .4s both;
}
.wc2026-result__stats {
  background: rgba(6,18,44,.82); border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--wc-radius-lg); padding: 15px 28px; margin-bottom: 18px;
  animation: fadeSlideUp .5s var(--wc-ease) .5s both;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.wc2026-result__stats-title {
  font-family: 'Barlow', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin-bottom: 11px;
}
.wc2026-result__chart { display: flex; flex-direction: column; gap: 12px; }
.wc2026-chart-row { display: flex; align-items: center; gap: 10px; }
.wc2026-chart-row__flag img { width: 24px; height: 18px; object-fit: cover; border-radius: 2px; }
.wc2026-chart-row__name { font-family: 'Barlow', sans-serif; color: rgba(255,255,255,.9); font-size: 13px; font-weight: 600; min-width: 80px; text-align: left; }
.wc2026-chart-row__bar-wrap {
  flex: 1; background: rgba(255,255,255,.08); border-radius: 20px; height: 7px; overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
}
.wc2026-chart-row__bar {
  position: relative; height: 100%; border-radius: 20px;
  background: linear-gradient(90deg, var(--wc-teal), var(--wc-gold));
  box-shadow: 0 0 8px rgba(100,220,200,.45), 0 0 2px rgba(201,168,76,.6);
  transition: width 1s var(--wc-ease) .6s;
  overflow: hidden;
}
.wc2026-chart-row__bar::after {
  content: '';
  position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: barShimmer 2.4s ease-in-out infinite;
}
@keyframes barShimmer {
  0%   { left: -60%; }
  60%  { left: 120%; }
  100% { left: 120%; }
}
.wc2026-chart-row__pct { color: rgba(255,255,255,.6); font-size: 12px; font-weight: 700; min-width: 36px; text-align: right; }
.wc2026-result__actions {
  display: flex; gap: 12px; justify-content: center;
  animation: fadeSlideUp .5s var(--wc-ease) .6s both;
}
.wc2026-result__actions .wc2026-btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }

/* ── Buttons ── */
.wc2026-btn {
  display: inline-flex !important; align-items: center; gap: 8px;
  padding: 13px 30px !important; border-radius: var(--wc-radius-md) !important;
  font-size: 14px; font-weight: 700; letter-spacing: .04em;
  transition: all var(--wc-t) var(--wc-ease);
  border: none !important; cursor: pointer;
}
.wc2026-btn--share {
  background: var(--wc-gold) !important; color: #1a1a1a !important;
  box-shadow: 0 2px 12px rgba(201,168,76,.35) !important;
}
.wc2026-btn--share:hover {
  background: #b8973c !important; transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(201,168,76,.45) !important;
}
.wc2026-btn--reset {
  background: rgba(255,255,255,.1) !important; color: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
}
.wc2026-btn--reset:hover {
  background: rgba(255,255,255,.18) !important; color: #fff !important;
}

/* ══════════════════════════════════════════════
   DRAG GHOST — card identical to rank slot
══════════════════════════════════════════════ */
.wc2026-drag-ghost {
  position: fixed; pointer-events: none; z-index: 9999;
  background: var(--wc-bg); border: 2px solid var(--wc-teal);
  border-radius: var(--wc-radius-md); padding: 6px 12px 6px 8px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 10px 32px rgba(0,0,0,.2), 0 2px 8px rgba(0,154,166,.18);
  font-size: 12px; font-weight: 600; color: var(--wc-dark);
  opacity: .97;
  min-width: 130px; max-width: 220px; white-space: nowrap;
}
/* Rank badge inside ghost — mirrors slot num styling */
.wc2026-drag-ghost__num {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 10px; font-weight: 800; background: #888; color: #fff;
}
.wc2026-drag-ghost__num[data-rank="1"] {
  background: linear-gradient(145deg, #f5d860 0%, #c9a030 55%, #9e7818 100%);
}
.wc2026-drag-ghost__num[data-rank="2"] {
  background: linear-gradient(145deg, #cdd8e0 0%, #8a9ba8 55%, #6b808e 100%);
}
.wc2026-drag-ghost__num[data-rank="3"] {
  background: linear-gradient(145deg, #c49866 0%, #a0764e 55%, #7c5636 100%);
}
.wc2026-drag-ghost__name {
  font-size: 12px; font-weight: 600; color: var(--wc-dark); overflow: hidden;
}

/* ══════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════ */
.wc2026-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--wc-dark); color: #fff;
  padding: 11px 22px; border-radius: 24px;
  font-size: 14px; font-weight: 500; z-index: 9999;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  transition: transform .32s var(--wc-spring), opacity .24s;
  opacity: 0; white-space: nowrap;
  overflow: hidden;
}
.wc2026-toast--show { transform: translateX(-50%) translateY(0); opacity: 1; }
.wc2026-toast__text { white-space: nowrap; }
.wc2026-toast--processing { display: inline-flex !important; align-items: center; gap: 0; }
.wc2026-toast__stop {
  flex-shrink: 0; align-self: center;
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0 0 0 40px; padding: 3px 10px 3px 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
  line-height: 1;
}
.wc2026-toast__stop svg { flex-shrink: 0; }
.wc2026-toast__stop:hover {
  background: rgba(220,30,30,.6);
  border-color: rgba(255,80,80,.65);
  color: #fff;
}

/* Processing state — shimmer sweep + blue pulse glow */
.wc2026-toast--processing {
  animation: toastGlow 2s ease-in-out infinite;
}
.wc2026-toast--processing::after {
  content: '';
  position: absolute; inset: 0; border-radius: 24px;
  background: linear-gradient(100deg, transparent 20%, rgba(80,180,255,.18) 50%, transparent 80%);
  transform: translateX(-130%);
  animation: toastShimmer 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes toastGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,.3), 0 0 0 0 rgba(60,170,255,.0); }
  50%       { box-shadow: 0 4px 28px rgba(0,0,0,.4), 0 0 0 3px rgba(60,170,255,.35), 0 0 18px rgba(60,170,255,.25); }
}
@keyframes toastShimmer {
  0%        { transform: translateX(-130%); }
  55%, 100% { transform: translateX(160%); }
}

/* ══════════════════════════════════════════════
   CONFIRM MODAL
══════════════════════════════════════════════ */
.wc2026-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.wc2026-modal--show { opacity: 1; pointer-events: auto; }
.wc2026-modal__box {
  background: #1a1a2e;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 32px 28px 24px;
  max-width: 360px; width: 90%;
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
  transform: translateY(16px) scale(.97);
  transition: transform .24s cubic-bezier(.2,.8,.4,1);
  text-align: center;
}
.wc2026-modal--show .wc2026-modal__box { transform: translateY(0) scale(1); }
.wc2026-modal__msg {
  color: #e8e8f0; font-size: 15px; line-height: 1.5;
  margin: 0 0 24px;
}
.wc2026-modal__actions {
  display: flex; gap: 10px; justify-content: center;
}
.wc2026-modal__cancel,
.wc2026-modal__confirm {
  flex: 1; padding: 11px 0; border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  border: none; transition: transform .15s, opacity .15s;
}
.wc2026-modal__cancel {
  background: rgba(255,255,255,.1); color: #ccc;
}
.wc2026-modal__confirm {
  background: linear-gradient(135deg, #e8000d, #b00008);
  color: #fff;
}
.wc2026-modal__cancel:hover  { opacity: .8; }
.wc2026-modal__confirm:hover { opacity: .88; }
.wc2026-modal__cancel:active,
.wc2026-modal__confirm:active { transform: scale(.96); }

/* ══════════════════════════════════════════════
   GROUP COMPLETE BADGE
══════════════════════════════════════════════ */
.wc2026-stage-header__complete {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: var(--wc-teal);
  background: var(--wc-teal-light); padding: 3px 10px;
  border-radius: 20px; margin-left: 12px; letter-spacing: .03em;
  border: 1px solid var(--wc-teal-mid);
}

/* ══════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════ */
@keyframes shimmer {
  0%  { background-position: 200% 0 }
  100%{ background-position: -200% 0 }
}
@keyframes trophyFloat {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 6px 20px rgba(201,168,76,.55)); }
  50%       { transform: translateY(-6px); filter: drop-shadow(0 12px 28px rgba(201,168,76,.75)); }
}
@keyframes heroAmbient {
  0%, 100% { opacity: .82; }
  50%       { opacity: 1; }
}
@keyframes ctaGlowPulse {
  0%, 100% {
    box-shadow: inset 0 0 20px rgba(200,0,20,.06), 0 0 16px rgba(200,0,20,.14), 0 4px 22px rgba(0,0,0,.45);
    border-color: rgba(185,30,40,.44);
  }
  50% {
    box-shadow: inset 0 0 34px rgba(200,0,20,.15), 0 0 32px rgba(200,0,20,.28), 0 8px 30px rgba(0,0,0,.52);
    border-color: rgba(225,40,52,.74);
  }
}
@keyframes bounceIn {
  0%  { transform: scale(.2); opacity: 0 }
  60% { transform: scale(1.08) }
  80% { transform: scale(.95) }
  100%{ transform: scale(1); opacity: 1 }
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(14px) }
  to   { opacity: 1; transform: translateY(0) }
}
@keyframes flagReveal {
  from { opacity: 0; transform: scale(.7) rotate(-4deg) }
  to   { opacity: 1; transform: scale(1) rotate(0deg) }
}
@keyframes pulseTeal {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,154,166,.4) }
  50%       { box-shadow: 0 0 0 6px rgba(0,154,166,0) }
}

.wc2026-section--unlocked { animation: fadeSlideUp .4s var(--wc-ease) both; }

/* Winner pulse on match team */
.wc2026-match-team--winner .wc2026-match-team__radio {
  animation: pulseTeal 1.8s ease-in-out 1;
}

/* ══════════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════════ */
.wc2026-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .42s var(--wc-ease), transform .42s var(--wc-ease);
  will-change: opacity, transform;
}
.wc2026-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ══════════════════════════════════════════════
   SKELETON
══════════════════════════════════════════════ */
.wc2026-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--wc-radius);
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
/* Tablet 1024px */
@media (max-width: 1024px) {
  .wc2026-groups-grid { grid-template-columns: repeat(2, 1fr); }
  .wc2026-section--bracket[data-round="ro32"] .wc2026-matches-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Small tablet 768px */
@media (max-width: 768px) {
  .wc2026-groups-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile 640px */
@media (max-width: 540px) {
  .wc2026-hero__btn-wrap { flex-direction: column; gap: 10px; align-items: stretch; width: 100%; max-width: 320px; }
  .wc2026-hero__cta      { width: 100% !important; justify-content: center; }
  .wc2026-hero__ai-btn   { width: 100% !important; font-size: 12px !important; padding: 20px 26px !important; justify-content: center; }
  .wc2026-hero__flags    { grid-template-columns: repeat(12, 1fr); gap: 4px; padding: 8px; }
}
@media (max-width: 380px) {
  .wc2026-hero__flags    { grid-template-columns: repeat(12, 1fr); gap: 3px; padding: 6px; }
}

@media (max-width: 640px) {
  .wc2026-section__inner { padding: 0 16px; }
  .wc2026-hero { min-height: 420px; }
  .wc2026-hero__bracket { display: none; }
  .wc2026-hero__stats { gap: 0; padding: 10px 8px; width: calc(100% - 32px); justify-content: space-around; }
  .wc2026-hero__stat { min-width: 0; flex: 1; }
  .wc2026-hero__stat-sep { font-size: 14px; flex-shrink: 0; }
  .wc2026-groups-grid { grid-template-columns: 1fr; }
  .wc2026-matches-grid,
  .wc2026-section--bracket[data-round="ro32"] .wc2026-matches-grid,
  .wc2026-section--bracket[data-round="ro16"] .wc2026-matches-grid,
  .wc2026-section--bracket[data-round="qf"] .wc2026-matches-grid { grid-template-columns: 1fr; }
  .wc2026-third-grid { grid-template-columns: 1fr; }
  .wc2026-result__champion-name { font-size: 38px; }
  .wc2026-section--bracket[data-round="sf"] .wc2026-match-team,
  .wc2026-section--bracket[data-round="final"] .wc2026-match-team {
    padding: 20px 12px;
  }
  .wc2026-section--bracket[data-round="sf"] .wc2026-match-team__flag img,
  .wc2026-section--bracket[data-round="sf"] .wc2026-match-team__flag--placeholder {
    width: 48px; height: 36px;
  }
  .wc2026-section--bracket[data-round="final"] .wc2026-match-team__flag img,
  .wc2026-section--bracket[data-round="final"] .wc2026-match-team__flag--placeholder {
    width: 56px; height: 42px;
  }
}
/* Very small 400px */
@media (max-width: 400px) {
  .wc2026-hero__title { font-size: 34px; line-height: 1.1; }
  .wc2026-section__inner { padding: 0 16px; }
}

/* ══════════════════════════════════════════════
   MISC POLISH
══════════════════════════════════════════════ */
/* Separator between sections */
.wc2026-section + .wc2026-section {
  border-top: 1px solid var(--wc-border);
}
/* Teal accent line at top of bracket section */
.wc2026-section--bracket .wc2026-stage-header__title::before {
  background: var(--wc-teal);
}
/* Third section header accent */
.wc2026-section--third .wc2026-stage-header__title::before {
  background: #c05000;
}
/* TBD match name */
.wc2026-match-team--tbd .wc2026-match-team__name { color: var(--wc-muted); font-weight: 400; }