/* ============================================================
   PUNDIT KINGS — KNOCKOUTS PAGE (state-of-the-art tournament bracket)
   Two-sided tree: R32 → R16 → QF → SF → FINAL (center) → SF → QF → R16 → R32.
   Black #080808 + Gold #F5C518. Broadcast-grade.
   ============================================================ */
.ko-wrap{--gold:#F5C518;--gold-d:#C69B3C;--ink:#0a0a0c;--card:#121318;--card2:#181a20;
  --line:rgba(245,197,24,.28);--edge:rgba(245,197,24,.14);max-width:1680px;margin:0 auto;padding:8px 14px 60px}

/* hero */
.ko-hero{text-align:center;padding:26px 16px 14px;position:relative}
.ko-hero h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(38px,6vw,76px);line-height:.94;
  letter-spacing:.02em;color:#fff;margin:0}
.ko-hero h1 .g{color:var(--gold);text-shadow:0 0 28px rgba(245,197,24,.45)}
.ko-hero .trophy{font-size:.8em;filter:drop-shadow(0 0 16px rgba(245,197,24,.6));animation:koGlow 3.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.ko-hero .trophy{animation:none}}
@keyframes koGlow{0%,100%{filter:drop-shadow(0 0 10px rgba(245,197,24,.4))}50%{filter:drop-shadow(0 0 24px rgba(245,197,24,.9))}}
.ko-sub{color:#b9bac2;font-size:15px;margin-top:8px;font-weight:500}
.ko-tap{display:inline-block;margin-top:12px;background:linear-gradient(180deg,#F5C518,#d9a91a);
  color:#0a0a0a;font-weight:800;font-size:13px;padding:6px 16px;border-radius:999px;
  box-shadow:0 3px 14px -3px rgba(245,197,24,.6)}

/* round tabs (mobile + a quick desktop jump) */
.ko-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:14px 0 6px}
.ko-tab{background:var(--card);border:1px solid rgba(255,255,255,.08);color:#c7c7cf;border-radius:10px;
  padding:11px 16px;min-height:42px;display:inline-flex;align-items:center;font-weight:800;font-size:13px;
  cursor:pointer;transition:.16s;letter-spacing:.02em}
.ko-tab:hover{border-color:var(--edge);color:#fff}
.ko-tab.on{background:linear-gradient(180deg,#241c08,#141004);border-color:var(--gold-d);color:var(--gold)}

/* the bracket viewport (horizontal scroll only if truly needed; we scale to fit) */
.ko-stage{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
  scrollbar-color:var(--gold-d) transparent;padding:8px 4px 20px}
.ko-stage::-webkit-scrollbar{height:8px}.ko-stage::-webkit-scrollbar-thumb{background:var(--gold-d);border-radius:8px}

/* the tree: columns laid out left half + final + right half */
.ko-tree{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.3vw,26px);min-width:max-content;
  margin:0 auto;transform-origin:top center}
.ko-col{display:flex;flex-direction:column;justify-content:space-around;gap:10px;min-width:186px}
.ko-col-h{font-family:'Bebas Neue',sans-serif;letter-spacing:.08em;font-size:16px;color:var(--gold);
  text-align:center;padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.ko-col.final-col{justify-content:center;min-width:230px}
.ko-col.final-col .ko-col-h{color:#fff;font-size:22px;text-shadow:0 0 18px rgba(245,197,24,.7)}

/* a tie */
.kotie{position:relative;background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid rgba(255,255,255,.07);border-radius:11px;padding:7px 9px;cursor:default;
  transition:transform .16s,border-color .16s,box-shadow .16s}
.kotie::before{content:"";position:absolute;inset:0;border-radius:11px;background:
  radial-gradient(120% 80% at 0% 0%,rgba(245,197,24,.05),transparent 60%);pointer-events:none}
.kotie.haspick{cursor:pointer}
.kotie.haspick:hover{transform:translateY(-2px);border-color:var(--edge);box-shadow:0 10px 28px -12px rgba(245,197,24,.5)}
.kotie.haspick::after{content:"👆";position:absolute;top:5px;right:7px;font-size:10px;opacity:.4}
.kotie.haspick:hover::after{opacity:.9}
.kotie.live{border-color:#1fbf5a}
.kotie .livepip{position:absolute;top:6px;left:8px;font-size:9px;font-weight:800;color:#1fbf5a;letter-spacing:.05em}
.kotie .livepip i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#1fbf5a;margin-right:4px;animation:koPulse 1.2s infinite}
@keyframes koPulse{0%,100%{opacity:1}50%{opacity:.3}}
.kotie .mno{position:absolute;top:6px;right:9px;font-size:9.5px;font-weight:800;color:#7a7a85;letter-spacing:.04em}

.kr{display:flex;align-items:center;gap:7px;padding:4px 1px}
.kr+.kr{border-top:1px dashed rgba(255,255,255,.07)}
.kr .crest{width:22px;height:22px;object-fit:contain;flex:0 0 22px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.kr .crest.ph{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border-radius:50%;font-size:11px;color:#666}
.kr .nm{font-weight:800;font-size:13.5px;color:#fff;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kr .nm.tbd{color:#9a9aa4;font-weight:700;font-size:12px;font-style:italic}
.kr .sc{font-family:'Bebas Neue',sans-serif;font-size:19px;color:#9a9aa4;min-width:16px;text-align:center;margin-left:6px}
.kr.win .sc{color:var(--gold)}
.kr .sc .pk-pen{font-family:'Sofia Sans',sans-serif;font-size:11px;font-weight:700;color:#8a8a94;margin-left:2px;vertical-align:1px}
.kr.win .sc .pk-pen{color:var(--gold)}
.kr.win .nm{color:#fff}
.kotie-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:5px;padding-top:5px;border-top:1px solid rgba(255,255,255,.05)}
.kotie-date{font-size:10.5px;color:#9a9aa4;font-weight:700}

/* pick pill states (match the group cards) */
.kpick{font-size:10px;font-weight:800;color:#0a0a0a;background:var(--gold);border-radius:6px;padding:2px 7px;
  display:inline-flex;align-items:center;gap:4px;box-shadow:0 2px 9px -3px rgba(245,197,24,.55)}
.kpick .pct{background:rgba(0,0,0,.16);border-radius:4px;padding:0 4px;font-weight:900}
.kpick.locked{background:linear-gradient(180deg,#241c08,#15100400);color:var(--gold);border:1px solid var(--gold-d);box-shadow:none}
.kpick.soon{background:transparent;color:#8a8a93;border:1px solid rgba(255,255,255,.1);box-shadow:none}
.kpick.won{background:linear-gradient(180deg,#1fbf5a,#159c47);color:#06140b}
.kpick.lost{background:transparent;color:#d06a6a;border:1px solid rgba(208,106,106,.4);box-shadow:none}
.kpick.empty{background:transparent;color:#6c6c76;border:1px dashed rgba(255,255,255,.12);box-shadow:none}

/* the final spotlight card */
.ko-final{background:radial-gradient(120% 120% at 50% 0%,#231a06,#0d0d10 70%);
  border:1.5px solid var(--gold-d);border-radius:16px;padding:14px 12px;text-align:center;
  box-shadow:0 16px 50px -20px rgba(245,197,24,.6)}
.ko-final .fh{font-family:'Bebas Neue',sans-serif;letter-spacing:.1em;color:var(--gold);font-size:15px;margin-bottom:8px}
.ko-final .ko-champ{margin-top:10px;font-size:11px;color:#9a9aa4;font-weight:700}

/* CTA band */
.ko-cta{margin:30px auto 0;max-width:720px;text-align:center;background:linear-gradient(180deg,#16171d,#101116);
  border:1px solid var(--edge);border-radius:16px;padding:22px}
.ko-cta h3{font-family:'Bebas Neue',sans-serif;font-size:26px;color:#fff;letter-spacing:.03em;margin:0 0 6px}
.ko-cta p{color:#b9bac2;font-size:14px;margin:0 0 14px}

/* desktop = whole tree fits (auto-scaled by JS); mobile = round tabs drive it */
@media(min-width:1100px){ .ko-tabs{display:none} }
@media(max-width:1099px){
  .ko-tree{flex-wrap:nowrap}
  .ko-col[hidden]{display:none}
  .ko-col-h{display:none}
  .ko-col{min-width:88vw}
}


/* ── REAL FIFA WORLD CUP TROPHY — the gold centerpiece (Wikimedia, transparent PNG) ── */
.ko-trophy{position:relative;text-align:center;margin-bottom:16px;padding:8px 0;display:flex;flex-direction:column;align-items:center}
.ko-trophy-img{position:relative;z-index:2;width:auto;height:clamp(170px,20vw,260px);
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.6));animation:koTrophyFloat 4.5s ease-in-out infinite}
.ko-trophy-glow{position:absolute;top:46%;left:50%;width:clamp(180px,22vw,300px);height:clamp(180px,22vw,300px);
  transform:translate(-50%,-50%);z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(245,197,24,.22) 0%,rgba(245,197,24,.07) 45%,transparent 72%);
  animation:koGlowPulse 3.4s ease-in-out infinite}
.ko-trophy-cap{margin-top:8px;font-family:'Bebas Neue',sans-serif;letter-spacing:.2em;font-size:15px;
  color:var(--gold);text-shadow:0 0 16px rgba(245,197,24,.6);position:relative;z-index:2}
@keyframes koTrophyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes koGlowPulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.13)}}
@media(prefers-reduced-motion:reduce){.ko-trophy-img,.ko-trophy-glow{animation:none}}

/* ── drag-to-pan cursor + grab affordance ── */
.ko-stage.ko-grab{cursor:grab}
.ko-stage.ko-grabbing{cursor:grabbing;scroll-behavior:auto;user-select:none}
.ko-stage.ko-grabbing *{cursor:grabbing}
/* a subtle "drag to explore" hint on first view */
.ko-draghint{text-align:center;color:#9a9aa4;font-size:12px;font-weight:600;margin:-2px 0 6px}
.ko-draghint b{color:var(--gold)}

/* ── WC ATMOSPHERIC BACKGROUND — the gold-trophy stadium behind the whole bracket ── */
/* fixed so it stays put as you scroll; heavily darkened so the bracket cards stay readable */
/* the dark stadium backdrop sits ONLY behind the bracket content, NOT over the sidebar —
   otherwise it darkens the light-theme sidebar and the nav text becomes invisible.
   On desktop the docked sidebar is 255px wide, so start the backdrop at left:255px. */
.ko-bg{position:fixed;top:0;right:0;bottom:0;left:255px;z-index:0;pointer-events:none;
  /* CLEAN stadium bg (no baked-in trophy/26) so the sharp WC26 emblem is the ONLY 26 — the
     old banner_bg.png has a trophy+26 that clashed with the emblem (2026-06-30). */
  background:linear-gradient(rgba(6,6,8,.72),rgba(6,6,8,.88)),url('/banner_bg_clean.png?v=1') center center/cover no-repeat fixed;}
@media(max-width:900px){ .ko-bg{left:0} }  /* mobile: sidebar is a drawer, backdrop is full-width */
.ko-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 0%,rgba(245,197,24,.10),transparent 55%);}
/* the page content sits above the background */
.ko-wrap{position:relative;z-index:1}
/* the SEO + footer sit OUTSIDE .ko-wrap (after </main>) — they must ALSO sit above the
   fixed .ko-bg, else in light theme the dark backdrop bleeds over them (half-dark/clipped
   text bug). Lift everything after the bracket above the backdrop. */
.seo, .site-footer, footer, .ko-footer{position:relative;z-index:2}
.ko-bg{z-index:0}   /* keep the backdrop firmly behind all real content */
/* slightly translucent cards so the gold glow behind shows through = depth */
.kotie{background:linear-gradient(180deg,rgba(24,26,32,.92),rgba(18,19,24,.92))}

/* ── EMOJI FONT FALLBACK — the page's headline fonts (Bebas/Sofia) have no emoji
      glyphs, so 🏆 👆 📲 🔒 ⚡ ✅ rendered as empty □ boxes. Force a real emoji font. ── */
.emo{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",
    "EmojiOne Color","Android Emoji",sans-serif !important;
  font-weight:400;letter-spacing:normal;}
/* keep the pill TEXT in the normal font — only the leading emoji needs the emoji font.
   .kpick mixes emoji + text, so scope the emoji font to a leading glyph wrapper where we can,
   and accept the system emoji font for the whole pill (text still reads fine). */
.kpick,.bktie-pick{font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",
  'Sofia Sans',system-ui,sans-serif !important;}
.kpick .pct,.bktie-pick .pct{font-family:'Sofia Sans',system-ui,sans-serif !important;}

/* ── MOBILE: stop pick pills (and the whole tie) from clipping off the right edge ── */
@media(max-width:1099px){
  .ko-col{min-width:0;width:100%;box-sizing:border-box}
  .kotie{width:100%;box-sizing:border-box;overflow:hidden}
  .kotie-foot{flex-wrap:wrap;row-gap:4px}
  .kpick{max-width:100%;white-space:nowrap}
  /* the tree must not force a width wider than the screen on mobile */
  .ko-tree{min-width:0;width:100%}
  .ko-stage{overflow-x:hidden}
  /* mobile legibility (#67): bump the tiny corner labels to a readable size —
     there's room on phones since the bracket shows fewer columns */
  .kotie .mno{font-size:12px}
  .kotie-date{font-size:12px}
  .kpick{font-size:12px}
}

/* ============================================================
   SHOWPIECE LAYER — hero trophy plinth · particles · lit
   connectors · glass cards · live pulse. Black + gold.
   ============================================================ */

/* drifting gold particles (hero atmosphere) */
.ko-particles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ko-particles i{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;
  background:radial-gradient(circle,var(--gold),transparent);opacity:0;animation:koRise linear infinite}
@keyframes koRise{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:.7}90%{opacity:.45}100%{transform:translateY(-105vh) scale(.4);opacity:0}}

/* HERO trophy framed as an intentional gold plinth (no sticker look) */
.ko-herotrophy{position:relative;width:168px;margin:0 auto 4px;display:flex;justify-content:center}
.ko-plinth{position:relative;width:148px;border-radius:16px;overflow:hidden;border:1.5px solid var(--gold-deep,#C69B3C);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 18px 50px -16px rgba(245,197,24,.55),inset 0 0 40px rgba(245,197,24,.12);
  animation:koFloaty 5s ease-in-out infinite}
.ko-plinth img{display:block;width:100%;height:auto}
.ko-plinth::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(80% 60% at 50% 30%,rgba(255,255,255,.16),transparent 60%)}
.ko-plinth::after{content:"";position:absolute;top:-30%;left:-60%;width:50%;height:160%;z-index:3;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:rotate(18deg);animation:koSweep 4.6s ease-in-out infinite}
.ko-heroglow{position:absolute;top:50%;left:50%;width:280px;height:280px;transform:translate(-50%,-50%);z-index:-1;
  background:radial-gradient(circle,rgba(245,197,24,.22),rgba(245,197,24,.05) 48%,transparent 72%);animation:koGlowPulse 3.6s ease-in-out infinite}
.ko-champcap{font-family:'Bebas Neue',sans-serif;letter-spacing:.24em;font-size:13px;color:var(--gold);
  text-shadow:0 0 16px rgba(245,197,24,.6);margin-top:6px}

/* lit SVG connectors layer (sits behind cards in the tree) */
.ko-connectors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.ko-tree{position:relative}
.ko-col{position:relative;z-index:2}

/* glass-card upgrade for ties + the final trophy as a plinth too */
.kotie{backdrop-filter:blur(8px)}
.ko-trophy-img{border-radius:14px;border:1.5px solid var(--gold-deep,#C69B3C);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 16px 44px -16px rgba(245,197,24,.5),inset 0 0 36px rgba(245,197,24,.12)}

/* LIVE tie pulse (a tracked tie that's in play) */
.kotie.live{border-color:rgba(31,191,90,.55)}
.kotie.live::after{content:"";position:absolute;inset:-1px;border-radius:11px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(31,191,90,.5);animation:koLivePulse 1.8s ease-out infinite}

@keyframes koFloaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes koSweep{0%,70%{left:-60%}86%,100%{left:150%}}
@keyframes koLivePulse{0%{box-shadow:0 0 0 0 rgba(31,191,90,.5)}100%{box-shadow:0 0 0 14px rgba(31,191,90,0)}}

@media(prefers-reduced-motion:reduce){
  .ko-plinth,.ko-heroglow,.ko-plinth::after,.ko-particles i,.kotie.live::after{animation:none!important}
}
/* mobile: smaller hero trophy, hide particles for perf */
@media(max-width:768px){
  .ko-herotrophy{width:128px}.ko-plinth{width:112px}
  .ko-particles{display:none}
}

/* ============================================================================
   WC 2026 OFFICIAL EMBLEM (2026-06-30) — replaced the photo-trophy card with the
   real FIFA WC26 logo (proportional "26" + trophy). Two assets so it works in
   BOTH themes: white-"26" on dark, black-"26" on light. The .ko-plinth--logo
   variant drops the card frame/border so the transparent emblem sits clean.
   ============================================================================ */
.ko-plinth.ko-plinth--logo{
  background:none !important;border:none !important;border-radius:0 !important;
  box-shadow:none !important;overflow:visible;width:150px;
}
.ko-plinth--logo::before,.ko-plinth--logo::after{display:none !important}
.ko-plinth--logo .wc26{display:block;width:100%;height:auto;
  filter:drop-shadow(0 8px 26px rgba(245,197,24,.40))}
/* This hero sits on a DARK stadium photo in BOTH themes, so the white-"26"
   variant always reads best — do NOT switch to the black-26 on light here.
   (The black-26 asset is kept for any future light-surface placement.) */
.ko-plinth--logo .wc26-light{display:none}
.ko-plinth--logo .wc26-dark{display:block}
@media(max-width:560px){ .ko-plinth.ko-plinth--logo{width:120px} }

/* bottom-of-bracket champion trophy → WC26 emblem (transparent, no card frame) */
.ko-trophy--logo .ko-trophy-img{border:none !important;border-radius:0 !important;
  background:none !important;box-shadow:none !important;
  filter:drop-shadow(0 8px 26px rgba(245,197,24,.40))}

/* ============================================================================
   LIGHT-MODE THEME for the knockouts bracket (2026-06-30) — the page was 100%
   hardcoded dark (no theme overrides) so it stayed dark in light mode. This flips
   the page background, cards, tabs and text to light surfaces with the gold accent
   kept. The hero emblem stays on a soft light stadium wash. Scoped to light only.
   ============================================================================ */
html[data-theme="light"] .ko-bg{
  background:linear-gradient(rgba(238,241,245,.86),rgba(230,233,239,.94)),url('/banner_bg_clean.png?v=1') center center/cover no-repeat fixed;
}
html[data-theme="light"] .ko-bg::after{
  background:radial-gradient(120% 80% at 50% 0%,rgba(168,127,15,.10),transparent 55%);
}
/* round headers + big titles → dark on light */
html[data-theme="light"] .ko-hero h1,
html[data-theme="light"] .ko-col.final-col .ko-col-h{ color:#15171c; text-shadow:none; }
html[data-theme="light"] .ko-col-h{ color:#7a5c0a; }
/* match cards → white with dark text */
html[data-theme="light"] .kotie{
  background:#ffffff;
  border-color:rgba(168,127,15,.22);
  box-shadow:0 6px 18px -10px rgba(0,0,0,.28);
}
html[data-theme="light"] .kr .nm,
html[data-theme="light"] .kr.win .nm{ color:#15171c; }
html[data-theme="light"] .kr .nm.tbd{ color:#8c8c95; }
html[data-theme="light"] .kotie-date,
html[data-theme="light"] .ko-draghint,
html[data-theme="light"] .ko-final .ko-champ{ color:#6c6f78; }
/* tabs → light surfaces */
html[data-theme="light"] .ko-tab{ background:#ffffff; border-color:rgba(168,127,15,.22); color:#3d4049; }
html[data-theme="light"] .ko-tab:hover{ color:#15171c; }
html[data-theme="light"] .ko-tab.on{ background:linear-gradient(180deg,#fdf3cf,#f7e9b0); border-color:#a87f0f; color:#7a5c0a; }
/* locked pick badge → light gold */
html[data-theme="light"] .kpick.locked{ background:linear-gradient(180deg,#fdf3cf,#f7e9b0); color:#7a5c0a; border-color:rgba(168,127,15,.4); }
/* FINAL panel + CTA card → light */
html[data-theme="light"] .ko-final{ background:radial-gradient(120% 120% at 50% 0%,#fdf6dc,#ffffff 70%); border-color:rgba(168,127,15,.3); }
html[data-theme="light"] .ko-cta{ background:#ffffff; border-color:rgba(168,127,15,.3); }
html[data-theme="light"] .ko-cta h3{ color:#15171c; }