/* ============================================================
   PUNDIT KINGS — WORLD CUP 2026 KNOCKOUT BRACKET
   "WOW" interactive bracket. Black #080808 + Gold #F5C518.
   Horizontal scroll tree on desktop, round-tabs on mobile.
   ============================================================ */

/* ── high-visibility JUMP banner (top of page) ── */
.wcbk-jump{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:14px 0 22px;padding:16px 20px;border-radius:16px;text-decoration:none;
  background:linear-gradient(110deg,#1b1407 0%,#241a06 42%,#3a2a08 100%);
  border:1.5px solid rgba(245,197,24,.45);position:relative;overflow:hidden;
  box-shadow:0 14px 38px -18px rgba(245,197,24,.55);transition:transform .16s,box-shadow .16s,border-color .16s}
.wcbk-jump:hover{transform:translateY(-2px);border-color:rgba(245,197,24,.85);
  box-shadow:0 18px 46px -16px rgba(245,197,24,.75)}
.wcbk-jump::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);
  transform:skewX(-18deg);animation:wbjShine 4.5s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){ .wcbk-jump::after{animation:none;opacity:0} }
@keyframes wbjShine{0%{left:-60%}55%,100%{left:130%}}
.wbj-l{display:flex;align-items:center;gap:15px;min-width:0}
.wbj-icon{font-size:34px;line-height:1;filter:drop-shadow(0 0 12px rgba(245,197,24,.6));flex:0 0 auto}
.wbj-txt{display:flex;flex-direction:column;min-width:0}
.wbj-txt b{font-family:'Bebas Neue',sans-serif;font-size:clamp(22px,3.2vw,30px);letter-spacing:.04em;
  color:#fff;line-height:1.02}
.wbj-sub{font-size:13.5px;color:#e7d49a;font-weight:600;line-height:1.3;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wbj-cta{flex:0 0 auto;background:linear-gradient(180deg,#F5C518,#d9a91a);color:#0a0a0a;
  font-weight:900;font-size:14px;letter-spacing:.02em;padding:11px 18px;border-radius:11px;white-space:nowrap;
  box-shadow:0 4px 16px -4px rgba(245,197,24,.6)}
@media (max-width:560px){
  .wcbk-jump{padding:14px 15px;gap:10px}
  .wbj-icon{font-size:27px}
  .wbj-sub{font-size:12px}
  .wbj-cta{padding:10px 13px;font-size:12.5px}
}

.wcbk{
  --bk-gold:#F5C518; --bk-gold-d:#C69B3C; --bk-line:rgba(245,197,24,.22);
  --bk-card:#101013; --bk-card-2:#16171b; --bk-edge:rgba(245,197,24,.14);
  margin:34px 0 10px; position:relative;
}
.wcbk-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:6px}
.wcbk-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(30px,4.4vw,52px);
  letter-spacing:.02em;line-height:1;color:#fff;display:flex;align-items:center;gap:14px}
.wcbk-title .tg{color:var(--bk-gold)}
.wcbk-title .trophy{
  filter:drop-shadow(0 0 14px rgba(245,197,24,.55));
  animation:bkGlow 3.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .wcbk-title .trophy{animation:none} }
@keyframes bkGlow{0%,100%{filter:drop-shadow(0 0 8px rgba(245,197,24,.4))}50%{filter:drop-shadow(0 0 20px rgba(245,197,24,.85))}}
.wcbk-sub{color:#9a9aa2;font-size:14px;max-width:640px;line-height:1.4}
.wcbk-badge{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(180deg,#1c1708,#100c04);
  border:1px solid var(--bk-edge);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:700;
  letter-spacing:.04em;color:var(--bk-gold);white-space:nowrap}
.wcbk-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--bk-gold);box-shadow:0 0 9px var(--bk-gold);animation:bkPulse 1.8s infinite}
@keyframes bkPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* round-tabs (mobile-first nav; desktop hides, shows full tree) */
.wcbk-tabs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:4px 2px 10px;scrollbar-width:none;margin-top:10px}
.wcbk-tabs::-webkit-scrollbar{display:none}
.wcbk-tab{flex:0 0 auto;background:var(--bk-card);border:1px solid rgba(255,255,255,.07);
  color:#c7c7cf;border-radius:10px;padding:9px 14px;font-weight:700;font-size:13px;letter-spacing:.02em;
  cursor:pointer;transition:.18s;white-space:nowrap}
.wcbk-tab:hover{border-color:var(--bk-edge);color:#fff}
.wcbk-tab.on{background:linear-gradient(180deg,#241c08,#141004);border-color:var(--bk-gold-d);color:var(--bk-gold)}

/* the tree viewport */
.wcbk-view{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
  scrollbar-color:var(--bk-gold-d) transparent;padding:6px 2px 16px}
.wcbk-view::-webkit-scrollbar{height:8px}
.wcbk-view::-webkit-scrollbar-thumb{background:var(--bk-gold-d);border-radius:8px}
.wcbk-tree{display:flex;gap:clamp(20px,3vw,52px);min-width:max-content;align-items:stretch}

.wcbk-col{display:flex;flex-direction:column;justify-content:space-around;gap:14px;min-width:248px}
.wcbk-col-h{font-family:'Bebas Neue',sans-serif;letter-spacing:.08em;font-size:19px;color:var(--bk-gold);
  text-align:center;padding-bottom:8px;border-bottom:1px solid var(--bk-line);margin-bottom:4px;position:sticky;top:0}
.wcbk-col[data-r="final"] .wcbk-col-h{color:#fff;text-shadow:0 0 16px rgba(245,197,24,.6)}

/* a tie card */
.bktie{position:relative;background:linear-gradient(180deg,var(--bk-card-2),var(--bk-card));
  border:1px solid rgba(255,255,255,.06);border-radius:13px;padding:9px 11px;cursor:default;
  transition:transform .16s, border-color .16s, box-shadow .16s;overflow:hidden}
.bktie.haspick{cursor:pointer}
.bktie::before{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 80% at 0% 0%, rgba(245,197,24,.06), transparent 60%);pointer-events:none}
.bktie.haspick:hover{transform:translateY(-2px);border-color:var(--bk-edge);
  box-shadow:0 10px 30px -12px rgba(245,197,24,.4)}
.bktie .mno{position:absolute;top:7px;right:9px;font-size:10.5px;font-weight:800;color:#8a8a93;letter-spacing:.05em}
.bktie-row{display:flex;align-items:center;gap:9px;padding:6px 2px}
.bktie-row+.bktie-row{border-top:1px dashed rgba(255,255,255,.06)}
.bktie-row .crest{width:26px;height:26px;object-fit:contain;flex:0 0 26px;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.bktie-row .crest.ph{display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);border-radius:50%;font-size:13px;color:#666}
.bktie-row .tnm{font-weight:800;font-size:15.5px;color:#ffffff;flex:1;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
.bktie-row .tnm.tbd{color:#b9b9c4;font-weight:700;font-style:normal;font-size:14px}
.bktie-row .tsc{font-family:'Bebas Neue',sans-serif;font-size:21px;color:#fff;min-width:18px;text-align:center}
.bktie-row.win .tnm{color:#fff}
.bktie-row.win .tsc{color:var(--bk-gold)}
.bktie-row .from{font-size:10px;color:var(--bk-gold);font-weight:800;margin-left:5px}
.bktie-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.05)}
.bktie-date{font-size:12px;color:#b3b3bd;font-weight:700;letter-spacing:.02em}
.bktie-pick{font-size:11px;font-weight:800;color:#0a0a0a;background:var(--bk-gold);
  border-radius:6px;padding:3px 9px;letter-spacing:.02em;display:inline-flex;align-items:center;gap:5px;
  box-shadow:0 2px 10px -3px rgba(245,197,24,.55);
  /* emoji font fallback so 🔒 ⚡ ✅ render as real glyphs, not □ boxes */
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",'Sofia Sans',system-ui,sans-serif}
.bktie-pick .pk-pct{background:rgba(0,0,0,.16);border-radius:5px;padding:0 5px;font-weight:900;
  font-family:'Sofia Sans',system-ui,sans-serif}
.bktie-pick.empty{background:transparent;color:#6c6c76;border:1px dashed rgba(255,255,255,.12);
  font-weight:700;box-shadow:none}
.bktie-pick.locked{background:linear-gradient(180deg,#241c08,#15100400);color:var(--bk-gold);
  border:1px solid var(--bk-gold-d);box-shadow:none}
.bktie-pick.soon{background:transparent;color:#8a8a93;border:1px solid rgba(255,255,255,.1);
  font-weight:700;box-shadow:none}
.bktie-pick.won{background:linear-gradient(180deg,#1fbf5a,#159c47);color:#06140b}
.bktie-pick.lost{background:transparent;color:#d06a6a;border:1px solid rgba(208,106,106,.4);box-shadow:none}
/* make a tie with a live pick feel tappable/special */
.bktie.haspick{border-color:rgba(245,197,24,.28)}
.bktie.haspick:hover{box-shadow:0 12px 34px -12px rgba(245,197,24,.6)}

/* live state on a tie */
.bktie.live{border-color:#1fbf5a}
.bktie.live .mno{color:#1fbf5a}
.bktie .livepip{position:absolute;top:8px;left:10px;display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:800;color:#1fbf5a;letter-spacing:.05em}
.bktie .livepip i{width:6px;height:6px;border-radius:50%;background:#1fbf5a;animation:bkPulse 1.2s infinite}

/* connector spine between columns */
.wcbk-col{position:relative}
.wcbk-col:not(:last-child)::after{content:"";position:absolute;top:0;bottom:0;right:calc(-1*clamp(10px,1.5vw,26px));
  width:1px;background:linear-gradient(180deg,transparent,var(--bk-line),transparent);pointer-events:none}

/* desktop: show tree, hide tabs */
@media (min-width:980px){
  .wcbk-tabs{display:none}
  .wcbk-col{display:flex !important}
}
/* mobile: tabs drive which round shows */
@media (max-width:979px){
  .wcbk-tree{gap:0}
  .wcbk-col{min-width:100%;width:100%}
  .wcbk-col[hidden]{display:none}
  .wcbk-col:not(:last-child)::after{display:none}
  .wcbk-col-h{display:none}
}

/* end-of-bracket champion teaser */
.wcbk-champ{margin-top:10px;text-align:center;font-family:'Bebas Neue',sans-serif;
  letter-spacing:.06em;font-size:16px;color:#7a7a82}
.wcbk-champ b{color:var(--bk-gold)}

/* ── "Best Third-Placed Teams" standings header (the relabelled 13th block) ── */
.wcgroup.wcg-thirds{border-color:rgba(245,197,24,.3)}
.wcgroup.wcg-thirds .wcg-h{display:flex;flex-direction:column;gap:2px;line-height:1.15;
  background:linear-gradient(180deg,#1c1608,#100c04)}
.wcg-note{font-family:'Barlow Condensed','Sofia Sans',sans-serif;text-transform:none;
  letter-spacing:.01em;font-size:11.5px;font-weight:600;color:#cdb777}
/* subtle gold line under the 8th row = the qualification cut-off */
.wcgroup.wcg-thirds .wctable tbody tr:nth-child(8){border-bottom:2px solid rgba(245,197,24,.55)}

/* ── "Tap any match for prediction" hint (prominent, gold) ── */
.wcbk-tap{display:inline-block;margin-left:8px;background:linear-gradient(180deg,#F5C518,#d9a91a);
  color:#0a0a0a;font-weight:800;font-size:12px;padding:3px 10px;border-radius:999px;white-space:nowrap;
  box-shadow:0 2px 10px -3px rgba(245,197,24,.6);vertical-align:middle}
@media (max-width:560px){ .wcbk-tap{display:block;margin:8px 0 0;width:fit-content} }
/* tappable ties get a gentle "clickable" affordance */
.bktie.haspick{cursor:pointer;position:relative}
.bktie.haspick::after{content:"👆";position:absolute;top:6px;right:8px;font-size:11px;opacity:.45}
.bktie.haspick:hover::after{opacity:.9}

/* ── "View full bracket" button (links to /knockouts.html) ── */
.ko-fullbtn{display:flex;align-items:center;justify-content:space-between;gap:14px;text-decoration:none;
  margin:8px 0 20px;padding:15px 20px;border-radius:15px;
  background:linear-gradient(110deg,#1b1407,#241a06 45%,#3a2a08);border:1.5px solid rgba(245,197,24,.45);
  box-shadow:0 12px 34px -16px rgba(245,197,24,.55);transition:transform .16s,box-shadow .16s,border-color .16s}
.ko-fullbtn:hover{transform:translateY(-2px);border-color:rgba(245,197,24,.85);box-shadow:0 16px 42px -14px rgba(245,197,24,.75)}
.kfb-l{display:flex;align-items:center;gap:14px;min-width:0}
.kfb-ic{font-size:30px;filter:drop-shadow(0 0 12px rgba(245,197,24,.6))}
.kfb-t{display:flex;flex-direction:column;min-width:0}
.kfb-t b{font-family:'Bebas Neue',sans-serif;font-size:clamp(20px,3vw,27px);letter-spacing:.04em;color:#fff;line-height:1.02}
.kfb-t span{font-size:13px;color:#e7d49a;font-weight:600;line-height:1.3;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kfb-cta{flex:0 0 auto;background:linear-gradient(180deg,#F5C518,#d9a91a);color:#0a0a0a;font-weight:900;
  font-size:14px;padding:11px 18px;border-radius:11px;white-space:nowrap;box-shadow:0 4px 16px -4px rgba(245,197,24,.6)}
@media(max-width:560px){.kfb-cta{padding:9px 13px;font-size:12.5px}.kfb-ic{font-size:24px}.kfb-t span{font-size:11.5px}}

/* ============================================================================
   LIGHT-MODE OVERRIDES (added 2026-06-30) — the WC bracket hardcoded dark
   --bk-* vars + dark-brown badge/tab/banner gradients that never flipped, so
   the whole bracket stayed black-on-light ("half dark" bug). Flip the bracket
   to clean light surfaces with the warm-gold accent kept. Scoped to .wcbk so
   nothing else is touched; dark mode is unaffected.
   ============================================================================ */
html[data-theme="light"] .wcbk{
  --bk-card:#ffffff; --bk-card-2:#f6f8fb;
  --bk-line:rgba(168,127,15,.30); --bk-edge:rgba(168,127,15,.22);
}
/* card body text → dark on light */
html[data-theme="light"] .bktie-row .tnm,
html[data-theme="light"] .bktie-row .tnm.win,
html[data-theme="light"] .bktie-row .tsc{ color:#15171c; }
html[data-theme="light"] .bktie-row .tnm.tbd{ color:#6c6f78; }
html[data-theme="light"] .bktie{ border-color:rgba(168,127,15,.22); box-shadow:0 4px 14px -8px rgba(0,0,0,.25); }
html[data-theme="light"] .bktie-row+.bktie-row{ border-top-color:rgba(0,0,0,.08); }
html[data-theme="light"] .bktie .mno{ color:#9a8a4a; }
html[data-theme="light"] .bktie-row .crest.ph{ background:rgba(168,127,15,.08); color:#8c6b0d; }
/* big title text → dark */
html[data-theme="light"] .wcbk-title,
html[data-theme="light"] .wcbk-col[data-r="final"] .wcbk-col-h{ color:#15171c; text-shadow:none; }
html[data-theme="light"] .wcbk-col-h{ border-bottom-color:rgba(168,127,15,.25); }
/* tabs → light surface */
html[data-theme="light"] .wcbk-tab{ background:#ffffff; border-color:rgba(168,127,15,.20); color:#3d4049; }
html[data-theme="light"] .wcbk-tab:hover{ color:#15171c; border-color:rgba(168,127,15,.4); }
html[data-theme="light"] .wcbk-tab.on{ background:linear-gradient(180deg,#fdf3cf,#f7e9b0); border-color:#a87f0f; color:#7a5c0a; }
/* badge + jump banner → warm-gold light tint instead of dark brown */
html[data-theme="light"] .wcbk-badge{ background:linear-gradient(180deg,#fdf3cf,#f7e9b0); color:#7a5c0a; }
html[data-theme="light"] .wcbk-jump{ background:linear-gradient(110deg,#fdf6dc 0%,#f7ead0 42%,#f0dca8 100%); color:#5c460a; }
/* locked pick badge → light gold */
html[data-theme="light"] .bktie-pick.locked{ background:linear-gradient(180deg,#fdf3cf,#f7e9b0); color:#7a5c0a; }
html[data-theme="light"] .bktie-pick .pk-pct{ background:rgba(168,127,15,.12); }
/* the "THE FULL KNOCKOUT BRACKET" strip (.ko-fullbtn) — dark-brown in light mode → warm-gold light tint */
html[data-theme="light"] .ko-fullbtn{
  background:linear-gradient(110deg,#fdf6dc,#f7ead0 45%,#f0dca8);
  border-color:rgba(168,127,15,.4);
  box-shadow:0 10px 28px -16px rgba(168,127,15,.5);
}
html[data-theme="light"] .kfb-t b{ color:#15171c; }
html[data-theme="light"] .kfb-t span{ color:#7a5c0a; }
/* bracket connector/footer dark fill */
html[data-theme="light"] .wcbk-foot,
html[data-theme="light"] .bktie-pick{ }

/* ===== TROPHY ICON UPGRADE (2026-06-30) — replaced the childish 3D emoji 🏆 with
   a clean gold line-trophy SVG (Lucide, MIT). On-brand, sharp, professional. ===== */
.kfb-ic{display:flex;align-items:center}
.kfb-ic img{width:auto;height:38px;display:block;filter:drop-shadow(0 2px 8px rgba(245,197,24,.45))}
.wcbk-title .trophy img{height:1.05em;width:auto;vertical-align:-.14em;display:inline-block}
@media(max-width:560px){ .kfb-ic img{height:30px} }