/* ============================================================
   CINE LAYER — the "alive" pass
   Stadium light sweep · section accent wash · living cards ·
   anime dash page-wipe · Blue Lock pre-match face-off · score slams
   Everything here is additive; body.calm turns the motion off.
   ============================================================ */
:root{
  --ease-snap:cubic-bezier(.2,1.3,.3,1);     /* slams, scores, reveals   */
  --ease-drift:cubic-bezier(.16,1,.3,1);      /* ambient, panels landing  */
  --ease-settle:cubic-bezier(.3,1.4,.4,1);    /* soft elastic overshoot   */
}

/* ============================================================
   TRIONDA VIBRANCY PACK — official FIFA 26 colours, bright & fun
   (Trionda is the default theme; this pack turns the colour UP.)
   ============================================================ */
/* auroras go full tri-nation carnival */
body.theme-trionda #auroras .b1{background:radial-gradient(circle,rgba(43,111,255,.42),transparent 62%)}
body.theme-trionda #auroras .b2{background:radial-gradient(circle,rgba(228,0,43,.46),transparent 62%)}
body.theme-trionda #auroras .b3{background:radial-gradient(circle,rgba(22,200,120,.5),transparent 62%)}
body.theme-trionda.docked #auroras{opacity:.6}
/* landing grade lifts too — never near-black */
body.theme-trionda #grade{background:
  radial-gradient(120% 92% at 50% 36%,transparent 44%,rgba(14,34,86,.5) 100%),
  linear-gradient(180deg,rgba(18,42,100,.32),transparent 26%,transparent 60%,rgba(13,32,80,.7) 100%)}
/* section accent wash pushes harder on the bright stage */
body.theme-trionda #accentWash{background:
  radial-gradient(52% 70% at 0% 62%,color-mix(in srgb,var(--accent,#ffcb2c) 22%,transparent),transparent 70%),
  radial-gradient(46% 60% at 100% 30%,color-mix(in srgb,var(--accent,#ffcb2c) 16%,transparent),transparent 70%),
  linear-gradient(180deg,transparent 74%,color-mix(in srgb,var(--accent,#ffcb2c) 13%,transparent))}
/* warm sunlight sweep instead of cold floodlight */
body.theme-trionda #lightSweep .beam{background:linear-gradient(90deg,transparent,rgba(255,225,150,.07) 30%,rgba(255,235,180,.13) 50%,rgba(255,225,150,.07) 70%,transparent)}
/* fun: every panel title carries the tri-colour ribbon */
body.theme-trionda .panel h3{position:relative;padding-bottom:10px}
body.theme-trionda .panel h3::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--red,#e4002b) 0 33%,var(--gold,#ffcb2c) 33% 66%,var(--green,#16c878) 66% 100%)}
/* nav: active tab = trophy gold with the tri-ribbon underline */
body.theme-trionda .navbtn.active{background:linear-gradient(180deg,rgba(255,203,44,.28),rgba(255,150,40,.14));
  border-color:rgba(255,203,44,.7);color:#fff;box-shadow:0 0 12px rgba(255,203,44,.2)}
body.theme-trionda .navbtn.active::after{background:linear-gradient(90deg,var(--red,#e4002b),var(--gold,#ffcb2c) 50%,var(--green,#16c878))}
/* tabs & chips pick up gold instead of cyan */
body.theme-trionda .grp-tab.active,body.theme-trionda .subtab.active{background:linear-gradient(180deg,rgba(255,203,44,.26),rgba(43,111,255,.14));
  border-color:rgba(255,203,44,.6);box-shadow:0 0 12px rgba(255,203,44,.18)}
/* scrollbar joins the party */
body.theme-trionda ::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold,#ffcb2c),var(--red,#e4002b) 50%,var(--blue,#2b6fff))}
/* kof tie cards on the bright base: crisper panels, gold winner pops harder */
body.theme-trionda .kof-tie{--c1:rgba(255,203,44,.4);--c2:rgba(255,203,44,.08)}
body.theme-trionda .kf-x{color:var(--gold,#ffcb2c);text-shadow:0 0 10px rgba(255,203,44,.5)}
/* prediction hero: blue-day sky version, not the dark vault */
body.theme-trionda .pred-hero{background:
  radial-gradient(90% 120% at 50% -20%,rgba(255,203,44,.32),transparent 60%),
  linear-gradient(165deg,#1b4494,#132f6c 70%);border-color:rgba(255,203,44,.5)}
/* empty states & mutes read friendlier on blue */
body.theme-trionda .empty{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);color:#c9d8f4}
body.theme-trionda{--mute:#a9bce4;--line:rgba(160,190,255,.22);--line2:rgba(160,190,255,.36)}

/* ===== STADIUM LIGHT SWEEP — a floodlight brushing the page every ~40s ===== */
#lightSweep{position:fixed;inset:0;z-index:24;pointer-events:none;overflow:hidden;mix-blend-mode:screen;
  opacity:0;transition:opacity 1.2s ease}
body.docked #lightSweep{opacity:1}
#lightSweep .beam{position:absolute;top:-60%;left:0;width:34vmax;height:220%;
  transform:rotate(22deg) translateX(-120vw);
  background:linear-gradient(90deg,transparent,rgba(255,240,200,.05) 30%,rgba(255,244,214,.1) 50%,rgba(255,240,200,.05) 70%,transparent);
  animation:beamCross 41s linear infinite;will-change:transform}
#lightSweep .beam.b2{animation-delay:19s;width:18vmax;
  background:linear-gradient(90deg,transparent,rgba(180,215,255,.04) 35%,rgba(200,225,255,.07) 50%,rgba(180,215,255,.04) 65%,transparent)}
@keyframes beamCross{0%{transform:rotate(22deg) translateX(-120vw)}
  12%{transform:rotate(22deg) translateX(130vw)}100%{transform:rotate(22deg) translateX(130vw)}}
body.calm #lightSweep,body.lowfx #lightSweep{display:none}

/* ===== SECTION ACCENT WASH — each page bleeds its colour in from the edges ===== */
#accentWash{position:fixed;inset:0;z-index:12;pointer-events:none;opacity:0;transition:opacity 1.4s ease;
  background:
    radial-gradient(52% 70% at 0% 62%,color-mix(in srgb,var(--accent,#ffc83a) 13%,transparent),transparent 70%),
    radial-gradient(46% 60% at 100% 30%,color-mix(in srgb,var(--accent,#ffc83a) 9%,transparent),transparent 70%),
    linear-gradient(180deg,transparent 76%,color-mix(in srgb,var(--accent,#ffc83a) 8%,transparent))}
body.docked #accentWash{opacity:1}
body.calm #accentWash{opacity:.5}

/* ===== LEADER ROW — light on silverware (the one resting glow that earns it) ===== */
.stbl tr.lead td{
  background:linear-gradient(110deg,transparent 24%,rgba(255,231,160,.16) 50%,transparent 76%),
    linear-gradient(90deg,rgba(255,201,77,.16),rgba(255,201,77,.03));
  background-size:240% 100%,100% 100%;background-position:130% 0,0 0;
  animation:leadSheen 7.5s ease-in-out infinite}
@keyframes leadSheen{0%,55%{background-position:130% 0,0 0}80%,100%{background-position:-140% 0,0 0}}
body.calm .stbl tr.lead td{animation:none}

/* ===== LIVING CARDS ===== */
/* in a live match right now — gold heartbeat, the card is ON the pitch */
.futcard.inlive{--teamcol:#ffc83a}
.futcard.inlive::after{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;z-index:5;
  border:2px solid rgba(255,206,90,.85);box-shadow:0 0 22px rgba(255,201,77,.5),inset 0 0 18px rgba(255,201,77,.14);
  animation:liveBeat 1.6s ease-in-out infinite}
@keyframes liveBeat{0%,100%{opacity:.55;transform:scale(1)}12%{opacity:1;transform:scale(1.012)}
  24%{opacity:.7;transform:scale(1)}36%{opacity:1;transform:scale(1.008)}}
.futcard.inlive .fc-banner span{color:#ffce5a!important;text-shadow:0 0 12px rgba(255,201,77,.6);
  animation:wnPulse 1.2s infinite}
/* knocked out — the colour drains, the card goes quiet */
.futcard.koout{filter:grayscale(.85) brightness(.62) contrast(.94)}
.futcard.koout:hover{filter:grayscale(.55) brightness(.78)}
.futcard.koout .fc-holo,.futcard.koout .fc-shine,.futcard.koout .fc-aura{display:none}
.futcard.koout .fc-banner span{color:#8d97ad!important;letter-spacing:.3em}
/* climbed the table since your last visit — one-shot level-up shimmer */
.futcard.lvlup .fc-inner::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.05) 42%,rgba(255,231,160,.5) 50%,rgba(255,255,255,.05) 58%,transparent 70%);
  background-size:260% 100%;background-position:140% 0;border-radius:inherit;mix-blend-mode:screen;
  animation:lvlSweep 1.5s .45s ease-out 2 both}
.futcard.lvlup{animation:lvlGlow 3.6s ease-out both}
@keyframes lvlSweep{from{background-position:140% 0}to{background-position:-150% 0}}
@keyframes lvlGlow{0%,70%{box-shadow:0 0 0 rgba(255,201,77,0)}18%{box-shadow:0 0 34px rgba(255,201,77,.55)}
  100%{box-shadow:0 0 0 rgba(255,201,77,0)}}
body.calm .futcard.inlive::after,body.calm .futcard.lvlup .fc-inner::after,body.calm .futcard.lvlup{animation:none}

/* ===== KINETIC SCORE SLAM — every visible score jolts when a goal lands ===== */
.cine-slam{animation:scoreSlam .55s var(--ease-snap) both!important}
@keyframes scoreSlam{0%{transform:scale(1)}22%{transform:scale(1.42) skewX(-6deg);
  text-shadow:2px 0 0 rgba(46,139,255,.75),-2px 0 0 rgba(255,50,87,.75)}
  55%{transform:scale(.96) skewX(2deg)}100%{transform:scale(1);text-shadow:none}}
body.calm .cine-slam{animation:none!important}

/* ============================================================
   ANIME DASH WIPE — a striker drags the next page across the screen
   ============================================================ */
/* PERF NOTE: everything in the wipe animates TRANSFORM/OPACITY only — no background-position
   animations, no filter:blur on moving layers. The whole overlay is one composited pass. */
#dashWipe{position:fixed;inset:0;z-index:9300;pointer-events:none;display:none;overflow:hidden;contain:strict}
#dashWipe.on{display:block}
.dw-curtain{position:absolute;top:0;bottom:0;left:-14vw;width:128vw;will-change:transform;overflow:hidden;
  transform:translate3d(-132vw,0,0);
  background:
    repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,255,255,.028) 46px 48px),
    /* GLASS PASS (owner call 2026-07-07): the kicked-ball wipe is now a translucent tinted
       sheet — the next page ghosts through it instead of a full-colour blackout */
    linear-gradient(104deg,rgba(5,7,15,.58) 0%,color-mix(in srgb,var(--accent,#ffc83a) 26%,transparent) 55%,color-mix(in srgb,var(--accent,#ffc83a) 40%,transparent) 86%,transparent 100%)}
/* leading edge: hard slash of accent + white core, like a dash panel in a manga frame */
.dw-curtain::after{content:"";position:absolute;top:0;bottom:0;right:9.4vw;width:1.6vw;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent,#ffc83a) 80%,#fff),#fff 48%,color-mix(in srgb,var(--accent,#ffc83a) 80%,#fff));
  box-shadow:0 0 34px color-mix(in srgb,var(--accent,#ffc83a) 70%,transparent);transform:skewX(-8deg)}
#dashWipe .dw-curtain{transition:transform .42s cubic-bezier(.55,0,.6,.4)}
#dashWipe.cover .dw-curtain{transform:translate3d(0,0,0)}
#dashWipe.reveal .dw-curtain{transition:transform .46s cubic-bezier(.3,.6,.3,1);transform:translate3d(132vw,0,0)}
/* speed lines: a double-width static layer scrolled by TRANSFORM (GPU), not background-position */
.dw-lines{position:absolute;top:0;bottom:0;left:0;width:200%;opacity:.5;will-change:transform;
  background:repeating-linear-gradient(98deg,transparent 0 9vw,rgba(255,255,255,.14) 9vw calc(9vw + 2px),transparent calc(9vw + 2px) 14vw);
  animation:dwLines .55s linear infinite}
@keyframes dwLines{from{transform:translate3d(0,0,0)}to{transform:translate3d(-14vw,0,0)}}
/* the runner — rides the curtain's leading edge, ghost trail behind him */
.dw-run{position:absolute;right:2vw;bottom:0;height:min(74vh,620px);aspect-ratio:3/4;display:flex;align-items:flex-end}
.dw-run img{position:absolute;inset:auto 0 0 0;height:100%;width:100%;object-fit:contain;object-position:bottom center;
  transform:rotate(6deg);filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.dw-run img.g1{opacity:.34;translate:-4.2vw 0;filter:blur(2px) brightness(1.6) drop-shadow(0 0 18px color-mix(in srgb,var(--accent,#ffc83a) 80%,transparent))}
.dw-run img.g2{opacity:.16;translate:-8.6vw 0;filter:blur(5px) brightness(2.2)}
.dw-run img.main{animation:dwBob .16s ease-in-out infinite alternate}
@keyframes dwBob{from{transform:rotate(6deg) translateY(0)}to{transform:rotate(7deg) translateY(-2.2vh)}}
/* runner VIDEO (assets/video/runner.webm, alpha webm) — rides the leading edge */
.dw-vid{position:absolute;inset:auto 0 0 0;height:100%;width:100%;object-fit:contain;object-position:bottom center;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.6)) drop-shadow(0 0 24px color-mix(in srgb,var(--accent,#ffc83a) 55%,transparent))}
/* default mode: a blazing comet ball does the dragging (no cut-outs).
   The IMG spins; the flame trail sits on the container so it stays horizontal. */
.dw-ball{position:absolute;right:-3vw;bottom:7vh;width:min(15vh,120px);height:min(15vh,120px)}
.dw-ball::before{content:"";position:absolute;top:14%;right:60%;width:38vw;height:72%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent,#ffc83a) 55%,transparent),transparent 78%);
  animation:dwTrail .4s linear infinite;will-change:opacity}
.dw-ball img{width:100%;height:100%;animation:dwSpin .4s linear infinite;
  filter:drop-shadow(0 0 30px color-mix(in srgb,var(--accent,#ffc83a) 85%,transparent)) drop-shadow(0 10px 16px rgba(0,0,0,.5))}
@keyframes dwSpin{to{transform:rotate(360deg)}}
@keyframes dwTrail{0%,100%{opacity:.75}50%{opacity:1}}
#dashWipe.ballmode .dw-ball{bottom:12vh;right:-2vw}

/* ============================================================
   KNOCKOUT — ROUND FOCUS THEATRE (no horizontal scrolling)
   ============================================================ */
.ko-map{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:10px 14px;border-radius:10px;
  background:rgba(255,255,255,.025);border:1px solid var(--line,rgba(120,150,210,.16))}
.ko-mapcol{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 10px;border:1px solid transparent;
  border-radius:8px;background:none;cursor:pointer;transition:.2s}
.ko-mapcol:hover{background:rgba(255,255,255,.05)}
.ko-mapcol.active{border-color:rgba(255,206,90,.5);background:rgba(255,206,90,.08)}
.ko-mapl{font-family:var(--body,'Oswald',sans-serif);font-size:9px;letter-spacing:.18em;color:var(--mute,#8694b8)}
.ko-mapcol.active .ko-mapl{color:#ffce5a}
.ko-pips{display:flex;gap:3px;max-width:120px;flex-wrap:wrap;justify-content:center}
.ko-pips i{width:7px;height:7px;border-radius:2px;background:rgba(255,255,255,.14)}
.ko-pips i.done{background:var(--gold,#ffc83a);box-shadow:0 0 6px rgba(255,201,77,.5)}
.ko-pips i.live{background:var(--green,#1ee98a);animation:wnPulse 1.2s infinite}
.ko-maptr{margin-left:auto;color:var(--gold,#ffc83a);opacity:.4;font-size:20px}
.ko-maptr.won{opacity:1;filter:drop-shadow(0 0 12px rgba(255,201,77,.7));animation:float 3s ease-in-out infinite}
.kof-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.kof-tab{position:relative;display:inline-flex;align-items:baseline;gap:8px;padding:10px 18px;cursor:pointer;transition:.2s;
  font-family:var(--disp,'Teko',sans-serif);color:#c2cbe6;background:rgba(255,255,255,.03);border:1px solid var(--line,rgba(120,150,210,.16));
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.kof-tab b{font-size:20px;font-weight:600;letter-spacing:.04em}
.kof-tab span{font-size:11px;color:var(--mute,#8694b8);letter-spacing:.1em}
.kof-tab:hover{color:#fff;border-color:var(--line2,rgba(120,150,210,.28));transform:translateY(-2px)}
.kof-tab.active{color:#fff;background:linear-gradient(180deg,rgba(255,206,90,.2),rgba(255,150,40,.1));border-color:rgba(255,206,90,.6)}
.kof-tab.active span{color:#ffce5a}
.kof-tab .kof-now{position:absolute;top:-7px;right:6px;font-family:var(--body,'Oswald',sans-serif);font-size:8px;font-weight:700;
  letter-spacing:.14em;color:#04110a;background:var(--green,#1ee98a);border-radius:3px;padding:1px 6px;animation:wnPulse 1.6s infinite}
.kof-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(430px,100%),1fr));gap:14px}
.kof-grid.one{grid-template-columns:minmax(0,560px);justify-content:center}
.kof-tie{padding:14px 16px;--c1:rgba(120,150,210,.26);--c2:rgba(120,150,210,.05);
  animation:rise .5s var(--ease-drift) both;transition:transform .2s,box-shadow .2s}
.kof-tie.tappable{cursor:pointer}
.kof-tie.tappable:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.45);--c1:rgba(25,224,255,.55)}
.kof-tie.goldtie{--c1:rgba(255,206,90,.6);--c2:rgba(255,206,90,.12)}
.kof-tie.islive{--c1:rgba(30,233,138,.65);box-shadow:0 0 24px rgba(30,233,138,.12)}
.kf-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-family:var(--body,'Oswald',sans-serif);
  font-size:10px;letter-spacing:.18em;color:var(--mute,#8694b8);text-transform:uppercase}
.kf-live{color:var(--green,#1ee98a);font-weight:700;animation:wnPulse 1.2s infinite}
.kf-ft{color:#ffce5a}.kf-when{margin-left:auto}
.kf-ft,.kf-live{margin-left:auto}
.kf-upset{color:#ffce5a;background:rgba(255,206,90,.12);border:1px solid rgba(255,206,90,.4);border-radius:3px;padding:2px 7px}
.kf-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.kfs{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 10px;border-radius:9px;
  background:color-mix(in srgb,var(--pc,#19e0ff) 7%,transparent);border:1px solid color-mix(in srgb,var(--pc,#19e0ff) 22%,transparent)}
.kfs .kf-facewrap .face{width:44px;height:44px;border:2px solid var(--pc,#19e0ff)}
.kf-id{min-width:0;flex:1}
.kf-nm{display:block;font-family:var(--disp,'Teko',sans-serif);font-size:19px;line-height:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf-aka{display:block;font-size:9px;letter-spacing:.16em;color:color-mix(in srgb,var(--pc,#19e0ff) 70%,#fff);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf-sc{font-family:var(--disp,'Teko',sans-serif);font-size:27px;font-weight:600;color:#fff;flex:0 0 auto}
.kfs.win{background:linear-gradient(90deg,rgba(255,206,90,.16),color-mix(in srgb,var(--pc,#19e0ff) 8%,transparent));
  border-color:rgba(255,206,90,.55)}
.kfs.win .kf-sc{color:#ffce5a;text-shadow:0 0 14px rgba(255,201,77,.5)}
.kfs.lose{opacity:.55;filter:saturate(.6)}
.kf-x{font-family:var(--disp,'Anton',sans-serif);font-size:15px;color:var(--magenta,#ff2748);text-shadow:0 0 10px rgba(255,45,90,.5)}
@media(max-width:560px){
  .kf-vs{grid-template-columns:1fr;gap:6px}
  .kf-x{display:none}
  .kfs.b{flex-direction:row}
}

/* ============================================================
   ANNOUNCEMENT BAR — the office megaphone
   ============================================================ */
#announceBar{position:fixed;left:50%;top:calc(var(--hh,104px) + 8px);translate:-50% 0;z-index:29;display:none;
  align-items:center;gap:12px;width:min(94vw,760px);padding:11px 16px;border-radius:12px;cursor:default;
  font-family:var(--body,'Oswald',sans-serif);font-size:14px;font-weight:500;letter-spacing:.03em;color:#241500;
  background:linear-gradient(100deg,#ffe27a,#ffc83a 55%,#ff9d2a);border:1px solid rgba(255,255,255,.5);
  box-shadow:0 14px 44px rgba(0,0,0,.5),0 0 34px rgba(255,201,77,.35);animation:annIn .6s var(--ease-snap) both}
#announceBar.on{display:flex}
@keyframes annIn{0%{opacity:0;translate:-50% -26px}100%{opacity:1;translate:-50% 0}}
#announceBar .ann-ic{font-size:20px;flex:0 0 auto;animation:annRing 2.4s ease-in-out infinite}
@keyframes annRing{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(-14deg)}92%{transform:rotate(11deg)}96%{transform:rotate(-7deg)}}
#announceBar .ann-tx{flex:1;min-width:0}
#announceBar .ann-x{flex:0 0 auto;width:26px;height:26px;border:0;border-radius:50%;cursor:pointer;font-size:12px;
  background:rgba(0,0,0,.18);color:#241500;display:flex;align-items:center;justify-content:center;transition:.2s}
#announceBar .ann-x:hover{background:rgba(0,0,0,.35);color:#fff}
body.calm #announceBar{animation:none}
body.calm #announceBar .ann-ic{animation:none}

/* ============================================================
   PREDICTIONS SECTION — identity gate + teaser CTA
   ============================================================ */
.btn.gold{color:#241500;background:linear-gradient(180deg,#ffd24d,#e79a12);border-color:rgba(255,210,77,.7);font-weight:600}
.btn.gold:hover{background:linear-gradient(180deg,#ffe27a,#f0a81e);color:#241500}
.pred-id-gate .pred-id-row{display:flex;gap:10px;flex-wrap:wrap}
.pred-id-gate input{flex:1;min-width:220px;font-family:var(--body,'Oswald',sans-serif);font-size:15px;letter-spacing:.04em;
  color:#fff;background:rgba(0,0,0,.45);border:1px solid rgba(255,206,90,.4);border-radius:6px;padding:12px 15px;outline:none}
.pred-id-gate input:focus{border-color:#ffce5a;box-shadow:0 0 16px rgba(255,206,90,.25)}
.pred-id{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:10px 15px;border-radius:8px;
  font-family:var(--body,'Oswald',sans-serif);font-size:13px;letter-spacing:.05em;color:#e9efff;
  background:rgba(30,233,138,.08);border:1px solid rgba(30,233,138,.35)}
.pred-id .pid-ok{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(30,233,138,.2);color:var(--green,#1ee98a);font-size:12px;flex:0 0 auto}
.pred-id b{color:#fff}
.pred-id .btn{margin-left:auto}
.pred-progress{margin-left:auto;font-family:var(--body,'Oswald',sans-serif);font-size:11px;letter-spacing:.14em;
  color:#ffce5a;background:rgba(255,206,90,.1);border:1px solid rgba(255,206,90,.3);border-radius:4px;padding:4px 10px}
/* teaser on the Knockout page */
.predict-cta{display:flex;align-items:center;gap:16px;cursor:pointer;transition:.2s;--c1:rgba(255,206,90,.45)}
.predict-cta:hover{transform:translateY(-2px);--c1:rgba(255,206,90,.8)}
.predict-cta .pcta-ic{width:46px;height:46px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:22px;
  color:#ffce5a;background:rgba(255,206,90,.12);border:1px solid rgba(255,206,90,.4);border-radius:11px}
.predict-cta .pcta-tx{flex:1;min-width:0}
.predict-cta .pcta-tx b{display:block;font-family:var(--disp,'Teko',sans-serif);font-size:22px;letter-spacing:.03em;color:#fff}
.predict-cta .pcta-tx span{font-size:12px;color:var(--mute,#8694b8);letter-spacing:.04em}
@media(max-width:560px){.predict-cta{flex-wrap:wrap}.predict-cta .btn{width:100%;justify-content:center}}
/* --- HYPE HERO --- */
.pred-hero{position:relative;overflow:hidden;text-align:center;padding:34px 20px 30px;margin-bottom:16px;border-radius:10px;
  background:radial-gradient(90% 120% at 50% -20%,rgba(255,206,90,.24),transparent 60%),linear-gradient(165deg,#141007,#0a0810 70%);
  border:1px solid rgba(255,206,90,.3)}
.pred-hero .ph-lines{position:absolute;inset:-30%;opacity:.12;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% -10%,rgba(255,220,140,.8) 0 1.2deg,transparent 1.2deg 8deg)}
.ph-kick{font-family:var(--body,'Oswald',sans-serif);font-size:clamp(9px,1.2vw,12px);font-weight:600;letter-spacing:.5em;color:#ffce5a;margin-bottom:8px}
.ph-big{font-family:var(--disp,'Teko',sans-serif);font-weight:700;font-size:clamp(42px,7.5vw,84px);line-height:.85;letter-spacing:.01em;
  background:linear-gradient(180deg,#fff 20%,#ffe9aa 60%,#ff9d2a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 22px rgba(255,180,60,.25))}
.ph-big i{font-style:normal;-webkit-text-fill-color:initial;background:linear-gradient(180deg,#7db8ff,#2e8bff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ph-rule{margin-top:10px;font-family:var(--body,'Oswald',sans-serif);font-size:clamp(11px,1.4vw,14px);letter-spacing:.1em;color:#c8d2ea;text-transform:uppercase}
.ph-rule b{color:#ffce5a}
/* --- tie rows v2: faces + share meters + call stamps --- */
.pt-r.v2{display:flex;align-items:center;gap:10px}
.pt-face .face{width:32px;height:32px}
.pt-r.v2 .pt-nm{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-meter{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden;min-width:40px}
.pt-meter i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--cyan,#2e8bff),#7db8ff);transition:width .6s var(--ease-drift)}
.pt-r.v2.mine .pt-meter i{background:linear-gradient(90deg,#ffce5a,#ff9d2a)}
.pt-lock{flex:0 0 auto;font-size:8px;font-weight:700;letter-spacing:.14em;color:#241500;background:#ffce5a;border-radius:3px;padding:2px 6px}
.pt-hit{flex:0 0 auto;font-size:10px;font-weight:700;color:var(--green,#1ee98a)}
.pt-r.v2.missed{opacity:.5}
.predtie.settled{opacity:.85}
/* --- oracle board rows --- */
.pl-row.v2{display:flex;align-items:center;gap:10px}
.pl-row.v2 .plr-picks{margin-left:auto;font-size:10px;letter-spacing:.1em;color:var(--mute,#8694b8);
  background:rgba(255,255,255,.05);border-radius:4px;padding:3px 8px;flex:0 0 auto}
.pl-row.v2 .plr-sc{flex:0 0 auto;font-family:var(--disp,'Teko',sans-serif);font-size:21px;color:#ffce5a}
.pl-row.v2 .plr-sc i{font-style:normal;font-size:10px;opacity:.7;margin-left:3px}

/* ============================================================
   BLUE LOCK FACE-OFF v2 — a directed pre-match SCENE (T-60 min)
   Shot list: blackout heartbeat → striker A reveal (zoom-lines,
   silhouette→light, aura, camera push, plate slam) → hard cut →
   striker B reveal → collision cut (shockwave, VS, quake) → hold.
   JS drives phases via .ph0/.ph1/.ph2/.ph3 on #faceoff.
   ============================================================ */
#faceoff{position:fixed;inset:0;z-index:9250;display:none;overflow:hidden;cursor:pointer;
  background:#02030a;opacity:0;transition:opacity .4s ease}
#faceoff.on{display:block;opacity:1}
#faceoff.out{opacity:0}
#faceoff *{pointer-events:none}
.fo2-vig{position:absolute;inset:0;z-index:7;
  background:radial-gradient(88% 72% at 50% 46%,transparent 42%,rgba(0,0,5,.78) 100%)}

/* --- radial manga zoom-lines, converging on the fighter --- */
.fo2-lines{position:absolute;inset:-24%;z-index:1;opacity:0;transition:opacity .4s;
  background:repeating-conic-gradient(from 0deg at 50% 46%,rgba(255,255,255,.13) 0 1.1deg,transparent 1.1deg 6.6deg);
  -webkit-mask:radial-gradient(circle at 50% 46%,transparent 24%,#000 62%);
  mask:radial-gradient(circle at 50% 46%,transparent 24%,#000 62%);
  animation:fo2Spin 14s linear infinite,fo2Throb .5s ease-in-out infinite alternate}
@keyframes fo2Spin{to{transform:rotate(14deg)}}
@keyframes fo2Throb{from{scale:1}to{scale:1.045}}

/* --- phase 0: blackout + heartbeat glow --- */
.fo2-heart{position:absolute;left:50%;top:46%;translate:-50% -50%;z-index:2;width:44vmin;height:44vmin;border-radius:50%;
  background:radial-gradient(circle,rgba(255,60,90,.2),transparent 62%);opacity:0}
#faceoff.ph0 .fo2-heart{opacity:1;animation:fo2Beat .7s ease-out 2}
@keyframes fo2Beat{0%{scale:.62;opacity:.25}18%{scale:1.06;opacity:1}100%{scale:.86;opacity:.35}}
.fo2-kick{position:absolute;left:50%;top:12vh;translate:-50% 0;z-index:8;font-family:var(--body,'Oswald',sans-serif);
  font-weight:600;font-size:clamp(10px,1.5vw,15px);letter-spacing:.6em;color:#ffd98a;text-transform:uppercase;
  opacity:0;transition:opacity .6s}
#faceoff.ph0 .fo2-kick,#faceoff.ph1 .fo2-kick,#faceoff.ph2 .fo2-kick{opacity:.95}

/* --- solo reveal scenes --- */
.fo2-scene{position:absolute;inset:0;z-index:3;opacity:0;visibility:hidden}
#faceoff.ph1 .fo2-scene.sa,#faceoff.ph2 .fo2-scene.sb{opacity:1;visibility:visible}
#faceoff.ph1 .fo2-lines,#faceoff.ph2 .fo2-lines{opacity:1}
#faceoff.ph2 .fo2-lines{animation-direction:reverse,normal}
.fo2-scene .fo2-wash{position:absolute;inset:0}
.fo2-scene.sa .fo2-wash{background:radial-gradient(70% 62% at 50% 52%,rgba(37,110,255,.3),transparent 72%),linear-gradient(180deg,#020614 0%,#04122e 60%,#02030a)}
.fo2-scene.sb .fo2-wash{background:radial-gradient(70% 62% at 50% 52%,rgba(255,45,80,.28),transparent 72%),linear-gradient(180deg,#120207 0%,#2c0512 60%,#02030a)}
/* flame-flicker aura behind the figure */
.fo2-aura{position:absolute;left:50%;bottom:-6vh;translate:-50% 0;width:64vmin;height:86vmin;
  filter:blur(26px);opacity:.8;animation:fo2Aura .42s steps(3,end) infinite alternate}
.fo2-scene.sa .fo2-aura{background:radial-gradient(46% 60% at 50% 66%,rgba(60,140,255,.5),transparent 70%),radial-gradient(30% 44% at 44% 40%,rgba(140,220,255,.32),transparent 70%)}
.fo2-scene.sb .fo2-aura{background:radial-gradient(46% 60% at 50% 66%,rgba(255,60,90,.5),transparent 70%),radial-gradient(30% 44% at 56% 40%,rgba(255,150,120,.3),transparent 70%)}
@keyframes fo2Aura{from{scale:1 1;opacity:.62}to{scale:1.07 .96;opacity:.95}}
/* the fighter: silhouette first, then LIT — with a slow camera push-in the whole shot */
.fo2-cam{position:absolute;inset:0;will-change:transform}
#faceoff.ph1 .sa .fo2-cam,#faceoff.ph2 .sb .fo2-cam{animation:fo2Push 3.4s var(--ease-drift) both}
@keyframes fo2Push{from{transform:scale(1.02) translateY(1.4vh)}to{transform:scale(1.17) translateY(-1.6vh)}}
.fo2-fig{position:absolute;left:50%;bottom:0;translate:-50% 0;height:min(86vh,900px);width:74vw;
  background-size:contain;background-repeat:no-repeat;background-position:bottom center;
  filter:brightness(0) contrast(1.15) drop-shadow(0 0 26px rgba(0,0,0,.9));
  transition:filter .55s ease}
.fo2-scene.lit .fo2-fig{filter:brightness(1.04) contrast(1.06) saturate(1.12) drop-shadow(0 24px 46px rgba(0,0,0,.65))}
.fo2-scene.sa.lit .fo2-fig{filter:brightness(1.04) contrast(1.06) saturate(1.12) drop-shadow(0 0 34px rgba(60,140,255,.4)) drop-shadow(0 24px 46px rgba(0,0,0,.65))}
.fo2-scene.sb.lit .fo2-fig{filter:brightness(1.04) contrast(1.06) saturate(1.12) drop-shadow(0 0 34px rgba(255,60,90,.4)) drop-shadow(0 24px 46px rgba(0,0,0,.65))}
.fo2-fig .fo2-ini{position:absolute;inset:auto 0 8vh 0;text-align:center;font-family:var(--disp,'Teko',sans-serif);
  font-size:34vh;line-height:.8;color:#fff;opacity:.26}
/* rising ember particles (JS scatters them) */
.fo2-part{position:absolute;bottom:-3vh;width:5px;height:5px;border-radius:50%;opacity:0;
  animation:fo2Rise 2s linear infinite}
.fo2-scene.sa .fo2-part{background:#7db8ff;box-shadow:0 0 8px #4da3ff}
.fo2-scene.sb .fo2-part{background:#ff8ba0;box-shadow:0 0 8px #ff5d7e}
@keyframes fo2Rise{0%{transform:translateY(0);opacity:0}12%{opacity:.9}100%{transform:translateY(-76vh) translateX(var(--fo2dx,0));opacity:0}}
/* nameplate: slams in on the impact frame, letters ride a skew */
.fo2-plate{position:absolute;z-index:6;top:14vh;font-family:var(--disp,'Teko',sans-serif);text-transform:uppercase;
  color:#fff;line-height:.86;font-size:clamp(44px,8.6vw,120px);letter-spacing:.02em;
  opacity:0;transform:translateX(-14vw) skewX(-8deg) scale(1.5)}
.fo2-scene.sa .fo2-plate{left:6vw;text-shadow:0 0 34px rgba(60,140,255,.6),4px 4px 0 #0a2f6b}
.fo2-scene.sb .fo2-plate{right:6vw;text-align:right;transform:translateX(14vw) skewX(-8deg) scale(1.5);
  text-shadow:0 0 34px rgba(255,60,90,.6),4px 4px 0 #6b0a20}
.fo2-scene.named .fo2-plate{animation:fo2Plate .38s var(--ease-snap) both}
@keyframes fo2Plate{0%{opacity:0}100%{opacity:1;transform:translateX(0) skewX(-8deg) scale(1)}}
.fo2-plate .fo2-aka{display:block;font-family:var(--body,'Oswald',sans-serif);font-weight:600;
  font-size:clamp(12px,1.6vw,18px);letter-spacing:.42em;color:#ffd98a;margin-top:1vh;text-shadow:none}
.fo2-plate .fo2-tag{display:inline-block;font-size:clamp(11px,1.3vw,15px);font-family:var(--body,'Oswald',sans-serif);
  font-weight:500;letter-spacing:.24em;color:#cfe2ff;margin-top:1vh;padding:4px 14px;text-shadow:none;
  border:1px solid rgba(255,255,255,.25);background:rgba(0,0,10,.45);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}

/* --- phase 3: the collision --- */
.fo2-clash{position:absolute;inset:0;z-index:4;opacity:0;visibility:hidden}
#faceoff.ph3 .fo2-clash{opacity:1;visibility:visible}
.fo2-half{position:absolute;top:0;bottom:0;width:62%}
.fo2-half.a{left:0;clip-path:polygon(0 0,100% 0,80% 100%,0 100%);
  background:radial-gradient(90% 80% at 26% 42%,rgba(46,139,255,.4),transparent 70%),linear-gradient(118deg,#071427 30%,#0a1e3f 70%,#02030a);
  transform:translateX(-102%)}
.fo2-half.b{right:0;clip-path:polygon(20% 0,100% 0,100% 100%,0 100%);
  background:radial-gradient(90% 80% at 74% 42%,rgba(255,50,87,.38),transparent 70%),linear-gradient(-118deg,#210710 30%,#3d0a18 70%,#02030a);
  transform:translateX(102%)}
#faceoff.ph3 .fo2-half{transform:translateX(0);transition:transform .34s cubic-bezier(.6,0,.2,1)}
.fo2-half::after{content:"";position:absolute;inset:-20%;opacity:.2;
  background:repeating-linear-gradient(112deg,transparent 0 42px,rgba(255,255,255,.15) 42px 44px);
  animation:fo2Rake 1s linear infinite}
.fo2-half.b::after{background:repeating-linear-gradient(-112deg,transparent 0 42px,rgba(255,255,255,.13) 42px 44px)}
@keyframes fo2Rake{from{background-position:0 0}to{background-position:120px 0}}
.fo2-cfig{position:absolute;bottom:0;height:min(80vh,800px);width:44vw;z-index:2;
  background-size:contain;background-repeat:no-repeat;background-position:bottom center;opacity:0}
.fo2-cfig.a{left:1vw;transform:translateX(-40%);filter:drop-shadow(0 0 28px rgba(46,139,255,.45)) drop-shadow(0 24px 44px rgba(0,0,0,.65))}
.fo2-cfig.b{right:1vw;transform:translateX(40%);filter:drop-shadow(0 0 28px rgba(255,50,87,.45)) drop-shadow(0 24px 44px rgba(0,0,0,.65))}
#faceoff.ph3 .fo2-cfig{opacity:1;transform:translateX(0);transition:transform .34s .05s cubic-bezier(.6,0,.2,1),opacity .2s .05s}
.fo2-cfig .fo2-ini{position:absolute;inset:auto 0 6vh 0;text-align:center;font-family:var(--disp,'Teko',sans-serif);font-size:28vh;line-height:.8;color:#fff;opacity:.3}
.fo2-seam{position:absolute;left:50%;top:-10%;bottom:-10%;width:3px;translate:-50% 0;z-index:3;transform:skewX(-11deg);
  background:linear-gradient(180deg,transparent,#fff 22%,#fff 78%,transparent);
  box-shadow:0 0 34px rgba(255,255,255,.85),0 0 90px rgba(168,85,255,.5);opacity:0}
#faceoff.ph3 .fo2-seam{animation:fo2Seam .4s .3s var(--ease-snap) both}
@keyframes fo2Seam{0%{opacity:0;transform:skewX(-11deg) scaleY(0)}100%{opacity:1;transform:skewX(-11deg) scaleY(1)}}
/* shockwave rings from the collision point */
.fo2-shock{position:absolute;left:50%;top:44%;translate:-50% -50%;z-index:5;width:14vmin;height:14vmin;border-radius:50%;
  border:3px solid rgba(255,255,255,.9);opacity:0}
#faceoff.ph3 .fo2-shock{animation:fo2Shock .8s .34s ease-out both}
#faceoff.ph3 .fo2-shock.s2{animation-delay:.46s;border-color:rgba(255,201,77,.8)}
@keyframes fo2Shock{0%{opacity:.95;scale:.2}100%{opacity:0;scale:9}}
/* chromatic VS explosion */
.fo2-vs{position:absolute;left:50%;top:42%;translate:-50% -50%;z-index:6;
  font-family:var(--disp,'Anton',sans-serif);font-weight:900;font-size:clamp(90px,17vw,250px);line-height:.85}
.fo2-vs i{font-style:normal;position:absolute;left:0;top:0;opacity:0}
.fo2-vs .c1{color:rgba(46,139,255,.85)}.fo2-vs .c2{color:rgba(255,50,87,.85)}
.fo2-vs .c0{position:relative;background:linear-gradient(180deg,#fff,#ffd98a 55%,#ff9d2a);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 34px rgba(255,201,77,.55))}
#faceoff.ph3 .fo2-vs .c0{animation:fo2Vs .5s .4s var(--ease-snap) both}
#faceoff.ph3 .fo2-vs .c1{animation:fo2VsG .55s .4s ease-out both;--gx:-10px}
#faceoff.ph3 .fo2-vs .c2{animation:fo2VsG .55s .4s ease-out both;--gx:10px}
@keyframes fo2Vs{0%{opacity:0;transform:scale(3.2) rotate(-7deg)}55%{opacity:1;transform:scale(.9) rotate(1.5deg)}100%{opacity:1;transform:scale(1)}}
@keyframes fo2VsG{0%{opacity:0;transform:translateX(calc(var(--gx)*5)) scale(3.2)}55%{opacity:.8;transform:translateX(var(--gx)) scale(.95)}100%{opacity:0;transform:translateX(0) scale(1)}}
/* clash nameplates (small, floating) */
.fo2-cname{position:absolute;top:11vh;z-index:6;font-family:var(--disp,'Teko',sans-serif);text-transform:uppercase;
  padding:6px 24px 4px;font-size:clamp(24px,4vw,48px);line-height:.9;color:#fff;opacity:0;transform:skewX(-6deg)}
.fo2-cname.a{left:4vw;background:linear-gradient(100deg,#0c2a55,#1355b8);clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);border-left:4px solid #4da3ff}
.fo2-cname.b{right:4vw;background:linear-gradient(-100deg,#4a0c1c,#b81338);clip-path:polygon(16px 0,100% 0,100% 100%,0 100%);border-right:4px solid #ff5d7e;text-align:right}
#faceoff.ph3 .fo2-cname{opacity:1;transition:opacity .3s .65s;animation:fo2Float 3s 1s ease-in-out infinite}
@keyframes fo2Float{0%,100%{translate:0 0}50%{translate:0 -10px}}
.fo2-cname .fo2-aka2{display:block;font-size:clamp(10px,1.2vw,14px);letter-spacing:.32em;opacity:.85;font-family:var(--body,'Oswald',sans-serif);font-weight:500}
/* countdown + skip */
.fo2-count{position:absolute;left:50%;top:58%;translate:-50% 0;z-index:6;text-align:center;
  font-family:var(--disp,'Teko',sans-serif);font-size:clamp(20px,3vw,34px);letter-spacing:.18em;color:#fff;opacity:0}
#faceoff.ph3 .fo2-count{opacity:1;transition:opacity .5s .9s}
.fo2-count b{color:#ffce5a;animation:wnPulse 1.6s infinite}
.fo2-skip{position:absolute;bottom:3vh;left:50%;translate:-50% 0;z-index:8;font-size:10px;letter-spacing:.3em;
  color:#93a2c2;text-transform:uppercase;opacity:0;transition:opacity .5s 2s}
#faceoff.ph3 .fo2-skip{opacity:.8}
/* impact frames: hard white / hard black, 3 frames each */
.fo2-impact{position:absolute;inset:0;z-index:9;opacity:0;background:#fff}
.fo2-impact.hit{animation:fo2Hit .14s steps(2,end) both}
.fo2-impact.cut{background:#000;animation:fo2Cut .12s linear both}
@keyframes fo2Hit{0%{opacity:1}100%{opacity:0}}
@keyframes fo2Cut{0%{opacity:1}100%{opacity:1}}
/* scene shake, stronger than body.quake */
#faceoff.shake .fo2-stage{animation:fo2Quake .5s cubic-bezier(.36,.07,.19,.97) both}
.fo2-stage{position:absolute;inset:0}
@keyframes fo2Quake{10%{transform:translate(-8px,5px) rotate(-.5deg)}20%{transform:translate(10px,-7px)}
  32%{transform:translate(-11px,6px) rotate(.6deg)}44%{transform:translate(8px,4px)}
  58%{transform:translate(-6px,-4px) rotate(-.3deg)}72%{transform:translate(4px,3px)}100%{transform:translate(0,0)}}
/* calm mode: single static composition, no violence */
body.calm #faceoff .fo2-lines,body.calm #faceoff .fo2-aura,body.calm #faceoff .fo2-part,
body.calm #faceoff .fo2-half::after,body.calm #faceoff .fo2-shock{display:none}
body.calm #faceoff .fo2-cam,body.calm #faceoff .fo2-plate,body.calm #faceoff .fo2-vs .c0,
body.calm #faceoff .fo2-half,body.calm #faceoff .fo2-cfig{animation-duration:.01s!important;transition-duration:.01s!important}
@media(max-width:760px){
  .fo2-fig{width:96vw;height:min(70vh,640px)}
  .fo2-plate{top:9vh;font-size:clamp(36px,11vw,64px)}
  .fo2-cfig{width:58vw;height:min(60vh,520px)}
  .fo2-cname{top:8vh;font-size:22px;padding:5px 12px 3px}
  .fo2-vs{top:38%}
  .fo2-count{top:54%}
  .dw-run{height:52vh}
}

/* ============================================================
   ORACLE WIN-PROBABILITY BAR (2026-07-07) — on every upcoming
   knockout tie card: a tug-of-war strip in the two players'
   group colours with a glowing orb at the split point.
   ============================================================ */
.kf-wp{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  margin-top:12px;padding-top:11px;border-top:1px dashed rgba(255,255,255,.14)}
.kf-wp-n{font:700 15px/1 Teko,Oswald,sans-serif;letter-spacing:.04em}
.kf-wp-n.a{color:var(--pa,#19e0ff)}
.kf-wp-n.b{color:var(--pb,#ff5ab0)}
.kf-wp-bar{position:relative;height:9px;border-radius:99px;overflow:visible;
  background:linear-gradient(90deg,color-mix(in srgb,var(--pb,#ff5ab0) 55%,#0b1020),color-mix(in srgb,var(--pb,#ff5ab0) 30%,#0b1020))}
.kf-wp-bar i{position:absolute;inset:0 auto 0 0;border-radius:99px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--pa,#19e0ff) 80%,#fff),var(--pa,#19e0ff));
  box-shadow:0 0 12px color-mix(in srgb,var(--pa,#19e0ff) 60%,transparent)}
.kf-wp-orb{position:absolute;top:50%;width:15px;height:15px;border-radius:50%;
  transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#fff,#ffd75e 45%,#c98a12);
  box-shadow:0 0 12px rgba(255,215,94,.9),0 0 26px rgba(255,215,94,.45);
  animation:kfOrb 1.6s ease-in-out infinite}
@keyframes kfOrb{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.22)}}
.kf-wp-fav{grid-column:1/-1;text-align:center;font:600 10.5px/1 Oswald,sans-serif;letter-spacing:.22em;
  color:#ffd75e;opacity:.92;margin-top:2px}
.kf-wp-fav b{color:#fff}
.kf-wp-fav svg{width:11px;height:11px;vertical-align:-1px}
body.calm .kf-wp-orb{animation:none}

/* ============================================================
   SPECIAL-EDITION CARD SKINS (the "living cards" promise) —
   status-driven looks layered over the OVR rarity frame.
   Transform/opacity-only animation; calm mode freezes them.
   ============================================================ */
.fc-ed{position:absolute;left:50%;top:9px;transform:translateX(-50%);z-index:6;white-space:nowrap;
  font:700 9.5px/1 Oswald,sans-serif;letter-spacing:.2em;padding:5px 12px;border-radius:99px;
  color:#181206;background:linear-gradient(90deg,#ffe9a3,#f5b92e);box-shadow:0 2px 12px rgba(0,0,0,.4)}
.fc-ed.ed-flames{color:#fff;background:linear-gradient(90deg,#ff9d2e,#ff3b1e);box-shadow:0 0 16px rgba(255,110,30,.6)}
.fc-ed.ed-totw{color:#eaf4ff;background:linear-gradient(90deg,#123067,#2b6fff);box-shadow:0 0 14px rgba(43,111,255,.55)}
/* ICON EDITION — the table leader: molten gold frame + slow royal shimmer */
.futcard.ed-icon{--teamcol:#ffd75e}
.futcard.ed-icon .fc-inner{box-shadow:inset 0 0 0 2px rgba(255,215,94,.55),inset 0 0 34px rgba(255,203,44,.16)}
.futcard.ed-icon .fc-aura{opacity:1;background:radial-gradient(70% 55% at 50% 12%,rgba(255,215,94,.34),transparent 70%)}
/* ON FIRE — 3+ wins straight: ember rim that breathes */
.futcard.ed-flames .fc-inner{box-shadow:inset 0 0 0 2px rgba(255,190,60,.9),inset 0 -26px 44px rgba(255,80,20,.28)}
.futcard.ed-flames{animation:edFlame 1.5s ease-in-out infinite}
@keyframes edFlame{0%,100%{filter:drop-shadow(0 0 7px rgba(255,120,30,.5))}50%{filter:drop-shadow(0 0 18px rgba(255,150,40,.85))}}
/* TOTW — top MOTM votes: FUT team-of-the-week black & blue */
.futcard.ed-totw .fc-inner{box-shadow:inset 0 0 0 2px rgba(43,111,255,.7),inset 0 0 40px rgba(20,50,140,.5)}
.futcard.ed-totw .fc-top{filter:saturate(1.12)}
body.calm .futcard.ed-flames{animation:none}

/* ============================================================
   MEGA BRACKET + KO MODE TOGGLE (2026-07-08)
   ============================================================ */
.ko-modes{display:flex;gap:8px;margin:0 0 14px}
.ko-modes button{display:flex;align-items:center;gap:7px;cursor:pointer;
  font:600 11px/1 Oswald,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute,#8fa3c8);background:rgba(255,255,255,.04);border:1px solid var(--line,rgba(120,160,255,.25));
  border-radius:99px;padding:10px 18px;transition:.2s}
.ko-modes button svg{width:13px;height:13px}
.ko-modes button.on{color:#fff;border-color:rgba(53,224,255,.7);
  background:linear-gradient(180deg,rgba(53,224,255,.2),rgba(180,91,255,.1));
  box-shadow:0 0 14px rgba(53,224,255,.22)}
/* the arena floor the bracket sits on — deep space glass + faint circuit grid */
.megabk-scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;
  background:
    radial-gradient(90% 70% at 50% 0%,rgba(53,224,255,.09),transparent 70%),
    radial-gradient(70% 60% at 50% 100%,rgba(245,185,46,.07),transparent 65%),
    linear-gradient(rgba(90,150,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(90,150,255,.07) 1px,transparent 1px),
    rgba(4,7,16,.72);
  background-size:auto,auto,52px 52px,52px 52px,auto;
  border:1px solid rgba(90,150,255,.28);box-shadow:inset 0 0 60px rgba(3,6,14,.8),0 10px 40px rgba(0,0,0,.35)}
.megabk-canvas{position:relative;min-width:1680px}
.megabk{display:block;width:100%;height:auto}
@media(max-width:760px){.megabk-canvas{min-width:1420px}}
.mb-hint{text-align:center;margin-top:10px;font:600 9.5px/1.5 Oswald,sans-serif;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute,#8fa3c8)}
/* tie cards */
.mb-box{fill:rgba(10,16,34,.94)}
.mb-box.islive{stroke-width:2.4;animation:mbLiveBox 1.8s ease-in-out infinite}
.mb-champbox{fill:rgba(38,28,7,.96);animation:mbChampGlow 3.2s ease-in-out infinite}
.mb-div{stroke:rgba(140,170,220,.15);stroke-width:1}
.mb-ln{stroke-linejoin:round;stroke-linecap:round}
/* connectors: a soft neon halo + a crisp core; the trophy run carries a moving light */
.mb-lnglow .mb-ln{stroke-width:7;opacity:.14}
.mb-lnglow.gold .mb-ln{stroke-width:9;opacity:.22}
.mb-lncore .mb-ln{stroke-width:2.2;opacity:.95}
.mb-lncore.gold .mb-ln{stroke-width:2.6}
.mb-flow .mb-ln{stroke-width:2.8;stroke-dasharray:16 300;animation:mbFlow 3.4s linear infinite;opacity:.9}
@keyframes mbFlow{to{stroke-dashoffset:-316}}
@keyframes mbLiveBox{0%,100%{stroke-opacity:1}50%{stroke-opacity:.45}}
@keyframes mbChampGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(255,215,94,.35))}50%{filter:drop-shadow(0 0 18px rgba(255,215,94,.7))}}
/* type */
.mb-title{font:800 46px Anton,Oswald,sans-serif;letter-spacing:.12em;
  filter:drop-shadow(0 0 22px rgba(255,215,94,.45))}
.mb-tag{font:600 13.5px Oswald,sans-serif;letter-spacing:.3em;fill:#9db1d6}
.mb-hot{fill:#ffd75e}
.mb-round{font:600 13px Oswald,sans-serif;letter-spacing:.24em;fill:#8fa3c8}
.mb-round.l{fill:#6fd8f2}.mb-round.r{fill:#c99af5}
.mb-q{font:700 11px Oswald,sans-serif;letter-spacing:.32em;opacity:.9}
.mb-nm{font:600 16.5px Oswald,sans-serif;fill:#f2f7ff}
.mb-bignm{font-size:18px}
.mb-tbd{fill:#93a7cc;font-weight:400}
.mb-win{fill:#ffd75e}
.mb-out{opacity:.34}
.mb-sub{font:600 9.5px Oswald,sans-serif;letter-spacing:.13em;fill:#8fa3c8}
/* score + live chips */
.mb-scbox{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.14);stroke-width:1}
.mb-scwin{fill:rgba(245,185,46,.22);stroke:rgba(255,215,94,.65)}
.mb-sc{font:700 13.5px Oswald,sans-serif;fill:#dfe9ff}
.mb-sc.win{fill:#ffe9a3}
.mb-lvpill{fill:rgba(22,201,138,.14);stroke:rgba(89,255,168,.55);stroke-width:1}
.mb-live{font:700 10.5px Oswald,sans-serif;letter-spacing:.18em;fill:#7dffc0;animation:mbLivePulse 1.4s ease-in-out infinite}
@keyframes mbLivePulse{0%,100%{opacity:1}50%{opacity:.55}}
.mb-final{font:700 17px Oswald,sans-serif;letter-spacing:.4em;fill:#fff}
.mb-champ{font:800 17px Oswald,sans-serif;letter-spacing:.4em;fill:#ffd75e;
  filter:drop-shadow(0 0 12px rgba(255,215,94,.6))}
.mb-champnm{font:800 18px Oswald,sans-serif;letter-spacing:.14em;fill:#ffe9a3}
.mb-foot{font:600 11px Oswald,sans-serif;letter-spacing:.3em;fill:#8fa3c8}
/* THE trophy — the real 3D silverware spinning at centre stage */
.mb-3d{position:absolute;left:50%;top:71%;width:19%;height:29%;transform:translate(-50%,-50%);
  pointer-events:none;display:grid;place-items:center;z-index:2}
.mb-3d-mv{width:100%;height:100%;background:transparent;--poster-color:transparent}
.mb-3d-fb{position:absolute;font-size:clamp(54px,6vw,100px);filter:drop-shadow(0 0 28px rgba(255,215,94,.6))}
body.calm .mb-flow .mb-ln,body.lowfx .mb-flow .mb-ln{animation:none;stroke-dasharray:none;opacity:.35}
body.calm .mb-box.islive,body.calm .mb-champbox,body.calm .mb-live{animation:none}

/* locked prediction ties — the full official pairings before they open */
.predtie.locked{opacity:.92}
.predtie.locked .pt-r.lockseat{cursor:default}
.pt-lockpill{float:right;font:600 9px/1 Oswald,sans-serif;letter-spacing:.16em;color:#ffce5a;
  border:1px solid rgba(255,206,90,.4);border-radius:99px;padding:4px 9px}
.pt-nm.code{color:#8fa3c8;letter-spacing:.1em}
.pt-seed{margin-left:auto;font:600 8.5px/1 Oswald,sans-serif;letter-spacing:.14em;color:#8fa3c8}
.face-fallback{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  background:linear-gradient(135deg,#35e0ff,#b45bff);color:#04060f;font:700 13px Oswald,sans-serif}

/* ============================================================
   KNOCKOUT = ROAD TO GLORY (2026-07-08, owner art)
   The official anime poster IS the knockout stage backdrop —
   bright at the top behind the hero strip, falling into deep
   navy so the neon bracket stays razor readable.
   ============================================================ */
body.docked[data-sec="knockout"] #views{
  background:
    linear-gradient(180deg,rgba(4,7,18,.42) 0%,rgba(4,7,18,.62) 34%,rgba(4,6,15,.88) 62%,#04060f 88%),
    url('img/road-to-glory.jpg') center top/cover no-repeat,
    #04060f}
body.docked[data-sec="knockout"].mobile #views{
  background:
    linear-gradient(180deg,rgba(4,7,18,.5) 0%,rgba(4,7,18,.72) 30%,rgba(4,6,15,.9) 58%,#04060f 85%),
    url('img/road-to-glory.jpg') center top/cover no-repeat,
    #04060f}

/* ============================================================
   LANDING = THE FILM (2026-07-08). The moment frames flow,
   the whole title lockup bows out — nothing sits on the video.
   ============================================================ */
body.vidhero #cinematic{opacity:0!important;transition:opacity 1.1s ease .2s;pointer-events:none!important}
body.vidhero #hint{text-shadow:0 2px 14px rgba(0,0,0,.8)}

/* ============================================================
   FIXTURE CARDS — circuit glass (2026-07-08)
   group colour breathes in from the left, violet answers right
   ============================================================ */
body.theme-circuit .fx,body.theme-trionda .fx{
  border-radius:12px;
  background:
    radial-gradient(56% 130% at 0% 50%,color-mix(in srgb,var(--sec,#19e0ff) 16%,transparent),transparent 58%),
    radial-gradient(56% 130% at 100% 50%,rgba(180,91,255,.13),transparent 58%),
    linear-gradient(120deg,rgba(13,22,46,.92),rgba(8,13,30,.95) 55%)}
body.theme-circuit .fx.isnext,body.theme-trionda .fx.isnext{box-shadow:0 0 22px rgba(53,224,255,.14),inset 0 0 0 1px rgba(53,224,255,.22)}
body.theme-circuit .fx.islive,body.theme-trionda .fx.islive{box-shadow:0 0 24px rgba(89,255,168,.16),inset 0 0 0 1px rgba(89,255,168,.28)}
body.theme-circuit .fx .fx-grp,body.theme-trionda .fx .fx-grp{color:#9db1d6}
body.theme-circuit .fx .fx-grp.ko,body.theme-trionda .fx .fx-grp.ko{color:#ffd75e;text-shadow:0 0 10px rgba(255,215,94,.35)}
body.theme-circuit .fxday-tab.active,body.theme-trionda .fxday-tab.active{background:linear-gradient(180deg,rgba(255,215,94,.92),rgba(245,185,46,.88));
  color:#1a1403;box-shadow:0 4px 18px rgba(245,185,46,.35)}