/* ============================================================
   EAFC WORLD CUP 2026 — COMMAND EDITION  ::  STYLES v3
   ============================================================ */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
:root{
  /* WORLD CUP 2026 tri-nation identity — electric blue / WC red / pitch green + trophy gold,
     on stadium-night navy. Gradients that were cyan->magenta->purple now read blue->red->green. */
  --cyan:#2e8bff; --magenta:#ff2748; --purple:#18cd86; --gold:#ffc83a; --gold2:#ffe9aa;
  --blue:#2b7bff; --green:#1ee98a; --red:#ff3257; --orange:#ff7a1a;
  --ink:#050a18; --ink2:#0a1228; --panel:#0c1430; --paper:#eaf0ff; --mute:#8694b8;
  --line:rgba(120,150,210,.16); --line2:rgba(120,150,210,.28);
  --disp:'Teko',sans-serif; --body:'Oswald','Arial Narrow',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--ink);color:var(--paper);font-family:var(--body);-webkit-font-smoothing:antialiased}
body{min-height:100%;overflow-x:hidden}
body.docked{overflow:hidden;height:100vh}
::selection{background:var(--cyan);color:#000}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-track{background:rgba(0,0,0,.3)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--cyan),var(--magenta));border-radius:5px}
a{color:inherit;text-decoration:none}img{display:block}
svg.ic{width:1em;height:1em;display:inline-block;vertical-align:-0.12em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ===== reusable CARD with gradient neon border + corner reticles ===== */
.card{position:relative;background:linear-gradient(158deg,rgba(34,29,18,.82),rgba(16,13,8,.92));border-radius:5px;
  --c1:rgba(255,200,58,.34);--c2:rgba(255,200,58,.06)}
.card::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(140deg,var(--c1),transparent 38%,transparent 62%,var(--c2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.reticle::after{content:"";position:absolute;inset:7px;pointer-events:none;opacity:.55;
  background:
    linear-gradient(var(--rc,var(--cyan)),var(--rc,var(--cyan))) left top/13px 1.5px no-repeat,
    linear-gradient(var(--rc,var(--cyan)),var(--rc,var(--cyan))) left top/1.5px 13px no-repeat,
    linear-gradient(var(--rc,var(--cyan)),var(--rc,var(--cyan))) right bottom/13px 1.5px no-repeat,
    linear-gradient(var(--rc,var(--cyan)),var(--rc,var(--cyan))) right bottom/1.5px 13px no-repeat}

/* ===== WORLD STAGE ===== */
#world{position:fixed;inset:0;z-index:1;overflow:hidden;background:#05070f}
#shader{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.2s ease}
#shader.on{opacity:.92}
#hero{position:absolute;inset:-6%;background-size:cover;background-position:center 42%;transform-origin:center 42%;transform:scale(1.32);will-change:transform}
#rays{position:absolute;left:50%;top:-10%;width:150vmax;height:150vmax;transform:translateX(-50%);z-index:2;pointer-events:none;
  background:conic-gradient(from 0deg at 50% 40%,transparent 0deg,rgba(25,224,255,.07) 6deg,transparent 12deg,transparent 80deg,
    rgba(168,85,255,.06) 88deg,transparent 96deg,transparent 180deg,rgba(255,45,155,.07) 188deg,transparent 196deg,transparent 300deg,rgba(255,201,77,.06) 308deg,transparent 316deg);
  mix-blend-mode:screen;opacity:0;transition:opacity 1.4s ease;animation:spin 60s linear infinite}
#rays.on{opacity:1}
#sectionBg{position:absolute;inset:-6%;z-index:3;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease}
#sectionBg.show{opacity:.26}
#motes{position:absolute;inset:0;z-index:4;pointer-events:none}
#grade{position:absolute;inset:0;z-index:5;pointer-events:none;transition:background .9s ease;
  background:radial-gradient(120% 92% at 50% 36%,transparent 38%,rgba(5,7,15,.55) 100%),linear-gradient(180deg,rgba(5,7,15,.42),transparent 24%,transparent 58%,rgba(5,7,15,.88) 100%)}
#grade.docked{background:radial-gradient(160% 140% at 50% 22%,transparent 0%,rgba(5,7,15,.66) 52%,rgba(5,7,15,.95) 100%),linear-gradient(180deg,rgba(5,7,15,.9),rgba(5,7,15,.97))}
#grain{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}

/* ===== LANDING LOGO LOCKUP (fixed title bug) ===== */
#cinematic{position:fixed;left:0;right:0;top:0;z-index:18;display:flex;flex-direction:column;align-items:center;padding-top:min(11vh,104px);pointer-events:none;text-align:center}
#cinematic.hide{opacity:0;transition:opacity .55s ease}
#cinematic .scrim{position:absolute;left:50%;top:0;width:min(900px,94vw);height:62vh;transform:translateX(-50%);z-index:-1;
  background:radial-gradient(60% 60% at 50% 32%,rgba(5,7,15,.72),transparent 72%)}
#kicker{display:inline-flex;align-items:center;gap:11px;font-family:var(--body);font-weight:500;letter-spacing:.5em;font-size:11px;color:var(--cyan);
  padding:10px 22px;background:rgba(6,10,22,.6);position:relative;border:1px solid rgba(25,224,255,.32);backdrop-filter:blur(10px);
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
#kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--magenta);box-shadow:0 0 14px var(--magenta);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.logolock{display:flex;align-items:center;gap:18px;margin-top:22px}
.logomark{width:clamp(46px,7vw,72px);height:clamp(52px,8vw,82px);flex:0 0 auto;filter:drop-shadow(0 0 18px rgba(25,224,255,.45))}
.bigtitle{font-family:var(--disp);font-weight:700;line-height:.8;letter-spacing:.01em;text-transform:uppercase;text-align:left}
#titleA{font-size:clamp(40px,8.2vw,108px);color:#fff;filter:drop-shadow(0 6px 26px rgba(0,0,0,.6))}
#titleB{font-size:clamp(28px,5.6vw,74px)}
/* per-character gradient — each glyph paints its OWN gradient so split text stays visible */
#titleA .ch{display:inline-block;will-change:transform,opacity;background:linear-gradient(180deg,#fff,#a9c6ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
#titleB .ch{display:inline-block;will-change:transform,opacity;background:linear-gradient(180deg,var(--cyan),var(--magenta) 60%,var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 0 18px rgba(255,45,155,.35))}
/* fallback if no clip support */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  #titleA .ch{color:#fff;-webkit-text-fill-color:#fff}#titleB .ch{color:var(--cyan);-webkit-text-fill-color:var(--cyan)}}
#subtitle{font-family:var(--body);font-weight:300;letter-spacing:.46em;font-size:clamp(10px,1.3vw,13px);color:#cdd7f2;margin-top:24px;padding-left:.46em;position:relative;display:inline-block}
#subtitle::before,#subtitle::after{content:"";position:absolute;top:50%;width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan))}
#subtitle::before{right:calc(100% + 14px);transform:scaleX(-1)}#subtitle::after{left:calc(100% + 14px)}

#hint{position:fixed;left:50%;bottom:3.2vh;transform:translateX(-50%);z-index:19;text-align:center;letter-spacing:.42em;font-size:10px;font-weight:300;color:#c2cce6;padding-left:.42em;transition:opacity .5s ease;pointer-events:none;opacity:0}
#hint.in{opacity:.9}
#hint .m{display:block;margin:0 auto 10px;width:22px;height:34px;border:1.5px solid rgba(255,255,255,.45);border-radius:12px;position:relative}
#hint .m::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:7px;border-radius:2px;background:var(--cyan);transform:translateX(-50%);animation:wheel 1.6s ease-in-out infinite;box-shadow:0 0 8px var(--cyan)}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,13px)}}
#scrollzone{position:relative;z-index:10;height:300vh;pointer-events:none}

/* ===== OVERVIEW HUD (rises during scroll) ===== */
#overview{position:fixed;left:0;right:0;bottom:0;z-index:16;padding:clamp(12px,2.4vw,26px);transform:translateY(114%);pointer-events:none;will-change:transform}
#ovInner{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:920px){#ovInner{grid-template-columns:repeat(2,1fr)}}
.hud{position:relative;padding:15px 16px;overflow:hidden;backdrop-filter:blur(16px);--c1:var(--tc,rgba(25,224,255,.4));--c2:rgba(120,150,210,.05)}
.hud .k{font-size:9px;letter-spacing:.2em;color:var(--mute);text-transform:uppercase;display:flex;align-items:center;gap:6px}
.hud .k .ic{color:var(--tc,var(--cyan))}
.hud .v{font-family:var(--disp);font-weight:600;font-size:clamp(26px,3.4vw,40px);line-height:.92;margin-top:5px;color:#fff}
.hud .s{font-size:9px;letter-spacing:.14em;color:#76849f;margin-top:3px}
.hud.wide{grid-column:span 2}
.cd{display:flex;gap:11px;margin-top:7px}
.cd div{text-align:center}
.cd .n{font-family:var(--disp);font-weight:600;font-size:32px;line-height:.9;color:var(--cyan);text-shadow:0 0 16px rgba(25,224,255,.45)}
.cd .l{font-size:8px;letter-spacing:.16em;color:var(--mute)}
.vs{display:flex;align-items:center;gap:9px;margin-top:7px;font-family:var(--disp);font-size:18px}
.vs .team{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs .mid{color:var(--magenta);font-weight:700;flex:0 0 auto;text-shadow:0 0 12px rgba(255,45,155,.5)}
.vs .team.r{text-align:right}
.ovface{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--line2);background:#0a1020 center/cover;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:15px;color:var(--gold)}

/* ===== HEADER ===== */
#appHeader{position:fixed;top:0;left:0;right:0;z-index:30;transform:translateY(-130%);transition:transform .8s cubic-bezier(.16,1,.3,1)}
#appHeader.show{transform:translateY(0)}
#banner{position:relative;display:flex;align-items:center;overflow:hidden;height:34px;background:linear-gradient(90deg,#080c1a,#0c1330 50%,#080c1a);border-bottom:1px solid rgba(25,224,255,.22)}
#banner::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--magenta) 35%,var(--purple) 65%,var(--cyan));background-size:200% 100%;animation:flow 6s linear infinite}
@keyframes flow{to{background-position:200% 0}}
#banner .live-pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:100%;padding:0 16px;z-index:2;background:linear-gradient(90deg,var(--magenta),#b3186a);font-size:10px;letter-spacing:.22em;font-weight:600;color:#fff;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
#banner .live-pill .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.2s infinite}
#tickerWrap{flex:1;overflow:hidden}
#tickerTrack{display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.14em;color:#e6ecfb;text-transform:uppercase;animation:ticker 26s linear infinite}
#banner:hover #tickerTrack{animation-play-state:paused}
#tickerTrack .sep{color:var(--cyan);margin:0 18px;font-size:9px}
#tickerTrack b{color:var(--gold);font-weight:600}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#nav{display:flex;align-items:center;gap:6px;padding:10px clamp(10px,2vw,22px);flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:linear-gradient(180deg,rgba(6,9,18,.96),rgba(6,9,18,.8));border-bottom:1px solid var(--line)}
#nav::-webkit-scrollbar{display:none}
#brand{display:flex;align-items:center;gap:11px;margin-right:auto;cursor:pointer;flex:0 0 auto}
#brand .crest{width:30px;height:34px;flex:0 0 auto;filter:drop-shadow(0 0 10px rgba(25,224,255,.5))}
#brand b{font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:.05em;line-height:1}
#brand span{display:block;font-size:8px;letter-spacing:.34em;color:var(--cyan);font-weight:500}
.navbtn{position:relative;flex:0 0 auto;font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.08em;color:#c2cbe6;background:rgba(255,255,255,.03);border:1px solid var(--line);padding:10px 14px;cursor:pointer;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);transition:.2s;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;opacity:0;transform:translateY(-8px)}
#appHeader.ready .navbtn{opacity:1;transform:none}
.navbtn .ic{font-size:14px;color:var(--mute);transition:.2s}
.navbtn:hover{color:#fff;background:rgba(25,224,255,.14);border-color:rgba(25,224,255,.5);transform:translateY(-2px)}
.navbtn:hover .ic{color:var(--cyan)}
.navbtn.active{color:#fff;background:linear-gradient(180deg,rgba(25,224,255,.2),rgba(168,85,255,.14));border-color:rgba(25,224,255,.6);box-shadow:0 0 18px rgba(25,224,255,.25)}
.navbtn.active .ic{color:var(--cyan)}
.navbtn.active::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--magenta))}
.navbtn.home,.navbtn.admin{color:var(--gold);border-color:rgba(255,201,77,.28)}
.navbtn.home .ic,.navbtn.admin .ic{color:var(--gold)}

/* ===== VIEWS ===== */
#views{position:fixed;left:0;right:0;top:0;bottom:0;z-index:20;display:none;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(var(--hh,104px) + 16px) clamp(14px,4vw,50px) 90px}
#views.show{display:block}
.view{display:none;max-width:1300px;margin:0 auto}
.view.active{display:block}
.view.active .anim{animation:rise .6s cubic-bezier(.16,1,.3,1) both}
.view.active .anim:nth-child(2){animation-delay:.05s}.view.active .anim:nth-child(3){animation-delay:.1s}.view.active .anim:nth-child(4){animation-delay:.15s}.view.active .anim:nth-child(5){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* section masthead */
.vhead{position:relative;display:flex;align-items:center;gap:18px;padding:30px 26px;margin-bottom:26px;overflow:hidden;border-radius:6px}
.vhead .vh-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.36;z-index:0;transform:scale(1.05);animation:slowzoom 18s ease-in-out infinite alternate}
@keyframes slowzoom{to{transform:scale(1.14)}}
.vhead .vh-grad{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(5,8,18,.95),rgba(5,8,18,.5) 58%,rgba(5,8,18,.2))}
.vhead .vh-edge{position:absolute;left:0;top:0;bottom:0;width:4px;z-index:2;background:linear-gradient(180deg,var(--gold),var(--magenta) 40%,var(--purple) 70%,var(--blue))}
.vhead .vh-line{position:absolute;left:0;right:0;bottom:0;height:1px;z-index:2;background:linear-gradient(90deg,var(--cyan),transparent 60%)}
.vhead>*{position:relative;z-index:3}
.vhead .ico{width:54px;height:54px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--cyan);
  background:linear-gradient(145deg,rgba(25,224,255,.16),rgba(168,85,255,.1));border:1px solid rgba(25,224,255,.3);border-radius:12px;box-shadow:0 0 22px rgba(25,224,255,.2)}
.vhead h2{font-family:var(--disp);font-weight:600;font-size:clamp(36px,6.4vw,66px);line-height:.82;letter-spacing:.02em}
.vhead .sub{font-size:11px;letter-spacing:.3em;color:var(--cyan);margin-top:6px;text-transform:uppercase}
.vhead .spacer{flex:1}
.badge{font-size:10px;letter-spacing:.18em;color:var(--mute);border:1px solid var(--line2);padding:8px 14px;white-space:nowrap;border-radius:4px;display:inline-flex;align-items:center;gap:7px}
.badge.live{color:var(--green);border-color:rgba(30,233,138,.45)}
.badge.live .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.4s infinite}

.panel{position:relative;padding:22px;margin-bottom:16px}
.panel h3{font-family:var(--disp);font-size:25px;letter-spacing:.03em;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.panel h3 .ic{color:var(--cyan);font-size:22px}
.empty{padding:46px 24px;text-align:center;color:var(--mute);font-weight:300;letter-spacing:.04em;border:1px dashed var(--line2);border-radius:6px;background:rgba(255,255,255,.02)}
.empty b{color:#fff;font-weight:500}
.cols2{display:grid;grid-template-columns:1.15fr 1fr;gap:16px}
@media(max-width:820px){.cols2{grid-template-columns:1fr}}
.btn{font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.1em;color:#cdd7f0;background:rgba(255,255,255,.04);border:1px solid var(--line2);padding:10px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.2s;border-radius:4px}
.btn:hover{color:#fff;background:rgba(25,224,255,.14);border-color:var(--cyan);transform:translateY(-2px)}
.btn .ic{font-size:14px}

/* stat tiles row */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
@media(max-width:820px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{position:relative;padding:20px 18px;overflow:hidden;--rc:var(--tc,var(--cyan));--c1:color-mix(in srgb,var(--tc,var(--cyan)) 45%,transparent);--c2:rgba(120,150,210,.05)}
.tile .ic{font-size:20px;color:var(--tc,var(--cyan))}
.tile .v{font-family:var(--disp);font-weight:600;font-size:42px;line-height:.85;margin-top:8px;color:#fff}
.tile .l{font-size:10px;letter-spacing:.16em;color:var(--mute);text-transform:uppercase;margin-top:6px}
.tile .sub{font-size:11px;letter-spacing:.06em;color:var(--tc,var(--cyan));margin-top:2px;font-family:var(--disp);font-size:18px}

/* SPOTLIGHT hero card */
.spot{position:relative;display:grid;grid-template-columns:auto 1fr;gap:20px;padding:24px;overflow:hidden;--c1:rgba(255,201,77,.4);--c2:rgba(255,201,77,.05)}
.spot .glowbg{position:absolute;inset:0;z-index:0;background:radial-gradient(70% 90% at 18% 50%,rgba(255,201,77,.14),transparent 60%)}
.spot>*{position:relative;z-index:1}
.spot .pic{width:clamp(96px,16vw,136px);height:clamp(96px,16vw,136px);border-radius:50%;object-fit:cover;background:#0a1020 center/cover;border:2px solid var(--gold);box-shadow:0 0 34px rgba(255,201,77,.35);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:54px;color:var(--gold);flex:0 0 auto}
.spot .tag{font-size:10px;letter-spacing:.26em;color:var(--gold);text-transform:uppercase;display:flex;align-items:center;gap:7px}
.spot .nm{font-family:var(--disp);font-size:clamp(34px,5vw,54px);line-height:.85;margin:4px 0 2px}
.spot .aka{font-size:11px;letter-spacing:.14em;color:var(--cyan)}
.spot .row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.spot .cell .n{font-family:var(--disp);font-size:30px;line-height:.9;color:#fff}
.spot .cell .n.gd{color:var(--gold)}
.spot .cell .cl{font-size:9px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase;margin-top:3px}
.spot .barwrap{margin-top:16px}
.spot .barwrap .bl{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase;margin-bottom:6px}
.spot .barwrap .bl b{color:var(--gold);font-family:var(--disp);font-size:16px}
@media(max-width:560px){.spot{grid-template-columns:1fr;text-align:center}.spot .pic{margin:0 auto}.spot .row{grid-template-columns:repeat(2,1fr)}}

/* strength bar */
.sbar{height:9px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden;position:relative}
.sbar i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,var(--gold),#ff9d2a);box-shadow:0 0 12px rgba(255,201,77,.45);width:0;transition:width 1.1s cubic-bezier(.16,1,.3,1)}

/* form circles */
.formc{display:inline-flex;gap:4px}
.formc i{width:18px;height:18px;border-radius:50%;font-style:normal;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid}
.formc i.W{color:var(--green);border-color:var(--green);box-shadow:0 0 8px rgba(30,233,138,.35)}
.formc i.D{color:var(--mute);border-color:var(--mute)}
.formc i.L{color:var(--red);border-color:var(--red)}

/* HEADLINES strip */
.heads{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.head{position:relative;display:flex;gap:12px;padding:14px;align-items:flex-start;--c1:color-mix(in srgb,var(--hc,var(--cyan)) 40%,transparent);--c2:rgba(120,150,210,.05)}
.head .hi{width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--hc,var(--cyan));background:color-mix(in srgb,var(--hc,var(--cyan)) 14%,transparent);border:1px solid color-mix(in srgb,var(--hc,var(--cyan)) 35%,transparent)}
.head .ht{font-family:var(--disp);font-size:16px;line-height:1.05;letter-spacing:.02em}
.head .hd{font-size:11px;color:var(--mute);line-height:1.4;margin-top:4px;font-weight:300}
.head .hm{font-size:9px;letter-spacing:.12em;color:var(--hc,var(--cyan));margin-top:6px;text-transform:uppercase}

/* FIXTURES */
.fxgroup-title{font-family:var(--disp);font-size:24px;letter-spacing:.04em;color:#fff;margin:24px 0 12px;display:flex;align-items:center;gap:11px}
.fxgroup-title .ic{color:var(--cyan);font-size:20px}
.fx{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:14px 18px;margin-bottom:10px;overflow:hidden;--c1:rgba(120,150,210,.22);--c2:rgba(120,150,210,.05);transition:.2s}
.fx::after{content:"";position:absolute;left:-60%;top:0;bottom:0;width:50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);transform:skewX(-20deg);transition:.6s;pointer-events:none}
.fx:hover{transform:translateX(3px);--c1:rgba(25,224,255,.5)}
.fx:hover::after{left:160%}
.fx.done{opacity:.85}
.fx .side{display:flex;align-items:center;gap:11px;min-width:0;cursor:pointer}
.fx .side.r{flex-direction:row-reverse;text-align:right}
.fx .nm{font-family:var(--disp);font-size:16px;letter-spacing:.01em;line-height:1.04;overflow:hidden}
.fx .face{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid var(--line2);background:#0a1020 center/cover;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:18px;color:var(--gold)}
.fx .mid{text-align:center;flex:0 0 auto;min-width:84px}
.fx .score{font-family:var(--disp);font-size:32px;font-weight:600;line-height:.9;letter-spacing:.04em}
.fx .score .x{color:var(--mute);font-size:18px;margin:0 5px}
.fx .when{font-size:10px;letter-spacing:.1em;color:var(--mute);margin-top:3px;white-space:nowrap}
.fx .when.live{color:var(--green)}.fx .when.next{color:var(--gold)}
.fx .rnd{font-size:9px;letter-spacing:.14em;color:#5e6a88;text-transform:uppercase}

/* STANDINGS */
.grp-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.grp-tab{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.09em;color:#c2cbe6;background:rgba(255,255,255,.04);border:1px solid var(--line);padding:10px 17px;cursor:pointer;border-radius:4px;transition:.2s}
.grp-tab:hover{color:#fff;border-color:var(--line2)}
.grp-tab.active{background:linear-gradient(180deg,rgba(25,224,255,.18),rgba(168,85,255,.12));border-color:rgba(25,224,255,.55);color:#fff;box-shadow:0 0 14px rgba(25,224,255,.2)}
.stwrap{padding:8px 10px}
.stbl{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:14px}
.stbl th{font-family:var(--body);font-weight:500;font-size:10px;letter-spacing:.16em;color:var(--mute);text-transform:uppercase;text-align:center;padding:6px 7px}
.stbl th.l{text-align:left}
.stbl td{padding:11px 7px;text-align:center;background:rgba(255,255,255,.02);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stbl td:first-child{border-left:1px solid var(--line);border-radius:5px 0 0 5px}
.stbl td:last-child{border-right:1px solid var(--line);border-radius:0 5px 5px 0}
.stbl td.l{text-align:left}
.stbl tbody tr{transition:.18s}
.stbl tbody tr:hover td{background:rgba(25,224,255,.06)}
.stbl tr.lead td{background:linear-gradient(90deg,rgba(255,201,77,.16),rgba(255,201,77,.03));border-color:rgba(255,201,77,.4)}
.stbl tr.lead td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.stbl .pname{display:flex;align-items:center;gap:11px;cursor:pointer}
.stbl .face{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid var(--line2);background:#0a1020 center/cover;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:15px;color:var(--gold)}
.stbl .nm{font-family:var(--disp);font-size:20px;letter-spacing:.02em}
.stbl .pts{font-family:var(--disp);font-size:23px;color:var(--gold);font-weight:600;text-shadow:0 0 12px rgba(255,201,77,.3)}
.stbl tr.q1 td:first-child{box-shadow:inset 3px 0 0 var(--green)}
.stbl tr.q2 td:first-child{box-shadow:inset 3px 0 0 var(--cyan)}
.rankn{font-family:var(--disp);font-size:21px;color:#fff}
.rankn.medal{color:var(--gold)}
.react{display:inline-flex;gap:5px;align-items:center}
.rbtn{cursor:pointer;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;position:relative;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.03);transition:.18s;user-select:none}
.rbtn svg{width:16px;height:16px}
.rbtn .c{position:absolute;top:-7px;right:-7px;font-family:var(--disp);font-size:12px;color:#05070f;background:var(--gold);min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1}
.rbtn:hover{transform:translateY(-2px) scale(1.08);border-color:var(--cyan);background:rgba(25,224,255,.14);box-shadow:0 4px 14px rgba(25,224,255,.22)}
.rbtn.on{border-color:var(--gold);background:rgba(255,201,77,.18)}
.rbtn.pop{animation:pop .45s}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}

/* KNOCKOUT — theatre + connectors */
.koWrap{position:relative}
.bracketScroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:10px}
.bracket{position:relative;display:flex;gap:clamp(28px,5vw,72px);padding:10px 4px 20px;min-width:max-content}
#bracketLines{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible}
.round{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-around;gap:16px;min-width:188px}
.round-label{font-family:var(--body);font-weight:500;font-size:10px;letter-spacing:.22em;color:var(--cyan);text-transform:uppercase;text-align:center;margin-bottom:6px}
.tie{position:relative;overflow:hidden;--c1:rgba(120,150,210,.28);--c2:rgba(120,150,210,.05);transition:.2s}
.tie:hover{--c1:rgba(25,224,255,.55);transform:scale(1.02)}
.tie .row{display:flex;align-items:center;gap:9px;padding:9px 12px}
.tie .row+.row{border-top:1px solid var(--line)}
.tie .row.win{background:linear-gradient(90deg,rgba(25,224,255,.12),transparent)}
.tie .row.win .nm,.tie .row.win .sc{color:var(--cyan)}
.tie .row.win.gold{background:linear-gradient(90deg,rgba(255,201,77,.14),transparent)}
.tie .row.win.gold .nm,.tie .row.win.gold .sc{color:var(--gold)}
.tie .face{width:26px;height:26px;border-radius:50%;object-fit:cover;border:1px solid var(--line2);background:#0a1020 center/cover;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:12px;color:var(--gold)}
.tie .nm{font-family:var(--disp);font-size:16px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tie .sc{font-family:var(--disp);font-size:18px;color:#fff;flex:0 0 auto}
.tie .tbd{color:var(--mute);font-family:var(--disp);font-size:15px}
/* champion card */
.champ{position:relative;align-self:center;width:240px;padding:24px 18px;text-align:center;overflow:hidden;--c1:rgba(255,201,77,.55);--c2:rgba(168,85,255,.2)}
.champ .burst{position:absolute;inset:0;z-index:0;background:radial-gradient(60% 60% at 50% 42%,rgba(255,201,77,.22),transparent 65%);animation:pulseGlow 3s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{opacity:.7}50%{opacity:1}}
.champ>*{position:relative;z-index:1}
.champ .lbl{font-size:10px;letter-spacing:.28em;color:var(--cyan);text-transform:uppercase}
.champ .who{font-family:var(--disp);font-size:34px;line-height:.9;margin:4px 0 14px;color:#fff;text-shadow:0 0 22px rgba(255,201,77,.4)}
.champ .tr{color:var(--gold);filter:drop-shadow(0 0 26px rgba(255,201,77,.7));animation:float 3s ease-in-out infinite}
.champ .tr svg{width:88px;height:88px}
.champ .foot{margin-top:14px;font-size:9px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;padding-top:12px;border-top:1px solid rgba(255,201,77,.25)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* road to final */
.road .rr{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.road .rr:last-child{border-bottom:0}
.road .rr .rl{font-size:9px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase;width:96px;flex:0 0 auto}
.road .rr .ro{font-family:var(--disp);font-size:17px;flex:1}
.road .rr .rs{font-family:var(--disp);font-size:16px;color:#fff}
.road .rr .wbadge{width:22px;height:22px;border-radius:5px;background:rgba(30,233,138,.16);border:1px solid rgba(30,233,138,.5);color:var(--green);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:12px}

/* PLAYERS — status-tinted roster cards */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px;perspective:1400px}
.pcard{position:relative;padding:16px;cursor:pointer;overflow:hidden;transform-style:preserve-3d;will-change:transform;transition:box-shadow .25s;
  --c1:color-mix(in srgb,var(--sc,var(--cyan)) 55%,transparent);--c2:color-mix(in srgb,var(--sc,var(--cyan)) 10%,transparent)}
.pcard:hover{box-shadow:0 22px 60px rgba(0,0,0,.55),0 0 26px color-mix(in srgb,var(--sc,var(--cyan)) 22%,transparent)}
.pcard .glare{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 45%)}
.pcard:hover .glare{opacity:1}
.pcard .topbar{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--sc,var(--cyan)),transparent 80%)}
.pcard .phead{display:flex;align-items:center;gap:12px;transform:translateZ(26px)}
.pcard .rnum{font-family:var(--disp);font-size:34px;line-height:.8;color:var(--sc,var(--cyan));width:34px;flex:0 0 auto;text-shadow:0 0 14px color-mix(in srgb,var(--sc,var(--cyan)) 45%,transparent)}
.pcard .av{width:50px;height:50px;border-radius:50%;object-fit:cover;background:#0a1020 center/cover;border:2px solid var(--sc,var(--cyan));flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:22px;color:var(--sc,var(--cyan));box-shadow:0 0 18px color-mix(in srgb,var(--sc,var(--cyan)) 30%,transparent)}
.pcard .pid{min-width:0;flex:1}
.pcard .pid .nm{font-family:var(--disp);font-size:25px;line-height:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .stbadge{display:inline-block;margin-top:3px;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:3px 8px;border-radius:3px;color:var(--sc,var(--cyan));background:color-mix(in srgb,var(--sc,var(--cyan)) 14%,transparent);border:1px solid color-mix(in srgb,var(--sc,var(--cyan)) 40%,transparent)}
.pcard .prow{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:16px;transform:translateZ(16px)}
.pcard .prow .c{text-align:center}
.pcard .prow .c .n{font-family:var(--disp);font-size:21px;line-height:.9;color:#fff}
.pcard .prow .c .n.gd{color:var(--gold)}
.pcard .prow .c .cl{font-size:8px;letter-spacing:.1em;color:var(--mute);text-transform:uppercase;margin-top:3px}
.pcard .pfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;transform:translateZ(12px)}
.pcard .winwrap{flex:1}
.pcard .winwrap .wl{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase;margin-bottom:5px}
.pcard .winwrap .wl b{color:var(--sc,var(--cyan));font-family:var(--disp);font-size:13px}
.pcard .winwrap .wbar{height:7px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden;position:relative}
.pcard .winwrap .wbar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:linear-gradient(90deg,var(--sc,var(--cyan)),color-mix(in srgb,var(--sc,var(--cyan)) 40%,#fff));width:0;transition:width 1.1s cubic-bezier(.16,1,.3,1)}

/* PROFILE modal */
#profile{position:fixed;inset:0;z-index:55;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;background:rgba(4,5,9,.95);padding:18px}
#profile.show{display:flex;animation:fade .3s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.pf{width:min(740px,96vw);max-height:92vh;overflow:auto;background:linear-gradient(160deg,rgba(14,20,42,.97),rgba(8,11,26,.98));border-radius:6px;position:relative;animation:rise .4s cubic-bezier(.16,1,.3,1);--c1:rgba(25,224,255,.4);--c2:rgba(168,85,255,.15)}
.pf-hero{position:relative;display:flex;gap:20px;align-items:center;padding:26px;overflow:hidden;border-bottom:1px solid var(--line)}
.pf-hero .pf-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.26;transform:scale(1.1);animation:slowzoom 16s ease-in-out infinite alternate}
.pf-hero .pf-grad{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,10,22,.95),rgba(6,10,22,.4))}
.pf-hero>*{position:relative;z-index:2}
.pf-face{width:104px;height:104px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);background:#0a1020 center/cover;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:44px;color:var(--gold);box-shadow:0 0 30px rgba(255,201,77,.35)}
.pf-id .nm{font-family:var(--disp);font-size:46px;line-height:.84}
.pf-id .aka{font-size:12px;letter-spacing:.18em;color:var(--cyan);margin-top:5px}
.pf-id .dep{font-size:11px;letter-spacing:.08em;color:var(--mute);margin-top:9px;display:flex;align-items:center;gap:6px}
.pf-id .rank{display:inline-block;margin-top:11px;font-family:var(--disp);font-size:15px;color:#fff;background:linear-gradient(180deg,rgba(25,224,255,.22),rgba(168,85,255,.16));border:1px solid rgba(25,224,255,.5);padding:4px 13px;border-radius:4px}
.pf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
@media(max-width:560px){.pf-stats{grid-template-columns:repeat(2,1fr)}}
.pf-stat{background:rgba(10,14,30,.96);padding:18px 12px;text-align:center}
.pf-stat .n{font-family:var(--disp);font-size:36px;line-height:.9;color:#fff}
.pf-stat .n.gd{color:var(--gold)}.pf-stat .n.gr{color:var(--green)}.pf-stat .n.rd{color:var(--red)}.pf-stat .n.yl{color:#ffd84d}
.pf-stat .l{font-size:9px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase;margin-top:5px}
.pf-section{padding:20px 26px}
.pf-section h4{font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.2em;color:var(--cyan);text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.pf-results .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.pf-results .opp{display:flex;align-items:center;gap:10px}
.pf-results .res{font-family:var(--disp);font-size:19px}
.pf-results .res.W{color:var(--green)}.pf-results .res.D{color:var(--mute)}.pf-results .res.L{color:var(--red)}
.pf-close{position:absolute;top:16px;right:18px;z-index:5;cursor:pointer;color:#cdd6ee;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line2);background:rgba(0,0,0,.45);border-radius:5px;transition:.2s}
.pf-close:hover{color:#fff;border-color:var(--red);background:rgba(255,50,87,.18)}.pf-close svg{width:16px;height:16px}

/* HEAD TO HEAD */
.h2h-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:24px}
.h2h-controls select{font-family:var(--body);font-weight:500;letter-spacing:.05em;font-size:14px;background:rgba(0,0,0,.45);border:1px solid var(--line2);color:#fff;padding:12px 14px;outline:none;cursor:pointer;min-width:170px;border-radius:4px}
.h2h-controls select:focus{border-color:var(--cyan)}
/* Dropdown option list — force a dark popup so white-on-white names are readable
   (the native popup was inheriting white text on a default white background). */
select{color-scheme:dark}
select option,select optgroup{background:#0c1119!important;color:#fff!important}
select option:checked,select option:hover{background:#1b2536!important;color:var(--gold)!important}
.h2h-controls .vsword{font-family:var(--disp);font-size:26px;color:var(--magenta);text-shadow:0 0 14px rgba(255,45,155,.5)}
.h2h-stage{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(10px,3vw,30px);align-items:center;margin-bottom:26px}
@media(max-width:680px){.h2h-stage{grid-template-columns:1fr 1fr}.h2h-mid{grid-column:1/3;order:-1}}
.h2h-fighter{text-align:center}
.h2h-fighter .big{width:clamp(112px,19vw,182px);height:clamp(112px,19vw,182px);border-radius:50%;margin:0 auto 16px;object-fit:cover;border:2px solid var(--line2);background:#0a1020 center/cover;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:70px;color:rgba(255,201,77,.5)}
.h2h-fighter.a .big{border-color:rgba(25,224,255,.65);box-shadow:0 0 40px rgba(25,224,255,.32)}
.h2h-fighter.b .big{border-color:rgba(255,45,155,.65);box-shadow:0 0 40px rgba(255,45,155,.32)}
.h2h-fighter .nm{font-family:var(--disp);font-size:30px;letter-spacing:.02em}
.h2h-fighter .tag{font-size:10px;letter-spacing:.2em;color:var(--mute);text-transform:uppercase}
.h2h-mid .vsx{font-family:var(--disp);font-size:clamp(40px,8vw,74px);color:var(--magenta);line-height:.8;text-shadow:0 0 24px rgba(255,45,155,.5)}
.h2h-tale{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;text-align:center;margin-bottom:10px}
.h2h-tale .cell{position:relative;padding:20px 10px;--c1:rgba(120,150,210,.25);--c2:rgba(120,150,210,.05)}
.h2h-tale .n{font-family:var(--disp);font-size:42px;line-height:.9}
.h2h-tale .n.a{color:var(--cyan)}.h2h-tale .n.b{color:var(--magenta)}.h2h-tale .n.d{color:var(--mute)}
.h2h-tale .l{font-size:10px;letter-spacing:.16em;color:var(--mute);margin-top:6px;text-transform:uppercase}
.h2h-log .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px}
.h2h-log .row .sc{font-family:var(--disp);font-size:21px;color:#fff}

/* LIVE FEED */
.feed{display:flex;flex-direction:column;gap:11px}
.cmt{position:relative;padding:15px 17px;overflow:hidden;--c1:color-mix(in srgb,var(--ac,var(--gold)) 45%,transparent);--c2:rgba(120,150,210,.05)}
.cmt .bar{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ac,var(--gold));box-shadow:0 0 12px var(--ac,var(--gold))}
.cmt .top{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.cmt .who{font-family:var(--disp);font-size:17px;letter-spacing:.04em;display:flex;align-items:center;gap:7px}
.cmt .who .ic{color:var(--green);font-size:15px}
.cmt .tag{font-size:8px;letter-spacing:.16em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line);color:var(--mute);border-radius:3px}
.cmt .tag.bot{color:var(--green);border-color:rgba(30,233,138,.4)}
.cmt .tag.admin{color:var(--gold);border-color:rgba(255,201,77,.4)}
.cmt .time{margin-left:auto;font-size:10px;letter-spacing:.1em;color:#5e6a88}
.cmt .body{font-size:15px;line-height:1.55;color:#dce3f5;font-weight:300}
.cmt .body b{color:#fff;font-weight:600}
.cmt .edit{position:absolute;top:11px;right:13px;cursor:pointer;color:var(--mute);font-size:12px;display:none}
.cmt:hover .edit{display:block}
.feedComposer{display:flex;gap:10px;margin-bottom:20px}
.feedComposer input{flex:1;background:rgba(0,0,0,.45);border:1px solid var(--line2);color:#fff;padding:13px 15px;font-family:var(--body);letter-spacing:.04em;outline:none;border-radius:4px}
.feedComposer input:focus{border-color:var(--cyan)}
.feedComposer button{padding:0 22px;background:linear-gradient(135deg,var(--cyan),var(--blue));color:#02060f;border:none;font-family:var(--body);font-weight:600;letter-spacing:.08em;cursor:pointer;display:flex;align-items:center;gap:8px;transition:.2s;border-radius:4px}
.feedComposer button:hover{filter:brightness(1.1)}

/* ANALYTICS */
.an-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:18px}
@media(max-width:820px){.an-grid{grid-template-columns:repeat(2,1fr)}}
.an{position:relative;padding:22px 16px;overflow:hidden;--rc:var(--ac,var(--cyan));--c1:color-mix(in srgb,var(--ac,var(--cyan)) 45%,transparent);--c2:rgba(120,150,210,.05)}
.an .ic{color:var(--ac,var(--cyan));font-size:18px}
.an .n{font-family:var(--disp);font-size:46px;line-height:.85;margin-top:6px;color:#fff}
.an .l{font-size:10px;letter-spacing:.16em;color:var(--mute);text-transform:uppercase;margin-top:6px}
.bars{display:flex;flex-direction:column;gap:11px}
.bar{display:grid;grid-template-columns:150px 1fr auto;gap:12px;align-items:center}
.bar .bl{font-family:var(--disp);font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .track{height:13px;background:rgba(255,255,255,.06);border-radius:7px;overflow:hidden}
.bar .fill{height:100%;border-radius:7px;background:linear-gradient(90deg,var(--cyan),var(--magenta));transition:width 1.1s cubic-bezier(.16,1,.3,1);box-shadow:0 0 14px rgba(25,224,255,.4)}
.bar .bv{font-family:var(--disp);font-size:18px;color:var(--gold)}

/* PRIZES */
.prize-stage{position:relative;padding:14px 8px 4px}
.prize-stage .lfig{width:96px;height:120px}
.prize-stage .pod-1 .lfig{width:116px;height:144px}
.prize-stage .pod{padding-top:6px}
.podium{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:clamp(8px,2vw,22px);align-items:end;max-width:840px;margin:0 auto}
@media(max-width:560px){.podium{gap:6px}}
.pod{position:relative;text-align:center}
.pod .ava{width:clamp(64px,13vw,108px);height:clamp(64px,13vw,108px);border-radius:50%;margin:0 auto 12px;object-fit:cover;background:#0a1020 center/cover;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:40px;position:relative;animation:dropin .7s cubic-bezier(.16,1,.3,1) both;cursor:pointer}
.pod.g1 .ava{border:3px solid var(--gold);box-shadow:0 0 40px rgba(255,201,77,.55);color:var(--gold);animation-delay:.3s}
.pod.g2 .ava{border:3px solid #cdd8e8;box-shadow:0 0 28px rgba(205,216,232,.4);color:#cdd8e8;animation-delay:.15s}
.pod.g3 .ava{border:3px solid #d6914a;box-shadow:0 0 28px rgba(214,145,74,.4);color:#d6914a}
@keyframes dropin{from{opacity:0;transform:translateY(-40px) scale(.8)}to{opacity:1;transform:none}}
.pod .crown{position:absolute;left:50%;top:-26px;transform:translateX(-50%);color:var(--gold);filter:drop-shadow(0 0 12px rgba(255,201,77,.7));animation:float 2.6s ease-in-out infinite}
.pod .crown svg{width:34px;height:34px}
.pod .nm{font-family:var(--disp);font-size:clamp(18px,3vw,26px);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod .pts{font-family:var(--disp);font-size:16px;color:var(--gold)}
.pod .base{margin-top:12px;position:relative;border:1px solid var(--line2);overflow:hidden;border-radius:5px 5px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 8px}
.pod.g1 .base{height:clamp(120px,20vw,168px);background:linear-gradient(180deg,rgba(255,201,77,.2),rgba(255,201,77,.03));border-color:rgba(255,201,77,.4)}
.pod.g2 .base{height:clamp(92px,16vw,128px);background:linear-gradient(180deg,rgba(205,216,232,.16),rgba(205,216,232,.02));border-color:rgba(205,216,232,.35)}
.pod.g3 .base{height:clamp(72px,13vw,104px);background:linear-gradient(180deg,rgba(214,145,74,.16),rgba(214,145,74,.02));border-color:rgba(214,145,74,.35)}
.pod .place{font-family:var(--disp);font-size:clamp(34px,6vw,56px);line-height:.8;opacity:.5}
.pod.g1 .place{color:var(--gold)}.pod.g2 .place{color:#cdd8e8}.pod.g3 .place{color:#d6914a}
.pod .prize{font-size:10px;letter-spacing:.12em;color:#dce3f5;text-transform:uppercase;font-weight:500;line-height:1.3}
.pod .base .shine{position:absolute;left:-60%;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-20deg);animation:podshine 3.5s ease-in-out infinite}
@keyframes podshine{0%{left:-60%}60%,100%{left:160%}}
.chasers{margin-top:8px}
.chase{position:relative;display:grid;grid-template-columns:30px 150px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.chase .rk{font-family:var(--disp);font-size:18px;color:var(--mute);text-align:center}
.chase .who{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-size:18px;cursor:pointer}
.chase .who .face{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#0a1020 center/cover;border:1px solid var(--line2);flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--gold)}
.chase .track{position:relative;height:14px;background:rgba(255,255,255,.05);border-radius:7px;overflow:hidden}
.chase .fill{position:absolute;left:0;top:0;bottom:0;border-radius:7px;background:linear-gradient(90deg,#5e6a88,var(--cyan));transition:width 1.2s cubic-bezier(.16,1,.3,1)}
.chase .gap{font-family:var(--body);font-size:11px;letter-spacing:.06em;color:var(--mute);white-space:nowrap}
.chase .gap b{color:var(--gold);font-family:var(--disp);font-size:15px}
.prize-note{text-align:center;font-size:11px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase;margin:18px 0 6px;display:flex;align-items:center;justify-content:center;gap:8px}

/* ADMIN */
#admin{position:fixed;inset:0;z-index:60;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;background:rgba(4,5,9,.96);padding:18px}
#admin.show{display:flex;animation:fade .3s}
.adbox{width:min(580px,96vw);max-height:94vh;overflow:auto;padding:30px;background:linear-gradient(160deg,rgba(14,20,42,.98),rgba(8,11,26,.98));border:1px solid rgba(25,224,255,.28);position:relative;border-radius:6px;animation:rise .4s cubic-bezier(.16,1,.3,1)}
.adbox h3{font-family:var(--disp);font-weight:600;font-size:29px;letter-spacing:.04em;color:var(--cyan);display:flex;align-items:center;gap:10px}
.adbox .lede{font-size:12px;color:var(--mute);margin:6px 0 16px;line-height:1.6}
.fld{margin-top:14px}
.fld label{display:block;font-size:10px;letter-spacing:.16em;color:var(--mute);text-transform:uppercase;margin-bottom:6px}
.adbox input,.adbox select{width:100%;padding:12px 13px;background:rgba(0,0,0,.45);border:1px solid var(--line2);color:#fff;font-family:var(--body);letter-spacing:.05em;font-size:14px;outline:none;border-radius:4px}
.adbox input:focus,.adbox select:focus{border-color:var(--cyan)}
.adbox input[type=file]{padding:8px;font-size:12px}
.fld.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fld.two label{grid-column:1/3}
.arow{display:flex;gap:10px;margin-top:18px}
.adbox button{flex:1;padding:13px;font-family:var(--body);font-weight:500;letter-spacing:.1em;font-size:12px;cursor:pointer;border:1px solid var(--line2);background:rgba(255,255,255,.05);color:#c2cbe6;transition:.2s;border-radius:4px}
.adbox button:hover{background:rgba(255,255,255,.1);color:#fff}
.adbox button.go{background:linear-gradient(135deg,var(--cyan),var(--blue));color:#02060f;border:none;font-weight:700}
.adbox button.go:hover{filter:brightness(1.08)}
.admMsg{font-size:11px;letter-spacing:.03em;margin-top:12px;min-height:14px}
.admMsg.ok{color:var(--green)}.admMsg.err{color:var(--red)}
.admTabs{display:flex;gap:5px;margin:18px 0 4px;flex-wrap:wrap}
.admTab{flex:1;font-size:11px;letter-spacing:.05em;padding:9px 5px;cursor:pointer;text-align:center;background:rgba(255,255,255,.04);border:1px solid var(--line);color:#c2cbe6;transition:.2s;min-width:60px;border-radius:3px}
.admTab.active{background:rgba(25,224,255,.16);border-color:rgba(25,224,255,.5);color:#fff}
.admPane{display:none;margin-top:8px}.admPane.active{display:block}
.adlist{margin-top:14px;max-height:260px;overflow:auto;border:1px solid var(--line);padding:6px;border-radius:5px}
.adlist .it{display:flex;align-items:center;gap:10px;padding:9px;border-bottom:1px solid var(--line);font-size:13px}
.adlist .it:last-child{border-bottom:0}
.adlist .face{width:28px;height:28px;border-radius:50%;object-fit:cover;background:#0a1020 center/cover;border:1px solid var(--line2);flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:13px;color:var(--gold)}
.adlist .nm{flex:1;font-family:var(--disp);font-size:17px}
.adlist .meta{font-size:10px;color:var(--mute);letter-spacing:.06em}
.adlist .act{cursor:pointer;font-size:13px;padding:2px 7px;color:#9fb0d6}
.adlist .act.del{color:var(--red)}.adlist .act .ic{font-size:13px}
.imgprev{width:64px;height:64px;border-radius:8px;object-fit:cover;border:1px solid var(--line2);margin-top:8px;display:none;background:#0a1020 center/cover}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 4px;border-bottom:1px solid var(--line)}
.toggle-row .tn{font-family:var(--disp);font-size:19px;letter-spacing:.02em}
.sw{position:relative;width:46px;height:25px;border-radius:14px;background:rgba(255,255,255,.12);cursor:pointer;transition:.2s;flex:0 0 auto}
.sw.on{background:linear-gradient(90deg,var(--cyan),var(--magenta));box-shadow:0 0 12px rgba(25,224,255,.4)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.2s}
.sw.on::after{left:24px}

/* loader / toast / mute / fx */
#load{position:fixed;inset:0;z-index:90;background:radial-gradient(circle at 50% 40%,#0b1330,#05070f);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:26px;transition:opacity .8s ease;letter-spacing:.5em;font-size:11px;color:#8a96b4;font-weight:300;padding-left:.5em}
#load.hide{opacity:0;pointer-events:none}
#load .ring{width:52px;height:52px;border:2px solid rgba(255,255,255,.08);border-top-color:var(--cyan);border-right-color:var(--magenta);border-radius:50%;animation:spin2 .9s cubic-bezier(.5,0,.5,1) infinite;box-shadow:0 0 24px rgba(25,224,255,.25)}
@keyframes spin2{to{transform:rotate(360deg)}}
#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,40px);z-index:95;opacity:0;background:rgba(12,18,40,.97);border:1px solid var(--line2);padding:13px 24px;font-size:12px;letter-spacing:.06em;transition:.4s cubic-bezier(.16,1,.3,1);pointer-events:none;backdrop-filter:blur(8px);border-radius:5px;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
#mute{position:fixed;right:16px;bottom:16px;z-index:31;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#cdd6ee;background:rgba(8,12,22,.55);border:1px solid var(--line2);opacity:.72;transition:.3s;backdrop-filter:blur(6px)}
#mute:hover{opacity:1;border-color:var(--cyan)}#mute svg{width:19px;height:19px}
#fx{position:fixed;inset:0;z-index:80;pointer-events:none}
.hidden{display:none!important}

/* ============================================================
   v3.1 — NON-GENERIC SHAPE LANGUAGE + ALWAYS-ON MOTION
   ============================================================ */
:root{
  --chamfer:polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px);
  --chamfer-sm:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  --notch:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
  --hex:polygon(50% 0,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%);
  --tag:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
}
/* reduced-motion gate intentionally disabled — full motion always (office-TV showpiece) */

/* ---- angular gradient-bordered cards (replaces rounded rects) ---- */
.card{border-radius:0!important;clip-path:var(--chamfer);
  background:linear-gradient(140deg,var(--c1),var(--c2))!important}
.card::before{content:"";position:absolute;inset:1.7px;border-radius:0!important;padding:0!important;
  background:linear-gradient(158deg,#131c38,#090e22)!important;clip-path:var(--chamfer);
  -webkit-mask:none!important;mask:none!important;z-index:0}
.card>*{position:relative;z-index:1}
.card>.glowbg,.card>.burst{z-index:0}
.pcard .glare{z-index:5}.pcard .topbar{z-index:3}

/* notched HUD tiles */
.tile.card,.an.card,.tile,.an{clip-path:var(--notch)}
.tile.card::before,.an.card::before{clip-path:var(--notch)}
.tile::after{inset:9px}

/* pulsing corner reticles */
.reticle::after{animation:reticulse 2.6s ease-in-out infinite}
@keyframes reticulse{0%,100%{opacity:.32}50%{opacity:.85}}

/* FEATURED cards — rotating conic neon border + light sheen (always on) */
.card.featured{background:conic-gradient(from var(--ang),var(--cyan),var(--magenta),var(--purple),var(--gold),var(--cyan))!important;
  animation:angspin 7s linear infinite;filter:drop-shadow(0 0 20px rgba(25,224,255,.16))}
.card.featured::before{inset:2.2px;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.07) 46%,transparent 60%) 0 0/250% 100% no-repeat,
    linear-gradient(158deg,#141d3c,#0a1024)!important;animation:sheen 5.5s linear infinite}
@keyframes angspin{to{--ang:360deg}}
@keyframes sheen{0%{background-position:210% 0,0 0}100%{background-position:-90% 0,0 0}}

/* ---- hexagon avatars (replace circles) ---- */
.av,.pic,.ava,.pf-face,.h2h-fighter .big{clip-path:var(--hex)!important;border-radius:0!important;border:none!important;position:relative;background-clip:padding-box}
.av::before,.pic::before,.ava::before,.pf-face::before,.h2h-fighter .big::before{content:"";position:absolute;inset:-3px;clip-path:var(--hex);z-index:-1;
  background:linear-gradient(140deg,var(--ringc,var(--gold)),color-mix(in srgb,var(--ringc,var(--gold)) 35%,#fff))}
.pic,.ava,.pf-face{--ringc:var(--gold);filter:drop-shadow(0 0 16px rgba(255,201,77,.4))}
.pcard .av{--ringc:var(--sc,var(--cyan));animation:avpulse 3.4s ease-in-out infinite}
@keyframes avpulse{0%,100%{filter:drop-shadow(0 0 9px color-mix(in srgb,var(--sc,var(--cyan)) 35%,transparent))}50%{filter:drop-shadow(0 0 20px color-mix(in srgb,var(--sc,var(--cyan)) 60%,transparent))}}
.h2h-fighter.a .big{--ringc:var(--cyan);filter:drop-shadow(0 0 22px rgba(25,224,255,.35))}
.h2h-fighter.b .big{--ringc:var(--magenta);filter:drop-shadow(0 0 22px rgba(255,45,155,.35))}
.pod.g1 .ava{--ringc:var(--gold)}.pod.g2 .ava{--ringc:#cdd8e8}.pod.g3 .ava{--ringc:#d6914a}

/* small faces -> chamfered, not circular */
.face,.ovface{clip-path:var(--chamfer-sm)!important;border-radius:0!important;border:none!important}

/* angular badges / chips / controls */
.badge{clip-path:var(--chamfer-sm);border-radius:0!important}
.stbadge{clip-path:var(--tag);border-radius:0!important}
.grp-tab,.btn,.adbox button,.feedComposer button,.feedComposer input,.h2h-controls select,.adbox input,.adbox select{border-radius:0!important;clip-path:var(--chamfer-sm)}
.rbtn{border-radius:0!important;clip-path:var(--chamfer-sm)}
.pf-close{border-radius:0!important;clip-path:var(--chamfer-sm)}
#mute{border-radius:0!important;clip-path:var(--hex)}
.badge.live,.cmt .tag,.round-label{border-radius:0!important}

/* trapezoid podium platforms (real podium silhouette) */
.pod .base{clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 100%,0 100%);border-radius:0!important}

/* angled-tip progress bars (no flat rectangles) */
.sbar i,.wbar i,.bar .fill,.chase .fill{clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%)}
.sbar,.wbar,.bar .track,.chase .track{clip-path:var(--chamfer-sm);border-radius:0!important}

/* flowing bracket connectors */
#bracketLines path{stroke-dasharray:5 7;animation:dashflow 1.1s linear infinite}
@keyframes dashflow{to{stroke-dashoffset:-24}}

/* travelling section-header line */
.vhead .vh-line{background:linear-gradient(90deg,transparent,var(--gold),var(--magenta),var(--purple),var(--blue),transparent)!important;background-size:55% 100%!important;background-repeat:no-repeat;animation:lineflow 3.4s linear infinite}
@keyframes lineflow{from{background-position:-55% 0}to{background-position:160% 0}}

/* drifting aurora glows behind the dashboard (always moving) */
#auroras{position:fixed;inset:0;z-index:7;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 1.4s ease}
body.docked #auroras{opacity:.55}
#auroras .b{position:absolute;width:42vmax;height:42vmax;filter:blur(42px);border-radius:50%;will-change:transform}
#auroras .b1{background:radial-gradient(circle,rgba(25,224,255,.55),transparent 62%);left:-8vmax;top:-6vmax;animation:drift1 28s ease-in-out infinite}
#auroras .b2{background:radial-gradient(circle,rgba(255,45,155,.5),transparent 62%);right:-10vmax;top:18vh;animation:drift2 34s ease-in-out infinite}
#auroras .b3{background:radial-gradient(circle,rgba(168,85,255,.45),transparent 62%);left:28vw;bottom:-12vmax;animation:drift3 31s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(18vw,12vh)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-16vw,16vh)}}
@keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(12vw,-14vh)}}

/* angular spinner (loader) */
#load .ring{border-radius:0!important;clip-path:var(--hex);animation:spin2 1s cubic-bezier(.5,0,.5,1) infinite}

/* nav buttons keep parallelogram; ensure no radius anywhere stray */
.toast,#toast{border-radius:0!important;clip-path:var(--chamfer-sm)}

/* ============================================================
   v4 — GOLD BROADCAST  ::  warmer atmosphere, gold-dominant, drama
   ============================================================ */
:root{ --cyan:#2fe0c8; --magenta:#ff5ea0; --gold:#ffc94d; --gold2:#ffe7a0; }

/* ---- lighter, warmer, less-generic background ---- */
html,body{background:#081317}
#world{background:#081317}
#hero{background-position:center 40%}
#grade{background:
  radial-gradient(130% 100% at 50% 26%,rgba(255,201,77,.07),transparent 46%),
  radial-gradient(120% 92% at 50% 40%,transparent 42%,rgba(6,15,18,.5) 100%),
  linear-gradient(180deg,rgba(9,19,23,.32),transparent 24%,transparent 58%,rgba(6,13,17,.8) 100%)}
#grade.docked{background:
  radial-gradient(150% 130% at 50% 16%,rgba(255,201,77,.06),transparent 42%),
  radial-gradient(120% 80% at 80% 30%,rgba(47,224,200,.05),transparent 55%),
  radial-gradient(160% 140% at 50% 22%,transparent 0,rgba(8,17,21,.5) 50%,rgba(7,14,18,.88) 100%),
  linear-gradient(180deg,rgba(10,20,24,.82),rgba(7,14,18,.93))}
#sectionBg.show{opacity:.4}

/* WC2026 tri-nation aurora glows — blue / red / green */
#auroras .b1{background:radial-gradient(circle,rgba(46,139,255,.5),transparent 62%)}
#auroras .b2{background:radial-gradient(circle,rgba(255,39,72,.45),transparent 62%)}
#auroras .b3{background:radial-gradient(circle,rgba(24,205,134,.45),transparent 62%)}
body.docked #auroras{opacity:.6}

/* ---- banners: vivid, not faded ---- */
.vhead .vh-bg{opacity:.62!important}
.vhead .vh-grad{background:linear-gradient(90deg,rgba(6,14,18,.85),rgba(6,14,18,.32) 60%,rgba(6,14,18,.06))!important}
.vhead .ico{color:var(--gold)!important;background:linear-gradient(145deg,rgba(255,201,77,.2),rgba(47,224,200,.1))!important;border-color:rgba(255,201,77,.42)!important;box-shadow:0 0 24px rgba(255,201,77,.24)!important}
.vhead .sub{color:var(--gold)!important}
.vhead h2{text-shadow:0 4px 24px rgba(0,0,0,.55)}

/* ---- gold-dominant accents ---- */
.reticle{--rc:var(--gold)}
.card.featured{background:conic-gradient(from var(--ang),var(--gold),var(--cyan),var(--gold2),var(--gold),var(--cyan),var(--gold))!important;filter:drop-shadow(0 0 22px rgba(255,201,77,.2))}
#titleB .ch{background:linear-gradient(180deg,var(--gold),var(--cyan) 72%)!important;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px rgba(255,201,77,.4))}
#kicker{border-color:rgba(255,201,77,.4)}#kicker{color:var(--gold)}
.navbtn.active{background:linear-gradient(180deg,rgba(255,201,77,.2),rgba(47,224,200,.12))!important;border-color:rgba(255,201,77,.55)!important;box-shadow:0 0 18px rgba(255,201,77,.22)!important}
.navbtn.active .ic,.navbtn:hover .ic{color:var(--gold)!important}
.navbtn.active::after{background:linear-gradient(90deg,var(--gold),var(--cyan))!important}
#banner{background:linear-gradient(90deg,#100f16,#17151d 50%,#100f16)!important;border-bottom:1px solid rgba(255,200,58,.25)!important}
#banner::before{background:linear-gradient(90deg,var(--gold),var(--cyan) 50%,var(--gold))!important;background-size:200% 100%}
#banner .live-pill{background:linear-gradient(90deg,var(--gold),#e0a52a)!important;color:#05121a!important}
#tickerTrack{color:#f1ead6!important}#tickerTrack b{color:var(--gold)!important}#tickerTrack .sep{color:var(--gold)!important}
#brand b{background:linear-gradient(90deg,#fff,var(--gold2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#brand span{color:var(--gold)}

/* ---- FROSTED HEXAGON stat tiles (Elite Fusion style) ---- */
.tiles{gap:18px}
.tile.card,.tile{clip-path:var(--hex)!important;text-align:center;padding:30px 14px 26px;
  background:linear-gradient(150deg,rgba(255,201,77,.55),rgba(47,224,200,.4))!important}
.tile.card::before{clip-path:var(--hex);inset:2px!important;
  background:linear-gradient(160deg,rgba(32,27,16,.72),rgba(18,14,9,.66))!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tile::after{display:none}
.tile .ic{font-size:30px;color:var(--gold);filter:drop-shadow(0 0 10px rgba(255,201,77,.5))}
.tile .v{font-size:36px;margin-top:10px}
.tile .l{margin-top:8px}.tile .sub{font-size:17px;margin-top:2px;color:var(--gold)}
@media(max-width:820px){.tile.card,.tile{padding:24px 8px}}

/* ---- GOLD ornate bracket ties ---- */
.tie.card{--c1:rgba(255,201,77,.6)!important;--c2:rgba(255,201,77,.14)!important}
.tie.card::before{background:linear-gradient(158deg,#16202c,#0b1018)!important}
.tie .nm{color:#efe6cf}
.tie .row.win{background:linear-gradient(90deg,rgba(255,201,77,.18),transparent)!important}
.tie .row.win .nm,.tie .row.win .sc{color:var(--gold)!important}
.round-label{color:var(--gold)!important;font-weight:600}

/* ---- FINAL VS card ---- */
.finalcol{min-width:300px}
.finalcard{position:relative;padding:22px 20px;text-align:center;min-width:288px;overflow:hidden}
.finalcard .burst{position:absolute;inset:0;z-index:0;background:radial-gradient(60% 60% at 50% 46%,rgba(255,201,77,.22),transparent 66%);animation:pulseGlow 3s ease-in-out infinite}
.finalcard>*{position:relative;z-index:1}
.fc-label{font-size:9px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase}
.fc-vs{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 12px}
.fc-side{flex:1;min-width:0}
.fc-av{width:64px;height:64px;margin:0 auto 8px;clip-path:var(--hex);background:#0a1020 center/cover;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:26px;color:var(--gold);position:relative}
.fc-av::before{content:"";position:absolute;inset:-3px;clip-path:var(--hex);background:linear-gradient(140deg,var(--gold),rgba(255,255,255,.4));z-index:-1}
.fc-nm{font-family:var(--disp);font-size:18px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-mid{flex:0 0 auto}
.fc-tr{color:var(--gold);filter:drop-shadow(0 0 20px rgba(255,201,77,.75));animation:float 3s ease-in-out infinite}
.fc-tr svg{width:48px;height:48px}
.fc-vstext{font-family:var(--disp);font-size:18px;color:var(--cyan);margin-top:4px}
.fc-score{font-family:var(--disp);font-size:42px;line-height:.9;color:#fff}
.fc-when{font-size:11px;letter-spacing:.1em;color:var(--cyan)}
.fc-champ{margin-top:14px;font-size:10px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;border-top:1px solid rgba(255,201,77,.3);padding-top:12px}

/* ---- GROUPS grid (all groups, one page) ---- */
.groups-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}
.gcard{position:relative;padding:18px 16px 12px;--c1:rgba(255,201,77,.42)!important;--c2:rgba(47,224,200,.12)!important}
.gtag{position:absolute;top:0;left:18px;font-family:var(--disp);font-size:15px;letter-spacing:.16em;color:#05121a;background:linear-gradient(90deg,var(--gold),var(--gold2));padding:5px 16px;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.ghead{display:flex;justify-content:space-between;align-items:center;margin:20px 0 10px;font-size:10px;letter-spacing:.1em;color:var(--mute);text-transform:uppercase}
.ghead .ic{color:var(--cyan);font-size:13px}.ghead .gq{color:var(--green)}
.gbody{display:flex;flex-direction:column;gap:5px}
.grow{display:grid;grid-template-columns:22px 30px 1fr auto auto auto;gap:9px;align-items:center;padding:8px;cursor:pointer;clip-path:var(--chamfer-sm);background:rgba(255,255,255,.03);transition:.18s}
.grow:hover{background:rgba(47,224,200,.09);transform:translateX(2px)}
.grow.lead{background:linear-gradient(90deg,rgba(255,201,77,.18),rgba(255,201,77,.02))}
.grow.qual{box-shadow:inset 3px 0 0 var(--green)}
.gr-rk{font-family:var(--disp);font-size:17px;color:var(--mute);text-align:center}
.grow .face{width:30px;height:30px}
.gr-nm{font-family:var(--disp);font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-mp,.gr-gd{font-family:var(--disp);font-size:15px;color:#cdd7f0;text-align:center;min-width:24px}
.gr-mp i,.gr-gd i{font-style:normal;font-size:8px;color:var(--mute);display:block;letter-spacing:.1em;margin-top:-2px}
.gr-pts{font-family:var(--disp);font-size:21px;color:var(--gold);width:32px;text-align:center;text-shadow:0 0 10px rgba(255,201,77,.3)}

/* ---- prize image on podium ---- */
.prize-img{width:48px;height:48px;margin:0 auto 6px;clip-path:var(--hex);background:#0a1020 center/cover;position:relative}
.prize-img::before{content:"";position:absolute;inset:-2px;clip-path:var(--hex);background:linear-gradient(140deg,var(--gold),rgba(255,255,255,.4));z-index:-1}

/* ---- three.js drama canvas ---- */
#ball{display:none!important}
@keyframes ballspin{to{transform:rotate(360deg)}}
.ballcrest{position:relative;width:34px;height:34px;flex:0 0 auto;animation:ballspin 22s linear infinite}
.ballcrest img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 1s ease;
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.55))}
.ballcrest img.on{opacity:1}
#three{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity 1.6s ease;mix-blend-mode:screen}
#three.ready{opacity:1}
body.docked #three{opacity:.42}

/* ============================================================
   v5 — FROSTED GLASS, NO SPIN, FANCIER TYPE
   ============================================================ */

/* ---- stop the spinning bits (keep floating only) ---- */
#rays{animation:none!important;opacity:.42}
.card.featured{animation:none!important;
  background:linear-gradient(135deg,var(--gold),var(--cyan) 48%,var(--gold2) 100%)!important;
  filter:drop-shadow(0 0 22px rgba(255,201,77,.18))}
/* keep the gentle light sheen sweep (that's a float, not a spin) */

/* ---- REAL frosted glass on every card ---- */
.card::before{
  padding:1.4px;
  background:linear-gradient(135deg,var(--gold),var(--magenta) 38%,var(--purple) 66%,var(--blue))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.card.featured::before{
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.08) 46%,transparent 60%) 0 0/250% 100% no-repeat,
    linear-gradient(158deg,rgba(30,34,44,.84),rgba(14,17,24,.9))!important;
  animation:sheen 6s linear infinite}

/* ---- ICY frosted hexagon stat tiles (Elite Fusion look) ---- */
.tile.card,.tile{background:linear-gradient(150deg,rgba(205,238,247,.62),rgba(90,195,205,.46),rgba(255,201,77,.4))!important}
.tile.card::before{clip-path:var(--hex);inset:2px!important;
  background:linear-gradient(160deg,rgba(40,52,60,.62),rgba(24,34,42,.6) 45%,rgba(14,20,26,.7))!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.22),inset 0 0 30px rgba(160,215,235,.12);animation:none}
.tile .ic{color:var(--gold);filter:drop-shadow(0 0 10px rgba(255,201,77,.6))}
.tile .v{color:#fff;text-shadow:0 2px 10px rgba(0,8,16,.6)}
.tile .l{color:#dfeefb;text-shadow:0 1px 4px rgba(0,8,16,.6)}
.tile .sub{color:var(--gold2);text-shadow:0 1px 6px rgba(0,8,16,.7)}

/* slightly warmer (less pure-blue) section panels already via .card; warm the empties too */
.empty{background:rgba(20,32,40,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ---- FANCIER TYPE ---- */
.bigtitle,.vhead h2,#brand b{font-family:'Anton','Teko',sans-serif;font-weight:400}
.bigtitle{letter-spacing:.015em}
.vhead h2{font-style:italic;letter-spacing:.012em;
  background:linear-gradient(180deg,#fff7da 0%,#ffd76b 44%,#caa23a 62%,#ffe9a8 100%)!important;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,201,77,.22));text-shadow:none!important}
/* metallic-gold landing title */
#titleA .ch{background:linear-gradient(180deg,#fff7da 0%,#ffd76b 42%,#c89a36 60%,#ffe9a8 100%)!important;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.45)) drop-shadow(0 0 16px rgba(255,201,77,.35))}
#titleB .ch{background:linear-gradient(180deg,#ffe7a0,var(--cyan) 78%)!important;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 18px rgba(47,224,200,.4))}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .vhead h2{color:var(--gold)!important;-webkit-text-fill-color:var(--gold)!important}
  #titleA .ch{color:var(--gold)!important;-webkit-text-fill-color:var(--gold)!important}}
#brand b{-webkit-text-fill-color:initial;background:none;color:#fff}
.panel h3{letter-spacing:.04em;color:#f3f7ff}
.round-label,.fc-label,.gtag,.vhead .sub{font-weight:600}

/* ============================================================
   v6 — GAMIFICATION (levels, tiers, achievements, unlock juice)
   ============================================================ */
/* player-card tier strip */
.pcard .tierstrip{display:flex;align-items:center;gap:7px;margin-top:12px;transform:translateZ(14px);flex-wrap:wrap}
.pcard .tierstrip .lvl{font-family:var(--disp);font-size:13px;letter-spacing:.06em;color:#05121a;background:linear-gradient(90deg,var(--gold),var(--gold2));padding:2px 9px;clip-path:var(--tag)}
.pcard .tierstrip .tname{font-family:var(--disp);font-size:14px;letter-spacing:.1em}
.pcard .tierstrip .strk{display:inline-flex;align-items:center;gap:2px;font-family:var(--disp);font-size:13px;color:var(--orange)}
.pcard .tierstrip .strk svg{width:13px;height:13px;color:var(--orange)}
.pcard .tierstrip .bdg{display:inline-flex;align-items:center;gap:3px;font-family:var(--disp);font-size:13px;color:var(--gold);margin-left:auto}
.pcard .tierstrip .bdg svg{width:13px;height:13px}

/* profile level block */
.pf-lvl{display:flex;align-items:center;gap:18px;padding:18px 26px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(255,201,77,.06),transparent)}
.pf-lvlbig{font-family:var(--disp);font-size:56px;line-height:.8;font-weight:600;display:flex;align-items:baseline;gap:6px}
.pf-lvlbig small{font-size:13px;letter-spacing:.18em;color:var(--mute)}
.pf-lvlmeta{flex:1;min-width:0}
.pf-lvlmeta .tn{font-family:var(--disp);font-size:20px;letter-spacing:.08em}
.pf-lvlmeta .xpbar{height:10px;border-radius:0;clip-path:var(--chamfer-sm);background:rgba(255,255,255,.08);overflow:hidden;margin:8px 0 6px;position:relative}
.pf-lvlmeta .xpbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--gold),var(--cyan));box-shadow:0 0 14px rgba(255,201,77,.4);clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%);transition:width 1.1s cubic-bezier(.16,1,.3,1)}
.pf-lvlmeta .xpnext{font-size:10px;letter-spacing:.1em;color:var(--mute);text-transform:uppercase}

/* achievements grid */
.achgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.ach{position:relative;display:flex;align-items:center;gap:11px;padding:12px;clip-path:var(--chamfer-sm);background:rgba(255,255,255,.025);border:1px solid var(--line);opacity:.42;filter:grayscale(.6);transition:.2s}
.ach.on{opacity:1;filter:none;background:linear-gradient(140deg,color-mix(in srgb,var(--ac) 16%,transparent),rgba(255,255,255,.02));border-color:color-mix(in srgb,var(--ac) 45%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--ac) 14%,transparent)}
.ach .ai{width:34px;height:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;clip-path:var(--hex);background:color-mix(in srgb,var(--ac) 18%,transparent);color:var(--ac)}
.ach .ai svg{width:17px;height:17px}
.ach .al{font-family:var(--disp);font-size:15px;line-height:1;letter-spacing:.02em}
.ach .ad{font-size:10px;color:var(--mute);margin-top:3px;line-height:1.3}
.ach .adone{position:absolute;top:7px;right:8px;color:var(--ac)}.ach .adone svg{width:13px;height:13px}

/* ACHIEVEMENT UNLOCKED overlay */
.unlock{position:fixed;left:50%;top:24%;transform:translate(-50%,-30px) scale(.9);z-index:96;opacity:0;transition:.5s cubic-bezier(.16,1,.3,1);pointer-events:none}
.unlock.show{opacity:1;transform:translate(-50%,0) scale(1)}
.unlock-card{position:relative;text-align:center;padding:26px 40px;min-width:300px;overflow:hidden;clip-path:var(--chamfer);
  background:linear-gradient(160deg,rgba(16,24,34,.96),rgba(8,13,20,.97));border:2px solid color-mix(in srgb,var(--ac) 60%,transparent);box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 50px color-mix(in srgb,var(--ac) 30%,transparent)}
.unlock-ring{position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 40%,color-mix(in srgb,var(--ac) 26%,transparent),transparent 65%);animation:pulseGlow 1.4s ease-in-out infinite}
.unlock-ic{position:relative;width:62px;height:62px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;clip-path:var(--hex);background:color-mix(in srgb,var(--ac) 22%,transparent);color:var(--ac);box-shadow:0 0 24px color-mix(in srgb,var(--ac) 40%,transparent);animation:float 2.4s ease-in-out infinite}
.unlock-ic svg{width:30px;height:30px}
.unlock-lbl{position:relative;font-family:var(--body);font-size:10px;letter-spacing:.34em;color:var(--ac);text-transform:uppercase}
.unlock-name{position:relative;font-family:'Anton','Teko',sans-serif;font-size:32px;line-height:.9;margin:6px 0 4px;
  background:linear-gradient(180deg,#fff7da,#ffd76b 55%,#caa23a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.unlock-who{position:relative;font-size:12px;color:#cdd7f0;letter-spacing:.04em}

/* ============================================================
   v7 — BUGFIX (visible titles), PERFORMANCE, RADAR, CROWNING
   ============================================================ */
/* FIX: gradient-clip + filter broke on some Chromium/Edge builds (titles showed as empty bars).
   Use solid gold with a bevel shadow — bulletproof everywhere. */
.vhead h2{background:none!important;-webkit-text-fill-color:#ffd76b!important;color:#ffd76b!important;filter:none!important;
  text-shadow:0 2px 0 rgba(120,86,20,.55),0 4px 16px rgba(0,0,0,.5)!important}
#titleA .ch{background:none!important;-webkit-text-fill-color:#ffffff!important;color:#fff!important;filter:none!important;
  text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 24px rgba(255,210,120,.4)}
#titleB .ch{background:none!important;-webkit-text-fill-color:#ffd76b!important;color:#ffd76b!important;filter:none!important;
  text-shadow:0 3px 0 rgba(120,86,20,.5),0 0 24px rgba(255,210,120,.35)}
.unlock-name{background:none!important;-webkit-text-fill-color:#ffd76b!important;color:#ffd76b!important}

/* PERF: drop backdrop-blur on the many list cards (keep it only on tiles + featured) */
.card::before{backdrop-filter:none;-webkit-backdrop-filter:none;
  background:linear-gradient(158deg,rgba(17,27,34,.82),rgba(10,17,23,.86))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
/* lighter auroras (cheaper paint) */
#auroras .b{filter:blur(30px)}#auroras .b1,#auroras .b2,#auroras .b3{width:32vmax;height:32vmax}
body.docked #auroras{opacity:.42}
/* Lenis content wrapper */
#viewsContent{will-change:transform}
html.lenis,html.lenis body{height:auto}.lenis .lenis-content{min-height:100%}

/* FIFA-style attribute card / radar */
.fut{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
@media(max-width:520px){.fut{grid-template-columns:1fr;justify-items:center}}
.fut-rwrap{position:relative;width:170px;height:170px;flex:0 0 auto}
.fut-radar{width:170px;height:170px;display:block;filter:drop-shadow(0 0 12px rgba(255,201,77,.18))}
.fut-ovr{position:absolute;left:-6px;top:-6px;text-align:center;background:linear-gradient(160deg,var(--gold),#caa23a);color:#05121a;
  width:48px;height:54px;clip-path:var(--hex);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 16px rgba(255,201,77,.4)}
.fut-ovr b{font-family:var(--disp);font-size:26px;line-height:.8}.fut-ovr span{font-size:8px;letter-spacing:.1em}
.fut-bars{display:grid;grid-template-columns:1fr 1fr;gap:11px 24px;width:100%}
.fut-attr{display:flex;align-items:center;gap:10px}
.fut-attr .av{font-family:var(--disp);font-size:25px;color:var(--gold);width:34px;text-align:center}
.fut-attr .ab{flex:1;min-width:0}
.fut-attr .ab .nm{font-size:9px;letter-spacing:.18em;color:var(--mute)}
.fut-attr .ab .tr{height:6px;background:rgba(255,255,255,.08);clip-path:var(--chamfer-sm);overflow:hidden;margin-top:4px}
.fut-attr .ab .tr i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--cyan));transition:width 1s cubic-bezier(.16,1,.3,1)}

/* CHAMPION crowning takeover */
.crown-take{position:fixed;inset:0;z-index:97;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;
  background:radial-gradient(circle at 50% 38%,rgba(26,20,5,.93),rgba(4,7,11,.98));opacity:0;transition:opacity .6s ease;pointer-events:none;padding:20px}
.crown-take.show{opacity:1}
.crown-take .ct-tr{color:var(--gold);filter:drop-shadow(0 0 44px rgba(255,201,77,.85));animation:float 3s ease-in-out infinite}
.crown-take .ct-tr svg{width:clamp(80px,14vw,124px);height:clamp(80px,14vw,124px)}
.crown-take .ct-lbl{font-family:var(--body);letter-spacing:.4em;color:var(--gold);font-size:12px;margin-top:20px;text-transform:uppercase}
.crown-take .ct-name{font-family:'Anton','Teko',sans-serif;font-size:clamp(52px,13vw,150px);color:#ffd76b;line-height:.82;margin-top:8px;
  text-shadow:0 4px 0 rgba(120,86,20,.55),0 0 60px rgba(255,201,77,.55)}
.crown-take .ct-sub{letter-spacing:.34em;color:#cdd7f0;font-size:11px;margin-top:16px}
.crown-take .ct-tap{position:absolute;bottom:30px;left:0;right:0;font-size:10px;letter-spacing:.2em;color:var(--mute)}

/* ============================================================
   v8 — FANZONE, MATCH CENTRE, LOCKED FEED, FLOATING CHEERS
   ============================================================ */
/* locked live-feed composer */
.feedComposer.locked{display:block;padding:0}
.feedlock{display:flex;align-items:center;gap:10px;padding:15px 18px;font-size:13px;color:var(--mute);line-height:1.5;
  clip-path:var(--chamfer);background:linear-gradient(140deg,rgba(255,201,77,.08),rgba(20,32,40,.5));border:1px solid var(--line2)}
.feedlock svg{color:var(--gold);flex:0 0 auto}

/* FanZone */
.hype{text-align:center}
.hype-n{font-family:var(--disp);font-size:54px;line-height:.8;color:var(--gold);text-shadow:0 0 22px rgba(255,201,77,.4)}
.hype-n small{display:block;font-family:var(--body);font-size:10px;letter-spacing:.2em;color:var(--mute);margin-top:4px}
.hype-track{height:12px;clip-path:var(--chamfer-sm);background:rgba(255,255,255,.08);overflow:hidden;margin:16px 0}
.hype-track i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--orange),var(--magenta));box-shadow:0 0 16px rgba(255,201,77,.5);transition:width .5s cubic-bezier(.16,1,.3,1)}
.cheerbtns{display:flex;justify-content:center;gap:10px;margin-top:6px}
.cheerbtn{width:46px;height:46px;display:flex;align-items:center;justify-content:center;cursor:pointer;clip-path:var(--hex);
  background:linear-gradient(150deg,rgba(255,201,77,.16),rgba(47,224,200,.1));border:1px solid var(--line2);transition:.18s}
.cheerbtn:hover{transform:translateY(-3px) scale(1.1);box-shadow:0 6px 18px rgba(255,201,77,.3)}
.cheerbtn svg{width:22px;height:22px}
.cheer-note{font-size:10px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase;margin-top:12px}
.topback{display:flex;align-items:center;gap:14px}
.topback .ava{width:64px;height:64px;clip-path:var(--hex);background:#0a1020 center/cover;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:26px;color:var(--gold);position:relative}
.topback .ava::before{content:"";position:absolute;inset:-3px;clip-path:var(--hex);background:linear-gradient(140deg,var(--gold),rgba(255,255,255,.4));z-index:-1}
.topback .tb-nm{font-family:var(--disp);font-size:28px;line-height:.9}
.topback .tb-sub{font-size:11px;letter-spacing:.08em;color:var(--gold)}
.fan-note{font-size:12px;color:var(--mute);line-height:1.5;margin-bottom:16px}
.backgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:8px;max-height:320px;overflow-y:auto;padding-right:4px}
.backcard{position:relative;display:flex;align-items:center;gap:9px;padding:8px 10px;clip-path:var(--chamfer-sm);background:rgba(255,255,255,.03);border:1px solid var(--line);cursor:pointer;transition:.18s;overflow:hidden}
.backcard:hover{background:rgba(47,224,200,.08);transform:translateY(-2px)}
.backcard.mine{border-color:var(--gold);background:linear-gradient(140deg,rgba(255,201,77,.16),rgba(255,201,77,.03));box-shadow:0 0 18px rgba(255,201,77,.18)}
.backcard .ava{width:34px;height:34px;flex:0 0 auto;clip-path:var(--hex);background:#0a1020 center/cover;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:15px;color:var(--gold)}
.backcard .bc-mid{flex:1;min-width:0}
.backcard .bc-nm{font-family:var(--disp);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.backcard .bc-bar{height:5px;margin-top:5px;background:rgba(255,255,255,.08);clip-path:var(--chamfer-sm);overflow:hidden}
.backcard .bc-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--cyan));transition:width .8s cubic-bezier(.16,1,.3,1)}
.backcard .bc-n{font-family:var(--disp);font-size:19px;color:var(--gold);flex:0 0 auto}
.backcard .bc-tag{position:absolute;top:6px;right:8px;font-size:7.5px;letter-spacing:.14em;color:#05121a;background:var(--gold);padding:2px 6px;clip-path:var(--tag)}
.cheer-layer{position:fixed;inset:0;z-index:50;pointer-events:none}
.cheerfloat{position:absolute;bottom:14%;width:34px;height:34px;animation:cheerup 2.3s cubic-bezier(.4,0,.6,1) forwards}
.cheerfloat svg{width:34px;height:34px;filter:drop-shadow(0 0 10px rgba(255,201,77,.6))}
@keyframes cheerup{0%{opacity:0;transform:translateY(0) scale(.5)}15%{opacity:1;transform:translateY(-30px) scale(1.1)}100%{opacity:0;transform:translateY(-46vh) scale(.7) rotate(20deg)}}

/* MATCH CENTRE modal (reuses #profile styling via .pf) */
#match{position:fixed;inset:0;z-index:56;display:none;align-items:center;justify-content:center;background:rgba(5,7,15,.86);backdrop-filter:blur(8px);padding:18px}
#match.show{display:flex;animation:fade .3s}
.mc-hero{position:relative;padding:28px 24px;overflow:hidden;border-bottom:1px solid var(--line)}
.mc-top{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}
.mc-side{text-align:center}
.mc-av{width:78px;height:78px;margin:0 auto 8px;clip-path:var(--hex);background:#0a1020 center/cover;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:32px;color:var(--gold);cursor:pointer;position:relative}
.mc-av::before{content:"";position:absolute;inset:-3px;clip-path:var(--hex);background:linear-gradient(140deg,var(--gold),rgba(255,255,255,.35));z-index:-1}
.mc-nm{font-family:var(--disp);font-size:23px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-score{font-family:'Anton',sans-serif;font-size:46px;line-height:.85;color:#fff}.mc-score span{color:var(--mute)}
.mc-vs{font-family:'Anton',sans-serif;font-size:34px;color:var(--magenta)}
.mc-status{font-size:10px;letter-spacing:.16em;color:var(--cyan);margin-top:4px}
.mc-round{font-size:9px;letter-spacing:.14em;color:var(--mute);margin-top:4px;text-transform:uppercase}
.mc-mom{display:flex;align-items:center;gap:12px;padding:18px 24px}
.mc-mom-l,.mc-mom-r{font-family:var(--disp);font-size:14px;color:var(--mute);white-space:nowrap}
.mc-mom-bar{flex:1;height:12px;display:flex;clip-path:var(--chamfer-sm);overflow:hidden;background:rgba(255,255,255,.06)}
.mc-mom-bar i.a{background:linear-gradient(90deg,var(--cyan),#1a9d8c)}.mc-mom-bar i.b{background:linear-gradient(90deg,#b3186a,var(--magenta))}
.mc-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.mc-cell{background:rgba(10,14,30,.96);padding:14px 8px;text-align:center}
.mc-cell .n{font-family:var(--disp);font-size:26px;color:#fff}.mc-cell .n.yl{color:#ffd84d}
.mc-cell .l{font-size:8px;letter-spacing:.1em;color:var(--mute);text-transform:uppercase;margin-top:4px}
.mc-foot{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;padding:18px 24px;align-items:center}
.mc-foot .lbl{font-size:9px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase;margin-bottom:7px}
.mc-form.r{text-align:right}.mc-form.r .formc{justify-content:flex-end}
.mc-h2h{text-align:center}.mc-h2h-rec{font-family:var(--disp);font-size:22px}.mc-h2h-rec b.a{color:var(--cyan)}.mc-h2h-rec b.b{color:var(--magenta)}

/* ============================================================
   v9 — DESKTOP LAYOUT + ANIMATED STANDINGS
   ============================================================ */
/* Desktop nav: show every item (wrap + centre) instead of hidden horizontal scroll */
#nav{flex-wrap:wrap;justify-content:center;overflow-x:visible;row-gap:7px}
@media(min-width:1500px){#nav{gap:8px}.navbtn{padding:10px 16px;font-size:11.5px}}

/* Animated standings — FLIP movement + rank-change indicator */
.stbl tbody tr{will-change:transform}
.stbl tbody tr.moved td{background:linear-gradient(90deg,rgba(255,201,77,.20),rgba(255,201,77,.02))!important;box-shadow:inset 0 1px 0 rgba(255,201,77,.3),inset 0 -1px 0 rgba(255,201,77,.3)}
.delta{display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle}
.delta.up{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid var(--green);animation:deltapop .5s ease}
.delta.down{border-left:4px solid transparent;border-right:4px solid transparent;border-top:7px solid var(--magenta);animation:deltapop .5s ease}
@keyframes deltapop{0%{transform:scale(0) translateY(3px);opacity:0}60%{transform:scale(1.4);opacity:1}100%{transform:scale(1)}}

/* ============================================================
   v10 — GAMING REDESIGN: brighter arena, VS showcase, fan wall
   ============================================================ */
/* --- brighter, more energetic arena background --- */
html,body{background:#0c2230}
#world{background:radial-gradient(120% 90% at 50% 0%,#16374a 0%,#0e2738 45%,#0a1b28 100%)}
#hero{filter:brightness(1.22) saturate(1.2) contrast(1.04)}
#sectionBg.show{opacity:.5;filter:brightness(1.2) saturate(1.15)}
#grade{background:
  radial-gradient(130% 100% at 50% 22%,rgba(255,201,77,.10),transparent 50%),
  radial-gradient(120% 92% at 50% 40%,transparent 52%,rgba(8,24,34,.34) 100%),
  linear-gradient(180deg,rgba(14,40,56,.18),transparent 30%,transparent 62%,rgba(8,22,32,.52) 100%)}
#grade.docked{background:
  radial-gradient(150% 120% at 50% 8%,rgba(255,201,77,.10),transparent 46%),
  radial-gradient(120% 80% at 82% 24%,rgba(47,224,200,.10),transparent 55%),
  radial-gradient(120% 80% at 16% 28%,rgba(189,60,112,.08),transparent 55%),
  radial-gradient(160% 140% at 50% 30%,transparent 0,rgba(10,28,40,.30) 60%,rgba(9,24,34,.62) 100%),
  linear-gradient(180deg,rgba(16,42,58,.42),rgba(10,26,38,.66))}
/* brighter section banner images */
.vhead{overflow:hidden}
.vhead .vh-bg{opacity:.8!important;filter:brightness(1.25) saturate(1.22) contrast(1.05)!important}
.vhead .vh-grad{background:linear-gradient(90deg,rgba(8,22,32,.78),rgba(8,22,32,.22) 62%,rgba(8,22,32,0))!important}
.spot .pic,.pf-bg{filter:brightness(1.15) saturate(1.12)}

/* ===================== VS SHOWCASE ===================== */
.clash{position:relative;display:grid;grid-template-columns:1fr clamp(150px,18vw,230px) 1fr;align-items:stretch;
  min-height:clamp(330px,34vw,430px);overflow:hidden;margin-bottom:18px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px));
  border:1px solid rgba(255,201,77,.28);box-shadow:0 24px 70px rgba(0,0,0,.5),inset 0 0 60px rgba(0,0,0,.4);background:#0a1b28}
.clash-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;filter:brightness(.85) saturate(1.2);z-index:0}
.clash-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,27,40,.4),rgba(8,20,30,.78))}
.clash-grid-fx{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 64px),
             repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 64px);
  -webkit-mask:radial-gradient(circle at 50% 40%,#000,transparent 75%);mask:radial-gradient(circle at 50% 40%,#000,transparent 75%)}
.clash-side{position:relative;z-index:2;overflow:hidden;display:flex;align-items:flex-end}
.clash-side.l{clip-path:polygon(0 0,100% 0,calc(100% - 64px) 100%,0 100%)}
.clash-side.r{clip-path:polygon(64px 0,100% 0,100% 100%,0 100%)}
.clash-art{position:absolute;inset:0;background-size:cover;background-position:center top;transition:transform 6s ease}
.clash:hover .clash-art{transform:scale(1.06)}
.clash-side.l .clash-art::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(47,224,200,.32),transparent 55%),linear-gradient(0deg,rgba(8,20,30,.92),transparent 60%)}
.clash-side.r .clash-art::after{content:"";position:absolute;inset:0;background:linear-gradient(240deg,rgba(189,60,112,.34),transparent 55%),linear-gradient(0deg,rgba(8,20,30,.92),transparent 60%)}
.clash-art.has{background-color:#0c1f2e}
/* fallback avatar when no art uploaded */
.clash-ava{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.clash-ava .ci{width:clamp(120px,15vw,190px);height:clamp(120px,15vw,190px);border-radius:50%;background:#0c1f2e center/cover;
  display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:clamp(44px,6vw,76px);color:var(--gold);
  box-shadow:0 0 0 2px rgba(255,201,77,.4),0 0 60px rgba(47,224,200,.25);opacity:.92}
.clash-side.r .clash-ava .ci{box-shadow:0 0 0 2px rgba(255,201,77,.4),0 0 60px rgba(189,60,112,.3)}
.clash-info{position:relative;z-index:3;padding:0 24px 22px;width:100%}
.clash-side.r .clash-info{text-align:right}
.clash-ovr{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:62px;height:70px;clip-path:var(--hex);
  background:linear-gradient(160deg,var(--gold),#caa23a);color:#06121a;margin-bottom:8px}
.clash-ovr b{font-family:var(--disp);font-size:30px;line-height:.8}.clash-ovr span{font-size:8px;letter-spacing:.12em}
.clash-nm{font-family:'Anton',sans-serif;font-size:clamp(30px,4.6vw,60px);line-height:.86;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.45),0 0 30px rgba(0,0,0,.5)}
.clash-aka{font-family:var(--body);letter-spacing:.18em;font-size:11px;color:var(--gold);text-transform:uppercase;margin-top:5px}
.clash-stats{display:flex;gap:18px;margin-top:12px}
.clash-side.r .clash-stats{justify-content:flex-end}
.clash-stats span{font-family:var(--body);font-size:9px;letter-spacing:.14em;color:#9fb4c8;display:flex;flex-direction:column;gap:1px}
.clash-stats b{font-family:var(--disp);font-size:26px;color:var(--gold)}
/* center column */
.clash-center{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;text-align:center;
  background:linear-gradient(180deg,rgba(20,16,9,.4),rgba(20,16,9,.66));backdrop-filter:blur(3px);border-left:1px solid rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.08)}
.clash-label{font-family:var(--body);letter-spacing:.28em;font-size:10px;color:var(--cyan);text-transform:uppercase}
.clash-vs{font-family:'Anton',sans-serif;font-size:clamp(46px,7vw,96px);line-height:.8;color:#fff;display:flex;gap:2px;
  text-shadow:0 0 30px rgba(255,201,77,.55);animation:vspulse 2.4s ease-in-out infinite}
.clash-vs span:first-child{color:var(--cyan)}.clash-vs span:last-child{color:var(--magenta)}
@keyframes vspulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 8px rgba(255,201,77,.3))}50%{transform:scale(1.08);filter:drop-shadow(0 0 22px rgba(255,201,77,.6))}}
.clash-date{font-size:10px;letter-spacing:.14em;color:#cdd9e8;text-transform:uppercase}
.clash-cd{justify-content:center;gap:8px;margin-top:4px}
.clash-cd .n{font-family:var(--disp);font-size:clamp(18px,2.4vw,26px);color:var(--gold)}
.clash-cd .l{font-size:7px;letter-spacing:.1em;color:var(--mute)}
.clash-cta{margin-top:8px;font-family:var(--body);font-weight:600;letter-spacing:.12em;font-size:10px;color:#06121a;
  background:linear-gradient(90deg,var(--gold),var(--gold2));padding:8px 14px;cursor:pointer;clip-path:var(--tag);display:inline-flex;align-items:center;gap:6px;transition:.2s}
.clash-cta:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,201,77,.35)}
.clash-cta svg{width:13px;height:13px}
.clash-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:200px;color:var(--mute);text-align:center}
.clash-empty svg{width:42px;height:42px;color:var(--gold);opacity:.7}
@media(max-width:760px){.clash{grid-template-columns:1fr clamp(110px,26vw,150px) 1fr}.clash-nm{font-size:30px}.clash-stats b{font-size:20px}}

/* ===================== FAN WALL ===================== */
.fanwall-compose{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.fanwall-compose input{background:rgba(255,255,255,.05);border:1px solid var(--line2);color:#fff;padding:11px 13px;font-family:var(--body);font-size:13px;clip-path:var(--chamfer-sm)}
.fanwall-compose #fwName{flex:0 0 150px}.fanwall-compose #fwText{flex:1;min-width:200px}
.fanwall-compose input:focus{outline:none;border-color:var(--gold)}
.fanwall-compose button{flex:0 0 auto;font-family:var(--body);font-weight:600;letter-spacing:.1em;font-size:11px;color:#06121a;background:linear-gradient(90deg,var(--gold),var(--gold2));border:none;padding:0 18px;cursor:pointer;clip-path:var(--tag);display:inline-flex;align-items:center;gap:6px}
.fanwall-compose button svg{width:14px;height:14px}
.fanwall-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;max-height:360px;overflow-y:auto;padding-right:4px}
.fw-item{display:flex;gap:11px;padding:11px 13px;background:rgba(255,255,255,.03);border:1px solid var(--line);clip-path:var(--chamfer-sm)}
.fw-ava{width:34px;height:34px;flex:0 0 auto;clip-path:var(--hex);background:linear-gradient(140deg,var(--cyan),var(--magenta));display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:14px;color:#06121a}
.fw-head{display:flex;gap:8px;align-items:baseline}.fw-head b{font-family:var(--disp);font-size:15px;color:#fff}.fw-head span{font-size:10px;color:var(--mute)}
.fw-text{font-size:14px;color:#dce3f5;line-height:1.5;margin-top:2px}
.artprev{height:120px!important;background-size:cover!important;background-position:center top!important}

/* ============================================================
   v11 — BROADCAST CLEAN: real-imagery first, no generic shapes,
   no ambient animation. Modern circles + soft rounded panels.
   ============================================================ */
/* Redefine the shape language globally: hexagons -> circles, chamfers -> soft rounded panels */
:root{
  --hex:circle(50%);
  --chamfer:inset(0 round 16px);
  --chamfer-sm:inset(0 round 11px);
  --notch:inset(0 round 16px);
  --tag:inset(0 round 7px);
}
/* clean deep-navy arena (bright accents do the talking, like the broadcast refs) */
html,body{background:#070d1c}
#world{background:radial-gradient(130% 95% at 50% -8%,#1a3c72 0%,#0d1d40 42%,#070d1c 100%)}
#hero{filter:brightness(1.2) saturate(1.16) contrast(1.03)}
#grade.docked{background:
  radial-gradient(150% 120% at 50% 6%,rgba(120,170,255,.10),transparent 48%),
  radial-gradient(130% 90% at 84% 22%,rgba(47,224,200,.07),transparent 56%),
  radial-gradient(160% 140% at 50% 30%,transparent 0,rgba(8,16,34,.42) 60%,rgba(7,13,28,.74) 100%),
  linear-gradient(180deg,rgba(14,30,62,.4),rgba(7,13,28,.78))}

/* kill decorative/ambient animation (functional UI feedback stays) */
#auroras{display:none!important}
.vhead .vh-bg{animation:none!important}
.clash-vs{animation:none!important}
.spot .glowbg{animation:none!important}
.reticle::before,.reticle::after{animation:none!important}
.vh-line{display:none!important}
#rays{display:none!important}
.tile::after,.card .sheen,.featured::after{animation:none!important}

/* refined panels — soft borders, gentle depth, no gradient-border gimmicks */
.card,.panel,.hud,.tile{border:1px solid rgba(146,180,236,.14)}
.card::before{background:linear-gradient(158deg,rgba(17,28,52,.86),rgba(10,18,38,.9))!important;box-shadow:none!important}
.vhead{border:1px solid rgba(146,180,236,.16)}
.navbtn{border:1px solid rgba(146,180,236,.16)}
/* circular avatars everywhere (matches broadcast refs) */
.face,.pic,.mc-av,.topback .ava,.backcard .ava,.fw-ava,.clash-ava .ci{border-radius:50%}
/* hover feedback only — crisp, not floaty */
.card:hover,.backcard:hover,.navbtn:hover{transition:transform .18s ease,background .18s ease,border-color .18s ease}

/* ============================================================
   v11 — COMMAND CENTRE: navy/gold/electric palette, bracket HUD
   frames (no generic chamfers), cleaner nav, brighter arena.
   ============================================================ */
:root{
  --cyan:#ffc83a; --gold:#ffc94d; --gold2:#ffe39a; --magenta:#e5283f; --purple:#15c06a; --green:#39e0a0;
  --line:rgba(120,160,235,.16); --line2:rgba(255,201,77,.30); --mute:#8ea3c8;
}
html,body{background:#0a0908}
#world{background:
  radial-gradient(120% 80% at 50% -10%,#272015 0%,#15120c 44%,#0a0908 100%)}
#hero{filter:brightness(1.3) saturate(1.26) contrast(1.05)}
body.docked #hero{filter:brightness(.26) saturate(.7) blur(2px)}              /* kill landing promo text bleed in-app */
body.docked #cinematic{display:none!important}                                /* landing title lockup gone once docked */
#sectionBg.show{opacity:.2;filter:brightness(1.02) saturate(.9) blur(4px) sepia(.25)} /* faint warm ambiance, no blue cast */
#grade.docked{background:
  radial-gradient(150% 120% at 50% 4%,rgba(255,200,58,.12),transparent 44%),
  radial-gradient(90% 70% at 84% 18%,rgba(229,40,63,.08),transparent 55%),
  radial-gradient(90% 70% at 14% 22%,rgba(21,192,106,.08),transparent 55%),
  radial-gradient(160% 150% at 50% 42%,transparent 0,rgba(24,18,10,.22) 62%,rgba(12,9,6,.55) 100%),
  linear-gradient(180deg,rgba(30,23,12,.22),rgba(12,9,6,.5))}
.vhead .vh-bg{opacity:.86!important;filter:brightness(1.3) saturate(1.25) contrast(1.06)!important}
.vhead .vh-grad{background:linear-gradient(90deg,rgba(15,12,8,.82),rgba(15,12,8,.28) 60%,rgba(15,12,8,0))!important}
.vhead{border-bottom:1px solid var(--line2);box-shadow:0 16px 40px rgba(0,0,0,.4)}

/* ---- bespoke bracket-frame panels (replaces generic chamfer cards) ---- */
.frame{position:relative;
  background:linear-gradient(160deg,rgba(34,29,18,.86),rgba(15,12,8,.93));
  border:1.6px solid transparent;border-image:linear-gradient(135deg,var(--gold),var(--magenta) 38%,var(--purple) 68%,var(--blue)) 1;
  border-radius:2px;padding:18px 20px;transition:box-shadow .25s ease,transform .25s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 42px rgba(0,0,0,.42);clip-path:none!important}
.frame:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 30px rgba(255,200,58,.2),0 18px 42px rgba(0,0,0,.42)}
.card{transition:box-shadow .25s ease}
.card:hover{box-shadow:0 0 30px rgba(255,200,58,.18),0 14px 36px rgba(0,0,0,.4)}
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
   linear-gradient(var(--gold),var(--gold)) left top/17px 2px no-repeat,
   linear-gradient(var(--gold),var(--gold)) left top/2px 17px no-repeat,
   linear-gradient(var(--gold),var(--gold)) right top/17px 2px no-repeat,
   linear-gradient(var(--gold),var(--gold)) right top/2px 17px no-repeat,
   linear-gradient(var(--gold),var(--gold)) left bottom/17px 2px no-repeat,
   linear-gradient(var(--gold),var(--gold)) left bottom/2px 17px no-repeat,
   linear-gradient(var(--gold),var(--gold)) right bottom/17px 2px no-repeat,
   linear-gradient(var(--gold),var(--gold)) right bottom/2px 17px no-repeat;opacity:.9}
.frame h3{display:flex;align-items:center;gap:9px;font-family:var(--body);font-weight:600;letter-spacing:.12em;font-size:12px;
  text-transform:uppercase;color:var(--gold);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.frame h3 .ic{color:var(--cyan)}

/* ---- command-bar nav (text + glow underline, bracket ends) ---- */
#nav{position:relative;flex-wrap:wrap;justify-content:center;row-gap:6px;gap:5px;
  background:linear-gradient(90deg,var(--gold),var(--magenta) 34%,var(--purple) 66%,var(--blue)),
    linear-gradient(90deg,var(--gold),var(--magenta) 34%,var(--purple) 66%,var(--blue)),
    linear-gradient(180deg,rgba(24,20,12,.98),rgba(13,11,8,.95));
  background-size:100% 3px,100% 3px,100% 100%;background-repeat:no-repeat;background-position:top left,bottom left,center}
.navbtn{clip-path:none!important;background:rgba(255,255,255,.03)!important;border:1px solid rgba(255,200,58,.14)!important;border-radius:6px;
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:11px;color:#d7cfbb;padding:8px 12px}
.navbtn .ic{color:var(--gold);opacity:.95}
.navbtn:hover{color:#fff!important;background:rgba(255,200,58,.12)!important;border-color:rgba(255,200,58,.4)!important;transform:translateY(-1px)!important}
.navbtn.active{color:var(--ink)!important;background:linear-gradient(120deg,var(--gold2),var(--gold))!important;border-color:transparent!important;box-shadow:0 4px 14px rgba(255,200,58,.3)!important}
.navbtn.active .ic{color:var(--ink)!important}
.navbtn.active::after{display:none!important}
.navbtn.active::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--cyan));box-shadow:0 0 10px rgba(255,200,58,.6)}
.navbtn.home,.navbtn.admin{color:var(--gold)!important}

/* tournament progress ring in the command header */
.progress-ring{position:relative;width:46px;height:46px;display:flex;align-items:center;justify-content:center;margin-right:6px}
.progress-ring svg{width:46px;height:46px}
.progress-ring b{position:absolute;font-family:var(--disp);font-size:13px;color:var(--gold)}

/* recolour HUD rising cards to navy (kill the green/teal) */
.hud.frame{padding:15px 16px}
.hud .v{color:#fff}.hud .k .ic{color:var(--gold)}
.spot .glowbg,.reticle::before{background:radial-gradient(circle,rgba(255,200,58,.16),transparent 70%)!important}

/* clash centre + sides → navy/gold (not teal) */
.clash{border-color:var(--line2);background:#0a1430}
.clash-center{background:linear-gradient(180deg,rgba(9,17,38,.46),rgba(9,17,38,.7))}
.clash-art.has{background-color:#0b1733}

/* generic card surfaces → align to navy glass so nothing reads teal-green */
.card::before{background:linear-gradient(158deg,rgba(26,24,28,.82),rgba(13,12,16,.88))!important}
.panel.card.featured::before,.spot::before{background:linear-gradient(150deg,rgba(34,30,26,.72),rgba(15,14,18,.84))!important}

/* ============================================================
   v12 — CINEMATIC VS CARD (3D), MATCH CENTRE, FAN ZONE SPLIT
   ============================================================ */
/* shared form chips */
.fc{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:5px;font-family:var(--disp);font-size:12px;margin:0 2px}
.fc.W{background:linear-gradient(160deg,#2fe6a0,#159e6d);color:#04140d}
.fc.L{background:linear-gradient(160deg,#e5283f,#b3164f);color:#fff}
.fc.D{background:rgba(255,255,255,.14);color:#cdd9e8}.fc.x{background:rgba(255,255,255,.08);color:var(--mute)}
.cyl{color:var(--cyan)}.mag{color:var(--magenta)}

/* ---- 3D VS CARD (command centre hero) ---- */
.clash{perspective:1500px;clip-path:none!important;margin-bottom:20px;background:transparent!important;border:none!important;min-height:0!important;display:block!important;grid-template-columns:none!important}
.clash::after,.clash::before{display:none!important}
.clash-stage{position:relative;border-radius:7px;overflow:hidden;min-height:clamp(360px,33vw,440px);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .3s cubic-bezier(.16,1,.3,1);
  border:1px solid var(--line2);box-shadow:0 34px 90px rgba(0,0,0,.6),inset 0 0 90px rgba(0,0,0,.45);background:#0a1430}
.clash-bg{position:absolute;inset:-5%;background-size:cover;background-position:center 26%;filter:brightness(.82) saturate(1.3);
  transform:translate(calc(var(--mx,0px)*-.35),calc(var(--my,0px)*-.35)) scale(1.07);z-index:0}
.clash-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(58% 78% at 50% 42%,transparent,rgba(15,12,8,.6)),linear-gradient(180deg,rgba(15,12,8,.32),rgba(15,12,8,.82))}
.clash-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.clash-fx::before{content:"";position:absolute;top:-20%;left:50%;width:3px;height:140%;transform:translateX(-50%) rotate(8deg);
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.85),rgba(255,200,58,.6),transparent);filter:blur(1px);opacity:.5;animation:slashpulse 3.2s ease-in-out infinite}
.clash-fx::after{content:"";position:absolute;inset:0;background:radial-gradient(40% 60% at 50% 45%,rgba(255,201,77,.16),transparent 70%);animation:fxpulse 4s ease-in-out infinite}
@keyframes slashpulse{0%,100%{opacity:.32;transform:translateX(-50%) rotate(8deg) scaleY(1)}50%{opacity:.7;transform:translateX(-50%) rotate(8deg) scaleY(1.04)}}
@keyframes fxpulse{0%,100%{opacity:.5}50%{opacity:.9}}
.clash-core{position:relative;z-index:2;display:grid;grid-template-columns:1fr clamp(160px,18vw,250px) 1fr;min-height:clamp(320px,30vw,400px);transform:translateZ(40px)}
/* player panel */
.cp{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:inherit}
.cp.l{clip-path:polygon(0 0,100% 0,calc(100% - 56px) 100%,0 100%)}
.cp.r{clip-path:polygon(56px 0,100% 0,100% 100%,0 100%)}
.cp-photo{position:absolute;inset:0;background-size:cover;background-position:center top;transform:translate(calc(var(--mx,0px)*.5),calc(var(--my,0px)*.3)) scale(1.04);transition:transform .3s ease}
.cp.l .cp-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,200,58,.42),transparent 52%),linear-gradient(0deg,rgba(15,12,8,.95),transparent 58%)}
.cp.r .cp-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(245deg,rgba(255,78,138,.44),transparent 52%),linear-gradient(0deg,rgba(15,12,8,.95),transparent 58%)}
.cp-ava{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:clamp(120px,14vw,180px);height:clamp(120px,14vw,180px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:clamp(46px,6vw,74px);color:var(--gold);
  background:radial-gradient(circle,rgba(20,34,64,.9),rgba(10,18,40,.6));box-shadow:0 0 0 2px rgba(255,201,77,.35),0 0 70px rgba(255,200,58,.3)}
.cp.r .cp-ava{box-shadow:0 0 0 2px rgba(255,201,77,.35),0 0 70px rgba(255,78,138,.34)}
.cp-ava.img{background-size:cover;background-position:center;color:transparent}
.cp-rank{position:absolute;top:16px;z-index:3;font-family:var(--body);font-weight:600;letter-spacing:.18em;font-size:11px;color:#cdd9e8}
.cp.l .cp-rank{left:20px}.cp.r .cp-rank{right:20px}
.cp-rank b{font-family:'Anton',sans-serif;font-size:26px;display:block;line-height:.8}
.cp.l .cp-rank b{color:var(--cyan)}.cp.r .cp-rank b{color:var(--magenta)}
.cp-body{position:relative;z-index:3;padding:0 22px 22px;width:100%}
.cp.r .cp-body{text-align:right}
.cp-name{font-family:'Anton',sans-serif;font-size:clamp(30px,4.4vw,58px);line-height:.84;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.5),0 0 26px rgba(0,0,0,.55)}
.cp-aka{font-family:var(--body);letter-spacing:.18em;font-size:11px;color:var(--gold);text-transform:uppercase;margin-top:6px}
.cp-stats{display:flex;gap:16px;margin-top:13px}
.cp.r .cp-stats{justify-content:flex-end}
.cp-stats span{display:flex;flex-direction:column;font-size:8.5px;letter-spacing:.13em;color:#9fb4c8;gap:1px}
.cp-stats b{font-family:var(--disp);font-size:23px;color:#fff}.cp-stats b i{font-size:13px;color:var(--gold)}
.cp-stats .ov b{color:var(--gold)}
/* centre column */
.cp-mid{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:14px 8px;text-align:center;
  background:linear-gradient(180deg,rgba(8,15,34,.32),rgba(8,15,34,.6));backdrop-filter:blur(2px)}
.cp-badge{display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--gold)}
.cp-badge svg{width:26px;height:26px}.cp-badge span{font-family:'Anton',sans-serif;font-size:13px;letter-spacing:.04em;color:#fff}
.cp-badge small{font-size:7px;letter-spacing:.2em;color:var(--mute)}
.cp-vs{font-family:'Anton',sans-serif;font-size:clamp(48px,7vw,92px);line-height:.78;color:#fff;
  text-shadow:0 0 26px rgba(255,200,58,.55),0 0 50px rgba(255,78,138,.4);animation:vspulse 2.6s ease-in-out infinite}
@keyframes vspulse{0%,100%{transform:scale(1) translateZ(0);text-shadow:0 0 18px rgba(255,200,58,.4),0 0 40px rgba(255,78,138,.3)}50%{transform:scale(1.07);text-shadow:0 0 34px rgba(255,200,58,.7),0 0 64px rgba(255,78,138,.5)}}
.cp-stage{font-family:var(--body);letter-spacing:.18em;font-size:9.5px;color:var(--cyan);text-transform:uppercase}
.cp-when{font-size:10px;letter-spacing:.1em;color:#cdd9e8}
.cp-cd{display:flex;gap:7px;justify-content:center;margin-top:2px}
.cp-cd .n{font-family:var(--disp);font-size:clamp(18px,2.3vw,26px);color:var(--gold);line-height:1}
.cp-cd .l{font-size:6.5px;letter-spacing:.08em;color:var(--mute)}
.cp-cta{margin-top:6px;display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-weight:700;letter-spacing:.1em;font-size:10px;
  color:#06121a;background:linear-gradient(90deg,var(--gold),var(--gold2));padding:9px 16px;border-radius:3px;cursor:pointer;transition:.2s}
.cp-cta:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 10px 26px rgba(255,201,77,.45)}
.cp-cta svg{width:13px;height:13px}
/* bottom strip */
.clash-strip,.mc-strip{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line2)}
.cs-cell{background:rgba(9,16,36,.94);padding:13px 10px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.cs-cell .ck{font-size:8px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.cs-cell .cv{font-family:'Anton',sans-serif;font-size:26px;color:#fff;display:flex;align-items:center;gap:7px}
.cs-cell .cv.sm{font-size:22px}.cs-cell .cv i{color:var(--mute);font-style:normal}
.cs-cell .cv.formc{font-size:0}.cs-cell .csub{font-size:9px;color:var(--gold);letter-spacing:.04em}
.clash-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:220px;color:var(--mute);text-align:center;border:1px solid var(--line);border-radius:7px;background:rgba(10,18,40,.6)}
.clash-empty svg{width:44px;height:44px;color:var(--gold);opacity:.7}
@media(max-width:820px){
  .clash-core{grid-template-columns:1fr;min-height:0}
  .cp{min-height:230px}.cp.l,.cp.r{clip-path:none}
  .cp-mid{order:-1;padding:18px}
  .clash-strip,.mc-strip{grid-template-columns:repeat(2,1fr)}
}

/* ---- MATCH CENTRE modal ---- */
#match{position:fixed;inset:0;z-index:60;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;background:rgba(4,5,9,.96);padding:18px}
#match.show{display:flex;animation:fade .3s}
#match .pf{max-width:1040px;width:100%;max-height:94vh;overflow:auto;background:linear-gradient(160deg,rgba(15,24,50,.96),rgba(9,15,33,.98));border:1px solid var(--line2);border-radius:8px;position:relative;box-shadow:0 40px 120px rgba(0,0,0,.7)}
.mc-stage{position:relative;overflow:hidden;border-radius:8px 8px 0 0;perspective:1400px;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease}
.mc-bg{position:absolute;inset:-5%;background-size:cover;background-position:center 26%;filter:brightness(.8) saturate(1.25);transform:translate(calc(var(--mx,0px)*-.3),calc(var(--my,0px)*-.3)) scale(1.06)}
.mc-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(58% 80% at 50% 40%,transparent,rgba(15,12,8,.62)),linear-gradient(180deg,rgba(15,12,8,.3),rgba(15,12,8,.85))}
.mc-core{position:relative;z-index:2;display:grid;grid-template-columns:1fr clamp(150px,17vw,220px) 1fr;min-height:clamp(300px,28vw,360px)}
.mcp{position:relative;overflow:hidden;display:flex;align-items:flex-end;cursor:pointer;min-height:inherit}
.mcp.l{clip-path:polygon(0 0,100% 0,calc(100% - 48px) 100%,0 100%)}.mcp.r{clip-path:polygon(48px 0,100% 0,100% 100%,0 100%)}
.mcp-photo{position:absolute;inset:0;background-size:cover;background-position:center top;transition:transform .4s ease}
.mcp:hover .mcp-photo{transform:scale(1.05)}
.mcp.l .mcp-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,200,58,.4),transparent 52%),linear-gradient(0deg,rgba(15,12,8,.94),transparent 56%)}
.mcp.r .mcp-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(245deg,rgba(255,78,138,.42),transparent 52%),linear-gradient(0deg,rgba(15,12,8,.94),transparent 56%)}
.mcp-ava{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:118px;height:118px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:48px;color:var(--gold);background:radial-gradient(circle,rgba(20,34,64,.9),rgba(10,18,40,.6));box-shadow:0 0 0 2px rgba(255,201,77,.3),0 0 50px rgba(255,200,58,.3)}
.mcp.r .mcp-ava{box-shadow:0 0 0 2px rgba(255,201,77,.3),0 0 50px rgba(255,78,138,.3)}
.mcp-ava.img{background-size:cover;background-position:center;color:transparent}
.mcp-rank{position:absolute;top:14px;z-index:3;font-size:10px;letter-spacing:.16em;color:#cdd9e8}.mcp.l .mcp-rank{left:16px}.mcp.r .mcp-rank{right:16px}
.mcp-rank b{font-family:'Anton',sans-serif;font-size:22px;display:block;line-height:.8}.mcp.l .mcp-rank b{color:var(--cyan)}.mcp.r .mcp-rank b{color:var(--magenta)}
.mcp-body{position:relative;z-index:3;padding:0 18px 18px;width:100%}.mcp.r .mcp-body{text-align:right}
.mcp-nm{font-family:'Anton',sans-serif;font-size:clamp(26px,3.6vw,46px);line-height:.84;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.mcp-aka{font-size:10px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase;margin-top:5px}
.mcp-stats{display:flex;gap:13px;margin-top:11px}.mcp.r .mcp-stats{justify-content:flex-end}
.mcp-stats span{display:flex;flex-direction:column;font-size:8px;letter-spacing:.12em;color:#9fb4c8}
.mcp-stats b{font-family:var(--disp);font-size:20px;color:#fff}.mcp-stats b i{font-size:11px;color:var(--gold)}.mcp-stats .ov b{color:var(--gold)}
.mc-mid{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;text-align:center;background:linear-gradient(180deg,rgba(8,15,34,.34),rgba(8,15,34,.62))}
.mc-score{font-family:'Anton',sans-serif;font-size:clamp(42px,6vw,72px);color:#fff;display:flex;gap:8px;align-items:center}.mc-score i{color:var(--mute);font-style:normal}
.mc-ft{font-size:10px;letter-spacing:.2em;color:var(--cyan)}
.mc-when{font-size:10px;letter-spacing:.1em;color:#cdd9e8}
.mc-cta{margin-top:4px;display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-weight:700;letter-spacing:.1em;font-size:10px;color:#06121a;background:linear-gradient(90deg,var(--gold),var(--gold2));padding:8px 15px;border-radius:3px;cursor:pointer}
.mc-cta svg{width:12px;height:12px}
.mc-mom{display:flex;align-items:center;gap:12px;padding:16px 22px}
.mc-mom span{font-family:var(--disp);font-size:14px;color:var(--mute);white-space:nowrap}.mc-mom span.r{text-align:right}
.mc-mom-bar{flex:1;height:12px;display:flex;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.06)}
.mc-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.mc-cards .mc-cell{background:rgba(9,16,36,.95);padding:14px 8px;text-align:center}
.mc-cards .n{font-family:var(--disp);font-size:26px;color:#fff}.mc-cards .n small{font-size:11px;color:var(--mute)}
.mc-cards .l{font-size:8px;letter-spacing:.1em;color:var(--mute);text-transform:uppercase;margin-top:3px}

/* ---- FAN ZONE: support split donut ---- */
.fz-top{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:14px;margin-bottom:16px}
@media(max-width:900px){.fz-top{grid-template-columns:1fr}}
.fz-split{text-align:center}
.split-wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.split-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;width:80px}
.ss-ava{width:54px;height:54px;border-radius:50%;background:#0c1f3a center/cover;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:22px;color:var(--gold);box-shadow:0 0 0 2px rgba(255,201,77,.3)}
.ss-nm{font-family:var(--disp);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}
.ss-sub{font-size:8px;letter-spacing:.1em;color:var(--mute)}
.split-donut{position:relative;width:130px;height:130px;flex:0 0 auto}
.split-donut svg{width:130px;height:130px;filter:drop-shadow(0 0 12px rgba(255,200,58,.25))}
.split-pct{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.split-pct b{font-family:var(--disp);font-size:30px;color:#fff;line-height:.8}
.split-pct small{font-size:8px;letter-spacing:.08em;color:var(--cyan);max-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   v13 — FLOATING FEATHERED PLAYERS, PODIUM, GOLDEN BOOT, FIXES
   ============================================================ */
/* FIX: landing hero no longer bleeds behind sections */
body.docked #hero{opacity:0!important;transition:opacity 1s ease}
#sectionBg.show{opacity:.5}
/* banner faces: bias crop toward the top so heads aren't cut */
.vhead .vh-bg{background-position:center 20%!important}

/* ---- floating, feathered players (NO borders / NO circle / blend like clouds) ---- */
.clash-stage,.mc-stage{border:none!important;box-shadow:0 44px 120px rgba(0,0,0,.6)!important}
#match .pf{border:none!important;box-shadow:0 50px 130px rgba(0,0,0,.72)!important}
.cp.l,.cp.r,.mcp.l,.mcp.r{clip-path:none!important}
.cp-photo,.mcp-photo{
  -webkit-mask:radial-gradient(145% 118% at 50% 40%,#000 45%,rgba(0,0,0,.55) 66%,transparent 88%);
  mask:radial-gradient(145% 118% at 50% 40%,#000 45%,rgba(0,0,0,.55) 66%,transparent 88%)}
.cp.l .cp-photo,.mcp.l .mcp-photo{-webkit-mask:radial-gradient(155% 122% at 38% 40%,#000 43%,rgba(0,0,0,.5) 64%,transparent 86%);mask:radial-gradient(155% 122% at 38% 40%,#000 43%,rgba(0,0,0,.5) 64%,transparent 86%)}
.cp.r .cp-photo,.mcp.r .mcp-photo{-webkit-mask:radial-gradient(155% 122% at 62% 40%,#000 43%,rgba(0,0,0,.5) 64%,transparent 86%);mask:radial-gradient(155% 122% at 62% 40%,#000 43%,rgba(0,0,0,.5) 64%,transparent 86%)}
.cp.l .cp-photo::after,.mcp.l .mcp-photo::after{background:linear-gradient(115deg,rgba(255,200,58,.3),transparent 62%),linear-gradient(0deg,rgba(15,12,8,.55),transparent 60%)!important}
.cp.r .cp-photo::after,.mcp.r .mcp-photo::after{background:linear-gradient(245deg,rgba(255,78,138,.32),transparent 62%),linear-gradient(0deg,rgba(15,12,8,.55),transparent 60%)!important}
/* fallback avatar = floating glow + initial, no ring/circle line */
.cp-ava,.mcp-ava{background:none!important;box-shadow:none!important;border-radius:0!important;color:#fff!important;overflow:visible}
.cp-ava::before,.mcp-ava::before{content:"";position:absolute;inset:-34%;z-index:-1;background:radial-gradient(circle,rgba(255,200,58,.34),transparent 66%);filter:blur(6px)}
.cp.r .cp-ava::before,.mcp.r .mcp-ava::before{background:radial-gradient(circle,rgba(255,78,138,.36),transparent 66%)}
.cp-ava.img,.mcp-ava.img{-webkit-mask:radial-gradient(circle,#000 52%,transparent 80%);mask:radial-gradient(circle,#000 52%,transparent 80%)}
.cp-ava.img::before,.mcp-ava.img::before{display:none}
/* centre floats — drop the panel box */
.cp-mid,.mc-mid{background:radial-gradient(62% 72% at 50% 46%,rgba(255,200,58,.10),transparent 72%)!important;backdrop-filter:none!important}
.cp-vs{filter:drop-shadow(0 0 24px rgba(255,200,58,.45))}
/* strip & cards: soft faded dividers instead of hard lines */
.clash-strip,.mc-strip{background:transparent!important;border-top:none!important;gap:0!important}
.cs-cell{background:transparent!important;position:relative}
.cs-cell+.cs-cell::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.14),transparent)}
.mc-cards .mc-cell{background:rgba(9,16,36,.55)!important}

/* ---- LEADERBOARD: podium + golden boot ---- */
.lead-top{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;margin-bottom:18px}
@media(max-width:920px){.lead-top{grid-template-columns:1fr}}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:14px;padding:18px 8px 0;position:relative}
.pod{position:relative;flex:1;max-width:190px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;cursor:pointer;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.pod:hover{transform:translateY(-7px)}
.pod-num{font-family:'Anton',sans-serif;font-size:30px;line-height:.7;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35)}
.pod-1 .pod-num{font-size:44px;color:var(--gold);-webkit-text-stroke:0;text-shadow:0 0 22px rgba(255,201,77,.6)}
.lfig{width:118px;height:150px;background-size:cover;background-position:center top;position:relative;display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:46px;color:#fff;
  -webkit-mask:radial-gradient(125% 115% at 50% 38%,#000 52%,transparent 86%);mask:radial-gradient(125% 115% at 50% 38%,#000 52%,transparent 86%)}
.lfig:not(.has)::before{content:"";position:absolute;inset:-12%;z-index:-1;background:radial-gradient(circle,rgba(255,200,58,.3),transparent 66%)}
.pod-1 .lfig{width:152px;height:188px;filter:drop-shadow(0 0 34px rgba(255,201,77,.42))}
.pod-1 .lfig:not(.has)::before{background:radial-gradient(circle,rgba(255,201,77,.4),transparent 66%)}
.pod-info{text-align:center;margin-top:-6px}
.pod-nm{font-family:'Anton',sans-serif;font-size:19px;color:#fff}
.pod-1 .pod-nm{font-size:25px;color:var(--gold)}
.pod-pts b{font-family:var(--disp);font-size:26px;color:#fff}.pod-1 .pod-pts b{color:var(--gold)}
.pod-pts small{font-size:8px;color:var(--mute);letter-spacing:.1em;margin-left:3px}
.pod-base{width:100%;margin-top:10px;border-radius:5px 5px 0 0}
.pod-1 .pod-base{height:78px;background:linear-gradient(180deg,rgba(255,201,77,.5),rgba(255,201,77,.04));box-shadow:0 0 36px rgba(255,201,77,.25),inset 0 1px 0 rgba(255,255,255,.2)}
.pod-2 .pod-base{height:50px;background:linear-gradient(180deg,rgba(255,200,58,.42),rgba(255,200,58,.03))}
.pod-3 .pod-base{height:34px;background:linear-gradient(180deg,rgba(21,192,106,.42),rgba(21,192,106,.03))}

.gboot{position:relative;padding:20px 20px 16px;border-radius:9px;overflow:hidden;cursor:pointer;text-align:center;
  background:linear-gradient(165deg,rgba(34,26,7,.9),rgba(10,12,22,.94));box-shadow:0 26px 70px rgba(0,0,0,.5),inset 0 0 60px rgba(255,201,77,.05)}
.gboot::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 50% at 80% 10%,rgba(255,201,77,.22),transparent 60%);pointer-events:none}
.gb-tag{font-family:'Anton',sans-serif;font-size:24px;letter-spacing:.03em;color:var(--gold);text-shadow:0 0 20px rgba(255,201,77,.4)}
.gb-sub{font-size:9px;letter-spacing:.34em;color:var(--mute);margin-bottom:6px}
.gb-stage{position:relative;height:188px;margin:4px 0}
.gb-stage .lfig{position:absolute;left:50%;transform:translateX(-58%);width:140px;height:180px}
.gb-boot{position:absolute;right:-6px;bottom:6px;width:165px;filter:drop-shadow(0 14px 26px rgba(255,160,20,.45));animation:bootfloat 4.5s ease-in-out infinite}
@keyframes bootfloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(-3deg)}}
.gb-nm{font-family:'Anton',sans-serif;font-size:26px;color:#fff;line-height:.9}
.gb-dept{font-size:9px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;margin-top:3px}
.gb-stats{display:flex;justify-content:center;gap:20px;margin:14px 0 12px}
.gb-stats div{display:flex;flex-direction:column;gap:2px}.gb-stats b{font-family:var(--disp);font-size:24px;color:#fff}
.gb-stats .big b{font-size:38px;color:var(--gold);text-shadow:0 0 20px rgba(255,201,77,.4)}
.gb-stats span{font-size:8px;letter-spacing:.12em;color:var(--mute)}
.gb-rank{text-align:left;border-top:1px solid rgba(255,201,77,.12);padding-top:10px}
.gbr{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:13px}
.gbr-n{width:18px;font-family:var(--disp);color:var(--mute)}.gbr.lead .gbr-n{color:var(--gold)}
.gbr-nm{flex:1;color:#cdd9e8}.gbr.lead .gbr-nm{color:#fff}
.gbr-g{font-family:var(--disp);font-size:16px;color:var(--gold)}

/* ---- ALIVE: pulses ---- */
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(255,78,138,.5)}50%{box-shadow:0 0 0 6px rgba(255,78,138,0)}}
.badge.live .dot{animation:pulseDot 1.8s ease-in-out infinite}
@keyframes livethrob{0%,100%{opacity:.85}50%{opacity:1}}
.badge.live{animation:livethrob 2s ease-in-out infinite}

/* ============================================================
   v14 — ALIVE: sheen sweeps, growing bars, trend chart
   ============================================================ */
input[type=range]{accent-color:var(--gold)}
/* sheen sweeps (GPU-cheap, periodic) */
.clash-stage::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(115deg,transparent 39%,rgba(255,255,255,.10) 49%,transparent 59%);transform:translateX(-130%);animation:sheen 7s ease-in-out infinite}
.gboot::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,225,150,.16) 50%,transparent 60%);transform:translateX(-130%);animation:sheen 6.5s ease-in-out .6s infinite}
.pod-1 .lfig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 42%,rgba(255,255,255,.20) 50%,transparent 58%);transform:translateX(-130%);animation:sheen 5.5s ease-in-out infinite}
@keyframes sheen{0%,72%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

/* growing points bar in the leaderboard */
.ptswrap{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:46px}
.ptbar{display:block;align-self:stretch;height:3px;width:0;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--cyan));transition:width .9s cubic-bezier(.16,1,.3,1)}
.stbl tbody tr.lead .ptbar{background:linear-gradient(90deg,var(--gold),var(--gold2));box-shadow:0 0 8px rgba(255,201,77,.5)}

/* live trend chart */
.trend-canvas{width:100%;height:200px;display:block}

/* banner focus controls */
.bnr-row{display:flex;align-items:center;gap:12px;padding:6px 0}
.bnr-row .tn{flex:0 0 150px;font-size:12px;color:#cdd9e8}
.bnr-row input[type=range]{flex:1}

/* ============================================================
   v15 — VS FIX, FIXTURES + STANDINGS RESTYLE, FANZONE, H2H, COLOR
   ============================================================ */
/* ---- VS card: dial back brightness + show full names ---- */
.clash-bg{filter:brightness(.5) saturate(1.08)!important}
.clash-bg::after{background:radial-gradient(62% 82% at 50% 40%,transparent,rgba(15,12,8,.74)),linear-gradient(180deg,rgba(15,12,8,.46),rgba(15,12,8,.93))!important}
.cp-name{font-size:clamp(20px,2.7vw,40px)!important;line-height:.92;white-space:normal;overflow-wrap:anywhere;max-width:100%}
.cp-body{padding:0 16px 18px}
.cp-stats b{color:#fff}
.cp-stats .ov b{color:var(--gold)}
.cp.l .cp-stats span:first-child b{color:var(--cyan)}
.cp.r .cp-stats span:first-child b{color:var(--magenta)}
.cp-stats span:nth-child(2) b{color:var(--gold)}

/* ---- FIXTURES: cinematic, colour-coded ---- */
.fx{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:16px 22px;margin-bottom:12px;overflow:hidden;border-radius:7px;
  background:linear-gradient(100deg,rgba(255,200,58,.07),rgba(10,18,38,.72) 32%,rgba(10,18,38,.72) 68%,rgba(255,78,138,.07))!important;
  border:1px solid rgba(255,255,255,.07)!important;transition:.22s}
.fx::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--cyan),transparent);transform:none!important}
.fx::after{content:"";position:absolute;right:0;left:auto;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--magenta),transparent);transform:none!important;skew:0}
.fx:hover{transform:translateY(-2px)!important;border-color:rgba(255,200,58,.4)!important;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.fx:hover::after{left:auto!important}
.fx.isnext{border-color:rgba(255,201,77,.55)!important;box-shadow:0 0 30px rgba(255,201,77,.13)}
.fx.isnext::before,.fx.isnext::after{background:linear-gradient(180deg,var(--gold),transparent)}
.fx.islive{border-color:rgba(30,233,138,.5)!important}
.fx.islive::before,.fx.islive::after{background:linear-gradient(180deg,var(--green),transparent)}
.fx .side.win .nm{color:var(--gold)}
.fx .side.win .face{box-shadow:0 0 0 2px var(--gold),0 0 18px rgba(255,201,77,.45)!important}
.fx .side.lose{opacity:.6}
.fx .score{font-family:var(--disp);font-size:34px;color:#fff}
.fxgroup-title{color:var(--gold)}
.fxgroup-title .ic{color:var(--gold)}

/* ---- STANDINGS: colour-coded ---- */
.stbl tbody tr.lead{background:linear-gradient(90deg,rgba(255,201,77,.15),transparent 55%)!important}
.stbl tbody tr.lead td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.stbl tbody tr.q1 td:first-child{box-shadow:inset 3px 0 0 var(--green)}
.stbl tbody tr.q2 td:first-child{box-shadow:inset 3px 0 0 var(--cyan)}
.stbl tbody tr:nth-child(1) .rankn.medal{color:var(--gold);text-shadow:0 0 12px rgba(255,201,77,.5)}
.stbl tbody tr:nth-child(2) .rankn.medal{color:#d6dee8}
.stbl tbody tr:nth-child(3) .rankn.medal{color:#e0a46b}
.gdcell.pos{color:var(--green);font-weight:600}
.gdcell.neg{color:var(--red)}
.stbl tbody tr.lead .pts{color:var(--gold)}

/* ---- FANZONE: bold hero + colour-coded ---- */
.fz-hero{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:center;padding:15px 18px;margin-bottom:12px;overflow:hidden}
@media(max-width:760px){.fz-hero{grid-template-columns:1fr;gap:16px}}
.fzh-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 130% at 16% 50%,rgba(255,201,77,.16),transparent 60%),radial-gradient(55% 130% at 92% 50%,rgba(255,78,138,.14),transparent 60%)}
.fzh-left,.fzh-right{position:relative;z-index:2}
.fzh-tag{display:flex;align-items:center;gap:9px;font-family:'Anton',sans-serif;font-size:19px;letter-spacing:.05em;color:var(--gold)}
.fzh-tag svg{width:22px;height:22px;color:var(--gold)}
.fzh-count{margin:10px 0 14px}
.fzh-count b{font-family:var(--disp);font-size:64px;line-height:.78;color:#fff;text-shadow:0 0 32px rgba(255,201,77,.4)}
.fzh-count small{display:block;font-size:10px;letter-spacing:.22em;color:var(--mute);margin-top:7px}
.cheerbtns{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}
.cheerbtn{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;padding:13px 6px;cursor:pointer;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:rgba(12,20,42,.72);transition:.16s;color:#cfe3ff}
.cheerbtn svg{width:36px;height:36px}
.cheerbtn span{font-size:8px;letter-spacing:.12em;color:var(--mute)}
.cheerbtn:hover{transform:translateY(-4px) scale(1.05);border-color:rgba(255,201,77,.55)}
.cheerbtn:active{transform:scale(.93)}
.cb-flame:hover{box-shadow:0 0 22px rgba(255,140,40,.55)}
.cb-bolt:hover{box-shadow:0 0 22px rgba(255,200,58,.55)}
.cb-crown:hover{box-shadow:0 0 22px rgba(255,201,77,.6)}
.cb-diamond:hover{box-shadow:0 0 22px rgba(21,192,106,.55)}
.cb-star:hover{box-shadow:0 0 22px rgba(255,78,138,.55)}
.fz-top{grid-template-columns:1.2fr 1fr!important}
@media(max-width:900px){.fz-top{grid-template-columns:1fr!important}}
.ss-ava.cyan{box-shadow:0 0 0 2px rgba(255,200,58,.5),0 0 22px rgba(255,200,58,.3)!important}
.ss-ava.purple{box-shadow:0 0 0 2px rgba(21,192,106,.5),0 0 22px rgba(21,192,106,.3)!important}
.fz-mostback .topback{align-items:center}
.tb-fig{width:92px;height:114px;flex:0 0 auto;background-size:cover;background-position:center top;position:relative;display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:38px;color:#fff;border-radius:0!important;
  -webkit-mask:radial-gradient(120% 116% at 50% 38%,#000 52%,transparent 86%);mask:radial-gradient(120% 116% at 50% 38%,#000 52%,transparent 86%)}
.tb-fig:not(.has)::before{content:"";position:absolute;inset:-10%;z-index:-1;background:radial-gradient(circle,rgba(255,201,77,.34),transparent 66%)}
.backcard .bc-rank{flex:0 0 auto;width:22px;text-align:center;font-family:var(--disp);font-size:18px;color:var(--mute)}
.backcard.r1 .bc-rank{color:var(--gold)}.backcard.r2 .bc-rank{color:#d6dee8}.backcard.r3 .bc-rank{color:#e0a46b}
.backcard.r1{border-color:rgba(255,201,77,.34)}
.backcard.r1 .bc-bar i{background:linear-gradient(90deg,var(--gold),var(--orange))!important}
.backcard.r2 .bc-bar i{background:linear-gradient(90deg,var(--cyan),var(--blue))!important}
.backcard.r3 .bc-bar i{background:linear-gradient(90deg,var(--purple),var(--magenta))!important}

/* ---- H2H: feathered floating fighters (no circles) ---- */
.h2h-fighter{text-align:center;cursor:pointer;transition:transform .25s}
.h2h-fighter:hover{transform:translateY(-5px)}
.hfig{width:clamp(120px,17vw,168px);height:clamp(150px,21vw,210px);margin:0 auto 12px;position:relative;background-size:cover;background-position:center top;display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:clamp(48px,7vw,66px);color:#fff;border-radius:0!important;border:none!important;
  -webkit-mask:radial-gradient(124% 116% at 50% 37%,#000 50%,transparent 84%);mask:radial-gradient(124% 116% at 50% 37%,#000 50%,transparent 84%)}
.h2h-fighter.a .hfig{filter:drop-shadow(0 0 30px rgba(255,200,58,.42))}
.h2h-fighter.b .hfig{filter:drop-shadow(0 0 30px rgba(255,78,138,.42))}
.hfig:not(.has)::before{content:"";position:absolute;inset:-12%;z-index:-1;background:radial-gradient(circle,rgba(255,200,58,.32),transparent 66%)}
.h2h-fighter.b .hfig:not(.has)::before{background:radial-gradient(circle,rgba(255,78,138,.34),transparent 66%)}
.h2h-fighter.a .nm{color:#fff}.h2h-tale .n.a{color:var(--cyan)}.h2h-tale .n.b{color:var(--magenta)}.h2h-tale .n.d{color:var(--mute)}

/* ============================================================
   v16 — robust avatars (real <img> with initials fallback)
   ============================================================ */
.face,.pf-face{overflow:hidden}
.face img,.pf-face img,.av img,.pic img,.ava img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   v17 — FULLSCREEN, MVP VOTING, AUTO-BRACKET, AWARDS TAKEOVER
   ============================================================ */
.fs-btn{position:fixed;bottom:18px;right:18px;z-index:130;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:9px;background:rgba(22,17,10,.72);border:1px solid rgba(255,201,77,.32);color:var(--gold);cursor:pointer;backdrop-filter:blur(8px);transition:.18s}
.fs-btn:hover{background:rgba(255,201,77,.16);box-shadow:0 0 20px rgba(255,201,77,.32);transform:scale(1.07)}
.fs-btn.on{color:var(--cyan);border-color:rgba(255,200,58,.45)}

/* knockout admin + awards button */
.ko-admin{margin-top:16px;padding:15px;border-radius:9px;border:1px solid rgba(255,200,58,.2);background:rgba(255,200,58,.05)}
.ko-admin-h{font-family:var(--disp);font-size:16px;letter-spacing:.04em;color:var(--cyan);margin-bottom:2px}
.awards-btn{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:8px;cursor:pointer;
  font-family:var(--disp);font-size:14px;letter-spacing:.08em;color:#05121a;background:linear-gradient(135deg,var(--gold),var(--gold2));border:none;box-shadow:0 6px 20px rgba(255,201,77,.3);transition:.18s;align-self:center}
.awards-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,201,77,.45)}
.awards-btn .ic{display:inline-flex}.awards-btn svg{width:16px;height:16px}

/* MVP voting in Match Centre */
.mc-mvp{margin-top:14px;padding:14px 16px;border-radius:9px;background:linear-gradient(160deg,rgba(255,201,77,.08),rgba(22,17,10,.6));border:1px solid rgba(255,201,77,.18)}
.mvp-h{font-family:var(--disp);font-size:14px;letter-spacing:.14em;color:var(--gold);display:flex;align-items:center;gap:8px;margin-bottom:11px}
.mvp-h svg{width:18px;height:18px}
.mvp-h small{color:var(--mute);letter-spacing:.05em;font-family:'Oswald',sans-serif;font-size:11px}
.mvp-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mvp-opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-radius:8px;cursor:pointer;background:rgba(12,20,42,.7);border:1px solid rgba(255,255,255,.1);color:#dbe6f5;transition:.16s}
.mvp-opt.l:hover{border-color:var(--cyan);box-shadow:0 0 18px rgba(255,200,58,.3);transform:translateY(-2px)}
.mvp-opt.r:hover{border-color:var(--magenta);box-shadow:0 0 18px rgba(255,78,138,.3);transform:translateY(-2px)}
.mvp-opt .mvp-nm{font-family:var(--disp);font-size:18px}
.mvp-opt .mvp-c{font-family:var(--disp);font-size:22px;color:var(--gold)}
.mvp-opt.mine{border-color:var(--gold);background:linear-gradient(140deg,rgba(255,201,77,.18),rgba(255,201,77,.03))}
.mvp-badge{position:absolute;top:-9px;right:10px;font-size:8px;letter-spacing:.1em;color:#05121a;background:var(--gold);padding:2px 7px;border-radius:5px;display:inline-flex;align-items:center;gap:3px}
.mvp-badge svg{width:10px;height:10px}

/* AWARDS TAKEOVER */
.awards-take{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:20px;
  background:radial-gradient(circle at 50% 28%,rgba(20,28,60,.97),rgba(4,7,18,.99));opacity:0;transition:opacity .6s;backdrop-filter:blur(6px)}
.awards-take.show{opacity:1}
.aw-burst{position:absolute;top:14%;width:620px;height:620px;max-width:90vw;background:radial-gradient(circle,rgba(255,201,77,.22),transparent 60%);animation:awPulse 3s ease-in-out infinite;pointer-events:none}
@keyframes awPulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.12);opacity:1}}
.aw-title{font-family:'Anton',sans-serif;font-size:clamp(26px,4vw,46px);color:var(--gold);letter-spacing:.04em;display:flex;align-items:center;gap:12px;text-shadow:0 0 30px rgba(255,201,77,.4);z-index:2}
.aw-title svg{width:38px;height:38px}
.aw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1040px;width:94%;z-index:2}
@media(max-width:820px){.aw-grid{grid-template-columns:repeat(2,1fr)}}
.aw-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 14px;border-radius:11px;
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(10,14,28,.82));border:1.5px solid var(--ac);box-shadow:0 20px 50px rgba(0,0,0,.5);animation:awRise .7s cubic-bezier(.16,1,.3,1) both}
.aw-card:nth-child(2){animation-delay:.12s}.aw-card:nth-child(3){animation-delay:.24s}.aw-card:nth-child(4){animation-delay:.36s}
@keyframes awRise{from{opacity:0;transform:translateY(32px) scale(.95)}to{opacity:1;transform:none}}
.aw-ic{color:var(--ac)}.aw-ic svg{width:30px;height:30px}
.aw-l{font-size:10px;letter-spacing:.16em;color:var(--ac);margin:6px 0 10px;font-weight:600}
.aw-fig{width:118px;height:148px;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center top;font-family:'Anton',sans-serif;font-size:44px;color:#fff;position:relative;
  -webkit-mask:radial-gradient(120% 115% at 50% 38%,#000 52%,transparent 86%);mask:radial-gradient(120% 115% at 50% 38%,#000 52%,transparent 86%)}
.aw-fig:not(.has)::before{content:"";position:absolute;inset:-12%;z-index:-1;background:radial-gradient(circle,var(--ac),transparent 66%);opacity:.4}
.aw-nm{font-family:'Anton',sans-serif;font-size:23px;color:#fff;line-height:.95;margin-top:4px}
.aw-sub{font-size:11px;letter-spacing:.05em;color:var(--mute);margin-top:4px}

/* ============================================================
   v18 — LIVE PULSE, STORYLINES, FOLLOW-MY-PLAYER (no login)
   ============================================================ */
.ov-pulse{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
@media(max-width:780px){.ov-pulse{grid-template-columns:1fr}}
.pulse-cell{position:relative;display:flex;flex-direction:column;gap:5px;padding:14px 16px;border-radius:9px;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,200,58,.06),rgba(22,17,10,.72));border:1px solid rgba(255,255,255,.07);cursor:default;transition:.18s}
.pulse-cell[onclick]{cursor:pointer}
.pulse-cell[onclick]:hover{border-color:rgba(255,200,58,.4);transform:translateY(-2px)}
.pulse-cell::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cyan)}
.pulse-cell.live::before{background:var(--green);box-shadow:0 0 12px var(--green)}
.pulse-cell.next::before{background:var(--gold)}
.pulse-cell .pk{display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:.16em;color:var(--mute)}
.pulse-cell .pk svg{width:13px;height:13px;color:var(--cyan)}
.pulse-cell.live .pk svg{color:var(--green)}.pulse-cell.next .pk svg{color:var(--gold)}
.pulse-cell .pv{font-family:var(--disp);font-size:19px;color:#fff;line-height:1}
.pulse-cell .pv i{color:var(--mute);font-style:normal;font-size:13px;margin:0 2px}
.pulse-cell .pv b{color:var(--gold)}
.pulse-cell .ps{font-size:10px;letter-spacing:.05em;color:var(--mute)}
.pulse-cell.live .pk{animation:livethrob 2s ease-in-out infinite}

/* storylines */
.stories{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:780px){.stories{grid-template-columns:1fr}}
.story{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border-radius:9px;background:rgba(22,17,10,.55);border:1px solid rgba(255,255,255,.06);border-left:3px solid var(--ac)}
.story .st-ic{flex:0 0 auto;width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);color:var(--ac)}
.story .st-ic svg{width:18px;height:18px}
.story .st-t{font-family:var(--disp);font-size:13px;letter-spacing:.1em;color:var(--ac)}
.story .st-d{font-size:13px;color:#cdd9e8;line-height:1.35;margin-top:2px}

/* follow my player */
.follow-btn{margin-top:10px;display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:8px;cursor:pointer;
  font-family:var(--disp);font-size:13px;letter-spacing:.08em;color:var(--gold);background:rgba(255,201,77,.08);border:1px solid rgba(255,201,77,.4);transition:.18s}
.follow-btn svg{width:15px;height:15px}
.follow-btn:hover{background:rgba(255,201,77,.18);transform:translateY(-1px)}
.follow-btn.on{color:#05121a;background:linear-gradient(135deg,var(--gold),var(--gold2));border-color:transparent;box-shadow:0 6px 18px rgba(255,201,77,.3)}
.follow-card{margin-bottom:14px}
.fl-tag{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-size:13px;letter-spacing:.12em;color:var(--gold);margin-bottom:10px}
.fl-tag svg{width:16px;height:16px}
.fl-unfollow{margin-left:auto;font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.04em;color:var(--mute);cursor:pointer;border-bottom:1px dotted var(--mute)}
.fl-unfollow:hover{color:var(--magenta);border-color:var(--magenta)}
.fl-body{display:flex;align-items:center;gap:18px;cursor:pointer}
.fl-fig{flex:0 0 auto;width:84px;height:104px;background-size:cover;background-position:center top;display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:34px;color:#fff;position:relative;
  -webkit-mask:radial-gradient(120% 115% at 50% 38%,#000 52%,transparent 86%);mask:radial-gradient(120% 115% at 50% 38%,#000 52%,transparent 86%)}
.fl-fig:not(.has)::before{content:"";position:absolute;inset:-10%;z-index:-1;background:radial-gradient(circle,rgba(255,201,77,.32),transparent 66%)}
.fl-meta{flex:1;min-width:0}
.fl-nm{font-family:'Anton',sans-serif;font-size:26px;color:#fff;line-height:.95;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.fl-aka{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.04em;color:var(--gold);opacity:.92}
/* headline trio (rank / pts / mvp) */
.fl-hi{display:flex;gap:16px;margin:7px 0 9px}
.fl-hi span{display:flex;flex-direction:column;font-family:var(--disp);font-size:23px;line-height:1}
.fl-hi i{font-style:normal;font-size:9px;letter-spacing:.12em;color:var(--mute);margin-top:3px}
.fl-rank{color:#fff}.fl-pts{color:var(--gold)}.fl-mvp{color:var(--magenta)}
/* full detail grid — matches played, W/D/L, goals, GD */
.fl-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0 0 9px;padding:9px 4px;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.fls{display:flex;flex-direction:column;align-items:center;text-align:center}
.fls b{font-family:var(--disp);font-size:18px;color:#e7eefc;line-height:1}
.fls i{font-style:normal;font-size:8px;letter-spacing:.06em;color:var(--mute);margin-top:3px}
.fls.w b{color:#16c98a}.fls.d b{color:#ffc83a}.fls.l b{color:#ff5a73}
.fl-form{display:flex;gap:4px;margin:0 0 8px}
.fl-form i{font-style:normal;width:19px;height:19px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:11px;color:#0a0e16}
.fl-form i.W{background:#16c98a}.fl-form i.D{background:#ffc83a}.fl-form i.L{background:#ff5a73}
.fl-nogame{font-size:10px;color:var(--mute);letter-spacing:.04em}
.fl-next{display:flex;align-items:center;gap:6px;font-size:12px;color:#9fb2cf;letter-spacing:.03em}
.fl-next svg{width:13px;height:13px;opacity:.7}
body.mobile .fl-grid{grid-template-columns:repeat(4,1fr);gap:8px 4px}

/* ============================================================
   v19 — reaction glyph float, always-on chart motion, colour pops
   ============================================================ */
/* the SELECTED reaction glyph floats up from the click (replaces confetti) */
.reactfloat{position:fixed;z-index:320;width:42px;height:42px;pointer-events:none;transform:translate(-50%,-50%);animation:reactUp 1.6s cubic-bezier(.3,0,.5,1) forwards}
.reactfloat svg{width:42px;height:42px;filter:drop-shadow(0 0 14px rgba(255,201,77,.8))}
@keyframes reactUp{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}18%{opacity:1;transform:translate(-50%,-95%) scale(1.25)}100%{opacity:0;transform:translate(-50%,-340%) scale(.8) rotate(16deg)}}

/* always-on motion so charts/rings never look static */
.split-donut svg,#ovProgress svg{animation:donutBreath 3.4s ease-in-out infinite}
@keyframes donutBreath{0%,100%{filter:drop-shadow(0 0 5px rgba(255,200,58,.25))}50%{filter:drop-shadow(0 0 16px rgba(255,200,58,.6))}}
.split-pct b{animation:numPulse 2.6s ease-in-out infinite}
@keyframes numPulse{0%,100%{text-shadow:0 0 10px rgba(255,200,58,.3)}50%{text-shadow:0 0 22px rgba(255,200,58,.7)}}
/* sweeping sheen across every progress bar */
.ptbar,.bc-bar i,.hype-track i,.bars .fill{position:relative;overflow:hidden}
.ptbar::after,.bc-bar i::after,.hype-track i::after,.bars .fill::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:barSweep 2.8s ease-in-out infinite}
@keyframes barSweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(220%)}}
.hype-track{position:relative;overflow:hidden}
.hype-track i{background:linear-gradient(90deg,var(--gold),var(--cyan))!important;box-shadow:0 0 14px rgba(255,201,77,.5)}

/* colour pops */
.pulse-cell .pv b{text-shadow:0 0 14px rgba(255,201,77,.5)}
.fzh-count b{animation:numPulse 3s ease-in-out infinite}
.gb-stats .big b,.pod-1 .pod-pts b{animation:goldPulse 2.8s ease-in-out infinite}
@keyframes goldPulse{0%,100%{text-shadow:0 0 16px rgba(255,201,77,.4)}50%{text-shadow:0 0 30px rgba(255,201,77,.85)}}
.badge.live .dot{box-shadow:0 0 0 0 rgba(255,78,138,.6)}
.cheerbtn:hover svg{filter:drop-shadow(0 0 10px currentColor)}
.mvp-opt .mvp-c{text-shadow:0 0 12px rgba(255,201,77,.5)}

/* ============================================================
   v20 — straight-to-command-centre, bigger clash, feathered prizes,
          banner live-preview, analytics polish
   ============================================================ */
/* no more overview preview — dock straight into the Command Centre */
#overview{display:none!important}

/* command-centre clash shown FULL like the Match Centre popup */
.clash-stage{min-height:clamp(440px,42vw,600px)!important}
.clash-core{min-height:clamp(400px,38vw,560px)!important}
.cp-ava,.cp-ava.img{font-size:clamp(150px,18vw,230px)!important}
.cp-name{font-size:clamp(24px,3vw,46px)!important}

/* PRIZES podium — feathered floating figures (no circle) */
#prizeStage .pod .ava{border-radius:0!important;background-color:transparent!important;
  width:clamp(96px,15vw,150px)!important;height:clamp(120px,18vw,184px)!important;font-size:46px!important;
  -webkit-mask:radial-gradient(125% 116% at 50% 38%,#000 52%,transparent 86%);mask:radial-gradient(125% 116% at 50% 38%,#000 52%,transparent 86%)}
#prizeStage .pod.g1 .ava{filter:drop-shadow(0 0 32px rgba(255,201,77,.5))}
#prizeStage .pod.g2 .ava{filter:drop-shadow(0 0 24px rgba(255,200,58,.4))}
#prizeStage .pod.g3 .ava{filter:drop-shadow(0 0 24px rgba(21,192,106,.4))}
#prizeStage .pod .ava .crown{position:absolute;top:-22px;left:50%;transform:translateX(-50%)}

/* banner focal controls — LIVE preview so you can see the crop while sliding */
.bnr-row{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap}
.bnr-row .tn{flex:0 0 130px;font-size:12px;color:#cdd9e8}
.bnr-row input[type=range]{flex:1;min-width:120px}
.bnr-prev{position:relative;flex:0 0 100%;height:60px;margin-top:6px;border-radius:6px;background-size:cover;background-position:center 20%;
  border:1px solid rgba(255,201,77,.3);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.bnr-prev::after{content:"preview";position:absolute;font-size:8px;color:var(--mute);padding:2px 5px}

/* analytics engagement cards + interactive chart */
.an-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:880px){.an-grid{grid-template-columns:repeat(2,1fr)}}
.an2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media(max-width:880px){.an2{grid-template-columns:1fr}}
.eng-bars{display:flex;flex-direction:column;gap:11px}
.eng-bar{display:grid;grid-template-columns:120px 1fr 46px;align-items:center;gap:12px;cursor:default}
.eng-bar .ebl{font-size:12px;letter-spacing:.04em;color:#cdd9e8;display:flex;align-items:center;gap:7px}
.eng-bar .ebl svg{width:15px;height:15px;color:var(--ac)}
.eng-bar .ebt{height:14px;border-radius:7px;background:rgba(255,255,255,.06);overflow:hidden;position:relative}
.eng-bar .ebf{height:100%;width:0;border-radius:7px;background:linear-gradient(90deg,var(--ac),color-mix(in srgb,var(--ac) 40%,#fff));transition:width 1s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}
.eng-bar .ebf::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-100%);animation:barSweep 2.8s ease-in-out infinite}
.eng-bar .ebv{font-family:var(--disp);font-size:20px;color:#fff;text-align:right}
.eng-bar:hover .ebf{filter:brightness(1.2)}
.trend-tip{position:absolute;pointer-events:none;background:rgba(8,12,26,.95);border:1px solid var(--gold);border-radius:6px;padding:5px 9px;font-size:12px;color:#fff;transform:translate(-50%,-130%);white-space:nowrap;z-index:5;opacity:0;transition:opacity .12s}
.trend-tip.on{opacity:1}
.trend-wrap{position:relative}

/* ============================================================
   v21 — PNG cut-out pop-outs, bigger H2H, mobile/desktop toggle
   ============================================================ */
/* transparent PNG uploads render as floating cut-out figures: no hex, no frame, no box */
.cut{clip-path:none!important;-webkit-mask:none!important;mask:none!important;border-radius:0!important;border:none!important;background-color:transparent!important;box-shadow:none!important;overflow:visible!important}
.cut::before,.cut::after{display:none!important}
.cut img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 18px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(255,200,58,.35))}
span.cut{background-image:none!important}
div.cut{background-size:contain!important;background-repeat:no-repeat!important;background-position:center bottom!important;filter:drop-shadow(0 6px 18px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(255,201,77,.35))}
/* the 3D out-of-the-box pop on player cards */
.pcard{overflow:visible!important}
.pcard .av.pop{transform:scale(1.32) translateY(-14%);transform-origin:center bottom;z-index:3;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.pcard:hover .av.pop{transform:scale(1.45) translateY(-20%)}
.pf-face.cut{transform:scale(1.25);transform-origin:center bottom}
#prizeStage .pod .ava.cut{filter:drop-shadow(0 10px 24px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(255,201,77,.45))!important}

/* H2H — the fighters ARE the page */
.h2h-fighter .big{width:clamp(220px,30vw,400px)!important;height:clamp(250px,34vw,460px)!important;font-size:110px!important}
.h2h-fighter .big.cut{height:clamp(250px,34vw,460px)!important}
.h2h-fighter .nm{font-size:clamp(34px,4vw,52px)!important}
.h2h-fighter.a .big.cut img{filter:drop-shadow(0 8px 22px rgba(0,0,0,.6)) drop-shadow(0 0 34px rgba(25,224,255,.5))}
.h2h-fighter.b .big.cut img{filter:drop-shadow(0 8px 22px rgba(0,0,0,.6)) drop-shadow(0 0 34px rgba(255,45,155,.5))}

/* mobile/desktop toggle */
.mob-btn{position:fixed;right:18px;bottom:74px;z-index:300;width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(22,17,10,.85);border:1px solid rgba(255,201,77,.4);color:var(--gold);backdrop-filter:blur(6px);transition:all .25s}
.mob-btn:hover{box-shadow:0 0 18px rgba(255,201,77,.4)}
.mob-btn svg{width:20px;height:20px}
body.mobile .cols2,body.mobile .an2{grid-template-columns:1fr!important}
body.mobile .an-grid{grid-template-columns:repeat(2,1fr)!important}
body.mobile .clash-core{grid-template-columns:1fr!important;min-height:0!important}
body.mobile .clash-stage{min-height:0!important}
body.mobile .cp-ava,body.mobile .cp-ava.img{font-size:clamp(90px,24vw,150px)!important}
body.mobile #nav{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
body.mobile #nav::-webkit-scrollbar{display:none}
body.mobile .vhead h2{font-size:clamp(34px,9vw,54px)}
body.mobile .podium{transform:scale(.86);transform-origin:center bottom}
body.mobile .pf-hero{flex-direction:column;text-align:center}
body.mobile .pf-stats{grid-template-columns:repeat(2,1fr)!important}
body.mobile .h2h-grid,body.mobile .h2h-top{grid-template-columns:1fr!important}
body.mobile .stbl{font-size:12px}
body.mobile .eng-bar{grid-template-columns:92px 1fr 40px}
body.mobile .view{padding-left:12px;padding-right:12px}
body.mobile .grid,body.mobile .pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important}
/* H2H uses .hfig — the real fighters, make them dominate */
.hfig{width:clamp(240px,32vw,440px)!important;height:clamp(280px,38vw,520px)!important;margin:0 auto 14px!important}
.hfig span{font-size:120px}
.h2h-fighter.a .hfig{filter:drop-shadow(0 0 38px rgba(25,224,255,.45))}
.h2h-fighter.b .hfig{filter:drop-shadow(0 0 38px rgba(255,45,155,.45))}
body.mobile .hfig{width:clamp(170px,52vw,260px)!important;height:clamp(200px,60vw,300px)!important}

/* ===== Fan-Wall moderation list (admin) ===== */
.adlist .it.wall-it{align-items:flex-start;gap:8px}
.wall-it .wall-body{flex:1;min-width:0}
.wall-it .fw-head{display:flex;gap:8px;align-items:baseline}
.wall-it .fw-head b{font-family:var(--disp);font-size:14px;color:var(--gold)}
.wall-it .fw-head span{font-size:10px;color:var(--mute)}
.wall-it .fw-text{font-size:13px;color:#dbe4f3;line-height:1.4;word-break:break-word;margin-top:2px}
.adlist .act.ok{color:var(--green);font-weight:700}

/* ===== MOBILE COMPACT PASS — shrink oversized visuals on phones ===== */
@media(max-width:760px){
  .view{padding-top:14px}
  .vhead{padding:16px 14px;gap:10px;margin-bottom:16px}
  .vhead .ico{width:38px;height:38px;font-size:18px}
  .vhead h2{font-size:clamp(26px,7.6vw,40px)!important}
  .vhead .sub{font-size:9.5px;letter-spacing:.18em;margin-top:3px}
  .panel{padding:15px}
  .panel h3{font-size:15px}
  .clash-nm{font-size:clamp(24px,7vw,38px)!important}
  .bigtitle{font-size:clamp(44px,15vw,84px)}
  .pf,.adbox{padding:18px 14px}
}
body.mobile .view{padding-top:12px}
body.mobile .vhead{padding:14px 12px;gap:9px;margin-bottom:14px}
body.mobile .vhead .ico{width:34px;height:34px;font-size:16px}
body.mobile .vhead h2{font-size:clamp(24px,7.4vw,38px)!important}
body.mobile .vhead .sub{font-size:9px;letter-spacing:.16em}
body.mobile .panel{padding:13px;margin-bottom:12px}
body.mobile .panel h3{font-size:14px}
body.mobile .clash-nm{font-size:clamp(22px,7vw,34px)!important}
body.mobile .clash-stats b{font-size:18px}
body.mobile .hexcell{width:104px!important;height:92px!important}
body.mobile .hexrow{gap:7px!important}
body.mobile .hx-grp{font-size:17px!important}
body.mobile .z-dot{width:40px!important;height:40px!important;font-size:15px!important}
body.mobile .zone.big .z-dot{width:50px!important;height:50px!important;font-size:21px!important}
body.mobile .pf-fig,body.mobile .walk-fig{transform:scale(.82);transform-origin:center bottom}
body.mobile .rec-grid,body.mobile .aw-grid{grid-template-columns:1fr 1fr!important}
body.mobile .tb-fig{width:clamp(80px,26vw,120px)!important;height:clamp(96px,32vw,150px)!important}
body.mobile .fz-hero,body.mobile .lead-top{gap:12px}
body.mobile .pf,body.mobile .adbox{padding:16px 13px}
body.mobile .subtab,body.mobile .fxday-tab{font-size:12px;padding:7px 11px}
body.mobile #banner{font-size:11px}

/* ===== MOBILE APP BOTTOM NAV (app-like tab bar) ===== */
:root{--mnav-h:60px}
#mobileNav,#mobileMore{display:none}
body.docked.mobile #mobileNav{
  display:flex;position:fixed;left:0;right:0;bottom:0;z-index:140;gap:2px;
  padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(10,13,22,.84),rgba(6,8,15,.98));
  border-top:1px solid rgba(255,201,77,.22);backdrop-filter:blur(14px);box-shadow:0 -10px 30px rgba(0,0,0,.5)}
.mnav-btn{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:none;border:0;color:#9aa6c2;font-family:var(--body);font-size:9.5px;letter-spacing:.03em;
  padding:7px 2px;border-radius:12px;cursor:pointer;transition:color .18s,background .18s}
.mnav-btn svg.ic{width:22px;height:22px;color:inherit}
.mnav-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mnav-btn.active{color:var(--gold);background:rgba(255,201,77,.13)}
.mnav-btn.active svg.ic{color:var(--gold)}
.mnav-btn:active{transform:scale(.93)}
/* "More" sheet */
body.docked.mobile #mobileMore{display:block;position:fixed;inset:0;z-index:150;background:rgba(2,4,10,.55);
  opacity:0;pointer-events:none;transition:opacity .22s}
body.docked.mobile #mobileMore.open{opacity:1;pointer-events:auto}
.mnav-sheet-card{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#0b0f1a,#070a12);
  border-top:1px solid rgba(255,201,77,.3);border-radius:18px 18px 0 0;
  padding:14px 14px calc(18px + var(--mnav-h) + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);transition:transform .28s cubic-bezier(.16,1,.3,1);box-shadow:0 -16px 40px rgba(0,0,0,.6)}
#mobileMore.open .mnav-sheet-card{transform:none}
.mnav-sheet-h{display:flex;align-items:center;justify-content:space-between;font-family:var(--disp);font-size:16px;
  color:var(--gold);letter-spacing:.04em;margin-bottom:12px}
.mnav-x{width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:#cdd6ee;font-size:13px;
  border:1px solid var(--line2);border-radius:8px;cursor:pointer}
.mnav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mnav-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);color:#c2cbe6;font-family:var(--body);font-size:10px;padding:12px 4px;border-radius:12px;cursor:pointer}
.mnav-tile svg.ic{width:22px;height:22px;color:var(--gold)}
.mnav-tile.active{border-color:var(--gold);background:rgba(255,201,77,.12);color:#fff}
.mnav-tile.mnav-admin svg.ic{color:var(--cyan)}
/* On mobile: drop the cramped top nav button strip; keep brand + banner as a slim app top bar */
body.mobile #nav .navbtn,body.mobile #navMore,body.mobile .moretoggle{display:none!important}
body.mobile #nav{overflow:visible;padding:8px 14px;justify-content:flex-start}
body.mobile #brand{margin-right:0}
/* room for content above the bar + lift the floating utility buttons clear of it */
body.docked.mobile #views,body.docked.mobile #viewsContent{padding-bottom:calc(var(--mnav-h) + 30px)}
body.docked.mobile #mute{bottom:calc(16px + var(--mnav-h))}
body.docked.mobile .fs-btn{bottom:calc(18px + var(--mnav-h))}
body.docked.mobile .mob-btn{bottom:calc(74px + var(--mnav-h))}
body.docked.mobile .bcast-btn{bottom:calc(126px + var(--mnav-h))}
body.docked.mobile .install-btn{bottom:calc(178px + var(--mnav-h))}
body.broadcast #mobileNav,body.broadcast #mobileMore{display:none!important}

/* ===== DESKTOP NAV — one reliable scrollable row (replaces the flaky wrap/More collapse) ===== */
#nav{flex-wrap:nowrap!important;overflow-x:auto!important;justify-content:flex-start!important;row-gap:0!important;
  scrollbar-width:thin;scrollbar-color:rgba(255,201,77,.4) transparent}
#nav::-webkit-scrollbar{height:6px}
#nav::-webkit-scrollbar-thumb{background:rgba(255,201,77,.35);border-radius:6px}
#nav::-webkit-scrollbar-track{background:transparent}
#brand{margin-right:14px!important;position:sticky;left:0;z-index:3;
  background:linear-gradient(90deg,rgba(6,9,18,.99) 80%,rgba(6,9,18,0));padding-right:10px}
.moretoggle,#navMore{display:none!important}   /* retired: collapse logic removed */

/* ===== MOBILE PODIUM — keep all three places inside the screen (was cropping on the right) ===== */
body.mobile .podium{transform:none!important;gap:5px;padding:14px 2px 0}
body.mobile .pod{max-width:32vw}
body.mobile .lfig{width:clamp(64px,22vw,110px)!important;height:clamp(82px,28vw,140px)!important}
body.mobile .pod-num{font-size:24px}
body.mobile .pod-1 .pod-num{font-size:34px}
/* Standings table: scroll sideways instead of cropping the Hype/Form columns off-screen */
body.mobile .stwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
body.mobile .stwrap .stbl{min-width:540px}

/* ===== FIXTURE GROUP TAGS (which group/round is playing) ===== */
.fx .mid .fx-grp{display:inline-block;font-family:var(--body);font-weight:600;font-size:9.5px;letter-spacing:.12em;
  color:var(--gold);background:rgba(255,201,77,.14);border:1px solid rgba(255,201,77,.42);
  padding:2px 10px;border-radius:20px;text-transform:uppercase;margin-bottom:6px;white-space:nowrap;line-height:1.5}
.fx .mid .fx-grp.ko{color:var(--cyan);background:rgba(46,139,255,.16);border-color:rgba(46,139,255,.48)}
.ovfx-row{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);font-family:var(--disp);font-size:17px}
.ovfx-grp{flex:0 0 auto;font-family:var(--body);font-weight:600;font-size:8.5px;letter-spacing:.07em;color:var(--gold);
  background:rgba(255,201,77,.14);border:1px solid rgba(255,201,77,.36);padding:2px 7px;border-radius:10px;text-transform:uppercase;white-space:nowrap}
.ovfx-grp.ko{color:var(--cyan);background:rgba(46,139,255,.16);border-color:rgba(46,139,255,.42)}
.ovfx-nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovfx-nm.r{text-align:right}
.ovfx-mid{flex:0 0 auto}

/* ===== READABILITY PASS — higher contrast + larger small text ===== */
:root{--mute:#a8b5d6}
.gd,.lede,.fan-note,.empty,.head .hd,#subtitle{font-weight:400}
.gd{color:#e3eaf8;font-size:14.5px;line-height:1.72}
.lede{color:#c8d2ec}
.fan-note{color:#c2cee7}
.fx .rnd{color:#9aa7c8}
.fx .when{font-size:11px}
.fx .nm{font-size:17px}
.badge{font-size:10.5px;color:#bdc8e4}
.fw-text{color:#e6edf9}
.fw-head span,.cd .l,.hud .k,.tile .l,.tile .sub{color:#aebadb}
.mcp-stats span,.pf-stats .l{color:#b2bedb}

/* ===== DRAMATIC "KICKOFF IN" COUNTDOWN ===== */
.cd-h{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);text-align:center;margin:12px 0 4px;text-shadow:0 0 16px rgba(255,201,77,.55);animation:cdHflash 1.5s ease-in-out infinite}
@keyframes cdHflash{0%,100%{opacity:.78}50%{opacity:1}}
.cd{gap:10px;justify-content:center}
.cd div{position:relative;min-width:60px;padding:9px 6px 6px;border-radius:11px;
  background:linear-gradient(180deg,rgba(25,224,255,.12),rgba(8,14,28,.62));
  border:1px solid rgba(25,224,255,.32);box-shadow:0 0 24px rgba(25,224,255,.14),inset 0 0 18px rgba(25,224,255,.06)}
.cd .n{font-family:var(--disp);font-weight:700;font-size:clamp(38px,7vw,58px)!important;line-height:.92;color:#eafcff!important;
  text-shadow:0 0 18px rgba(25,224,255,.85),0 0 42px rgba(25,224,255,.4)}
.cd .l{font-size:9px!important;letter-spacing:.22em;color:#86dbff!important;margin-top:4px}
.cd div:last-child{border-color:rgba(255,201,77,.4);box-shadow:0 0 26px rgba(255,201,77,.18),inset 0 0 18px rgba(255,201,77,.07)}
.cd div:last-child .n{animation:cdTick 1s ease-in-out infinite}
@keyframes cdTick{0%,100%{transform:scale(1);color:#fff;text-shadow:0 0 18px rgba(255,201,77,.7)}50%{transform:scale(1.12);color:var(--gold);text-shadow:0 0 30px rgba(255,201,77,1),0 0 60px rgba(255,201,77,.5)}}
/* clash variant — gold, a touch smaller to fit the panel */
.cp-cd{gap:8px;margin-top:8px}
.cp-cd div{min-width:52px;padding:7px 5px 5px;border-radius:9px;
  background:linear-gradient(180deg,rgba(255,201,77,.14),rgba(8,14,28,.55));border:1px solid rgba(255,201,77,.34);box-shadow:0 0 20px rgba(255,201,77,.14)}
.cp-cd .n{font-size:clamp(28px,4.6vw,44px)!important;color:#fff!important;text-shadow:0 0 16px rgba(255,201,77,.7)}
.cp-cd .l{font-size:8px!important;letter-spacing:.16em;color:#ffdf9a!important;margin-top:2px}
.cp-cd div:last-child .n{animation:cdTickGold 1s ease-in-out infinite}
@keyframes cdTickGold{0%,100%{transform:scale(1);text-shadow:0 0 16px rgba(255,201,77,.7)}50%{transform:scale(1.12);text-shadow:0 0 28px rgba(255,201,77,1)}}
body.mobile .cd div{min-width:52px}
body.mobile .cd .n{font-size:clamp(32px,11vw,46px)!important}

/* ===== SEARCHABLE SELECT (combobox) ===== */
.ssel{position:relative;flex:1;min-width:170px}
.adbox .ssel{min-width:0}
.ssel-input{width:100%;font-family:var(--body);font-weight:500;letter-spacing:.04em;font-size:14px;color:#fff;
  background:rgba(0,0,0,.45);border:1px solid var(--line2);padding:12px 30px 12px 14px;outline:none;cursor:text;border-radius:4px;
  clip-path:var(--chamfer-sm);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffc94d' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4-4'/></svg>");background-repeat:no-repeat;background-position:right 10px center}
.ssel-input:focus{border-color:var(--cyan)}
.ssel-input::placeholder{color:#93a0c2}
.ssel-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:200;display:none;max-height:260px;overflow-y:auto;
  background:#0b0f1a;border:1px solid var(--line2);border-radius:8px;box-shadow:0 18px 46px rgba(0,0,0,.6);padding:5px}
.ssel.open .ssel-list{display:block}
.ssel-item{padding:9px 11px;font-family:var(--body);font-size:14px;color:#dbe4f3;border-radius:6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ssel-item:hover,.ssel-item.hi{background:rgba(25,224,255,.14);color:#fff}
.ssel-item.sel{color:var(--gold)}
.ssel-empty{padding:10px 11px;font-size:13px;color:var(--mute)}

/* ===== ADMIN LIST SEARCH ===== */
.adsearch{width:100%;font-family:var(--body);font-size:13px;color:#fff;background:rgba(0,0,0,.4);border:1px solid var(--line2);
  padding:9px 12px;margin:10px 0 2px;outline:none;border-radius:6px}
.adsearch:focus{border-color:var(--cyan)}
.adsearch::placeholder{color:#93a0c2}

/* ===== STRUCTURED FIXTURES — stage banner + group sections ===== */
.fxstage{display:flex;align-items:center;gap:12px;margin:2px 0 16px;padding:11px 16px;border-radius:9px;
  background:linear-gradient(90deg,rgba(255,201,77,.16),rgba(255,201,77,.02));border:1px solid rgba(255,201,77,.3);box-shadow:inset 0 0 24px rgba(255,201,77,.05)}
.fxstage-s{font-family:var(--disp);font-size:19px;letter-spacing:.07em;color:var(--gold);text-transform:uppercase;line-height:1}
.fxstage-d{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.16em;color:#d3ddf2;text-transform:uppercase}
.fxstage-n{margin-left:auto;font-size:10.5px;letter-spacing:.12em;color:#aab6d6;background:rgba(0,0,0,.28);padding:3px 10px;border-radius:12px;white-space:nowrap}
/* players page — group section headers + view toggle */
.pl-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 2px 4px;flex-wrap:wrap}
.pl-ttl{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-size:13px;letter-spacing:.14em;color:#cdd8f2}
.pl-ttl svg{width:15px;height:15px;opacity:.8}
.pl-seg{display:inline-flex;border:1px solid rgba(255,255,255,.12);border-radius:9px;overflow:hidden}
.pl-seg button{background:transparent;border:0;color:var(--mute);font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.08em;padding:6px 13px;cursor:pointer}
.pl-seg button.on{background:linear-gradient(180deg,rgba(255,201,77,.22),rgba(255,201,77,.08));color:var(--gold)}
.psec-h{display:flex;align-items:center;gap:12px;margin:14px 2px 4px}
.psec-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--sec) 55%,transparent),transparent)}
.psec-t{font-family:var(--disp);font-size:15px;letter-spacing:.16em;color:var(--sec);text-transform:uppercase;white-space:nowrap;text-shadow:0 0 14px color-mix(in srgb,var(--sec) 40%,transparent)}
.psec-n{font-size:10px;color:#0a0e16;background:var(--sec);font-family:var(--disp);padding:1px 9px;border-radius:10px}
.fxsec{margin-bottom:22px}
.fxsec-h{display:flex;align-items:center;gap:12px;margin:0 2px 12px}
.fxsec-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,201,77,.42),transparent)}
.fxsec-t{font-family:var(--disp);font-size:15px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase;white-space:nowrap}
.fxsec-n{font-size:10px;color:#aab6d6;background:rgba(0,0,0,.3);padding:1px 9px;border-radius:10px}
.fxsec-h.ko .fxsec-t{color:var(--cyan)}
.fxsec-h.ko .fxsec-line{background:linear-gradient(90deg,transparent,rgba(46,139,255,.42),transparent)}

/* ===== ON-PAGE FIXTURE EDIT (admin) ===== */
.fxwrap{display:flex;flex-direction:column;min-width:0}
.fxwrap .fx{margin-bottom:0}
.fx-edit{position:absolute;top:6px;right:6px;z-index:5;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0;
  background:rgba(255,201,77,.16);border:1px solid rgba(255,201,77,.42);color:var(--gold);border-radius:7px;cursor:pointer;transition:.18s}
.fx-edit:hover{background:rgba(255,201,77,.3);box-shadow:0 0 14px rgba(255,201,77,.3)}
.fx-edit svg{width:15px;height:15px}
.fxedit{display:none;margin-top:6px;padding:12px 13px;border:1px solid rgba(255,201,77,.32);border-radius:9px;background:rgba(9,13,24,.78)}
.fxedit.open{display:block;animation:subfade .2s ease}
.fxe-row{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.fxe-row label{flex:0 0 50px;font-size:10px;letter-spacing:.13em;color:var(--mute);text-transform:uppercase}
.fxe-row input,.fxe-row select{background:rgba(0,0,0,.45);border:1px solid var(--line2);color:#fff;padding:8px 10px;border-radius:5px;font-family:var(--body);font-size:13px;outline:none}
.fxe-row input:focus,.fxe-row select:focus{border-color:var(--cyan)}
.fxe-row input[type=number]{width:52px;text-align:center}
.fxe-row input[type=date]{flex:1;min-width:0}
.fxe-row input[type=time]{width:108px}
.fxe-row select{flex:1;min-width:0}
.fxe-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:2px}
.fxe-actions button{font-family:var(--body);font-size:12px;letter-spacing:.05em;padding:8px 15px;border-radius:6px;border:1px solid var(--line2);background:rgba(255,255,255,.05);color:#cdd7f0;cursor:pointer}
.fxe-actions button.go{background:linear-gradient(135deg,var(--gold),#ffd86b);color:#0a0a0a;border-color:transparent;font-weight:700}

/* ===== COLOURFUL + READABLE FIXTURES (per-group colour, near-solid cards) ===== */
.fxsec{--sec:#19e0ff}
.fxsec-t{color:var(--sec)!important;text-shadow:0 0 16px rgba(255,255,255,.14)}
.fxsec-line{background:linear-gradient(90deg,transparent,var(--sec),transparent)!important;opacity:.5}
.fxsec-h.ko .fxsec-t{color:var(--sec)!important}
.fxsec-h.ko .fxsec-line{background:linear-gradient(90deg,transparent,var(--sec),transparent)!important}
.fxsec-n{color:#e7eefb;border:1px solid var(--sec);background:rgba(0,0,0,.32)}
/* card: near-solid (reads cleanly over the busy stadium bg) + a bold group-coloured edge */
.fxsec .fx{
  background:linear-gradient(100deg,rgba(16,23,42,.94),rgba(9,14,28,.96) 55%,rgba(9,14,28,.96))!important;
  border:1px solid rgba(255,255,255,.10)!important;border-left:4px solid var(--sec)!important}
.fxsec .fx::before{width:0!important}
.fxsec .fx::after{background:linear-gradient(180deg,var(--sec),transparent)!important;opacity:.55;width:4px!important}
.fxsec .fx:hover{border-color:rgba(255,255,255,.2)!important;border-left-color:var(--sec)!important;box-shadow:0 12px 32px rgba(0,0,0,.5)}
.fxsec .fx .nm{color:#fff}
.fxsec .fx .score{color:#fff}
.fxsec .fx .when{color:#dfe7f6!important}
.fxsec .fx .rnd{color:#aeb9d8!important}
.fxvenue{color:#c8d3ec!important}
.fxsec .fx .face{border-color:var(--sec)!important}
/* dim + darken the busy section background so overlaid text everywhere is easier to read
   (no !important — the more-specific .show.h2blur rule keeps H2H's faint blur intact) */
#sectionBg.show{opacity:.32;filter:brightness(.7) saturate(1.06)}
/* v23 — guide page */
.gd{font-size:14px;line-height:1.75;color:#cdd9e8}
.gd b{color:var(--gold)}
#guideView .panel{margin-bottom:14px}
/* v24 — paste row + checkbox */
.picrow{display:flex;gap:8px;align-items:center}
.picrow input[type=file]{flex:1;min-width:0}
.btn.sm{padding:7px 12px;font-size:11px;white-space:nowrap}
.chk{display:flex;gap:8px;align-items:center;font-size:12px;color:#cdd9e8;cursor:pointer}
.chk input{accent-color:var(--gold)}
/* v25 — universal soft-feather: photo figures melt into the page (no hard bottoms) */
.hfig.has,.cp-ava.img,#prizeStage .pod .ava.has,.tb-fig,.lfig,.pod-fig{
  -webkit-mask:radial-gradient(135% 128% at 50% 32%,#000 46%,rgba(0,0,0,.5) 72%,transparent 93%);
          mask:radial-gradient(135% 128% at 50% 32%,#000 46%,rgba(0,0,0,.5) 72%,transparent 93%);}
.pcard .av:not(.cut){-webkit-mask:radial-gradient(140% 130% at 50% 35%,#000 52%,rgba(0,0,0,.5) 76%,transparent 96%);
  mask:radial-gradient(140% 130% at 50% 35%,#000 52%,rgba(0,0,0,.5) 76%,transparent 96%)}
/* v26 — broadcast mode + pseudo-fullscreen + participants */
.bcast-btn{bottom:126px}
.bcast-btn.live{border-color:var(--magenta);color:var(--magenta);box-shadow:0 0 18px rgba(255,78,138,.5);animation:bcastPulse 1.6s ease-in-out infinite}
@keyframes bcastPulse{0%,100%{box-shadow:0 0 10px rgba(255,78,138,.35)}50%{box-shadow:0 0 26px rgba(255,78,138,.7)}}
.bcast-wipe{position:fixed;inset:0;z-index:400;pointer-events:none;
  background:linear-gradient(105deg,transparent 18%,rgba(255,201,77,.18) 38%,var(--gold) 50%,rgba(255,201,77,.18) 62%,transparent 82%)}
#bcastLower{position:fixed;left:34px;bottom:34px;z-index:380;display:flex;align-items:center;gap:14px;pointer-events:none}
#bcastLower .bl-bar{width:6px;height:52px;background:linear-gradient(180deg,var(--gold),var(--cyan));border-radius:3px;box-shadow:0 0 16px rgba(255,201,77,.6)}
#bcastLower .bl-tx{display:flex;flex-direction:column;background:rgba(15,12,8,.85);border:1px solid rgba(255,201,77,.35);padding:10px 18px;backdrop-filter:blur(8px)}
#bcastLower .bl-tx b{font-family:var(--disp);font-size:26px;letter-spacing:.06em;color:#fff;line-height:1}
#bcastLower .bl-tx span{font-size:11px;letter-spacing:.22em;color:var(--gold);margin-top:4px}
#bcastLower .bl-live{display:flex;align-items:center;gap:7px;background:var(--magenta);color:#fff;font-size:12px;font-weight:700;letter-spacing:.14em;padding:8px 13px;border-radius:4px}
#bcastLower .bl-live i{width:8px;height:8px;border-radius:50%;background:#fff;animation:bcastPulse 1.2s infinite}
body.broadcast .fs-btn,body.broadcast .mob-btn:not(.bcast-btn),body.broadcast #adminFab,body.broadcast #mute{opacity:0;pointer-events:none}
body.broadcast .vh-bg{animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:translateZ(0) scale(1.12)}to{transform:translateZ(0) scale(1.22) translateY(-2%)}}
body.pseudofull #appHeader{display:none}
body.pseudofull{padding-top:0}
body.pseudofull .view{padding-top:14px}
/* v27 — live goal splash */
#goalSplash{position:fixed;inset:0;z-index:420;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .6s}
#goalSplash.out{opacity:0}
#goalSplash .gs-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(255,201,77,.34),rgba(15,12,8,.88) 70%);animation:gsFlash .5s ease-out}
@keyframes gsFlash{from{background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.9),rgba(15,12,8,.95) 60%)}}
#goalSplash .gs-core{position:relative;text-align:center;animation:gsIn .7s cubic-bezier(.16,1,.3,1)}
@keyframes gsIn{from{transform:scale(.55);opacity:0}}
#goalSplash .gs-k{font-family:var(--disp);font-size:clamp(70px,12vw,170px);color:var(--gold);letter-spacing:.04em;line-height:1;
  text-shadow:0 0 50px rgba(255,201,77,.65),0 8px 0 rgba(0,0,0,.35);animation:gsPulse 1s ease-in-out infinite}
@keyframes gsPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
#goalSplash .gs-s{font-family:var(--disp);font-size:clamp(26px,4.5vw,56px);color:#fff;margin-top:10px}
#goalSplash .gs-s b{color:var(--cyan);font-size:1.25em;margin:0 8px}
#goalSplash .gs-s span{color:var(--mute)}

/* ===== OFFICIAL RULES ===== */
.rules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;padding:4px 0 8px}
.rule-card{padding:18px 18px 16px}
.rule-h{display:flex;align-items:center;gap:11px;margin-bottom:12px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.rule-h h3{font-family:var(--disp);font-weight:600;font-size:23px;letter-spacing:.02em;text-transform:uppercase;color:#fff;flex:1}
.rule-h .ic{color:var(--gold);font-size:21px}
.rule-n{display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;border-radius:7px;font-family:var(--disp);font-size:18px;font-weight:700;
  color:var(--ink);background:linear-gradient(150deg,var(--gold2),var(--gold));box-shadow:0 4px 14px rgba(255,200,58,.3)}
.rule-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.rule-list li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.45;color:#d6def2}
.rule-list li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:2px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--cyan),var(--magenta))}
.rule-foot{grid-column:1/-1;text-align:center;padding:18px;letter-spacing:.18em}
.rule-foot b{font-family:var(--disp);font-size:clamp(20px,3vw,30px);
  background:linear-gradient(90deg,var(--cyan),var(--gold),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ===== OFFICE RIVALRY ===== */
.dept-board,.hype-board{display:flex;flex-direction:column;gap:9px}
.dept-row,.hype-row{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.hype-row{cursor:pointer;transition:background .2s}.hype-row:hover{background:rgba(255,255,255,.07)}
.dept-row.lead{border-color:var(--gold);background:linear-gradient(90deg,rgba(255,200,58,.12),rgba(255,255,255,.03))}
.dr-rk,.hy-rk{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;font-family:var(--disp);font-size:15px;font-weight:700;color:var(--ink);background:linear-gradient(150deg,var(--gold2),var(--gold))}
.dept-row:not(.lead) .dr-rk{background:rgba(255,255,255,.1);color:#cdd9e8}
.dr-mid,.hy-mid{flex:1;min-width:0}
.dr-top,.hy-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px}
.dr-nm,.hy-nm{font-family:var(--disp);font-size:18px;font-weight:600;color:#fff;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-meta{font-size:11px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.hy-b{font-size:11px;color:var(--gold);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.hy-b .ic{font-size:12px}
.dr-bar,.hy-bar{height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.dr-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--gold));transition:width 1s cubic-bezier(.16,1,.3,1)}
.hy-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--gold),var(--magenta));transition:width 1s cubic-bezier(.16,1,.3,1)}
.dr-pts{flex:0 0 auto;font-family:var(--disp);font-size:24px;font-weight:700;color:var(--gold);line-height:1;text-align:right}
.dr-pts small{display:block;font-size:9px;color:var(--mute);letter-spacing:.12em}
.hype-row .face{flex:0 0 auto}

/* ===== POTT vote ===== */
.pott-vote{display:flex;gap:8px;margin:8px 0 10px;flex-wrap:wrap}
.pott-vote select{flex:1;min-width:160px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:#fff;border-radius:8px;padding:9px 11px;font-family:var(--body)}
.pott-vote .btn.go{background:linear-gradient(120deg,var(--gold2),var(--gold));color:var(--ink);border:none;font-family:var(--disp);font-size:15px;letter-spacing:.06em;padding:9px 16px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.pott-leader{font-size:13px;color:#d6def2;margin-bottom:10px}
.pott-bars{display:flex;flex-direction:column;gap:6px}
.pott-row{display:flex;align-items:center;gap:9px}
.pr-nm{flex:0 0 30%;font-size:13px;color:#cfd8ec;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-bar{flex:1;height:7px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.pr-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--gold),var(--magenta))}
.pr-n{flex:0 0 auto;font-family:var(--disp);font-size:15px;color:var(--gold)}

/* ===== knockout predictions ===== */
.predgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.predtie{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.02)}
.pt-round{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:6px 10px;border-bottom:1px solid var(--line)}
.pt-r{display:flex;justify-content:space-between;align-items:center;padding:9px 11px;cursor:pointer;font-family:var(--disp);font-size:16px;color:#e6ecfa;transition:.15s}
.pt-r:hover{background:rgba(255,200,58,.1)}
.pt-r b{font-family:var(--body);font-size:12px;color:var(--mute)}
.pt-r.mine{background:linear-gradient(90deg,rgba(255,200,58,.18),transparent);color:#fff}
.pt-r.mine b{color:var(--gold)}
.pt-r.correct{background:linear-gradient(90deg,rgba(21,192,106,.2),transparent)}
.pt-r.correct b{color:var(--green)}
.predlead{display:flex;flex-direction:column;gap:6px}
.pl-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.03)}
.pl-row.lead{background:linear-gradient(90deg,rgba(255,200,58,.14),rgba(255,255,255,.03));border:1px solid var(--gold)}
.plr-rk{width:22px;height:22px;display:grid;place-items:center;border-radius:6px;font-family:var(--disp);font-size:14px;color:var(--ink);background:linear-gradient(150deg,var(--gold2),var(--gold))}
.pl-row:not(.lead) .plr-rk{background:rgba(255,255,255,.1);color:#cdd9e8}
.plr-nm{flex:1;font-family:var(--disp);font-size:17px;color:#fff}
.plr-sc{font-family:var(--disp);font-size:20px;color:var(--gold)}
.predict-lock .empty{margin:0}

/* ===== match reactions ===== */
.mc-react{margin-top:14px;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.mr-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.mr-btns{display:flex;gap:8px;flex-wrap:wrap}
.mr-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid var(--line);cursor:pointer;color:#fff;transition:.15s}
.mr-btn svg{width:22px;height:22px}
.mr-btn span{font-family:var(--disp);font-size:15px}
.mr-btn:hover{transform:translateY(-2px);border-color:var(--gold)}
.mr-btn.mine{border-color:var(--gold);background:rgba(255,200,58,.14)}

/* ===== records & awards ===== */
.rec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.rec-card{position:relative;padding:13px 14px;border-radius:10px;background:linear-gradient(160deg,rgba(34,29,18,.7),rgba(15,12,8,.85));border:1px solid rgba(255,200,58,.18)}
.rec-ic{position:absolute;top:11px;right:12px;color:var(--gold);font-size:18px;opacity:.8}
.rec-l{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}
.rec-v{font-family:var(--disp);font-size:20px;color:#fff;line-height:1.05}
.rec-s{font-size:11.5px;color:var(--gold);margin-top:3px}

/* ===== v15 reworks ===== */
.fxvenue{font-size:10px;letter-spacing:.03em;color:var(--gold);margin-top:3px;display:flex;align-items:center;justify-content:center;gap:3px}
.fxvenue svg{width:11px;height:11px}
/* groups: honeycomb + table side by side (kills the empty space) */
.groups-2col{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:20px;align-items:start}
.groups-2col .honeycomb{margin:0}
.groups-2col .grp-detail{margin:0;max-width:none}
@media(max-width:820px){.groups-2col{grid-template-columns:1fr}}
/* ===== H2H — edgeless cinematic clash ===== */
.h2h-stage{display:block!important;grid-template-columns:none!important;min-height:auto;margin-bottom:18px}
/* full-bleed so the colour reaches the screen edges — no floating rectangle, no gutters */
.h2h-arena{position:relative;width:100vw;margin-left:calc(50% - 50vw);min-height:clamp(420px,48vw,580px);overflow:hidden;isolation:isolate}
body{overflow-x:hidden}
/* blue (left) and red (right) overlap in the middle → they blend, no centre line. Only top/bottom feather. */
.h2h-glow{position:absolute;inset:0;pointer-events:none;z-index:0;-webkit-mask:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 12%,#000 32%,#000 68%,rgba(0,0,0,.55) 88%,transparent 100%);mask:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 12%,#000 32%,#000 68%,rgba(0,0,0,.55) 88%,transparent 100%)}
/* ONE continuous gradient blue→(transparent)→red — a single gradient cannot show a hard line */
.h2h-glow.a{background:linear-gradient(100deg,rgba(30,120,255,.62) 0%,rgba(30,120,255,.34) 30%,rgba(30,120,255,0) 50%,rgba(225,30,55,0) 50%,rgba(225,30,55,.34) 70%,rgba(225,30,55,.62) 100%)}
.h2h-glow.b{display:none}
/* smoky violet seam — heavy fog over the centre so blue↔red read as one shapeless haze (no line) */
.h2h-arena .cMid{left:50%;top:0;width:64%;height:100%;transform:translateX(-50%);filter:url(#fogMix);opacity:.62;-webkit-mask:radial-gradient(58% 94% at 50% 52%,#000 16%,transparent 90%);mask:radial-gradient(58% 94% at 50% 52%,#000 16%,transparent 90%);animation:h2driftMid 22s ease-in-out infinite alternate}
@keyframes h2driftMid{from{transform:translateX(-50%) translateY(2%) scale(1)}to{transform:translateX(-50%) translateY(-3%) scale(1.08)}}
/* drifting fog clouds (SVG turbulence) — feet/name band + corner accents only */
.h2h-arena .cloudbox{position:absolute;pointer-events:none;mix-blend-mode:screen;z-index:1}
.h2h-arena .bL{left:-8%;bottom:-10%;width:62%;height:54%;filter:url(#fogBlue);opacity:.6;-webkit-mask:radial-gradient(95% 100% at 45% 100%,#000 38%,transparent 92%);mask:radial-gradient(95% 100% at 45% 100%,#000 38%,transparent 92%);animation:h2driftA 30s ease-in-out infinite alternate}
.h2h-arena .bR{right:-8%;bottom:-10%;width:62%;height:54%;filter:url(#fogRed);opacity:.6;-webkit-mask:radial-gradient(95% 100% at 55% 100%,#000 38%,transparent 92%);mask:radial-gradient(95% 100% at 55% 100%,#000 38%,transparent 92%);animation:h2driftB 34s ease-in-out infinite alternate}
.h2h-arena .cTL{left:-12%;top:-14%;width:42%;height:44%;filter:url(#fogBlue);opacity:.34;-webkit-mask:radial-gradient(circle at top left,#000,transparent 72%);mask:radial-gradient(circle at top left,#000,transparent 72%);animation:h2driftC 46s ease-in-out infinite alternate}
.h2h-arena .cTR{right:-12%;top:-14%;width:42%;height:44%;filter:url(#fogRed);opacity:.34;-webkit-mask:radial-gradient(circle at top right,#000,transparent 72%);mask:radial-gradient(circle at top right,#000,transparent 72%);animation:h2driftD 42s ease-in-out infinite alternate}
@keyframes h2driftA{from{transform:translate(0,0) scale(1)}to{transform:translate(7%,-5%) scale(1.12)}}
@keyframes h2driftB{from{transform:translate(0,0) scale(1)}to{transform:translate(-7%,-5%) scale(1.12)}}
@keyframes h2driftC{from{transform:translate(0,0)}to{transform:translate(6%,4%)}}
@keyframes h2driftD{from{transform:translate(0,0)}to{transform:translate(-6%,4%)}}
/* lightning canvas */
.h2h-bolts{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
/* figures — full head-to-toe, per-player scale via inner transform */
.h2h-figwrap{position:absolute;bottom:6%;z-index:2;width:min(40%,360px);height:84%;cursor:pointer;transform-origin:bottom center}
.h2h-figwrap.a{left:5%;animation:h2floatA 6s ease-in-out infinite}
.h2h-figwrap.b{right:5%;animation:h2floatB 6.6s ease-in-out infinite}
.h2h-figwrap:hover{filter:brightness(1.08)}
.h2h-fig{width:100%;height:100%;transform-origin:bottom center;background-size:contain;background-repeat:no-repeat;background-position:bottom center}
.h2h-figwrap.a .h2h-fig{filter:drop-shadow(0 0 42px rgba(46,139,255,.7)) drop-shadow(0 8px 18px rgba(0,0,0,.6))}
.h2h-figwrap.b .h2h-fig{filter:drop-shadow(0 0 42px rgba(229,40,63,.7)) drop-shadow(0 8px 18px rgba(0,0,0,.6))}
.h2h-fig:not(.has){display:flex;align-items:flex-end;justify-content:center}
.h2h-fig:not(.has) span{font-family:var(--disp);font-weight:700;font-size:clamp(120px,18vw,240px);color:rgba(255,255,255,.9);text-shadow:0 0 50px currentColor}
@keyframes h2floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes h2floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
/* diagonal electric VS */
/* bespoke VS HUD emblem — centred in the clash */
.h2h-vs{position:absolute;top:33%;left:50%;z-index:6;transform:translate(-50%,-50%);width:clamp(220px,30vw,400px);animation:h2vsfloat 5s ease-in-out infinite;filter:drop-shadow(0 10px 26px rgba(0,0,0,.6))}
.vsEmblem{width:100%;height:auto;display:block}
@keyframes h2vsfloat{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.035)}}
/* floating borderless stats over the seam */
.h2h-stats{position:absolute;top:54%;left:50%;transform:translateX(-50%);z-index:6;width:min(300px,52%);display:flex;flex-direction:column;gap:5px;background:none;border:none}
.h2s-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:0;border:none;background:none}
.h2s-a{text-align:right;font-family:var(--disp);font-weight:700;font-size:clamp(13px,1.7vw,18px);color:#9fc3ff}
.h2s-b{text-align:left;font-family:var(--disp);font-weight:700;font-size:clamp(13px,1.7vw,18px);color:#ff9fb0}
.h2s-a.win{color:#6fb8ff;text-shadow:0 0 16px rgba(46,139,255,.9)}
.h2s-b.win{color:#ff6a82;text-shadow:0 0 16px rgba(229,40,63,.9)}
.h2s-l{font-size:8px;letter-spacing:.12em;color:rgba(255,255,255,.5);text-transform:uppercase;white-space:nowrap;text-align:center}
/* names at the base */
.h2h-name{position:absolute;bottom:3%;z-index:5;text-shadow:0 0 24px rgba(0,0,0,.95)}
.h2h-name.a{left:3%}.h2h-name.b{right:3%;text-align:right}
.h2h-name .nm{font-family:'Black Ops One',var(--disp);font-size:clamp(28px,4.4vw,52px);color:#fff;line-height:.95}
.h2h-name .sub{font-size:clamp(11px,1.4vw,15px);letter-spacing:.12em;margin-top:2px}
.h2h-name.a .sub{color:#86b8ff}.h2h-name.b .sub{color:#ff8fa1}
@media(max-width:820px){
  .h2h-arena{min-height:clamp(460px,118vw,620px)}
  .h2h-figwrap{width:42%;height:58%;bottom:20%}
  .h2h-stats{top:auto;bottom:24%;width:80%}
  .h2h-name .nm{font-size:clamp(20px,7vw,32px)}
}
/* H2H background image — keep it, but blur it harder so it's pure ambiance */
#sectionBg.show.h2blur{opacity:.22;filter:blur(24px) brightness(.45) saturate(1.1)}

/* ===== sub-tabs (FanZone / Rivalry / Prizes) + Fixtures day-tabs ===== */
.subtabs,.fxday-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.fxday-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px}
.subtab,.fxday-tab{font-family:var(--disp);font-size:14px;letter-spacing:.04em;color:var(--mute);background:rgba(0,0,0,.35);border:1px solid var(--line2);padding:9px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border-radius:0;clip-path:var(--chamfer-sm);transition:color .18s,background .18s,border-color .18s}
.subtab .ic,.fxday-tab .ic{display:inline-flex}.subtab .ic svg,.fxday-tab .ic svg{width:16px;height:16px}
.subtab:hover,.fxday-tab:hover{color:#fff;border-color:var(--gold)}
.subtab.active,.fxday-tab.active{color:#0a0a0a;background:linear-gradient(135deg,var(--gold),#ffd86b);border-color:var(--gold);font-weight:700}
.fxday-tab.hasnext::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.fxday-n{font-size:11px;opacity:.7;background:rgba(0,0,0,.22);padding:1px 6px;border-radius:8px}
.fxday-tab.active .fxday-n{background:rgba(0,0,0,.16)}
/* tournament ROUND tabs — the top-level phase switch, bolder than the day tabs */
.fxrnd-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.fxrnd-tab{font-family:var(--disp);font-size:15px;letter-spacing:.1em;color:#cdd8f2;background:rgba(255,255,255,.04);border:1px solid var(--line2);border-bottom:2px solid transparent;padding:10px 20px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;clip-path:var(--chamfer-sm);transition:.18s}
.fxrnd-tab:hover{color:#fff;border-color:var(--gold)}
.fxrnd-tab.active{color:#0a0a0a;background:linear-gradient(135deg,var(--gold),#ffd86b);border-color:var(--gold);box-shadow:0 6px 22px -8px rgba(255,201,77,.6)}
.fxrnd-live{font-family:'Oswald',sans-serif;font-size:9px;letter-spacing:.12em;background:var(--green);color:#04210f;padding:2px 7px;border-radius:9px;animation:rndPulse 1.6s ease-in-out infinite}
.fxrnd-tab.active .fxrnd-live{background:#04210f;color:#7CFF6B}
@keyframes rndPulse{0%,100%{opacity:1}50%{opacity:.55}}
body.mobile .fxrnd-tab{font-size:13px;padding:8px 14px}
.subpanel{display:none}.subpanel.active{display:block;animation:subfade .3s ease}
@keyframes subfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===== STORY-SCROLL / BROADCAST (office-TV) ===== */
#story{position:fixed;inset:0;z-index:9000;background:radial-gradient(120% 100% at 50% 0%,#0a1022,#05060c 68%,#020308);overflow:hidden;display:flex;flex-direction:column;color:#fff;font-family:var(--body)}
body.broadcast #appHeader,body.broadcast #overview,body.broadcast #hint{display:none!important}
.st-stage{position:relative;flex:1;overflow:hidden;z-index:1}
/* drifting Trionda aurora behind every scene */
.st-aura{position:absolute;inset:-12%;z-index:0;pointer-events:none;filter:blur(64px);opacity:.5;
  background:radial-gradient(28% 30% at 20% 28%,rgba(255,201,77,.55),transparent 60%),radial-gradient(26% 28% at 82% 24%,rgba(46,139,255,.55),transparent 60%),radial-gradient(32% 34% at 62% 82%,rgba(229,40,63,.5),transparent 60%),radial-gradient(24% 26% at 28% 78%,rgba(21,192,106,.45),transparent 60%);
  animation:stAura 20s ease-in-out infinite alternate}
@keyframes stAura{from{transform:translate(0,0) scale(1)}to{transform:translate(3%,-3%) scale(1.18)}}
/* floating ember particle canvas (sits above scenes) */
#stFx{position:absolute;inset:0;z-index:4;pointer-events:none}
/* let the aurora bleed through the scene background */
.st-bg{opacity:.36!important}
/* per-scene background image with a slow Ken Burns drift (movement without strain) */
.st-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.42;filter:brightness(.5) saturate(1.15) contrast(1.05);animation:kenburns 20s ease-in-out infinite alternate}
.st-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 110% at 50% 45%,transparent 30%,rgba(3,4,10,.78) 100%)}
@keyframes kenburns{0%{transform:scale(1.08) translate(0,0)}100%{transform:scale(1.22) translate(-2.5%,-2%)}}
/* sweeping sheen across the whole stage */
.st-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.045) 50%,transparent 68%);background-size:300% 100%;animation:stSheen 9s linear infinite}
@keyframes stSheen{from{background-position:200% 0}to{background-position:-120% 0}}
.st-card{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(1.04);transition:opacity .7s ease,transform 1.1s ease}
.st-card.in{opacity:1;transform:scale(1)}
/* staggered reveal of scene content */
.st-card.in .st-kick{animation:stUp .55s .05s both}
.st-card.in .st-logo,.st-card.in .st-head,.st-card.in .sc-score,.st-card.in .sc-big,.st-card.in .sc-recmain,.st-card.in .stc-nm{animation:stUp .7s .16s both}
.st-card.in .st-cd-wrap,.st-card.in .stc-cd,.st-card.in .sc-rows,.st-card.in .sc-grid,.st-card.in .sc-list,.st-card.in .stc-meta,.st-card.in .sc-goals,.st-card.in .st-tag{animation:stUp .7s .3s both}
@keyframes stUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
/* broadcast — gold + Trionda identity, depth & pop (not flat) */
#story{border-top:3px solid transparent;border-image:linear-gradient(90deg,var(--blue),var(--gold),var(--green),var(--magenta)) 1}
.st-foot{border-top:2px solid transparent;border-image:linear-gradient(90deg,var(--blue),var(--gold),var(--magenta)) 1;background:linear-gradient(0deg,rgba(0,0,0,.62),transparent)}
.st-kick{position:relative;display:inline-block;padding-bottom:9px}
.st-kick::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:64px;height:3px;background:linear-gradient(90deg,var(--blue),var(--gold),var(--magenta))}
.st-head,.st-logo span,.sc-big{background:linear-gradient(180deg,#fff6cf,#ffd24a 55%,#e29a14);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.st-brand{background:linear-gradient(90deg,#ffd24a,#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:1}
.sc-pts,.sc-rk,.sc-goals b,.sc-gp,.stc-cd,.st-cd-wrap b{color:var(--gold)}
.sc-row{border-left:3px solid var(--gold);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.sc-row:nth-child(3n+1){border-left-color:var(--blue)}.sc-row:nth-child(3n+2){border-left-color:var(--green)}.sc-row:nth-child(3n){border-left-color:var(--magenta)}
.sc-row.lead{border-left-color:var(--gold)!important;box-shadow:0 6px 26px rgba(255,200,58,.25)}
.sc-gcell{border-top:3px solid var(--gold);box-shadow:0 8px 22px rgba(0,0,0,.4)}
.sc-gcell:nth-child(4n+1){border-top-color:var(--blue)}.sc-gcell:nth-child(4n+2){border-top-color:var(--green)}.sc-gcell:nth-child(4n+3){border-top-color:var(--magenta)}
.st-card.in .sc-pts,.st-card.in .sc-goals b,.st-card.in .stc-cd,.st-card.in .st-cd-wrap b,.st-card.in .sc-recmain{animation:stPop .75s .34s both}
@keyframes stPop{0%{opacity:0;transform:scale(.5)}62%{opacity:1;transform:scale(1.14)}100%{transform:scale(1)}}
.st-card.in .st-fig{animation:stRise .8s .18s both}
@keyframes stRise{from{opacity:0;transform:translateY(42px) scale(.96)}to{opacity:1;transform:none}}
.st-card.in .stc-side.a{animation:slideL .85s both}.st-card.in .stc-side.b{animation:slideR .85s both}
@keyframes slideL{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}
@keyframes slideR{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
/* gold corner brackets framing the broadcast */
.st-stage::before{content:"";position:absolute;inset:18px;z-index:6;pointer-events:none;
  background:
    linear-gradient(var(--gold),var(--gold)) left top,linear-gradient(var(--gold),var(--gold)) left top,
    linear-gradient(var(--gold),var(--gold)) right top,linear-gradient(var(--gold),var(--gold)) right top,
    linear-gradient(var(--gold),var(--gold)) left bottom,linear-gradient(var(--gold),var(--gold)) left bottom,
    linear-gradient(var(--gold),var(--gold)) right bottom,linear-gradient(var(--gold),var(--gold)) right bottom;
  background-repeat:no-repeat;
  background-size:30px 2px,2px 30px,30px 2px,2px 30px,30px 2px,2px 30px,30px 2px,2px 30px;
  opacity:.5}

/* ===== STANDINGS — density pass + Trionda colours + live hype meter ===== */
.stwrap{padding:6px 8px;position:relative}
.stwrap::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--gold) 38%,var(--green) 66%,var(--magenta))}
.stbl{border-spacing:0 4px;font-size:13px}
.stbl th{font-size:9px;padding:5px 5px}
.stbl td{padding:7px 5px}
.stbl .face{width:28px;height:28px;font-size:12px}
.stbl .nm{font-size:15px}
.stbl .pts{font-size:18px}
.rankn{font-size:17px}
.stbl .pname{gap:8px}
.gdcell.pos{color:var(--green)}.gdcell.neg{color:var(--red)}
.ptbar{background:linear-gradient(90deg,var(--gold),var(--green))}
.hypem{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:54px}
.hypem i{display:block;align-self:stretch;height:5px;width:0;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--gold) 50%,var(--magenta));transition:width .9s cubic-bezier(.16,1,.3,1);box-shadow:0 0 8px rgba(255,201,77,.4)}
.hypem b{font-family:var(--disp);font-size:13px;color:var(--gold)}
@media(max-width:760px){.stbl td:nth-child(5),.stbl th:nth-child(5),.stbl td:nth-child(6),.stbl th:nth-child(6){display:none}}

/* ===== nav overflow "More" dropdown (keeps the bar uncluttered) ===== */
#nav{position:relative}
.nav-more{position:absolute;top:calc(100% + 6px);right:8px;z-index:60;display:none;flex-direction:column;min-width:194px;gap:2px;background:rgba(10,12,20,.97);border:1px solid var(--line2);border-radius:12px;padding:8px;box-shadow:0 22px 54px rgba(0,0,0,.65)}
.nav-more.open{display:flex;animation:subfade .2s ease}
.nav-more .navbtn{width:100%;justify-content:flex-start;border-radius:8px}
.moretoggle:hover{color:var(--gold)}
/* install / add-to-home-screen button (gold accent) */
.install-btn{border-color:var(--gold)!important;color:var(--gold)!important}
.install-btn:hover{background:rgba(255,201,77,.14)!important}
/* ===== mobile compact — shrink oversized visuals on phones ===== */
@media(max-width:600px){
  .h2h-arena{min-height:clamp(380px,108vw,520px)}
  .h2h-vs{width:clamp(140px,44vw,230px);top:30%}
  .h2h-figwrap{width:44%;height:52%;bottom:22%}
  .h2h-stats{width:84%;bottom:20%;gap:4px}
  .h2h-name .nm{font-size:clamp(18px,6.4vw,28px)}
  .h2h-name .sub{font-size:10px;letter-spacing:.08em}
  /* broadcast */
  .st-logo{font-size:clamp(34px,12vw,60px)}
  .st-head{font-size:clamp(20px,6vw,32px)}
  .sc-big,.sc-recmain,.sc-score{font-size:clamp(22px,7vw,38px)}
  .st-fig{width:34vw;height:30vh}
  .st-clash{min-height:48vh}
  .stc-cd{font-size:clamp(24px,7vw,40px)}
  .st-foot{gap:8px;padding:10px 12px}
  .st-brand{display:none}
  .st-ctrl button,.st-exit{width:34px;height:34px;font-size:14px}
}
/* narrow screens: single-line horizontal scroll instead of a "More" menu */
@media(max-width:859px){
  #nav{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #nav::-webkit-scrollbar{display:none}
  #nav .navbtn{flex:0 0 auto}
  #brand{flex:0 0 auto}
  .moretoggle{display:none!important}
  #navMore{display:none!important}
}
.st-center{text-align:center;max-width:min(1100px,92%);padding:20px}
.st-pane{width:min(1000px,92%)}
.st-kick{font-family:var(--disp);letter-spacing:.34em;font-size:clamp(13px,1.6vw,18px);color:var(--gold);margin-bottom:14px}
.st-head{font-family:'Black Ops One',var(--disp);font-size:clamp(26px,4vw,52px);margin-bottom:22px}
.st-logo{font-family:'Black Ops One',var(--disp);font-size:clamp(46px,9vw,120px);line-height:.92}.st-logo span{color:var(--gold)}
.st-tag{font-family:var(--disp);letter-spacing:.26em;color:#9fb0cc;font-size:clamp(13px,1.7vw,20px);margin-top:10px}
.st-cd-wrap{margin-top:34px}
.st-cd-wrap span{display:block;font-size:12px;letter-spacing:.3em;color:#8aa}
.st-cd-wrap b{display:block;font-family:'Black Ops One',var(--disp);font-size:clamp(40px,7vw,90px);color:#fff;text-shadow:0 0 40px rgba(255,200,58,.4)}
.st-cd-wrap em{font-style:normal;color:#cdd}
.st-foot{display:flex;align-items:center;gap:16px;padding:14px 22px;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent);position:relative}
.st-prog{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.1)}
.st-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#ffd86b)}
.st-ctrl{display:flex;gap:8px}
.st-ctrl button,.st-exit{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:rgba(0,0,0,.4);color:#fff;font-size:16px;cursor:pointer}
.st-ctrl button:hover{border-color:var(--gold);color:var(--gold)}
.st-brand{font-family:'Black Ops One',var(--disp);letter-spacing:.1em;opacity:.7;margin-left:6px}
.st-live{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:var(--disp);letter-spacing:.2em;color:#ff5a6a}
.st-live i{width:9px;height:9px;border-radius:50%;background:#ff3b4d;box-shadow:0 0 10px #ff3b4d;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.3}}
.st-exit:hover{border-color:#ff5a6a;color:#ff5a6a}
.st-fig{width:clamp(140px,18vw,260px);height:clamp(200px,34vh,440px);background-size:contain;background-repeat:no-repeat;background-position:bottom center;display:flex;align-items:flex-end;justify-content:center}
.st-fig:not(.has) span{font-family:var(--disp);font-weight:700;font-size:clamp(80px,12vw,180px);color:rgba(255,255,255,.85)}
.st-clash{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;width:min(1200px,94%);min-height:62vh}
.st-clash.single{justify-content:center;align-items:center}
.stc-side{display:flex;flex-direction:column;align-items:center;text-align:center;z-index:2}
.stc-side.a .st-fig{filter:drop-shadow(0 0 40px rgba(46,139,255,.7))}
.stc-side.b .st-fig{filter:drop-shadow(0 0 40px rgba(229,40,63,.7))}
.stc-nm{font-family:'Black Ops One',var(--disp);font-size:clamp(24px,3.4vw,46px);margin-top:8px}
.stc-tag{font-size:12px;letter-spacing:.16em;color:#9fb0cc}
.stc-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3;padding-bottom:5vh}
.stc-kick{font-family:var(--disp);letter-spacing:.3em;color:var(--gold);font-size:14px;margin-bottom:8px}
.st-clash .h2h-vs{position:static;transform:none;width:clamp(170px,20vw,300px);margin:0 auto 8px;animation:none;filter:drop-shadow(0 8px 18px rgba(0,0,0,.6))}
.stc-cd{font-family:'Black Ops One',var(--disp);font-size:clamp(30px,5vw,64px);text-shadow:0 0 30px rgba(255,200,58,.4)}
.stc-meta{color:#cdd;letter-spacing:.1em;margin-top:8px;font-size:clamp(13px,1.6vw,18px)}
.sc-big{font-family:'Black Ops One',var(--disp);font-size:clamp(34px,5vw,68px)}
.sc-goals{font-family:var(--disp);font-size:clamp(20px,2.6vw,32px);color:var(--gold);margin-top:8px}.sc-goals b{font-size:1.5em}
.sc-list{margin-top:16px;display:flex;flex-direction:column;gap:4px;color:#9fb0cc;font-size:14px}
.sc-score{display:flex;align-items:center;justify-content:center;gap:24px;font-family:'Black Ops One',var(--disp);font-size:clamp(28px,4vw,56px);flex-wrap:wrap}
.sc-score b{font-size:1.3em;color:var(--gold)}.sc-score .win{color:#fff}.sc-score span{color:#9fb0cc}
.sc-rows{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.sc-row{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:16px;padding:10px 18px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px}
.sc-row.lead{border-color:var(--gold);background:rgba(255,200,58,.08)}
.sc-row .st-fig{width:46px;height:46px}.sc-row .st-fig:not(.has) span{font-size:18px}
.sc-rk{font-family:'Black Ops One',var(--disp);font-size:22px;width:30px;color:var(--gold)}
.sc-nm{font-family:var(--disp);font-size:clamp(16px,2vw,24px);text-align:left}
.sc-gd{color:#9fb0cc}.sc-pts{font-family:'Black Ops One',var(--disp);font-size:24px}.sc-pts small{font-size:11px;color:#9fb0cc;margin-left:4px}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:12px}
.sc-gcell{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px}
.sc-gcell .st-fig{width:64px;height:64px}.sc-gcell .st-fig:not(.has) span{font-size:24px}
.sc-g{font-family:var(--disp);letter-spacing:.2em;color:var(--gold);font-size:12px}
.sc-gn{font-family:var(--disp);font-size:16px}.sc-gp{color:#9fb0cc;font-size:13px}
.sc-recmain{font-family:'Black Ops One',var(--disp);font-size:clamp(28px,4.4vw,60px);margin:6px 0}
@media(max-width:680px){.st-clash{gap:8px}.st-fig{width:30vw;height:32vh}.sc-row{grid-template-columns:auto 1fr auto;gap:10px}.sc-row .st-fig{display:none}}

/* ===== fix: reaction glyphs were collapsing to ~4px in the flex column ===== */
.cheerbtn svg,.mr-btn svg{flex:0 0 auto}
.cheerbtn svg{width:34px!important;height:34px!important}
/* ===== click feedback on buttons (press = quick scale + brighten) ===== */
.cheerbtn,.mr-btn,.navbtn,.btn,button.go,.backcard,.hexcell,.pt-r,.admTab,.draw-btn,.ro-b{transition:transform .12s ease,filter .12s ease,background .18s ease,border-color .18s ease}
.cheerbtn:active,.mr-btn:active,.navbtn:active,.btn:active,button.go:active,.backcard:active,.hexcell:active,.pt-r:active,.admTab:active,.draw-btn:active{transform:scale(.93);filter:brightness(1.12)}
@keyframes btnpop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.cheerbtn.pop,.mr-btn.pop{animation:btnpop .35s ease}
/* prizes: condense the podium so it doesn't dominate */
.prize-stage .lfig{width:78px;height:98px}
.prize-stage .pod-1 .lfig{width:94px;height:118px}
.prize-stage .podium{transform:scale(.9);transform-origin:center top}
.chasers{margin-top:0}
/* FanZone: explicit 2-col — split/most-backed/POTT on the left, Fan Wall on the right */
.fz-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:stretch;margin-bottom:14px}
.fz-left,.fz-right{display:flex;flex-direction:column;gap:14px;min-width:0}
.fz-right .fz-wall{display:flex;flex-direction:column;flex:1}
.fz-wall .fanwall-list{max-height:none;flex:1;overflow-y:auto}
@media(max-width:820px){.fz-main{grid-template-columns:1fr}}
.fanwall-list{max-height:320px}
/* pitch players: hint the compositor so low-end laptops still animate them */
.pp-player,.pitch-ball,.pl-fig{will-change:transform}
/* back-a-player cards a touch larger so names read clearly */
.backgrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.backcard .bc-nm{font-size:17px}

/* ===== always-visible ENTER button (reliable entry on mobile + desktop) ===== */
#enterBtn{position:fixed;left:50%;bottom:clamp(120px,18vh,200px);transform:translateX(-50%);z-index:21;
  background:linear-gradient(120deg,var(--gold2),var(--gold));color:#1a1206;border:none;
  font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.08em;padding:13px 30px;border-radius:11px;cursor:pointer;
  box-shadow:0 12px 32px rgba(255,200,58,.42);display:inline-flex;align-items:center;gap:9px;animation:enterPulse 2.2s ease-in-out infinite}
#enterBtn .ic{font-size:20px}
@keyframes enterPulse{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
body.docked #enterBtn{display:none}

/* ===== champion crowning ===== */
#crown{position:fixed;inset:0;z-index:700;display:none;overflow:hidden;cursor:pointer;background:radial-gradient(120% 90% at 50% 40%,#1c1508,#0a0806 72%)}
#crown.show{display:flex;align-items:center;justify-content:center;animation:wkIn .4s ease}
#crown.out{animation:wkOut .5s ease forwards}
.cr-rays{position:absolute;left:50%;top:42%;width:200vmax;height:200vmax;transform:translate(-50%,-50%);pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 8deg,rgba(255,200,58,.12) 9deg 11deg,transparent 12deg 28deg,rgba(255,200,58,.06) 29deg 31deg,transparent 32deg);
  animation:wkSpin 26s linear infinite}
.cr-core{position:relative;text-align:center;padding:0 16px;animation:crIn .8s cubic-bezier(.16,1,.3,1)}
@keyframes crIn{from{opacity:0;transform:scale(.86)}}
.cr-trophy{color:var(--gold);filter:drop-shadow(0 0 30px rgba(255,200,58,.7))}
.cr-trophy svg{width:62px;height:62px}
.cr-kicker{font-family:var(--body);font-weight:500;letter-spacing:.38em;font-size:13px;color:var(--gold);margin:6px 0}
.cr-fig{width:min(38vh,280px);height:min(50vh,380px);margin:6px auto;background-size:contain;background-repeat:no-repeat;background-position:bottom center;filter:drop-shadow(0 0 40px rgba(255,200,58,.5))}
.cr-fig:not(.has){display:flex;align-items:flex-end;justify-content:center}
.cr-fig:not(.has) span{font-family:var(--disp);font-weight:700;font-size:clamp(110px,22vh,200px);color:rgba(255,255,255,.95)}
.cr-name{font-family:var(--disp);font-weight:700;font-size:clamp(50px,11vw,150px);line-height:.9;color:#fff;text-transform:uppercase;text-shadow:0 0 44px rgba(255,200,58,.6)}
.cr-sub{font-family:var(--disp);font-size:clamp(16px,2.4vw,26px);color:var(--gold);letter-spacing:.06em;margin-top:6px}
.cr-skip{position:absolute;right:18px;bottom:16px;font-size:11px;letter-spacing:.2em;color:var(--mute);text-transform:uppercase}

/* ===== privacy notice ===== */
#privacy{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:90;max-width:min(640px,94vw);display:none;
  align-items:center;gap:14px;background:rgba(16,13,8,.97);border:1px solid rgba(255,200,58,.3);border-radius:12px;padding:12px 16px;box-shadow:0 14px 40px rgba(0,0,0,.55)}
#privacy.show{display:flex}
#privacy span{font-size:12.5px;line-height:1.5;color:#d6cdb8}
#privacy a{color:var(--gold);text-decoration:underline;cursor:pointer}
#privacy button{flex:0 0 auto;background:linear-gradient(120deg,var(--gold2),var(--gold));color:#1a1206;border:none;border-radius:8px;padding:8px 16px;font-family:var(--disp);font-size:14px;letter-spacing:.06em;cursor:pointer}

/* ===== GROUPS — honeycomb + draw reveal ===== */
.grp-bar{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:20px;flex-wrap:wrap}
.draw-btn{background:linear-gradient(120deg,var(--gold2),var(--gold));color:var(--ink);border:none;font-family:var(--disp);
  font-size:18px;letter-spacing:.08em;padding:11px 24px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 8px 26px rgba(255,200,58,.32);transition:filter .2s,transform .2s}
.draw-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.draw-btn .ic{font-size:19px}
.grp-hint{color:var(--mute);font-size:12px;letter-spacing:.04em}
.honeycomb{display:flex;flex-direction:column;align-items:center;gap:10px}
.hexrow{display:flex;gap:14px}
.fxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(338px,1fr));gap:8px;margin-bottom:16px}
.hexcell{position:relative;width:128px;height:112px;border:none;background:transparent;padding:0;cursor:pointer}
.hexcell::before{content:"";position:absolute;inset:0;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  background:linear-gradient(160deg,var(--line2),rgba(255,255,255,.04));transition:background .3s}
.hexcell:hover::before{background:linear-gradient(160deg,var(--gold),var(--magenta))}
.hexcell.sel::before{background:linear-gradient(160deg,var(--gold),var(--magenta),var(--purple))}
.hx-in{position:absolute;inset:3px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  background:linear-gradient(160deg,rgba(26,24,28,.95),rgba(13,12,16,.98));display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;text-align:center;padding:0 18px}
.hexcell.sel .hx-in{background:linear-gradient(160deg,rgba(42,35,18,.94),rgba(18,15,10,.98))}
.hx-grp{font-family:var(--disp);font-size:25px;font-weight:700;color:#fff;letter-spacing:.04em;line-height:1}
.hexcell.sel .hx-grp{color:var(--gold)}
.hx-top{font-size:12px;color:var(--gold);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-n{font-size:10px;color:var(--mute);letter-spacing:.06em}
.hexcell.drawn .hx-in{animation:hexpop .55s cubic-bezier(.16,1,.3,1)}
@keyframes hexpop{0%{transform:scale(.55);opacity:.2}60%{transform:scale(1.09)}100%{transform:scale(1)}}
.draw-ball{position:absolute;left:50%;top:-46px;width:48px;height:48px;transform:translateX(-50%);pointer-events:none;z-index:6;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.55));animation:balldrop .9s cubic-bezier(.5,.05,.7,1) forwards}
@keyframes balldrop{0%{top:-46px;opacity:0;transform:translateX(-50%) rotate(0)}25%{opacity:1}100%{top:42px;opacity:0;transform:translateX(-50%) rotate(240deg)}}
.grp-detail{margin:22px auto 0;max-width:560px}
@media(max-width:640px){.hexcell{width:118px;height:104px}.hx-grp{font-size:20px}.hexrow{gap:9px}}

/* ===== THE PITCH — stadium hub ===== */
.pitch-bar{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 auto 16px;max-width:960px}
.pitch-bar .pb-cell{position:relative;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 16px;flex:1 1 210px;min-width:210px;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 16%,rgba(14,17,26,.96)),rgba(9,11,17,.97));
  border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.8),inset 3px 0 0 var(--acc),inset 0 0 24px -10px color-mix(in srgb,var(--acc) 70%,transparent)}
.pitch-bar .pb-sheen{position:absolute;top:0;left:0;width:45%;height:100%;pointer-events:none;will-change:transform;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);animation:pbSheen 5.5s ease-in-out infinite}
@keyframes pbSheen{0%,72%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(360%) skewX(-18deg)}}
.pitch-bar .pb-ic{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;color:#0a0e16;font-size:18px;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
  background:linear-gradient(150deg,#fff,var(--acc));box-shadow:0 0 16px -2px color-mix(in srgb,var(--acc) 75%,transparent)}
.pitch-bar .pb-ic svg{width:18px;height:18px}
.pitch-bar .pb-tx{min-width:0;flex:1}
.pitch-bar .pb-l{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--acc) 55%,#9fb0cc);font-weight:600;margin-bottom:2px}
.pitch-bar .pb-v{font-family:var(--disp);font-size:17px;color:#fff;line-height:1.12;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.pitch-bar .pb-num{font-family:'Anton',sans-serif;font-size:25px;line-height:.8;color:var(--acc);text-shadow:0 0 16px color-mix(in srgb,var(--acc) 60%,transparent)}
.pitch-bar .pb-v small{font-size:9px;letter-spacing:.12em;color:var(--mute);align-self:center}
.pitch-bar .pb-score{font-family:'Anton',sans-serif;font-size:24px;color:#fff;letter-spacing:.02em}
.pitch-bar .pb-score i{font-style:normal;color:var(--acc);margin:0 1px}
.pitch-bar .pb-vs{font-size:11px;color:var(--acc);font-family:'Oswald',sans-serif;opacity:.85}
body.mobile .pitch-bar .pb-cell{flex-basis:100%;min-width:0}
.pitch-stage{padding:18px 0 30px;display:flex;justify-content:center;perspective:1500px}
.pitch-field{position:relative;width:100%;max-width:900px;aspect-ratio:16/10;border-radius:16px;overflow:hidden;
  background:linear-gradient(0deg,rgba(0,0,0,.32),rgba(0,0,0,.02) 60%),
    repeating-linear-gradient(90deg,#1a9149 0 9.09%,#15823d 9.09% 18.18%);
  border:2px solid rgba(255,255,255,.4);box-shadow:0 50px 90px rgba(0,0,0,.6),inset 0 0 90px rgba(0,0,0,.4);
  transform:rotateX(15deg);transform-origin:center 60%;
  transition:transform .35s cubic-bezier(.4,0,.6,1),opacity .35s}
.pitch-field.zoomout{transform:rotateX(15deg) scale(1.16);opacity:0}
.pl-cline{position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(255,255,255,.5);transform:translateX(-50%)}
.pl-ccircle{position:absolute;left:50%;top:50%;width:21%;aspect-ratio:1;border:2px solid rgba(255,255,255,.5);border-radius:50%;transform:translate(-50%,-50%)}
.pl-cspot{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.7);transform:translate(-50%,-50%)}
.pl-box{position:absolute;top:50%;transform:translateY(-50%);width:13%;height:54%;border:2px solid rgba(255,255,255,.42)}
.pl-box.left{left:0;border-left:none;border-radius:0 8px 8px 0}
.pl-box.right{right:0;border-right:none;border-radius:8px 0 0 8px}
.pl-arc{position:absolute;top:50%;width:9%;aspect-ratio:1;border:2px solid rgba(255,255,255,.4);border-radius:50%;transform:translateY(-50%)}
.pl-arc.left{left:9%;clip-path:inset(0 0 0 50%)}
.pl-arc.right{right:9%;clip-path:inset(0 50% 0 0)}
/* depth so it doesn't read as flat green */
.pl-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -5%,rgba(255,240,200,.12),transparent 42%),
    radial-gradient(140% 120% at 50% 55%,transparent 48%,rgba(0,0,0,.5))}
/* stadium spotlight sweep — a soft beam that drifts across the pitch (GPU-cheap: transform+opacity) */
.pl-spotlight{position:absolute;inset:-20% -10%;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(38% 60% at 50% 0%,rgba(180,210,255,.20),rgba(180,210,255,.05) 45%,transparent 70%);
  transform-origin:50% 0%;animation:plSweep 11s ease-in-out infinite}
@keyframes plSweep{0%{transform:translateX(-22%) rotate(-7deg);opacity:.5}50%{transform:translateX(22%) rotate(7deg);opacity:.95}100%{transform:translateX(-22%) rotate(-7deg);opacity:.5}}
/* crowd camera flashes — tiny white pops along the upper stands */
.pl-flashes{position:absolute;inset:0;z-index:2;pointer-events:none}
.pl-flashes span{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 9px 3px rgba(255,255,255,.85);animation:camFlash 4.4s linear infinite}
@keyframes camFlash{0%,100%{opacity:0;transform:scale(.4)}2%{opacity:1;transform:scale(1.3)}7%{opacity:0;transform:scale(.6)}}
/* ===== STADIUM CROWD — packed far stand of coloured specks + a rolling "wave" ===== */
.pl-crowd{position:absolute;z-index:0;pointer-events:none;overflow:hidden}
.pl-crowd.far{left:-3%;right:-3%;top:-1px;height:15%;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.55) 0 .7px,transparent 1.1px) 0 0/4px 4px,
    radial-gradient(circle at 50% 50%,rgba(255,201,77,.5) 0 .7px,transparent 1.1px) 2px 1px/6px 5px,
    radial-gradient(circle at 50% 50%,rgba(47,139,255,.45) 0 .7px,transparent 1.1px) 1px 3px/7px 6px,
    radial-gradient(circle at 50% 50%,rgba(22,201,138,.4) 0 .7px,transparent 1.1px) 3px 2px/8px 5px,
    linear-gradient(180deg,#0c1424,#070b14 70%);
  box-shadow:inset 0 -7px 12px rgba(0,0,0,.55)}
.pl-crowd.far::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.12) 50%,transparent 68%);
  transform:translateX(-65%);animation:crowdWave 7s ease-in-out infinite}
@keyframes crowdWave{0%,100%{transform:translateX(-65%)}50%{transform:translateX(65%)}}
/* ===== GOALS + NETS ===== */
.pl-goal{position:absolute;top:50%;transform:translateY(-50%);width:2.6%;height:27%;z-index:1;pointer-events:none}
.pl-goal.left{left:.4%}.pl-goal.right{right:.4%}
.pl-net{position:absolute;inset:0;border:1.6px solid rgba(255,255,255,.78);
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 1px,transparent 1px 4px),
            repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 4px)}
.pl-goal.left .pl-net{border-radius:6px 0 0 6px;border-left:none;transform-origin:left center}
.pl-goal.right .pl-net{border-radius:0 6px 6px 0;border-right:none;transform-origin:right center;animation:netRipple 14s ease-in-out infinite}
@keyframes netRipple{0%,76%{transform:scaleX(1)}80%{transform:scaleX(1.22)}84%{transform:scaleX(.96)}88%,100%{transform:scaleX(1)}}
/* ===== GOAL! celebration pop ===== */
.pl-goalpop{position:absolute;left:78%;top:30%;z-index:4;transform:translate(-50%,-50%);pointer-events:none;
  font-family:'Anton',sans-serif;font-style:italic;letter-spacing:.04em;opacity:0;animation:goalPop 14s ease-in-out infinite}
.pl-goalpop span{font-size:clamp(26px,5vw,52px);color:#fff;
  background:linear-gradient(180deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 26px rgba(255,201,77,.9),0 4px 14px rgba(0,0,0,.6);filter:drop-shadow(0 0 8px rgba(255,201,77,.7))}
@keyframes goalPop{0%,77%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-6deg)}
  81%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(-3deg)}
  86%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}
  91%{opacity:0;transform:translate(-50%,-50%) scale(1.3) rotate(0)}100%{opacity:0}}
/* animated play: ball passed between 3 markers (tiki-taka) */
.pitch-play{position:absolute;inset:0;z-index:1;pointer-events:none}
/* little players — head + jersey silhouette standing on the tilted pitch, with a ground shadow */
.pp-player{position:absolute;transform:translate(-50%,-100%);width:18px;height:30px;pointer-events:none;animation:runabout 15s ease-in-out infinite}
.pp-player.tB{animation:runabout2 17s ease-in-out infinite}
@keyframes runabout{0%{transform:translate(-50%,-100%) translate(0,0)}25%{transform:translate(-50%,-100%) translate(34px,-18px)}50%{transform:translate(-50%,-100%) translate(14px,22px)}75%{transform:translate(-50%,-100%) translate(-26px,8px)}100%{transform:translate(-50%,-100%) translate(0,0)}}
@keyframes runabout2{0%{transform:translate(-50%,-100%) translate(0,0)}25%{transform:translate(-50%,-100%) translate(-30px,16px)}50%{transform:translate(-50%,-100%) translate(-12px,-20px)}75%{transform:translate(-50%,-100%) translate(28px,-6px)}100%{transform:translate(-50%,-100%) translate(0,0)}}
.pp-player .pl-sh{position:absolute;left:50%;bottom:-2px;width:17px;height:6px;transform:translateX(-50%);border-radius:50%;background:rgba(0,0,0,.42);filter:blur(1.5px)}
.pp-player .pl-fig{position:absolute;left:50%;bottom:2px;width:14px;height:26px;transform:translateX(-50%) rotateX(-15deg);transform-origin:bottom;animation:pljog .6s ease-in-out infinite}
.pp-player .pl-fig::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:#e9b48c;box-shadow:0 1px 2px rgba(0,0,0,.45)}
.pp-player .pl-fig::after{content:"";position:absolute;left:50%;top:7px;transform:translateX(-50%);width:14px;height:18px;border-radius:6px 6px 4px 4px;background:var(--team);box-shadow:inset 0 -3px 5px rgba(0,0,0,.25),0 1px 3px rgba(0,0,0,.4)}
.pp-player.tA{--team:#e5283f}
.pp-player.tB{--team:#f0f3fb}
@keyframes pljog{0%,100%{transform:translateX(-50%) rotateX(-15deg) translateY(0)}50%{transform:translateX(-50%) rotateX(-15deg) translateY(-2px)}}
.pitch-ball{position:absolute;width:24px;height:24px;left:46%;top:50%;margin:-12px;z-index:2;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.55));animation:shotPlay 14s cubic-bezier(.5,0,.5,1) infinite}
.pitch-ball .pb-img{width:100%;height:100%;object-fit:contain;animation:ballspin 1.3s linear infinite}
/* build-up passes (0-58%) → drive into the box → SHOT into the right goal → in the net → reset */
@keyframes shotPlay{
  0%{left:46%;top:50%}    8%{left:38%;top:40%}
  20%{left:30%;top:60%}   32%{left:44%;top:54%}
  44%{left:56%;top:46%}   56%{left:70%;top:52%}
  66%{left:80%;top:50%}   70%{left:80%;top:50%}
  77%{left:96.5%;top:50%} 86%{left:96.5%;top:50%}
  93%{left:70%;top:50%}   100%{left:46%;top:50%}}
/* the striker drives the move, plants for the shot, then wheels away to celebrate */
.pp-player.pp-striker{--team:#ffd24d;z-index:2;animation:strikerRun 14s cubic-bezier(.45,0,.55,1) infinite}
.pp-player.pp-striker .pl-fig::before{background:#f2c79a}
@keyframes strikerRun{
  0%{left:38%;top:62%}   30%{left:52%;top:56%}
  56%{left:70%;top:52%}  66%{left:78%;top:50%}
  72%{left:82%;top:50%}  80%{left:86%;top:48%}
  86%{left:82%;top:42%}  100%{left:38%;top:62%}}
/* the keeper sets at the right goal, then dives the wrong way as the ball flies in */
.pp-player.pl-keeper{--team:#16c98a;left:93.5%;top:50%;z-index:2;animation:keeperPlay 14s ease-in-out infinite}
.pp-player.pl-keeper .pl-fig{animation:none}
@keyframes keeperPlay{
  0%,60%{transform:translate(-50%,-100%)}
  66%{transform:translate(-50%,-100%) translateY(-3px)}
  74%{transform:translate(-50%,-100%) translate(2px,9px) rotate(42deg)}
  85%{transform:translate(-50%,-100%) translate(2px,9px) rotate(42deg)}
  94%{transform:translate(-50%,-100%) rotate(0)}
  100%{transform:translate(-50%,-100%)}}
.pb-cd{display:inline-block;font-family:var(--disp);color:var(--gold);letter-spacing:.04em;margin-left:6px}
.pb-cd.live{color:var(--green);animation:pulse 1.1s infinite}
.pitch-bar .pb-cell.wide{flex:1.6 1 240px}
.zone{position:absolute;transform:translate(-50%,-50%) rotateX(-15deg);background:none;border:none;padding:0;cursor:pointer;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:7px;transition:transform .2s}
.zone:hover{transform:translate(-50%,-50%) rotateX(-15deg) scale(1.13)}
.z-dot{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:22px;color:#fff;
  background:var(--zc,var(--gold));box-shadow:0 7px 20px rgba(0,0,0,.55),inset 0 2px 6px rgba(255,255,255,.4),0 0 0 3px rgba(255,255,255,.22);
  animation:zpulse 2.6s ease-in-out infinite}
.zone.onlight .z-dot{color:#0a0e16}
.zone.big .z-dot{width:74px;height:74px;font-size:32px;box-shadow:0 8px 26px rgba(0,0,0,.6),inset 0 2px 8px rgba(255,255,255,.5),0 0 0 4px rgba(255,255,255,.3)}
.z-l{font-family:var(--disp);font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.8);background:rgba(8,10,16,.6);padding:2px 9px;border-radius:5px;white-space:nowrap}
@keyframes zpulse{0%,100%{box-shadow:0 7px 20px rgba(0,0,0,.55),inset 0 2px 6px rgba(255,255,255,.4),0 0 0 3px rgba(255,255,255,.18)}
  50%{box-shadow:0 7px 22px rgba(0,0,0,.55),inset 0 2px 6px rgba(255,255,255,.4),0 0 0 7px rgba(255,255,255,.28)}}
@media(max-width:640px){.z-dot{width:42px;height:42px;font-size:17px}.zone.big .z-dot{width:56px;height:56px;font-size:24px}.z-l{font-size:11px}}

/* ===== PLAYER WALKOUT (tunnel + lights + name reveal) ===== */
#walkout{position:fixed;inset:0;z-index:650;display:none;overflow:hidden;cursor:pointer;
  background:radial-gradient(120% 90% at 50% 64%,#10131f 0%,#06080f 60%,#04060b 100%)}
#walkout.show{display:block;animation:wkIn .35s ease}
#walkout.out{animation:wkOut .42s ease forwards}
@keyframes wkIn{from{opacity:0}to{opacity:1}}
@keyframes wkOut{to{opacity:0}}
.wk-rays{position:absolute;left:50%;top:48%;width:200vmax;height:200vmax;transform:translate(-50%,-50%);pointer-events:none;
  background:conic-gradient(from 0deg at 50% 50%,
    transparent 0 5deg,rgba(255,200,58,.08) 6deg 8deg,transparent 9deg 24deg,
    rgba(255,255,255,.06) 25deg 26deg,transparent 27deg 44deg,
    rgba(46,139,255,.06) 45deg 47deg,transparent 48deg 64deg,
    rgba(21,192,106,.06) 65deg 67deg,transparent 68deg 86deg,
    rgba(229,40,63,.06) 87deg 89deg,transparent 90deg);
  animation:wkSpin 22s linear infinite;opacity:.9}
@keyframes wkSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.wk-floor{position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;
  background:radial-gradient(100% 120% at 50% 100%,rgba(255,200,58,.22),rgba(255,200,58,.04) 45%,transparent 70%)}
.wk-name{position:absolute;left:0;right:0;top:24%;text-align:center;pointer-events:none;padding:0 16px}
.wk-kick{display:block;font-family:var(--body);font-weight:500;letter-spacing:.5em;font-size:13px;color:var(--gold);
  opacity:0;animation:wkFade .6s .15s forwards}
.wk-nm{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(54px,12vw,160px);line-height:.92;color:#fff;
  text-transform:uppercase;text-shadow:0 0 44px rgba(255,200,58,.5),0 6px 0 rgba(0,0,0,.35);
  opacity:0;transform:translateY(34px);animation:wkName .7s .3s cubic-bezier(.16,1,.3,1) forwards;margin-top:6px}
.wk-aka{display:block;font-family:var(--disp);font-size:clamp(18px,3vw,30px);letter-spacing:.08em;color:var(--gold);
  opacity:0;animation:wkFade .6s .55s forwards;margin-top:4px}
@keyframes wkName{to{opacity:1;transform:translateY(0)}}
@keyframes wkFade{to{opacity:1}}
.wk-fig{position:absolute;left:50%;bottom:0;width:min(54vh,420px);height:min(74vh,580px);transform:translateX(-50%);transform-origin:50% 100%;
  background-size:contain;background-repeat:no-repeat;background-position:bottom center;
  filter:drop-shadow(0 0 44px rgba(255,200,58,.4));opacity:0;
  animation:wkRise 1.1s .25s cubic-bezier(.16,1,.3,1) forwards, figDance 2.8s 1.45s ease-in-out infinite}
/* lively "hype" idle — bob, sway and squash/stretch so the cut-out reads as alive */
@keyframes figDance{
  0%{transform:translateX(-50%) translateY(0) rotate(0deg) scaleX(1) scaleY(1)}
  18%{transform:translateX(-50%) translateY(-12px) rotate(-2deg) scaleX(.98) scaleY(1.03)}
  38%{transform:translateX(-50%) translateY(0) rotate(0deg) scaleX(1.03) scaleY(.97)}
  58%{transform:translateX(-50%) translateY(-9px) rotate(2deg) scaleX(.98) scaleY(1.03)}
  78%{transform:translateX(-50%) translateY(0) rotate(0deg) scaleX(1.02) scaleY(.98)}
  100%{transform:translateX(-50%) translateY(0) rotate(0deg) scaleX(1) scaleY(1)}}
.wk-fig:not(.has){display:flex;align-items:flex-end;justify-content:center}
.wk-fig:not(.has) span{font-family:var(--disp);font-weight:700;font-size:clamp(120px,26vh,240px);color:rgba(255,255,255,.92);
  text-shadow:0 0 50px rgba(255,200,58,.5)}
@keyframes wkRise{0%{opacity:0;transform:translateX(-50%) translateY(70px) scale(.97)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.wk-skip{position:absolute;right:18px;bottom:16px;font-size:11px;letter-spacing:.2em;color:var(--mute);text-transform:uppercase;pointer-events:none}

/* reduced-motion perf block intentionally disabled — owner wants full motion on every machine */

/* ===== PERFORMANCE: once docked into the app, drop the heavy landing FX so every
   section stays smooth (the WebGL shader + particles + spinning rays are landing-only) ===== */
body.docked #shader,body.docked #motes{display:none!important}
#rays{animation:none!important}                 /* static — the 150vmax spinning conic was a big GPU layer */
#auroras .b{animation:none!important}            /* static glow — no per-frame blurred-blob repaint */
#goalSplash .gs-r{font-size:13px;letter-spacing:.3em;color:var(--gold);margin-top:12px}