/* CF-only FX styles */
#heroVid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease;z-index:0;pointer-events:none}
#heroVid.on{opacity:1}
/* once the landing video is live, the old hero image goes away completely */
#hero.vidlive{background-image:none!important}
#hero{isolation:isolate}
#hero>*:not(#heroVid){position:relative;z-index:1}
::view-transition-old(root){animation:vtOut .28s ease both}
::view-transition-new(root){animation:vtIn .34s ease both}
@keyframes vtOut{to{opacity:0;transform:scale(.985)}}
@keyframes vtIn{from{opacity:0;transform:scale(1.015)}}
.vhead{overflow:hidden}
.vhead .vh-bg{will-change:transform;transform:translateZ(0) scale(1.12)}
.navbtn{will-change:transform}

/* ============================================================
   SYNCED GOAL ERUPTION — the moment every screen detonates together
   ============================================================ */
#erupt{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 42%, color-mix(in srgb, var(--ec) 26%, transparent) 0%, rgba(4,6,12,.86) 46%, rgba(3,4,9,.96) 100%);
  -webkit-backdrop-filter:blur(3px) saturate(1.2);backdrop-filter:blur(3px) saturate(1.2);
  transition:opacity .18s ease}
#erupt.on{opacity:1;pointer-events:auto;animation:eruptIn .5s cubic-bezier(.2,.9,.2,1)}
#erupt.out{opacity:0;transition:opacity .5s ease;pointer-events:none}
@keyframes eruptIn{0%{opacity:0}40%{opacity:1}}

/* flash + light rays */
.erupt-flash{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 45%, #fff 0%, color-mix(in srgb,var(--ec) 70%,#fff) 14%, transparent 42%);
  mix-blend-mode:screen;opacity:0;animation:eruptFlash .55s ease-out forwards}
@keyframes eruptFlash{0%{opacity:.95;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}
.erupt-rays{position:absolute;width:160vmax;height:160vmax;left:50%;top:46%;translate:-50% -50%;opacity:.5;mix-blend-mode:screen;
  background:repeating-conic-gradient(from 0deg, color-mix(in srgb,var(--ec) 55%,transparent) 0deg 4deg, transparent 4deg 12deg);
  -webkit-mask:radial-gradient(circle, #000 6%, transparent 60%);mask:radial-gradient(circle,#000 6%,transparent 60%);
  animation:eruptSpin 9s linear infinite}
@keyframes eruptSpin{to{transform:rotate(360deg)}}

/* the scorer / winner cut-out slamming in */
.erupt-art{position:absolute;bottom:0;height:min(82vh,720px);display:flex;align-items:flex-end;justify-content:center;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.6));z-index:2;pointer-events:none}
.erupt-art img{height:100%;width:auto;object-fit:contain}
.erupt-art .erupt-ini{font-family:var(--disp,'Anton',sans-serif);font-size:34vh;line-height:.8;color:color-mix(in srgb,var(--ec) 60%,#fff);
  opacity:.22;letter-spacing:-.02em}
.erupt-art.fromL{left:max(2%,calc(50% - 640px));animation:slamL .6s cubic-bezier(.16,1.1,.3,1) both}
.erupt-art.fromR{right:max(2%,calc(50% - 640px));animation:slamR .6s cubic-bezier(.16,1.1,.3,1) both}
@keyframes slamL{0%{transform:translateX(-60%) scale(1.18);opacity:0}60%{opacity:1}100%{transform:translateX(0) scale(1);opacity:1}}
@keyframes slamR{0%{transform:translateX(60%) scale(1.18);opacity:0}60%{opacity:1}100%{transform:translateX(0) scale(1);opacity:1}}

/* the kinetic core */
.erupt-core{position:relative;z-index:3;text-align:center;padding:0 18px;text-shadow:0 6px 26px rgba(0,0,0,.55)}
.erupt-kicker{font-family:var(--body,'Oswald',sans-serif);font-weight:700;letter-spacing:.32em;font-size:clamp(11px,1.6vw,16px);
  color:#cfe2ff;opacity:.9;margin-bottom:6px}
.erupt-live{display:inline-block;background:var(--ec);color:#06121f;font-weight:800;border-radius:4px;padding:1px 7px;letter-spacing:.18em;margin-right:6px}
.erupt-word{font-family:var(--disp,'Anton',sans-serif);font-weight:900;line-height:.84;letter-spacing:-.02em;
  font-size:clamp(72px,17vw,260px);
  background:linear-gradient(180deg,#fff 0%, color-mix(in srgb,var(--ec) 55%,#fff) 60%, var(--ec) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 26px color-mix(in srgb,var(--ec) 60%,transparent));
  animation:wordPop .62s cubic-bezier(.2,1.3,.3,1) both}
@keyframes wordPop{0%{transform:scale(.4) skewY(7deg);opacity:0}55%{transform:scale(1.08) skewY(-2deg);opacity:1}100%{transform:scale(1) skewY(0)}}
.erupt.ft .erupt-word{font-size:clamp(54px,12vw,180px)}

/* FULL TIME — both finalists slide in from their own side; winner bigger + gold, loser dimmed */
.erupt.ft .erupt-rays{opacity:.26}
.erupt.ft .erupt-art{height:min(72vh,640px);bottom:0}
.erupt.ft .erupt-art.fromL{animation:slideL .72s cubic-bezier(.16,.84,.3,1) both}
.erupt.ft .erupt-art.fromR{animation:slideR .72s cubic-bezier(.16,.84,.3,1) both}
.erupt.ft .erupt-art.win{height:min(86vh,800px);z-index:2;animation-delay:.14s;
  filter:drop-shadow(0 0 38px color-mix(in srgb,#ffce5a 60%,transparent)) drop-shadow(0 26px 50px rgba(0,0,0,.6))}
.erupt.ft .erupt-art.lose{height:min(56vh,520px);z-index:1;
  filter:grayscale(.4) brightness(.6) drop-shadow(0 20px 38px rgba(0,0,0,.55))}
.erupt.ft .erupt-art.draw{height:min(70vh,620px)}
.erupt-crown{position:absolute;top:-2px;left:50%;translate:-50% 0;font-size:clamp(28px,5vw,64px);z-index:3;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));animation:fadeUp .5s .5s both}
@keyframes slideL{0%{transform:translateX(-130%);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes slideR{0%{transform:translateX(130%);opacity:0}100%{transform:translateX(0);opacity:1}}
.erupt.ft.calm .erupt-art{animation:fadeUp .5s both!important}
.erupt-scorer{font-family:var(--disp,'Teko',sans-serif);font-weight:700;letter-spacing:.04em;
  font-size:clamp(22px,4.6vw,58px);color:#fff;margin-top:2px;animation:fadeUp .5s .18s both}
.erupt-score{display:inline-flex;align-items:center;gap:clamp(10px,2vw,22px);margin-top:14px;
  font-family:var(--body,'Oswald',sans-serif);animation:fadeUp .5s .28s both}
.erupt-score .es-tm{font-weight:600;font-size:clamp(14px,2.2vw,26px);color:#b9c6dd;max-width:30vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.erupt-score .es-tm.win{color:#fff}
.erupt-score .es-n{font-family:var(--disp,'Anton',sans-serif);font-weight:900;font-size:clamp(30px,6vw,82px);color:#fff;
  background:rgba(0,0,0,.32);border:1px solid color-mix(in srgb,var(--ec) 50%,transparent);border-radius:14px;
  padding:2px clamp(10px,1.6vw,18px);box-shadow:0 0 30px color-mix(in srgb,var(--ec) 40%,transparent)}
.erupt-score .es-n i{font-style:normal;opacity:.5;margin:0 .12em}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* reduced-motion: keep the message, drop the violence */
#erupt.calm .erupt-art{animation:none}
#erupt.calm .erupt-word,#erupt.calm .erupt-scorer,#erupt.calm .erupt-score{animation:fadeUp .4s both}
#erupt.calm .erupt-rays{display:none}

/* whole-screen quake on a goal */
body.quake{animation:quake .6s cubic-bezier(.36,.07,.19,.97) both}
@keyframes quake{10%{transform:translate(-2px,1px)}20%{transform:translate(3px,-2px)}30%{transform:translate(-4px,2px) rotate(-.3deg)}
  40%{transform:translate(3px,1px)}50%{transform:translate(-2px,-1px) rotate(.2deg)}60%{transform:translate(2px,2px)}
  70%{transform:translate(-1px,-1px)}100%{transform:translate(0,0)}}

/* "watching now" presence pill — live social proof */
#watchNow{position:fixed;top:112px;left:14px;z-index:70;display:none;align-items:center;gap:7px;
  padding:5px 11px;border-radius:999px;font-family:var(--body,'Oswald',sans-serif);font-size:12px;font-weight:600;letter-spacing:.06em;
  color:#dfe9ff;background:rgba(10,14,22,.62);border:1px solid rgba(120,200,255,.22);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 20px rgba(0,0,0,.32)}
#watchNow.on{display:inline-flex;animation:fadeUp .4s both}
#watchNow .wn-dot{width:7px;height:7px;border-radius:50%;background:#19e9a0;box-shadow:0 0 8px #19e9a0;animation:wnPulse 1.8s ease-in-out infinite}
#watchNow .wn-n{color:#fff;font-weight:800}
#watchNow .wn-t{opacity:.78}
@keyframes wnPulse{0%,100%{opacity:1}50%{opacity:.3}}
body.mobile #watchNow{top:auto;bottom:84px;left:10px;font-size:11px}
@media(max-width:760px){#watchNow{top:auto;bottom:84px;left:10px;font-size:11px}}

/* ============================================================
   CROWD REACTIONS — flying cheers + per-match cheer dock + tug-of-war
   ============================================================ */
#cheerSky{position:fixed;inset:0;z-index:9000;pointer-events:none;overflow:hidden}
.cheer-fly{position:absolute;bottom:96px;font-size:30px;line-height:1;will-change:transform,opacity;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));animation:cheerFloat 2.2s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes cheerFloat{
  0%{transform:translateY(0) translateX(0) rotate(0) scale(calc(var(--sc,1)*.5));opacity:0}
  12%{opacity:1;transform:translateY(-8vh) scale(var(--sc,1))}
  100%{transform:translateY(-74vh) translateX(var(--dx,0)) rotate(var(--rot,0)) scale(calc(var(--sc,1)*1.05));opacity:0}}

#cheerDock{position:fixed;left:50%;bottom:18px;translate:-50% 0;z-index:65;display:none;flex-direction:column;gap:8px;
  padding:9px 12px 11px;border-radius:16px;min-width:min(92vw,420px);
  background:linear-gradient(180deg,rgba(14,18,28,.82),rgba(8,11,18,.9));border:1px solid rgba(120,200,255,.18);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.3) inset}
#cheerDock.on{display:flex;animation:fadeUp .4s both}
body.bcon #cheerDock{bottom:56px}
.cd-h{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--body,'Oswald',sans-serif);
  font-size:11px;font-weight:700;letter-spacing:.22em;color:#cfe2ff;opacity:.92}
.cd-h .cd-dot{width:7px;height:7px;border-radius:50%;background:#ff3b6b;box-shadow:0 0 8px #ff3b6b;animation:wnPulse 1.4s infinite}
.cd-h .cd-x{position:absolute;right:-2px;top:50%;translate:0 -50%;width:22px;height:22px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.08);color:#cfe2ff;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;
  letter-spacing:0;transition:background .2s,color .2s}
.cd-h .cd-x:hover{background:rgba(255,59,107,.28);color:#fff}
/* per-player cheer counts — who's getting backed, live */
.cd-ct{flex:none;min-width:22px;text-align:center;font-family:var(--disp,'Teko',sans-serif);font-weight:700;font-size:15px;
  line-height:1;padding:1px 5px;border-radius:7px;color:#cfe2ff;background:rgba(255,255,255,.08);transition:color .2s,background .2s}
.cd-side.a .cd-ct.lead{color:#06121f;background:#19e0ff}
.cd-side.b .cd-ct.lead{color:#fff;background:#ff2d9b}
.cd-match{display:flex;align-items:center;gap:10px}
.cd-side{display:flex;align-items:center;gap:7px;flex:1;min-width:0;cursor:pointer;border:0;background:rgba(255,255,255,.05);
  border-radius:11px;padding:6px 9px;color:#eef3ff;font-family:var(--body,'Oswald',sans-serif);font-weight:600;font-size:13px;
  transition:transform .12s ease,background .2s;border:1px solid transparent}
.cd-side.b{flex-direction:row-reverse;text-align:right}
.cd-side .cd-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:84px}
.cd-side.a:hover{background:rgba(25,224,255,.16);border-color:rgba(25,224,255,.4)}
.cd-side.b:hover{background:rgba(255,45,155,.16);border-color:rgba(255,45,155,.4)}
.cd-side:active{transform:scale(.94)}
.cd-face{width:28px;height:28px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;font-size:11px;font-weight:800;background:rgba(255,255,255,.12);color:#fff}
.cd-face img{width:100%;height:100%;object-fit:cover}
.cd-side.a .cd-face{box-shadow:0 0 0 2px rgba(25,224,255,.55)}
.cd-side.b .cd-face{box-shadow:0 0 0 2px rgba(255,45,155,.55)}
.cd-tug{position:relative;flex:none;width:84px;height:9px;border-radius:6px;overflow:hidden;
  background:linear-gradient(90deg,#ff2d9b,#ff5ab0)}
.cd-tug .cd-fill{position:absolute;left:0;top:0;bottom:0;width:50%;border-radius:6px 0 0 6px;
  background:linear-gradient(90deg,#19e0ff,#46ecff);transition:width .35s cubic-bezier(.3,1,.4,1)}
.cd-tug .cd-knob{position:absolute;top:-2px;left:50%;width:3px;height:13px;border-radius:2px;background:#fff;
  transform:translateX(-50%);box-shadow:0 0 6px rgba(255,255,255,.8);transition:left .35s cubic-bezier(.3,1,.4,1)}
@media(max-width:760px){#cheerDock{bottom:74px;min-width:94vw}body.bcon #cheerDock{bottom:74px}.cd-tug{width:60px}}

/* ============================================================
   PLAYER OF THE MATCH — full-time vote card (centred, dramatic, auto-dismiss)
   ============================================================ */
#motmVote{position:fixed;left:50%;top:50%;translate:-50% -50%;z-index:9100;width:min(94vw,440px);
  padding:16px 16px 14px;border-radius:20px;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,21,34,.96),rgba(8,11,20,.98));
  border:1px solid rgba(255,206,90,.35);box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 40px rgba(255,206,90,.18),0 0 0 1px rgba(0,0,0,.4) inset}
#motmVote.on{opacity:1;pointer-events:auto;animation:mvIn .5s cubic-bezier(.2,.9,.2,1)}
#motmVote.out{opacity:0;transition:opacity .45s ease;pointer-events:none}
@keyframes mvIn{0%{opacity:0;transform:translate(-50%,-44%) scale(.9)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.mv-h{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--disp,'Teko',sans-serif);font-size:19px;letter-spacing:.14em;color:#ffe7a0;text-transform:uppercase}
.mv-h .mv-dot{width:8px;height:8px;border-radius:50%;background:#ffce5a;box-shadow:0 0 10px #ffce5a;animation:wnPulse 1.4s infinite}
.mv-h .mv-x{position:absolute;right:-4px;top:50%;translate:0 -50%;width:24px;height:24px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.08);color:#cfe2ff;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;letter-spacing:0;transition:.2s}
.mv-h .mv-x:hover{background:rgba(255,59,107,.3);color:#fff}
.mv-sub{text-align:center;font-family:var(--body,'Oswald',sans-serif);font-size:11px;letter-spacing:.16em;color:#9fb0cf;text-transform:uppercase;margin:3px 0 12px}
.mv-opts{display:flex;gap:10px}
.mv-opt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;
  padding:12px 8px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);
  color:#eef3ff;font-family:var(--body,'Oswald',sans-serif);font-weight:600;transition:transform .12s ease,background .2s,border-color .2s}
.mv-opt:active{transform:scale(.95)}
.mv-opt.a:hover,.mv-opt.a.mine{background:rgba(25,224,255,.16);border-color:rgba(25,224,255,.5)}
.mv-opt.b:hover,.mv-opt.b.mine{background:rgba(255,45,155,.16);border-color:rgba(255,45,155,.5)}
.mv-opt.lead{box-shadow:0 0 22px rgba(255,206,90,.3);border-color:rgba(255,206,90,.6)}
.mv-face{width:54px;height:54px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;background:rgba(255,255,255,.1);color:#fff}
.mv-face img{width:100%;height:100%;object-fit:cover}
.mv-opt.a .mv-face{box-shadow:0 0 0 2px rgba(25,224,255,.6)}
.mv-opt.b .mv-face{box-shadow:0 0 0 2px rgba(255,45,155,.6)}
.mv-nm{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mv-c{font-family:var(--disp,'Anton',sans-serif);font-size:24px;line-height:1;color:#fff}
.mv-bar{position:relative;height:8px;border-radius:6px;overflow:hidden;margin:12px 2px 0;background:linear-gradient(90deg,#ff2d9b,#ff5ab0)}
.mv-bar .mv-fill{position:absolute;left:0;top:0;bottom:0;width:50%;border-radius:6px 0 0 6px;
  background:linear-gradient(90deg,#19e0ff,#46ecff);transition:width .4s cubic-bezier(.3,1,.4,1)}
.mv-foot{text-align:center;margin-top:9px;font-family:var(--body,'Oswald',sans-serif);font-size:11px;letter-spacing:.12em;color:#8fa0c0;text-transform:uppercase}
body.calm #motmVote.on{animation:none}

/* ============================================================
   SETTINGS DOCK — one gear replaces the floating-button pile
   ============================================================ */
#settingsFab{position:fixed;right:18px;bottom:18px;z-index:341;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(255,201,77,.5);
  background:linear-gradient(180deg,rgba(18,24,40,.92),rgba(8,12,22,.96));color:var(--gold,#ffc94d);
  box-shadow:0 8px 26px rgba(0,0,0,.5);opacity:0;transform:scale(.6) translateY(12px);pointer-events:none;
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,1.3,.3,1),box-shadow .2s,border-color .2s}
#settingsFab.show{opacity:1;transform:none;pointer-events:auto}
#settingsFab:hover{box-shadow:0 0 18px rgba(255,201,77,.5)}
#settingsFab svg{width:22px;height:22px;transition:transform .45s cubic-bezier(.2,1,.3,1)}
#settingsFab.open{border-color:var(--gold);box-shadow:0 0 20px rgba(255,201,77,.55)}
#settingsFab.open svg{transform:rotate(95deg)}
body.docked.mobile #settingsFab{bottom:calc(18px + var(--mnav-h,0px))}
body.bcon #settingsFab{bottom:calc(18px + var(--bc-h,0px))}

#settingsMenu{position:fixed;right:18px;bottom:76px;z-index:340;width:min(86vw,262px);display:none;flex-direction:column;gap:1px;padding:7px;
  border-radius:14px;background:linear-gradient(180deg,rgba(16,21,34,.98),rgba(8,11,20,.99));border:1px solid rgba(120,200,255,.18);
  box-shadow:0 18px 50px rgba(0,0,0,.6);transform-origin:bottom right}
#settingsMenu.on{display:flex;animation:setIn .26s cubic-bezier(.2,.9,.2,1)}
@keyframes setIn{0%{opacity:0;transform:scale(.92) translateY(8px)}100%{opacity:1;transform:none}}
body.docked.mobile #settingsMenu{bottom:calc(76px + var(--mnav-h,0px))}
body.bcon #settingsMenu{bottom:calc(76px + var(--bc-h,0px))}
.set-row{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border:0;cursor:pointer;border-radius:9px;
  background:transparent;color:#eef3ff;text-align:left;transition:background .15s}
.set-row:hover{background:rgba(255,255,255,.06)}
.set-em{font-size:18px;flex:none;width:22px;text-align:center}
.set-tx{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.18}
.set-tx b{font-family:var(--body,'Oswald',sans-serif);font-size:13px;font-weight:600;letter-spacing:.01em}
.set-tx i{font-style:normal;font-size:10.5px;color:#8fa0c0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-go{flex:none;color:#7587a8;font-size:18px;font-weight:700}
.set-sw{flex:none;width:34px;height:19px;border-radius:11px;background:rgba(255,255,255,.16);position:relative;transition:background .2s}
.set-sw::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:left .2s}
.set-sw.on{background:#19e9a0}
.set-sw.on::after{left:17px}
/* fold the scattered floating buttons away once the gear is live */
body.has-settings #fsBtn,body.has-settings #mobBtn,body.has-settings #bcastBtn,body.has-settings #installBtn,
body.has-settings #notifyBtn,body.has-settings #themeBtn,body.has-settings #mute{display:none!important}

/* ============================================================
   MATCH-ALERT BELL + one-time "get the app" discovery banner
   ============================================================ */
.install-btn{bottom:178px}
.notify-btn{bottom:230px}
.notify-btn.on{border-color:#19e9a0!important;color:#19e9a0!important;box-shadow:0 0 16px rgba(25,233,160,.45)!important}
body.docked.mobile .notify-btn{bottom:calc(230px + var(--mnav-h))}
body.bcon .notify-btn{bottom:calc(230px + var(--bc-h))}
body.broadcast .notify-btn{opacity:0;pointer-events:none}

.app-banner{position:fixed;left:50%;bottom:18px;translate:-50% 150%;z-index:320;display:none;align-items:center;gap:12px;
  width:min(94vw,520px);padding:11px 12px 11px 14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(16,21,34,.97),rgba(8,11,20,.98));border:1px solid var(--gold,#ffc94d);
  box-shadow:0 16px 50px rgba(0,0,0,.55),0 0 26px rgba(255,201,77,.18);transition:translate .45s cubic-bezier(.2,.9,.2,1)}
.app-banner.on{display:flex;translate:-50% 0}
.app-banner .ab-ic{font-size:24px;flex:none}
.app-banner .ab-tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.app-banner .ab-tx b{font-family:var(--body,'Oswald',sans-serif);font-size:14px;color:#fff;letter-spacing:.02em}
.app-banner .ab-tx span{font-size:11.5px;color:#a9b6d2}
.app-banner .ab-act{display:flex;gap:7px;flex:none;margin-left:auto}
.app-banner .ab-btn{border:0;cursor:pointer;border-radius:9px;padding:7px 13px;font-family:var(--body,'Oswald',sans-serif);font-weight:700;font-size:12px;letter-spacing:.04em;transition:transform .12s}
.app-banner .ab-btn:active{transform:scale(.94)}
.app-banner .ab-btn.install{background:var(--gold,#ffc94d);color:#06121f}
.app-banner .ab-btn.notify{background:rgba(255,255,255,.1);color:#eef3ff}
.app-banner .ab-x{flex:none;width:24px;height:24px;border:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.08);color:#cfe2ff;font-size:12px;line-height:1}
.app-banner .ab-x:hover{background:rgba(255,59,107,.3);color:#fff}
body.docked.mobile .app-banner{bottom:calc(18px + var(--mnav-h,0px))}
@media(max-width:560px){.app-banner{flex-wrap:wrap}.app-banner .ab-act{margin-left:0;width:100%}.app-banner .ab-btn{flex:1}.app-banner .ab-x{position:absolute;top:8px;right:8px}}

/* ============================================================
   LIVE MOMENTUM / WIN-PROBABILITY BAR (Command Centre clash, live matches)
   ============================================================ */
.momo{margin:12px 4px 2px;padding:10px 12px 12px;border-radius:13px;
  background:linear-gradient(180deg,rgba(255,59,107,.06),rgba(8,11,18,.4));border:1px solid rgba(255,59,107,.28)}
.momo-h{display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--body,'Oswald',sans-serif);
  font-size:10.5px;font-weight:700;letter-spacing:.22em;color:#ffd0dc;margin-bottom:8px}
.momo-h .momo-dot{width:7px;height:7px;border-radius:50%;background:#ff3b6b;box-shadow:0 0 8px #ff3b6b;animation:wnPulse 1.4s infinite}
.momo-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-family:var(--body,'Oswald',sans-serif);font-size:12px}
.momo-nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#dbe6fb;font-weight:600}
.momo-nm.b{text-align:right}
.momo-pct{flex:none;display:inline-flex;align-items:baseline;gap:5px;font-family:var(--disp,'Teko',sans-serif);font-size:18px}
.momo-pct .a{color:#19e0ff}.momo-pct .b{color:#ff2d9b}.momo-pct i{font-style:normal;color:#5d6b86;font-size:12px}
.momo-track{position:relative;height:11px;border-radius:7px;overflow:hidden;background:linear-gradient(90deg,#ff2d9b,#ff5ab0)}
.momo-fill{position:absolute;left:0;top:0;bottom:0;width:50%;border-radius:7px 0 0 7px;
  background:linear-gradient(90deg,#19e0ff,#46ecff);transition:width .6s cubic-bezier(.3,1,.4,1)}
.momo-knob{position:absolute;top:-2px;left:50%;width:3px;height:15px;border-radius:2px;background:#fff;
  transform:translateX(-50%);box-shadow:0 0 7px rgba(255,255,255,.85);transition:left .6s cubic-bezier(.3,1,.4,1)}
.cp-livescore{display:flex;align-items:center;justify-content:center;gap:9px;margin:4px 0 2px;
  font-family:var(--body,'Oswald',sans-serif);font-weight:700;letter-spacing:.14em;font-size:13px;color:#ff7da1}
.cp-livescore .cls-dot{width:9px;height:9px;border-radius:50%;background:#ff3b6b;box-shadow:0 0 10px #ff3b6b;animation:wnPulse 1.2s infinite}
.cp-livescore b{font-family:var(--disp,'Anton',sans-serif);font-size:30px;color:#fff;letter-spacing:0}
.cp-livescore b i{font-style:normal;opacity:.5;margin:0 .12em}

/* concurrent-match surfacing on the Command Centre clash */
.clash-also{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  font-family:var(--body,'Oswald',sans-serif);font-size:11.5px;letter-spacing:.04em}
.clash-also .ca-l{font-weight:700;letter-spacing:.14em;color:#aeb9cf;margin-right:2px}
.clash-also svg{width:15px;height:15px;opacity:.85}
.clash-also.islive{border-color:rgba(255,59,107,.35);background:rgba(255,59,107,.08)}
.clash-also.islive .ca-l{color:#ff7da1}
.ca-mini{display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(120,200,255,.22);background:rgba(10,16,26,.5);
  color:#e7eefc;border-radius:999px;padding:4px 10px;font-size:11.5px;cursor:pointer;font-weight:600;transition:transform .12s,border-color .2s}
.ca-mini:hover{transform:translateY(-1px);border-color:rgba(120,200,255,.5)}
.ca-mini i{font-style:normal;opacity:.5;font-size:10px}
.ca-mini .ca-sc{font-weight:800;color:#ffce5a;margin-left:3px}
.pulse-more{font-style:normal;color:#ff7da1;font-weight:700;font-size:.85em;margin-left:4px}
.pb-more{display:inline-block;margin-left:6px;padding:0 6px;border-radius:999px;font-size:10px;font-weight:700;
  color:#06121f;background:var(--cyan,#19e0ff)}

/* wildcard picker rows (admin → fixtures → knockout) */
.wc-row{display:flex;align-items:center;gap:9px;padding:6px 9px;cursor:pointer;border-radius:8px;font-size:13px}
.wc-row:hover{background:rgba(255,255,255,.05)}
.wc-row input{accent-color:var(--cyan,#2e8bff);width:16px;height:16px;flex:none;cursor:pointer}
.wc-row .wc-nm{font-weight:600;color:#eef3ff}
.wc-row .wc-grp{margin-left:auto;font-size:11px;color:#8694b8;letter-spacing:.04em}

/* ============================================================
   LIVING DARK BACKGROUND — depth + a soft drifting floodlight
   (overrides the flat #world fill; auroras/grain/hero stay on top)
   ============================================================ */
#world{background:
  radial-gradient(125% 85% at 50% -15%, rgba(46,139,255,.14), transparent 55%),
  radial-gradient(95% 65% at 50% 118%, rgba(30,233,138,.09), transparent 62%),
  radial-gradient(70% 55% at 86% 6%, rgba(255,45,120,.055), transparent 60%),
  linear-gradient(180deg,#070c1d 0%, #05080f 52%, #03050c 100%)}
/* static soft top glow (no animation — the moving sweep caused full-screen repaints / lag) */
#world::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;mix-blend-mode:screen;opacity:.22;
  background:radial-gradient(46% 50% at 38% 8%, rgba(120,170,255,.08), transparent 72%)}
/* soften the landing light-beams (rays) — they read too hot at full strength */
#rays.on{opacity:.5}
@keyframes floodSweep{0%{transform:translateX(-7%)}100%{transform:translateX(11%)}}
body.calm #world::after{animation:none}
body.docked #auroras{opacity:.66}

/* ===== SECTION COLOUR THEMING — each view washes the top of the stage in its accent ===== */
:root{--accent:#ffc83a}
#world::before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;mix-blend-mode:screen;opacity:.2;
  background:radial-gradient(58% 40% at 50% -4%, color-mix(in srgb, var(--accent) 50%, transparent), transparent 74%);
  transition:background 1s ease}

/* ===== READABILITY SCRIM — keeps content legible over the hero imagery in-app ===== */
body.docked #views{background:linear-gradient(180deg, rgba(5,8,18,.50) 0%, rgba(3,5,12,.74) 58%, rgba(3,5,12,.8) 100%)}

/* ===== CARD REFRESH — cool, cleaner surfaces. NO backdrop-blur (it was the lag source);
   surfaces are more opaque instead, so they stay crisp and cheap to render. ===== */
.card{background:linear-gradient(158deg, rgba(18,25,46,.9), rgba(8,12,24,.94))}
.frame{background:linear-gradient(160deg, rgba(18,25,46,.92), rgba(8,12,24,.95))}

/* ===== TRIONDA 2026 THEME — official World Cup tri-nation colours + trophy gold =====
   Switchable via the lower-left theme button. Recolours the whole accent system to the
   official red / blue / green + gold, on a brighter "broadcast" stadium base. */
body.theme-trionda{
  --cyan:#2b6fff;  --blue:#2b6fff;
  --magenta:#e4002b; --red:#e4002b;
  --purple:#10b86e; --green:#16c878;
  --gold:#ffcb2c;  --gold2:#ffe7a0;
}
/* Colourful broadcast base — dialled back 2026-07-07 (owner: "too blue"): deeper, less
   saturated navy stage; the red/green corners and gold accents carry the vibrancy now */
body.theme-trionda #world{background:
  radial-gradient(95% 72% at 50% -8%, rgba(54,124,255,.32), transparent 60%),
  radial-gradient(72% 60% at 4% 104%, rgba(228,0,43,.28), transparent 60%),
  radial-gradient(72% 60% at 96% 104%, rgba(22,200,120,.3), transparent 60%),
  linear-gradient(180deg,#173a74 0%, #112c5c 52%, #0c2147 100%)}
/* lighter scrim so the vivid stage shows through behind content */
body.theme-trionda.docked #views{background:linear-gradient(180deg, rgba(16,38,86,.3) 0%, rgba(12,30,68,.46) 60%, rgba(10,26,60,.54) 100%)}
/* deeper cards with a tri-colour ball-panel top edge + gold reticles */
body.theme-trionda .card,body.theme-trionda .frame{background:linear-gradient(158deg, rgba(28,54,110,.93), rgba(15,33,74,.95))}
body.theme-trionda .frame{border-image:linear-gradient(90deg,var(--red),var(--blue) 50%,var(--green)) 1}
body.theme-trionda .card::before{--c1:rgba(255,203,44,.6);--c2:rgba(255,203,44,.12)}
body.theme-trionda .reticle::after,body.theme-trionda .frame::after{--rc:var(--gold)}
body.theme-trionda .vhead .vh-edge{background:linear-gradient(180deg,var(--gold),var(--red) 38%,var(--blue) 66%,var(--green))}
body.theme-trionda #grade.docked{background:radial-gradient(160% 140% at 50% 22%,transparent 0%,rgba(20,44,100,.38) 55%,rgba(16,36,84,.62) 100%),linear-gradient(180deg,rgba(20,44,100,.46),rgba(15,34,80,.66))}
/* theme toggle button (lower-left, above the motion button) */
.theme-btn{left:18px!important;right:auto!important;bottom:70px!important;z-index:141}
.theme-btn.on{border-color:var(--gold);color:var(--gold);box-shadow:0 0 16px rgba(255,203,44,.45)}
body.docked.mobile .theme-btn,body.bcon .theme-btn{bottom:calc(70px + var(--mnav-h,0px))!important}
/* match-live variant of the gated vote poll */
.fanpromo.islive{border-color:rgba(255,59,107,.45);box-shadow:0 0 22px rgba(255,59,107,.22)}
.fanpromo .fp-badge{background:var(--gold);color:#06121f}

/* ============================================================
   CINEMATIC GOAL — dimmed scene; Trionda ball caught in a flexible net (left),
   scorer celebrating (right), GOAL! + score with both crests (centre)
   ============================================================ */
#goalBug{position:fixed;inset:0;z-index:9500;pointer-events:none;background:none;opacity:0;overflow:hidden}
#goalBug.on{opacity:1;animation:gbFade .5s ease both}
#goalBug.out{opacity:0;transition:opacity .55s ease}
@keyframes gbFade{from{opacity:0}to{opacity:1}}
/* dimmed cinematic backdrop — no UI box, just darkens the scene so the moment pops */
.gb-scrim{position:absolute;inset:0;background:
  radial-gradient(120% 95% at 50% 52%, rgba(4,7,16,.42), rgba(2,4,10,.9) 86%),
  linear-gradient(180deg, rgba(2,4,10,.72), transparent 28%, transparent 72%, rgba(2,4,10,.82))}
/* REAL net image (transparent PNG) — slides up from the bottom-left corner and settles */
.gb-netimg{position:absolute;left:0;bottom:0;width:min(50vw,580px);height:min(58vh,480px);z-index:2;
  background:url('img/ball-net.png') left bottom/contain no-repeat;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.55));transform-origin:left bottom;
  animation:gbNetIn .8s cubic-bezier(.18,1.05,.3,1) both}
@keyframes gbNetIn{0%{transform:translate(-34%,30%) scale(.78) rotate(-3deg);opacity:0}
  55%{opacity:1}74%{transform:translate(2%,-1%) scale(1.045) rotate(.5deg)}
  100%{transform:translate(0,0) scale(1) rotate(0);opacity:1}}
body.calm .gb-netimg{animation:none}
/* LEFT — a REAL net in the bottom-left corner: DIAMOND weave (not a square grid) tilted into
   perspective + draped; the Trionda ball flies in from the corner and the net catches & ripples. */
.gb-goal{position:absolute;left:0;bottom:0;width:min(44vw,480px);height:min(50vh,400px);z-index:2;
  transform-origin:bottom left;perspective:760px;animation:gbGoalIn .6s cubic-bezier(.16,1,.3,1) both}
@keyframes gbGoalIn{0%{transform:translate(-50%,30%) scale(.92);opacity:0}100%{transform:translate(0,0) scale(1);opacity:1}}
/* angled goal frame (crossbar + far post) tilted into the corner */
.gb-frame{position:absolute;inset:0;transform:rotateX(12deg) rotateY(-26deg);transform-origin:bottom left;transform-style:preserve-3d;
  border-top:3px solid rgba(255,255,255,.75);border-right:3px solid rgba(255,255,255,.5)}
.gb-net2{position:absolute;inset:0;transform-origin:34% 68%;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.5) 0 1px,transparent 1px 13px),
            repeating-linear-gradient(-45deg,rgba(255,255,255,.5) 0 1px,transparent 1px 13px);
  -webkit-mask:radial-gradient(125% 130% at 26% 78%,#000 50%,transparent 92%);
  mask:radial-gradient(125% 130% at 26% 78%,#000 50%,transparent 92%);
  animation:netHit .95s .4s cubic-bezier(.2,.9,.3,1) both}
@keyframes netHit{0%{transform:scale(1,1)}15%{transform:scale(1.14,1.16)}36%{transform:scale(.94,.93)}57%{transform:scale(1.05,1.06)}77%{transform:scale(.99,.99)}100%{transform:scale(1,1)}}
.gb-net2::after{content:"";position:absolute;left:38%;top:60%;width:54%;height:56%;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%);box-shadow:inset 0 0 26px rgba(0,0,0,.3);
  opacity:0;transform:scale(.2);animation:netPocket .95s .4s cubic-bezier(.2,1.1,.3,1) both}
@keyframes netPocket{0%{opacity:0;transform:scale(.2)}18%{opacity:1;transform:scale(1.32)}46%{opacity:.6;transform:scale(.88)}72%{opacity:.32;transform:scale(1.06)}100%{opacity:0;transform:scale(1)}}
.gb-ball{position:absolute;width:clamp(34px,4vw,48px);height:clamp(34px,4vw,48px);border-radius:50%;left:38%;top:60%;
  background:url('img/ball-a.png') center/contain no-repeat;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));animation:gbBall .52s .04s cubic-bezier(.3,.5,.4,1) both}
@keyframes gbBall{0%{transform:translate(260px,-300px) rotate(0) scale(1.5);opacity:0}20%{opacity:1}100%{transform:translate(-50%,-50%) rotate(760deg) scale(1)}}
/* CENTRE — GOAL! + stage + the score with both crests */
.gb-mid{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);z-index:3;text-align:center;text-shadow:0 2px 7px rgba(0,0,0,.85),0 1px 1px rgba(0,0,0,.9)}
.gb-word{font-family:var(--disp,'Anton');font-style:italic;font-size:clamp(56px,12vw,160px);line-height:.82;color:#fff;letter-spacing:.005em;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.7));animation:gbPop .55s cubic-bezier(.2,1.3,.3,1) both}
@keyframes gbPop{0%{transform:scale(.55) skewX(-6deg);opacity:0}58%{transform:scale(1.07) skewX(-9deg);opacity:1}100%{transform:scale(1) skewX(-9deg)}}
.gb-min{font-family:var(--body,'Oswald');font-weight:600;letter-spacing:.2em;font-size:clamp(11px,1.4vw,15px);color:#e3ecff;opacity:.92;margin-top:6px;animation:gbUp .5s .12s both}
.gb-sc{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,42px);margin-top:14px;animation:gbUp .5s .2s both}
.gb-team{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;max-width:26vw}
.gb-crest{width:clamp(42px,5vw,66px);height:clamp(42px,5vw,66px);border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;flex:none;
  background:rgba(255,255,255,.12);box-shadow:0 0 0 2px rgba(255,255,255,.42),0 6px 16px rgba(0,0,0,.5);font-family:var(--disp,'Anton');font-size:20px;color:#fff}
.gb-crest img{width:100%;height:100%;object-fit:cover}
.gb-tn{font-family:var(--body,'Oswald');font-weight:600;letter-spacing:.08em;font-size:clamp(10px,1.2vw,14px);color:#c7d3ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:24vw;text-transform:uppercase}
.gb-tn.hot{color:#fff}
.gb-scn{font-family:var(--disp,'Anton');font-size:clamp(46px,7vw,104px);line-height:.9;flex:none;letter-spacing:.01em;
  background:linear-gradient(180deg,#fff 32%,#ffd24d);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 7px rgba(0,0,0,.6))}
.gb-scn i{font-style:normal;opacity:.5;margin:0 .14em;-webkit-text-fill-color:rgba(255,255,255,.5)}
.gb-by{margin-top:12px;font-family:var(--disp,'Teko');font-weight:600;letter-spacing:.06em;font-size:clamp(15px,2vw,28px);color:#ffd770;animation:gbUp .5s .3s both}
@keyframes gbUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
/* RIGHT — the scorer slides in celebrating */
.gb-hero{position:absolute;right:clamp(2px,2vw,64px);bottom:0;width:min(34vw,440px);height:min(78vh,660px);z-index:2}
.gb-hero img{position:absolute;bottom:0;right:0;height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 18px 34px rgba(0,0,0,.7));animation:gbHero .62s cubic-bezier(.16,1,.3,1) both}
@keyframes gbHero{0%{transform:translateX(170px);opacity:0}100%{transform:translateX(0);opacity:1}}
.gb-hero .erupt-ini{position:absolute;bottom:0;right:6%;font-family:var(--disp,'Anton');font-size:36vh;line-height:.78;color:color-mix(in srgb,var(--gc) 55%,#fff);opacity:.26}
body.calm #goalBug.on{animation:none;opacity:1}
body.calm .gb-scrim,body.calm .gb-goal,body.calm .gb-ball,body.calm .gb-net2,body.calm .gb-net2::after,body.calm .gb-word,body.calm .gb-min,body.calm .gb-sc,body.calm .gb-by,body.calm .gb-hero img{animation:none!important}
@media(max-width:760px){
  .gb-netimg{width:66vw;height:40vh}
  .gb-hero{right:-12vw;bottom:0;width:50vw;height:40vh;opacity:.72}
  .gb-mid{top:32%;width:94vw}
  .gb-word{font-size:clamp(40px,17vw,86px)}
  .gb-sc{gap:8px}
  .gb-crest{width:36px;height:36px}
  .gb-scn{font-size:clamp(30px,10vw,52px)}
  .gb-tn{max-width:24vw;font-size:10px}
  .gb-by{font-size:14px;margin-top:8px}
}

/* ============================================================
   HONOURS strip (consolation awards — everyone's in the running)
   ============================================================ */
#ovHonours .honours{display:flex;gap:10px;overflow-x:auto;padding:2px 1px 4px;scrollbar-width:none}
#ovHonours .honours::-webkit-scrollbar{display:none}
.hon{flex:0 0 132px;position:relative;cursor:pointer;border-radius:13px;padding:12px 10px 11px;text-align:center;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 16%,rgba(10,14,24,.92)),rgba(7,10,18,.94));
  border:1px solid color-mix(in srgb,var(--ac) 45%,transparent);transition:transform .14s ease,box-shadow .25s}
.hon:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(0,0,0,.7),0 0 20px -6px var(--ac)}
.hon-ic{color:var(--ac)}.hon-ic svg{width:20px;height:20px}
.hon-face{width:54px;height:54px;border-radius:50%;margin:6px auto 7px;background:rgba(255,255,255,.08) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;font-family:var(--disp,'Anton');font-size:20px;color:#fff;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ac) 70%,transparent),0 4px 12px rgba(0,0,0,.4)}
.hon-t{font-family:var(--body,'Oswald');font-weight:700;letter-spacing:.1em;font-size:9.5px;color:var(--ac)}
.hon-nm{font-family:var(--disp,'Teko');font-size:17px;color:#fff;line-height:1.05;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hon-d{font-size:10px;color:#9fb0cf;margin-top:2px;line-height:1.2}

/* ============================================================
   DAILY ROUND-UP — non-obstructing, dismissable recap (top of Command Centre)
   ============================================================ */
#ovDigest{margin:0 0 14px}
#ovDigest .digest{position:relative;border-radius:13px;padding:11px 14px;
  background:linear-gradient(110deg,rgba(255,201,77,.10),rgba(10,14,24,.6));border:1px solid rgba(255,201,77,.3);
  opacity:0;transform:translateY(-8px);transition:opacity .35s ease,transform .35s ease}
#ovDigest .digest.on,#ovDigest .digest{opacity:1;transform:none}
#ovDigest .dg-h{display:flex;align-items:center;gap:8px;font-family:var(--body,'Oswald');font-weight:700;letter-spacing:.16em;
  font-size:11px;color:#ffe7a0;text-transform:uppercase}
#ovDigest .dg-dot{width:7px;height:7px;border-radius:50%;background:#ffcb2c;box-shadow:0 0 8px #ffcb2c}
#ovDigest .dg-x{margin-left:auto;width:24px;height:24px;border:0;border-radius:50%;cursor:pointer;flex:none;
  background:rgba(255,255,255,.08);color:#cfe2ff;font-size:12px;line-height:1;transition:.2s}
#ovDigest .dg-x:hover{background:rgba(255,59,107,.3);color:#fff}
#ovDigest .dg-lines{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:7px}
#ovDigest .dg-l{font-family:var(--body,'Oswald');font-size:12.5px;color:#cdd9f0}
#ovDigest .dg-l b{color:#fff}

/* ============================================================
   TRIONDA PREMIUM CARD POLISH — double gold frame, marble veining,
   tri-nation wash behind the figure, gold-roundel monogram for no-photo
   ============================================================ */
/* ============================================================
   TRIONDA "LIVING CARD" — broadcast FUT redesign (authoritative layer).
   Per-group --teamcol, rarity --rar/--glow. Motion is transform/opacity
   only; continuous animation limited to top tiers so 40 cards stay at 60fps.
   ============================================================ */
.futcard{display:flex!important;flex-direction:column;
  transition:transform .2s cubic-bezier(.2,.85,.25,1),box-shadow .3s,filter .3s;
  box-shadow:
  0 20px 42px -20px rgba(0,0,0,.92),
  inset 0 0 0 1px rgba(255,255,255,.10),
  inset 0 0 0 3px rgba(6,5,10,.55),
  inset 0 0 0 4.5px var(--rar,rgba(255,201,77,.85)),
  inset 0 -56px 50px -38px rgba(0,0,0,.82),
  inset 0 0 26px rgba(0,0,0,.4)}
.futcard:hover{transform:translateY(-7px) scale(1.015);filter:saturate(1.07) brightness(1.05);box-shadow:
  0 38px 66px -22px rgba(0,0,0,.95),0 0 46px -6px var(--glow,rgba(255,201,77,.6)),
  inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 0 3px rgba(6,5,10,.5),inset 0 0 0 4.5px var(--rar,rgba(255,224,120,1)),inset 0 -56px 50px -38px rgba(0,0,0,.8),inset 0 0 26px rgba(0,0,0,.38)}
.futcard:focus-visible{outline:2px solid var(--rar,#ffc83a);outline-offset:3px}
.fc-inner{flex:1;height:auto!important;gap:0!important}
/* rarity tier accents (prov gets a steel rim) */
.futcard.prov{--rar:rgba(160,172,190,.85);--glow:rgba(150,162,180,.4)}

/* tri-nation top wash behind the figure */
.futcard .fc-aura::after{background:
  radial-gradient(120% 70% at 50% 10%, color-mix(in srgb,var(--teamcol) 74%,#fff) 0%, transparent 50%),
  radial-gradient(58% 84% at 6% 56%, rgba(22,200,120,.16), transparent 60%),
  radial-gradient(58% 84% at 94% 56%, rgba(43,111,255,.16), transparent 60%),
  radial-gradient(rgba(255,234,170,.4) 1px, transparent 1.5px);
  background-size:auto,auto,auto,9px 9px;
  -webkit-mask:linear-gradient(180deg,#000,transparent 64%);mask:linear-gradient(180deg,#000,transparent 64%);opacity:.66}
.fc-aura::before{opacity:.16!important}
.fc-aura{background:
  linear-gradient(122deg,transparent 36%,rgba(255,255,255,.06) 41%,transparent 45%),
  linear-gradient(64deg,transparent 58%,rgba(255,245,210,.05) 63%,transparent 67%)}
/* FUT-style silhouette — angled shoulders + softly cut base */
.futcard{clip-path:polygon(0 4%,8% 0,92% 0,100% 4%,100% 94%,93% 100%,7% 100%,0 94%)!important}

/* ---- TOP: spotlight portrait with the rating overlaid ---- */
.fc-top{position:relative!important;display:block!important;height:162px;min-height:0!important;margin:-13px -13px 0!important;overflow:hidden;border-radius:0!important}
body.mobile .fc-top{height:142px}
.fc-spot{position:absolute;left:50%;top:-8%;width:218px;height:218px;transform:translateX(-50%);border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb,var(--teamcol) 82%,#fff) 0%, color-mix(in srgb,var(--teamcol) 32%,transparent) 33%, transparent 64%);
  opacity:.72;transition:opacity .4s,transform .4s}
.fc-portrait{position:absolute!important;inset:0;width:auto!important;height:auto!important;margin:0!important;z-index:1;transform-origin:50% 26%;transition:transform .4s ease;
  background-size:cover!important;background-position:center top!important;
  -webkit-mask:linear-gradient(180deg,#000 0,#000 70%,transparent 100%)!important;mask:linear-gradient(180deg,#000 0,#000 70%,transparent 100%)!important}
.fc-portrait.noart{-webkit-mask:none!important;mask:none!important;display:grid!important;place-items:center}
.fc-portrait.noart span{font-family:'Anton',sans-serif!important;font-size:70px!important;letter-spacing:.02em;display:block!important;
  width:auto!important;height:auto!important;border-radius:0;box-shadow:none!important;text-shadow:none!important;opacity:1!important;
  background:linear-gradient(180deg,#fff7e0,color-mix(in srgb,var(--teamcol,#ffc83a) 82%,#fff))!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.45))}
body.mobile .fc-portrait.noart span{font-size:56px!important}
.futcard:hover .fc-spot{opacity:1;transform:translateX(-50%) scale(1.08)}
.futcard:hover .fc-portrait.has{transform:scale(1.045)}
.fc-glaze{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,transparent 25%,transparent 62%,rgba(7,6,12,.52) 100%)}

/* rating cluster, overlaid on the player */
.fc-rate{position:absolute!important;top:11px;left:12px;z-index:4;width:auto!important;display:flex;flex-direction:column;align-items:center!important;
  line-height:.84;text-align:center;text-shadow:0 2px 9px rgba(0,0,0,.8)}
.fc-rate::after{display:none!important}
.fc-ovr{font-family:'Anton',sans-serif;font-size:43px;letter-spacing:-.01em;
  background:linear-gradient(180deg,#fff7de,#ffd24d 58%,#e0a52a);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(255,201,77,.45))}
.fc-pos{font-family:var(--disp);font-size:13px;letter-spacing:.12em;color:#fff;margin-top:-3px;text-shadow:0 2px 6px rgba(0,0,0,.85)}
.fc-tier{margin-top:6px;font-family:var(--disp);font-size:8px;letter-spacing:.16em;padding:2px 8px;border-radius:999px;color:#0c0a10;
  background:linear-gradient(180deg,color-mix(in srgb,var(--rar) 92%,#fff),var(--rar));box-shadow:0 2px 8px -2px var(--glow);text-shadow:none}
.fc-rk{margin-top:5px;font-family:var(--disp);font-size:7.5px;letter-spacing:.14em;color:rgba(255,255,255,.72);text-shadow:0 2px 6px rgba(0,0,0,.85)}

/* glass badges, top-right */
.fc-badges{position:absolute;right:10px;top:11px;z-index:4;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.fc-bdg{display:inline-flex;align-items:center;gap:2px;font-family:var(--disp);font-size:11px;line-height:1;padding:4px 7px;border-radius:9px;
  background:rgba(8,6,14,.62);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 12px -4px rgba(0,0,0,.7)}
.fc-bdg svg{width:13px;height:13px}
.fc-bdg.boot,.fc-bdg.crown{color:var(--gold)}.fc-bdg.strk{color:#ff9a3a}

/* NAME plate (pulled up over the photo fade) */
.fc-name{position:relative;z-index:3;margin:-24px 0 0!important;padding:0 2px!important;text-align:center;border:0!important;background:none!important;
  display:block!important;letter-spacing:0;text-shadow:none}
.fc-nm{display:block;font-family:'Anton',sans-serif;font-size:21px;text-transform:uppercase;letter-spacing:.03em;line-height:1;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 8px rgba(0,0,0,.78),0 0 16px rgba(0,0,0,.4)}
.fc-name::after{content:"";display:block;width:46px;height:2.5px;margin:6px auto 0;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--teamcol),transparent)}
.fc-dept{display:block!important;font-style:normal;font-family:var(--disp);font-size:9px;letter-spacing:.2em;color:rgba(255,236,180,.72);margin-top:5px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* STATS — 3-col grid, each value with a colour-coded gauge */
.fc-stats6{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:9px 12px!important;padding:12px 2px 7px!important;margin-top:0!important;
  background:none!important;border:0!important;border-radius:0!important;-webkit-backdrop-filter:none}
.fc-stats6 .fs{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px}
.fc-stats6 .fs b{min-width:0;font-size:18px;line-height:1;letter-spacing:-.01em;color:#fff;
  background:none;-webkit-text-fill-color:#fff;font-feature-settings:"tnum"}
.fc-stats6 .fs span{font-size:8.5px;letter-spacing:.08em;color:rgba(255,255,255,.6);margin-top:0}
.fsbar{display:block;width:100%;height:3px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.fsbar u{display:block;height:100%;border-radius:2px;background:var(--g,#caa12a)}
.fc-stats6 .fs.hi{--g:#1fe08a}.fc-stats6 .fs.hi b{-webkit-text-fill-color:#9bffcf;color:#9bffcf}
.fc-stats6 .fs.gd{--g:#ffd24d}
.fc-stats6 .fs.sv{--g:#cfd8ee}
.fc-stats6 .fs.lo{--g:#ff6f6f}
body.mobile .fc-stats6 .fs b{font-size:16px}

/* FOOT — record + form */
.fc-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 2px!important;border-top:1px solid rgba(255,255,255,.1);margin-top:auto}
.fc-form i{width:13px;height:5px;border-radius:2px;background:rgba(255,255,255,.18)}

/* BANNER — broadcast lower-third for the player's status (colour set inline) */
.fc-banner{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:8px;margin:7px -13px -11px!important;padding:7px 12px;
  font-family:var(--disp);font-size:10px;letter-spacing:.2em;text-transform:uppercase;transition:filter .3s;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,currentColor 16%,transparent),transparent);
  border-top:1px solid color-mix(in srgb,currentColor 32%,transparent);text-shadow:0 0 12px color-mix(in srgb,currentColor 55%,transparent)}
.fc-banner::before,.fc-banner::after{content:"";width:16px;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
.fc-banner::after{background:linear-gradient(90deg,currentColor,transparent)}
.futcard:hover .fc-banner{filter:brightness(1.25)}

/* HOLO edge — rotating prismatic rim, top tiers only (cheap: few cards) */
@property --holoAng{syntax:'<angle>';inherits:false;initial-value:0deg}
.fc-holo{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;clip-path:polygon(0 4%,8% 0,92% 0,100% 4%,100% 94%,93% 100%,7% 100%,0 94%)}
.futcard.icon .fc-holo,.futcard.totw .fc-holo,.futcard.elite .fc-holo{opacity:.85;
  background:conic-gradient(from var(--holoAng),rgba(255,80,96,0),rgba(255,216,90,.6),rgba(86,255,170,.55),rgba(86,176,255,.55),rgba(190,120,255,.55),rgba(255,80,96,0));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;padding:2px;
  animation:holoEdge 5s linear infinite}
@keyframes holoEdge{to{--holoAng:360deg}}
body.calm .fc-holo,body.calm .fc-spot{animation:none!important}

/* ============================================================
   MOBILE INTERACTION FIXES — momentum scroll, snappy taps, no sideways shift
   ============================================================ */
#views{-webkit-overflow-scrolling:touch}
@media(max-width:760px){
  html,body{overflow-x:hidden;overscroll-behavior-y:none}
  #views{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
  /* kill the 300ms tap delay so buttons respond instantly */
  button,a,.navbtn,.mob-btn,[onclick],[data-view],[data-page],.set-row,.cd-side,.mv-opt,.hon,.fxrnd-tab,.fxday-tab,.pl-seg button{touch-action:manipulation}
  /* comfortable minimum tap target for small controls */
  .fxrnd-tab,.fxday-tab,.pl-seg button,.set-row{min-height:40px}
  /* the floating gear shouldn't sit under the thumb-nav */
  #settingsFab{width:46px;height:46px}
}

/* ===== LANDING VIDEO — never crop the film (owner call 2026-07-08) =====
   the parallax zoom (scale 1.32 + inset -6%) was cropping the video hard in
   a windowed browser; when the video is live the stage sits flat & full */
#hero.vidlive{inset:0;transform:none!important}
#hero.vidlive #heroVid{object-fit:cover;object-position:center 30%}

/* ===== CIRCUIT NEON THEME (DEFAULT, owner call 2026-07-08) =====
   The agreed palette: electric cyan + violet on deep space navy, trophy gold.
   Same variable system as Trionda so every accent flows automatically. */
body.theme-circuit{
  --cyan:#35e0ff;  --blue:#2e7bff;
  --magenta:#b45bff; --red:#ff4d6d;
  --purple:#b45bff; --green:#59ffa8;
  --gold:#ffd75e;  --gold2:#fff3c4;
  --mute:#8fa3c8;  --line:rgba(90,150,255,.22); --line2:rgba(90,150,255,.38);
}
body.theme-circuit #world{background:
  radial-gradient(80% 60% at 12% -6%, rgba(53,224,255,.2), transparent 60%),
  radial-gradient(80% 60% at 88% -6%, rgba(180,91,255,.22), transparent 60%),
  radial-gradient(70% 55% at 50% 108%, rgba(245,185,46,.1), transparent 60%),
  linear-gradient(180deg,#070b18 0%, #060a15 55%, #04060f 100%)}
/* faint circuit grid over the stage */
body.theme-circuit #world::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.1;
  background:linear-gradient(rgba(90,150,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(90,150,255,.5) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 12%,#000,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 65% at 50% 12%,#000,transparent 78%)}
body.theme-circuit.docked #views{background:linear-gradient(180deg, rgba(7,12,26,.34) 0%, rgba(5,9,20,.5) 60%, rgba(4,7,16,.58) 100%)}
body.theme-circuit .card,body.theme-circuit .frame{background:linear-gradient(158deg, rgba(13,22,46,.94), rgba(8,13,30,.96))}
body.theme-circuit .frame{border-image:linear-gradient(90deg,#35e0ff,#b45bff) 1}
body.theme-circuit .card::before{--c1:rgba(53,224,255,.45);--c2:rgba(180,91,255,.14)}
body.theme-circuit .navbtn.active{background:linear-gradient(180deg,rgba(53,224,255,.24),rgba(180,91,255,.12));
  border-color:rgba(53,224,255,.65);color:#fff;box-shadow:0 0 14px rgba(53,224,255,.25)}
body.theme-circuit .navbtn.active::after{background:linear-gradient(90deg,#35e0ff,#b45bff)}
body.theme-circuit .grp-tab.active,body.theme-circuit .subtab.active{background:linear-gradient(180deg,rgba(53,224,255,.22),rgba(180,91,255,.12));
  border-color:rgba(53,224,255,.55);box-shadow:0 0 12px rgba(53,224,255,.2)}
body.theme-circuit ::-webkit-scrollbar-thumb{background:linear-gradient(#35e0ff,#b45bff)}
body.theme-circuit .kof-tie{--c1:rgba(53,224,255,.4);--c2:rgba(180,91,255,.1)}
body.theme-circuit .kf-x{color:#ffd75e;text-shadow:0 0 10px rgba(255,215,94,.55)}
body.theme-circuit #auroras .b1{background:radial-gradient(circle,rgba(53,224,255,.4),transparent 62%)}
body.theme-circuit #auroras .b2{background:radial-gradient(circle,rgba(180,91,255,.4),transparent 62%)}
body.theme-circuit #auroras .b3{background:radial-gradient(circle,rgba(245,185,46,.28),transparent 62%)}
body.theme-circuit.docked #auroras{opacity:.55}
body.theme-circuit .pred-hero{background:
  radial-gradient(90% 120% at 50% -20%,rgba(53,224,255,.24),transparent 60%),
  linear-gradient(165deg,#0d1c3e,#080f24 70%);border-color:rgba(53,224,255,.45)}
body.theme-circuit .empty{background:rgba(120,170,255,.05);border-color:rgba(120,170,255,.2);color:#b9cdf2}
body.theme-circuit .panel h3{position:relative;padding-bottom:10px}
body.theme-circuit .panel h3::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#35e0ff 0 45%,#ffd75e 45% 55%,#b45bff 55% 100%)}