/* =====================================================================================
   The Coefficient: game-style themes. ONE file = every design token + every game component.
   Themes: Arcade (default), Broadcast, Manager. Switch with <html data-theme="...">.
   Original designs for thecoefficiency.com; not affiliated with any video game publisher.
   Docs: build/theme/STYLE.md   Token export for the app: build/theme/tokens.json (generated)
   ===================================================================================== */

/* ---------- fonts (self-hosted, SIL Open Font License) ---------- */
@font-face{font-family:"Oxanium";font-weight:500 800;font-display:swap;src:url(../fonts/Oxanium-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Oxanium";font-weight:500 800;font-display:swap;src:url(../fonts/Oxanium-latinext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Rajdhani";font-weight:600;font-display:swap;src:url(../fonts/Rajdhani-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rajdhani";font-weight:600;font-display:swap;src:url(../fonts/Rajdhani-600-latinext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Rajdhani";font-weight:700;font-display:swap;src:url(../fonts/Rajdhani-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rajdhani";font-weight:700;font-display:swap;src:url(../fonts/Rajdhani-700-latinext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ================================ TOKENS ================================ */
/* @theme arcade : dark neon, slanted panels, glow, collectible cards */
:root,[data-theme="arcade"]{
  --bg:#05060f; --bg-2:#0a0c1d; --surface:#10133a; --surface-2:#181c4c; --surface-3:#22277a;
  --text:#f4f6ff; --text-dim:#b0b7de; --line:rgba(140,160,255,.18); --line-strong:rgba(140,160,255,.42);
  --accent:#00f0a8; --accent-ink:#03140d; --accent-2:#3ad6ff; --highlight:#ffd23f; --hot:#ff2e88;
  --live:#ff3b5c; --win:#00d884; --draw:#7d86bf; --loss:#ff4d6a;
  --hdr-bg:rgba(5,6,15,.82); --hdr-text:#ffffff; --hdr-accent:#00f0a8;
  --bar-track:rgba(255,255,255,.08);
  --glow:0 0 18px rgba(0,240,168,.45); --glow-2:0 0 22px rgba(58,214,255,.35);
  --shadow:0 14px 40px rgba(0,0,0,.55);
  --radius:4px; --radius-lg:6px; --cut:14px; --skew:-10deg;
  --f-display:"Barlow Condensed",Impact,"Arial Narrow",sans-serif; --w-display:800; --s-display:italic;
  --f-ui:"Oxanium","Barlow Condensed",system-ui,sans-serif; --f-num:"Oxanium",ui-monospace,monospace;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-body:1.04rem; --case-ui:uppercase; --track-ui:.08em;
  --band-elite:#00f0a8; --band-good:#3ad6ff; --band-ok:#ffd23f; --band-low:#ff4d6a;
  --motion:1;
  color-scheme:dark;
}
/* @theme broadcast : bright blue/white TV-graphics menus, rounded panels, radar charts */
[data-theme="broadcast"]{
  --bg:#e8eef8; --bg-2:#dbe5f3; --surface:#ffffff; --surface-2:#f2f6fc; --surface-3:#e3ecf9;
  --text:#0a1d40; --text-dim:#465a7e; --line:rgba(10,29,64,.13); --line-strong:rgba(10,29,64,.28);
  --accent:#0052cc; --accent-ink:#ffffff; --accent-2:#0068a8; --highlight:#b84300; --hot:#e0004d;
  --live:#d1002a; --win:#0a8a50; --draw:#71819c; --loss:#cc1f38;
  --hdr-bg:linear-gradient(90deg,#001a4d,#003d99 60%,#0057d9); --hdr-text:#ffffff; --hdr-accent:#8fd8ff;
  --bar-track:rgba(10,29,64,.1);
  --glow:0 6px 18px rgba(0,82,204,.18); --glow-2:0 4px 14px rgba(0,82,204,.14);
  --shadow:0 10px 28px rgba(10,29,64,.12);
  --radius:12px; --radius-lg:18px; --cut:0px; --skew:0deg;
  --f-display:"Rajdhani","Barlow Condensed",system-ui,sans-serif; --w-display:700; --s-display:normal;
  --f-ui:"Rajdhani","Barlow",system-ui,sans-serif; --f-num:"Rajdhani","Barlow",system-ui,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-body:1.04rem; --case-ui:uppercase; --track-ui:.05em;
  --band-elite:#0a8a50; --band-good:#0052cc; --band-ok:#b86e00; --band-low:#cc1f38;
  --motion:1;
  color-scheme:light;
}
/* @theme manager : dense dark-grey data dashboard, tables, 1-20 attribute grids, tactics board */
[data-theme="manager"]{
  --bg:#17191d; --bg-2:#1e2025; --surface:#25282e; --surface-2:#2d3037; --surface-3:#383c45;
  --text:#e9eaed; --text-dim:#a9aeb8; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.2);
  --accent:#4cbb67; --accent-ink:#0b1a0f; --accent-2:#79b8ff; --highlight:#f2c94c; --hot:#e86a5b;
  --live:#ff6b5e; --win:#4cbb67; --draw:#8b919c; --loss:#e8574a;
  --hdr-bg:#101114; --hdr-text:#e9eaed; --hdr-accent:#4cbb67;
  --bar-track:rgba(255,255,255,.07);
  --glow:none; --glow-2:none;
  --shadow:0 2px 6px rgba(0,0,0,.35);
  --radius:3px; --radius-lg:4px; --cut:0px; --skew:0deg;
  --f-display:"Barlow Condensed","Arial Narrow",sans-serif; --w-display:600; --s-display:normal;
  --f-ui:"Rajdhani","Barlow",system-ui,sans-serif; --f-num:"Barlow",system-ui,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-body:.97rem; --case-ui:uppercase; --track-ui:.04em;
  --band-elite:#4cbb67; --band-good:#9ad04f; --band-ok:#f2c94c; --band-low:#e8574a;
  --motion:0;
  color-scheme:dark;
}
/* legacy names used by style.css / extra.css, mapped onto the theme tokens */
:root{
  --navy:var(--bg); --navy-2:var(--bg-2); --panel:var(--surface); --white:var(--text); --muted:var(--text-dim);
  --emerald:var(--accent); --mint:var(--accent-2); --gold:var(--highlight);
  --f-title:var(--f-display); --f-accent:var(--f-ui); --max:1180px;
}

/* ================================ BASE ================================ */
body{background:var(--bg);background-image:none;color:var(--text);font:400 var(--fs-body)/1.6 var(--f-body)}
h1,h2,h3{font-family:var(--f-display);font-weight:var(--w-display);font-style:var(--s-display)}
a{color:var(--accent-2)} a:hover{color:var(--text)}
:focus-visible{outline:3px solid var(--highlight);outline-offset:2px}
.lead,.prose p,.prose li,.mgrid .card p,ul.h2h li,.events,ol.changelog li{color:var(--text)}
.card p{color:var(--text-dim)}
.small{font-size:.9rem}
.eyebrow{font:700 .82rem var(--f-ui);letter-spacing:.16em;color:var(--highlight)}
.note{color:var(--text);background:color-mix(in srgb,var(--highlight) 9%,transparent);border-left-color:var(--highlight)}
.todo{color:var(--text)}
input,select,textarea{background:var(--surface);color:var(--text);border-color:var(--line-strong)}
label{font-family:var(--f-ui)}
.wrap{max-width:var(--max)}
main{position:relative}

/* animated background layer */
.gx-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--bg)}
.gx-bg::before,.gx-bg::after{content:"";position:absolute}
[data-theme="arcade"] .gx-bg::before,:root:not([data-theme]) .gx-bg::before{left:-50%;right:-50%;top:45%;height:120%;
  background-image:linear-gradient(rgba(0,240,168,.22) 2px,transparent 2px),linear-gradient(90deg,rgba(58,214,255,.16) 2px,transparent 2px);
  background-size:80px 80px;transform:perspective(420px) rotateX(62deg);transform-origin:top;animation:gx-grid 6s linear infinite;
  -webkit-mask-image:linear-gradient(transparent,#000 25%,#000 60%,transparent);mask-image:linear-gradient(transparent,#000 25%,#000 60%,transparent)}
[data-theme="arcade"] .gx-bg::after,:root:not([data-theme]) .gx-bg::after{inset:0;background:
  radial-gradient(40% 35% at 15% 10%,rgba(255,46,136,.22),transparent 70%),
  radial-gradient(45% 40% at 85% 0%,rgba(58,214,255,.22),transparent 70%),
  radial-gradient(60% 40% at 50% 55%,rgba(0,240,168,.10),transparent 70%)}
@keyframes gx-grid{to{background-position:0 80px,0 0}}
[data-theme="broadcast"] .gx-bg{background:linear-gradient(180deg,#f5f8fd,#e3ebf7 70%)}
[data-theme="broadcast"] .gx-bg::before{inset:-20% -60%;background:repeating-linear-gradient(115deg,transparent 0 120px,rgba(0,82,204,.045) 120px 240px);animation:gx-sweep 30s linear infinite}
[data-theme="broadcast"] .gx-bg::after{left:0;right:0;top:0;height:420px;background:radial-gradient(70% 100% at 50% 0,rgba(0,104,168,.14),transparent 70%)}
@keyframes gx-sweep{to{transform:translateX(240px)}}
[data-theme="manager"] .gx-bg::before{inset:0;opacity:.5;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1050 680' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='3'%3E%3Crect x='25' y='25' width='1000' height='630'/%3E%3Cline x1='525' y1='25' x2='525' y2='655'/%3E%3Ccircle cx='525' cy='340' r='92'/%3E%3Crect x='25' y='178' width='165' height='324'/%3E%3Crect x='860' y='178' width='165' height='324'/%3E%3Crect x='25' y='260' width='55' height='160'/%3E%3Crect x='970' y='260' width='55' height='160'/%3E%3C/svg%3E") center/min(1400px,140vw) no-repeat,
  linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 32px}

/* ================================ HEADER ================================ */
.site-header{background:var(--hdr-bg);border-bottom:1px solid var(--line);color:var(--hdr-text)}
[data-theme="arcade"] .site-header{box-shadow:0 1px 0 rgba(0,240,168,.35),0 8px 30px rgba(0,0,0,.4)}
.nav{max-width:1320px;gap:12px;height:66px}
.brand{color:var(--hdr-text);font-family:var(--f-display);font-weight:var(--w-display);font-style:var(--s-display);white-space:nowrap}
.brand img{width:36px;height:36px}
.nav ul{order:2;margin-left:auto}
.gx-hdr-tools{order:3;display:flex;align-items:center;gap:8px}
.menu-btn{order:4;color:var(--hdr-text);border-color:rgba(255,255,255,.3);font-family:var(--f-ui)}
.nav a.link{color:var(--hdr-text);font:600 .98rem var(--f-ui);letter-spacing:var(--track-ui);padding:8px 10px;position:relative}
.nav a.link:hover,.nav a.link[aria-current=page]{color:var(--hdr-accent)}
.nav a.link[aria-current=page]::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:3px;background:var(--hdr-accent);box-shadow:var(--glow)}
.btn-sub{padding:9px 16px;font-size:1rem}
html:not([data-theme]) .gx-hdr-tools{display:none}

/* theme switcher */
.gx-themes{display:flex;gap:2px;padding:3px;border:1px solid rgba(255,255,255,.22);border-radius:calc(var(--radius) + 4px);background:rgba(0,0,0,.25)}
.gx-themes button{display:flex;align-items:center;gap:6px;min-height:34px;min-width:34px;padding:4px 8px;border:0;border-radius:var(--radius);background:transparent;color:var(--hdr-text);font:600 .82rem var(--f-ui);text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.gx-themes button[aria-pressed="true"]{background:rgba(255,255,255,.16);box-shadow:inset 0 -2px 0 var(--hdr-accent)}
.gx-themes button:hover{background:rgba(255,255,255,.1)}
.gx-themes__t{display:none}
.gx-themes button[aria-pressed="true"] .gx-themes__t{display:inline}
.gx-themes__sw{width:16px;height:16px;border-radius:3px;flex:0 0 auto;border:1px solid rgba(255,255,255,.5)}
.gx-themes__sw--arcade{background:linear-gradient(135deg,#ff2e88,#10133a 50%,#00f0a8)}
.gx-themes__sw--broadcast{background:linear-gradient(135deg,#0052cc 50%,#fff 50%);border-radius:50%}
.gx-themes__sw--manager{background:repeating-linear-gradient(0deg,#2d3037 0 3px,#4cbb67 3px 4px)}

/* XP HUD */
.gx-hud{display:flex;align-items:center;gap:8px;padding:5px 10px;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius);color:var(--hdr-text);text-decoration:none;font:600 .8rem var(--f-ui);letter-spacing:.06em;white-space:nowrap;background:rgba(0,0,0,.25)}
.gx-hud:hover{color:var(--hdr-text);border-color:var(--hdr-accent)}
.gx-hud b{font-family:var(--f-num);color:var(--hdr-accent)}
.gx-hud__xp{width:54px;height:6px;background:rgba(255,255,255,.18);border-radius:3px;overflow:hidden}
.gx-hud__xp i{display:block;height:100%;background:var(--hdr-accent);box-shadow:var(--glow);transition:width .6s}
.gx-hud__st b{color:var(--hdr-text);margin-left:2px}
.gx-hud.bump{animation:gx-bump .5s}
@keyframes gx-bump{40%{transform:scale(1.12)}}

/* toast */
.gx-toast{position:fixed;z-index:80;left:50%;bottom:22px;transform:translate(-50%,30px);opacity:0;pointer-events:none;padding:10px 18px;background:var(--accent);color:var(--accent-ink);font:700 1rem var(--f-ui);text-transform:uppercase;letter-spacing:.08em;border-radius:var(--radius);box-shadow:var(--glow),var(--shadow);transition:opacity .25s,transform .25s;clip-path:polygon(var(--cut) 0,100% 0,calc(100% - var(--cut)) 100%,0 100%)}
.gx-toast.on{opacity:1;transform:translate(-50%,0)}

/* ================================ BUTTONS & PANELS ================================ */
.btn,.gx-btn{font-family:var(--f-ui);font-weight:700;letter-spacing:var(--track-ui);border-radius:var(--radius);transition:transform .12s,box-shadow .2s,background .2s,color .2s}
.btn:active,.gx-btn:active{transform:scale(.96)}
.btn-sub{background:var(--accent);color:var(--accent-ink)} .btn-sub:hover{color:var(--accent-ink);background:var(--accent);box-shadow:var(--glow)}
.btn-ghost{border-color:var(--accent-2);color:var(--accent-2)} .btn-ghost:hover{background:var(--accent-2);color:var(--bg)}
.site-header .btn-sub{color:var(--accent-ink)}
.gx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 16px;border:2px solid var(--line-strong);background:var(--surface-2);color:var(--text);font-size:1rem;text-transform:uppercase;cursor:pointer}
.gx-btn:hover{border-color:var(--accent);box-shadow:var(--glow)}
.gx-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:var(--glow)}
.gx-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.card{background:var(--surface);border-color:var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.card h3{color:var(--text)}
.card.accent{border-top-color:var(--accent)}
[data-theme="arcade"] .card,:root:not([data-theme]) .card{background:linear-gradient(160deg,var(--surface-2),var(--surface) 40%,var(--bg-2));border-color:var(--line-strong);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
[data-theme="arcade"] .btn,[data-theme="arcade"] .gx-btn,[data-theme="arcade"] .chip,[data-theme="arcade"] .gx-tile{clip-path:polygon(var(--cut) 0,100% 0,calc(100% - var(--cut)) 100%,0 100%);border-radius:0}
[data-theme="arcade"] .btn,[data-theme="arcade"] .gx-btn{padding-left:calc(16px + var(--cut)/2);padding-right:calc(16px + var(--cut)/2)}
[data-theme="arcade"] .btn:focus-visible,[data-theme="arcade"] .gx-btn:focus-visible,[data-theme="arcade"] .chip:focus-visible,[data-theme="arcade"] .gx-tile:focus-visible{outline-offset:-4px}
[data-theme="manager"] .card{padding:18px;box-shadow:none;border-radius:var(--radius)}
[data-theme="manager"] .card h3{font-size:1.15rem;text-transform:uppercase;letter-spacing:.06em;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:12px}
[data-theme="broadcast"] .card h3{color:#003d99}

/* hero & page hero */
.hero{border-bottom:1px solid var(--line)}
.hero::before{opacity:.35}
.hero::after{background:radial-gradient(ellipse 60% 65% at center,color-mix(in srgb,var(--bg) 92%,transparent) 0 40%,color-mix(in srgb,var(--bg) 55%,transparent) 75%,var(--bg) 100%)}
.hero h1{text-shadow:none;font-size:clamp(3rem,10vw,6.8rem)}
[data-theme="arcade"] .hero h1,:root:not([data-theme]) .hero h1{background:linear-gradient(180deg,#fff 30%,#9ffbe0);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(0,240,168,.45))}
[data-theme="broadcast"] .hero h1{color:#003d99}
.kicker{color:var(--accent-2);font-family:var(--f-ui)}
.rule{background:linear-gradient(90deg,var(--accent),var(--accent-2));height:4px;box-shadow:var(--glow)}
.page-hero{border-bottom:1px solid var(--line);padding:56px 0 32px}
.page-hero h1{font-size:clamp(2.6rem,7vw,4.6rem)}
[data-theme="arcade"] .page-hero h1{text-shadow:0 0 24px rgba(58,214,255,.35)}
[data-theme="broadcast"] .page-hero{background:linear-gradient(90deg,#001a4d,#003d99);color:#fff;border:0}
[data-theme="broadcast"] .page-hero .lead,[data-theme="broadcast"] .page-hero .muted,[data-theme="broadcast"] .page-hero .small{color:#dbe7ff}
[data-theme="broadcast"] .page-hero .eyebrow{color:#ffcf4a}
[data-theme="broadcast"] .page-hero a{color:#9fe0ff}
[data-theme="manager"] .page-hero{padding:32px 0 20px;background:var(--bg-2)}
[data-theme="manager"] .page-hero h1{font-size:clamp(2rem,5vw,3rem)}
[data-theme="manager"] section{padding:44px 0}
.band{background:linear-gradient(100deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--bg)));color:var(--accent-ink);border-radius:var(--radius-lg)}
.band p{color:var(--accent-ink)}
.band .btn-sub{background:var(--bg);color:var(--text)}
[data-theme="arcade"] .band{clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,30px 100%,0 calc(100% - 30px))}
.ph::after{background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.88))}
.ph,.ph strong{color:#fff}.ph small{color:#d6dbef}
.pill-list li{background:var(--surface);color:var(--accent-2);border-color:var(--line-strong);font-family:var(--f-ui);border-radius:var(--radius)}
[data-theme="broadcast"] .page-hero .pill-list li{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.card .num{font-family:var(--f-num);color:var(--accent)}
.site-footer{background:var(--bg-2);color:var(--text-dim);border-top:1px solid var(--line)}
.site-footer strong{color:var(--text)!important}
.foot nav a{color:var(--text-dim)}
.gx-foot-note{font-size:.85rem}

/* ================================ HOME MENU (.gx-menu / .gx-tile) ================================ */
.gx-menu-sec{padding:34px 0 0}
.gx-menu{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:12px}
.gx-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;min-height:130px;padding:18px 22px;text-decoration:none;color:var(--text);background:linear-gradient(150deg,var(--surface-2),var(--surface));border:1px solid var(--line-strong);border-radius:var(--radius-lg);overflow:hidden;transition:transform .15s,box-shadow .2s,border-color .2s}
.gx-tile strong{font:var(--w-display) var(--s-display) clamp(1.4rem,2.6vw,2rem)/1 var(--f-display);text-transform:uppercase}
.gx-tile small{color:var(--text-dim)}
.gx-tile__k{position:absolute;top:12px;left:22px;font:700 .75rem var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.gx-tile:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--glow);color:var(--text)}
.gx-tile:active{transform:translateY(0) scale(.98)}
.gx-tile--main{background:linear-gradient(120deg,var(--accent),var(--accent-2));color:var(--accent-ink);border:0}
.gx-tile--main small,.gx-tile--main .gx-tile__k{color:var(--accent-ink)}
.gx-tile--main:hover{color:var(--accent-ink)}
.gx-tile--main::after{content:"▶";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:2.4rem;opacity:.85}
[data-theme="arcade"] .gx-tile--main{animation:gx-pulse 2.6s ease-in-out infinite}
@keyframes gx-pulse{50%{box-shadow:0 0 34px rgba(0,240,168,.55)}}
[data-theme="manager"] .gx-tile{min-height:90px;padding:12px 16px;border-radius:var(--radius)}
[data-theme="manager"] .gx-tile--main{background:var(--accent)}

/* ================================ FIXTURE MENU (match center rows) ================================ */
.chips{gap:6px;padding:16px 0 6px}
.chip{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--text);font:700 .95rem var(--f-ui);letter-spacing:var(--track-ui);min-height:48px;justify-content:center;padding:6px 18px;transition:background .15s,color .15s,transform .12s}
.chip small{color:var(--text-dim);font:500 .75rem var(--f-ui)}
.chip:hover{border-color:var(--accent);color:var(--text)}
.chip:active{transform:scale(.96)}
.chip.on,.chip[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:var(--glow)}
.chip.on small,.chip[aria-selected="true"] small{color:var(--accent-ink)}
[data-theme="broadcast"] .page-hero .chip{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)}
[data-theme="broadcast"] .page-hero .chip small{color:#cfe0ff}
[data-theme="broadcast"] .page-hero .chip[aria-selected="true"],[data-theme="broadcast"] .page-hero .chip.on{background:#fff;color:#003d99}
[data-theme="broadcast"] .page-hero .chip[aria-selected="true"] small{color:#003d99}
.gx-panel[hidden]{display:none}
.day-h{font-family:var(--f-display)}
.day-h small{color:var(--text-dim)}
.comp{background:var(--surface);border-color:var(--line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.comp-h{background:linear-gradient(90deg,var(--surface-3),transparent);color:var(--accent-2);font-family:var(--f-ui);font-weight:700;font-size:.95rem;letter-spacing:.12em}
.comp-h span{color:var(--text-dim)}
.mrow{position:relative;color:var(--text);transition:background .15s,transform .15s;border-bottom-color:var(--line)}
.mrow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);transform:scaleY(0);transition:transform .15s;box-shadow:var(--glow)}
.mrow:hover,.mrow:focus-visible{background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--text)}
.mrow:hover::before,.mrow:focus-visible::before{transform:scaleY(1)}
.mrow:active{transform:scale(.99)}
.mrow:focus-visible{outline-offset:-3px}
.mrow .sc{font-family:var(--f-num);font-weight:800}
.mrow .tm.win{color:var(--highlight)}
.mini{color:var(--text-dim);font-family:var(--f-num)}
.st{font-family:var(--f-ui);color:var(--text-dim)} .st.live{color:var(--live)} .st.ft{color:var(--accent-2)}
.hl-dot{color:var(--live)}
.gx-pickmark{position:absolute;right:6px;top:4px;font:700 .62rem var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.gx-pickmark.ok{color:var(--win)} .gx-pickmark.no{color:var(--loss)}
.crest{border-radius:var(--radius);font-family:var(--f-ui)}
[data-theme="arcade"] .crest{clip-path:polygon(50% 0,100% 18%,92% 78%,50% 100%,8% 78%,0 18%);border-radius:0;border:0}
[data-theme="broadcast"] .crest{border-radius:50%}
[data-theme="broadcast"] .mrow .sc{background:#003d99;color:#fff;border-radius:6px;padding:2px 0}
[data-theme="broadcast"] .mrow .sc i{color:#cfe0ff}
[data-theme="manager"] .mrow{padding:6px 12px;font-size:.92rem;grid-template-columns:70px 1fr 56px 1fr 150px}
[data-theme="manager"] .mrow:nth-child(even){background:rgba(255,255,255,.02)}
[data-theme="manager"] .comp-h{padding:6px 12px;background:var(--surface-3);color:var(--text);font-size:.85rem}
[data-theme="manager"] .day-h{font-size:1.5rem}
.hlcard{color:var(--text)} .hlcard small{color:var(--text-dim)} .hlcard:hover strong{color:var(--accent)}
.hlcard img{border-radius:var(--radius)}

/* ================================ PRE-MATCH VS SCREEN (.gx-vs) ================================ */
.gx-prematch{position:relative;overflow:hidden}
.gx-back{font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.08em}
.gx-vs{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:0;margin:18px 0 12px;min-height:250px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.gx-vs__side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:26px 18px;text-align:center;position:relative}
.gx-vs__side--home{background:linear-gradient(135deg,var(--home),color-mix(in srgb,var(--home) 55%,#000));color:var(--home-fg)}
.gx-vs__side--away{background:linear-gradient(225deg,var(--away),color-mix(in srgb,var(--away) 55%,#000));color:var(--away-fg)}
.gx-vs__tag{font:700 .72rem var(--f-ui);letter-spacing:.24em;text-transform:uppercase;opacity:.85}
.gx-vs__name{font:var(--w-display) var(--s-display) clamp(1.35rem,3.4vw,2.4rem)/1 var(--f-display);text-transform:uppercase;max-width:14ch}
.gx-vs__ovr{display:flex;align-items:baseline;gap:6px;font:800 clamp(1.8rem,4vw,2.6rem)/1 var(--f-num)}
.gx-vs__ovr small{font:700 .75rem var(--f-ui);letter-spacing:.14em}
.gx-vs__mid{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px clamp(10px,2vw,26px);background:var(--bg-2);min-width:120px;z-index:1}
.gx-vs__badge{display:grid;place-items:center;width:74px;height:74px;font:800 italic 2rem var(--f-display);color:var(--accent-ink);background:linear-gradient(135deg,var(--accent),var(--accent-2));border-radius:50%;box-shadow:var(--glow),0 0 0 4px var(--bg-2),0 0 0 6px var(--line-strong)}
.gx-vs .sc.big{font:800 clamp(2.4rem,7vw,4rem)/1 var(--f-num);text-shadow:none;color:var(--text)}
.gx-vs .sc.big:empty{display:none}
.gx-vs .st{font-size:.9rem;text-align:center}
.gx-crest{display:inline-grid;place-items:center;flex:0 0 auto;width:30px;height:30px;background:var(--c);color:var(--c-fg);font:800 .66rem var(--f-ui);letter-spacing:.02em;border-radius:var(--radius);border:2px solid rgba(255,255,255,.55)}
.gx-crest--lg{width:46px;height:46px;font-size:.9rem}
.gx-crest--xl{width:clamp(64px,10vw,96px);height:clamp(64px,10vw,96px);font-size:clamp(1rem,2vw,1.5rem);box-shadow:0 8px 24px rgba(0,0,0,.35)}
/* arcade: slanted split with neon seam */
[data-theme="arcade"] .gx-vs{border-radius:0;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px))}
[data-theme="arcade"] .gx-vs__side--home{clip-path:polygon(0 0,100% 0,calc(100% - 40px) 100%,0 100%);margin-right:-40px;padding-right:58px}
[data-theme="arcade"] .gx-vs__side--away{clip-path:polygon(40px 0,100% 0,100% 100%,0 100%);margin-left:-40px;padding-left:58px}
[data-theme="arcade"] .gx-vs__mid{background:transparent;min-width:150px}
[data-theme="arcade"] .gx-vs::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 47%,rgba(255,255,255,.75) 49.6%,rgba(0,240,168,.9) 50%,transparent 53%);mix-blend-mode:screen;opacity:.35;pointer-events:none}
[data-theme="arcade"] .gx-vs__side::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 2px,transparent 2px 14px);pointer-events:none}
[data-theme="arcade"] .gx-vs__badge{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border-radius:0;width:96px;height:96px;font-size:2.2rem;animation:gx-vs 2.4s ease-in-out infinite}
[data-theme="arcade"] .gx-crest--xl{clip-path:polygon(50% 0,100% 18%,92% 78%,50% 100%,8% 78%,0 18%);border:0;border-radius:0}
@keyframes gx-vs{50%{filter:brightness(1.25) drop-shadow(0 0 14px rgba(0,240,168,.8))}}
/* broadcast: clean TV scorebug */
[data-theme="broadcast"] .gx-vs{border-radius:var(--radius-lg);border:3px solid #fff}
[data-theme="broadcast"] .gx-vs__mid{background:#fff;color:#0a1d40}
[data-theme="broadcast"] .gx-vs .sc.big{color:#0a1d40}
[data-theme="broadcast"] .gx-vs .st{color:#465a7e}
[data-theme="broadcast"] .gx-vs__badge{background:#003d99;color:#fff;box-shadow:0 0 0 4px #fff,0 0 0 6px #cfdcf2}
[data-theme="broadcast"] .gx-crest--xl{border-radius:50%;border:4px solid #fff}
/* manager: compact header strip */
[data-theme="manager"] .gx-vs{min-height:150px;border-radius:var(--radius);border:1px solid var(--line-strong)}
[data-theme="manager"] .gx-vs__side{flex-direction:row;flex-wrap:wrap;gap:12px;padding:16px}
[data-theme="manager"] .gx-vs__side--home{background:linear-gradient(90deg,var(--home) 0 8px,var(--surface) 8px);color:var(--text);justify-content:flex-start;text-align:left}
[data-theme="manager"] .gx-vs__side--away{background:linear-gradient(270deg,var(--away) 0 8px,var(--surface) 8px);color:var(--text);justify-content:flex-end;text-align:right;flex-direction:row-reverse}
[data-theme="manager"] .gx-vs__tag{width:100%}
[data-theme="manager"] .gx-vs__badge{width:auto;height:auto;padding:2px 10px;background:none;box-shadow:none;color:var(--text-dim);font:600 1rem var(--f-ui);border-radius:0}
[data-theme="manager"] .gx-crest--xl{width:56px;height:56px;font-size:.95rem}
[data-theme="manager"] .gx-vs__name{font-size:clamp(1.2rem,2.6vw,1.7rem)}

/* ================================ RATING VALUES (0-99 vs 1-20) ================================ */
.r20{display:none}
[data-theme="manager"] .r99{display:none} [data-theme="manager"] .r20{display:inline}
.r99,.r20{font-family:var(--f-num);font-weight:800}
.na{opacity:.6}
[data-theme="manager"] .gx-card [data-band],[data-theme="manager"] .gx-stat [data-band]{display:inline-grid;place-items:center;min-width:28px;padding:1px 4px;border-radius:2px;color:#111;font-weight:700}
[data-theme="manager"] [data-band="elite"]{background:var(--band-elite)} [data-theme="manager"] [data-band="good"]{background:var(--band-good)}
[data-theme="manager"] [data-band="ok"]{background:var(--band-ok)} [data-theme="manager"] [data-band="low"]{background:var(--band-low)}
[data-theme="manager"] .gx-card [data-band].r99,[data-theme="manager"] .gx-stat [data-band].r99{display:none}

/* ================================ TEAM / PLAYER CARD (.gx-card) ================================ */
.gx-card{--c1:var(--accent);--c-fg:#fff;position:relative;display:flex;flex-direction:column;gap:10px;padding:16px 16px 18px;color:var(--text);border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(165deg,color-mix(in srgb,var(--c1) 70%,var(--surface)) 0,color-mix(in srgb,var(--c1) 22%,var(--surface)) 45%,var(--surface) 100%);
  border:1px solid color-mix(in srgb,var(--c1) 60%,var(--line-strong));box-shadow:var(--shadow);transition:transform .18s,box-shadow .2s}
.gx-card__top{display:flex;align-items:center;gap:10px}
.gx-card__ovr{display:flex;align-items:baseline;gap:4px;font:800 2.2rem/1 var(--f-num)}
.gx-card__ovr small{font:700 .72rem var(--f-ui);letter-spacing:.12em;opacity:.85}
.gx-card__pos{font:700 .74rem var(--f-ui);letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border-radius:var(--radius);background:rgba(0,0,0,.28);color:#fff;margin-right:auto;max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gx-card__name{font:var(--w-display) var(--s-display) 1.45rem/1.05 var(--f-display);text-transform:uppercase;margin:0}
.gx-card__text{color:var(--text-dim);font-size:.95rem;margin:0}
.gx-card__art{width:150px;height:150px;margin:0 auto;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.gx-card__attrs{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 16px;margin:4px 0 0}
.gx-attr{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid var(--line)}
.gx-attr dt{font:700 .8rem var(--f-ui);letter-spacing:.12em;color:var(--text-dim)}
.gx-attr dd{margin:0;font-size:1.15rem}
.gx-card:hover{transform:translateY(-4px)}
/* arcade: foil card with cut corners and shine */
[data-theme="arcade"] .gx-card,:root:not([data-theme]) .gx-card{border-radius:0;clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%,0 18px);border:0;
  background:linear-gradient(165deg,var(--c1) 0,color-mix(in srgb,var(--c1) 45%,#0a0c1d) 42%,#0a0c1d 100%);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c1) 70%,#fff)}
[data-theme="arcade"] .gx-card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 45%,transparent 60%);transform:translateX(-120%);transition:transform .7s;pointer-events:none}
[data-theme="arcade"] .gx-card:hover::after{transform:translateX(120%)}
[data-theme="arcade"] .gx-card .gx-card__ovr{color:#fff;text-shadow:0 0 14px color-mix(in srgb,var(--c1) 80%,#fff)}
[data-theme="arcade"] .gx-card .gx-card__text,[data-theme="arcade"] .gx-attr dt{color:#d4d9f2}
[data-theme="arcade"] .gx-card .gx-card__name{color:#fff}
/* broadcast: white card with a coloured header band */
[data-theme="broadcast"] .gx-card{background:linear-gradient(180deg,var(--c1) 0 74px,#fff 74px);border:1px solid var(--line-strong)}
[data-theme="broadcast"] .gx-card__top{color:var(--c-fg);min-height:42px}
[data-theme="broadcast"] .gx-card--mascot .gx-card__art{margin-top:-6px}
/* manager: profile panel with attribute table */
[data-theme="manager"] .gx-card{background:var(--surface);border:1px solid var(--line-strong);border-top:4px solid var(--c1);border-radius:var(--radius);box-shadow:none;padding:12px}
[data-theme="manager"] .gx-card:hover{transform:none;border-color:var(--accent)}
[data-theme="manager"] .gx-card__ovr{font-size:1.6rem}
[data-theme="manager"] .gx-card__attrs{grid-template-columns:1fr;gap:0}
[data-theme="manager"] .gx-attr{padding:3px 0}
[data-theme="manager"] .gx-card__art{width:96px;height:96px}

/* mascot collectible variant */
.gx-cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.gx-card--mascot{text-align:center}
.gx-card--mascot .gx-card__top{text-align:left}
.gx-card--mascot .gx-card__ovr{font-size:1.5rem}
.gx-collect{margin-top:auto;font-size:.9rem;min-height:40px}
.gx-collect span{font-size:.75rem;opacity:.8}
.gx-collect[aria-pressed="true"] span{display:none}
.gx-card.is-collected{box-shadow:0 0 0 2px var(--highlight),var(--glow)}
[data-theme="arcade"] .gx-card.is-collected{box-shadow:inset 0 0 0 3px var(--highlight)}
.gx-card.is-collected::before{content:"★ Collected";position:absolute;top:12px;right:12px;font:700 .68rem var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--highlight);z-index:1}
.gx-card.is-collected .gx-card__pos{visibility:hidden}
.gx-collection{font:700 1rem var(--f-ui);letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);margin:0}
.gx-collection b{color:var(--accent);font-family:var(--f-num)}
.chief{background:var(--surface)}
.chief img{border-color:var(--accent)}
ol.changelog li{background:var(--surface);border-color:var(--line);border-left-color:var(--accent)}
ol.changelog time{color:var(--highlight);font-family:var(--f-ui)}

/* ================================ COMPARISON (.gx-compare, .gx-stats, .gx-radar) ================================ */
.gx-compare-sec{padding:26px 0 0}
.gx-compare__grid{display:grid;grid-template-columns:minmax(200px,1fr) minmax(260px,1.4fr) minmax(200px,1fr);gap:20px;align-items:start}
.gx-compare__mid{display:grid;gap:14px}
.gx-stats{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gx-stat{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;row-gap:4px}
.gx-stat__l{text-align:center;font:700 .8rem var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.gx-stat__v{font-size:1.25rem;justify-self:start}.gx-stat__v--a{text-align:right;justify-self:end}
.gx-stat__v.lead{color:var(--accent)}
.gx-stat__bar{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:4px;height:10px}
.gx-stat__bar i{display:block;height:100%;background:var(--bar-track);position:relative;overflow:hidden;border-radius:2px}
.gx-stat__bar i::after{content:"";position:absolute;top:0;bottom:0;width:calc(var(--v) * 1%);transition:width .8s}
.gx-stat__bar .h{--v:var(--h)} .gx-stat__bar .a{--v:var(--a)}
.gx-stat__bar .h::after{right:0;background:linear-gradient(270deg,var(--home),color-mix(in srgb,var(--home) 60%,#fff));box-shadow:var(--glow)}
.gx-stat__bar .a::after{left:0;background:linear-gradient(90deg,var(--away),color-mix(in srgb,var(--away) 60%,#fff));box-shadow:var(--glow-2)}
[data-theme="arcade"] .gx-stat__bar i{transform:skewX(var(--skew))}
.gx-radar{margin:0;display:none}
[data-theme="broadcast"] .gx-radar,[data-theme="manager"] .gx-radar{display:block}
.gx-radar svg{width:100%;max-width:300px;margin:0 auto;display:block;overflow:visible}
.gx-radar .ring{fill:none;stroke:var(--line-strong);stroke-width:1}
.gx-radar .axis{stroke:var(--line-strong);stroke-width:1}
.gx-radar .rh{fill:color-mix(in srgb,var(--home) 35%,transparent);stroke:var(--home);stroke-width:2.5}
.gx-radar .ra{fill:color-mix(in srgb,var(--away) 35%,transparent);stroke:var(--away);stroke-width:2.5}
.gx-radar text{fill:var(--text-dim);font:700 12px var(--f-ui);letter-spacing:.1em}
.gx-radar figcaption{text-align:center;font:600 .85rem var(--f-ui);color:var(--text-dim);display:flex;gap:8px;justify-content:center;align-items:center}
.gx-radar .k{display:inline-block;width:12px;height:12px;border-radius:2px}.gx-radar .k.h{background:var(--home)}.gx-radar .k.a{background:var(--away);margin-left:8px}
[data-theme="manager"] .gx-stat__bar{display:none}
[data-theme="manager"] .gx-stats{gap:0}
[data-theme="manager"] .gx-stat{padding:5px 0;border-bottom:1px solid var(--line);row-gap:0}
.gx-method{margin:16px 0 0}

/* ================================ "WHO WINS?" PICK (.gx-pick) ================================ */
.gx-pick h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px}
.gx-pick__xp{font:600 .78rem var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.gx-pick__opts{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;margin:6px 0 10px}
.gx-pick__opts .gx-btn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gx-pick.is-locked .gx-btn:not([aria-pressed="true"]){opacity:.5}
.gx-pick.is-right{box-shadow:0 0 0 2px var(--win),var(--glow)}
.gx-pick.is-wrong{box-shadow:0 0 0 2px var(--loss)}
.gx-pick__msg{margin:0}

/* ================================ MATCH PAGE extras ================================ */
.b-h{background:var(--home,var(--accent));color:var(--home-fg,var(--accent-ink))}
.b-d{background:var(--draw);color:#fff}
.b-a{background:var(--away,var(--highlight));color:var(--away-fg,var(--bg))}
.pbar{border-radius:var(--radius);font-family:var(--f-num)}
.pbar-l{color:var(--text-dim)}
table.cmp td,table.cmp th{border-bottom-color:var(--line)}
table.cmp tbody th{font-family:var(--f-ui);color:var(--text-dim)}
table.cmp thead th{font-family:var(--f-display)}
[data-theme="manager"] table.cmp{font-size:.9rem}
[data-theme="manager"] table.cmp td,[data-theme="manager"] table.cmp th{padding:5px 6px}
[data-theme="manager"] table.cmp tbody tr:nth-child(even){background:rgba(255,255,255,.025)}
.fm.W{background:var(--win)} .fm.D{background:var(--draw)} .fm.L{background:var(--loss)}
ul.h2h time{color:var(--text-dim)}
.mgrid{gap:18px} .mgrid .col{gap:18px;min-width:0}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 16px}.foot nav a{margin-right:0}

/* ================================ RESPONSIVE ================================ */
@media (max-width:1240px){
  .menu-btn{display:block}
  .nav ul{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;background:var(--bg-2);border-bottom:1px solid var(--line);padding:12px;margin:0}
  .nav ul.open{display:flex}
  .nav ul .link{color:var(--text)}
  .gx-hdr-tools{margin-left:auto}
  .gx-compare__grid{grid-template-columns:1fr 1fr}
  .gx-compare__mid{grid-column:1/-1;grid-row:2}
  .gx-menu{grid-template-columns:1fr 1fr}
  .gx-tile--main{grid-column:1/-1}
}
@media (max-width:640px){
  .nav.wrap{padding:0 12px;gap:8px}
  .brand{font-size:0;gap:0} .brand img{width:34px;height:34px}
  .menu-btn{padding:8px 10px}
  .gx-hud__xp{display:none}
  .gx-hud{padding:5px 7px}
  .gx-themes button{padding:4px 6px}
  .gx-themes button[aria-pressed="true"] .gx-themes__t{display:none}
  .gx-vs{grid-template-columns:1fr 1fr;min-height:0}
  .gx-vs__mid{grid-column:1/-1;grid-row:2;flex-direction:row;justify-content:center;gap:14px;min-width:0;padding:12px}
  .gx-vs__badge{width:48px;height:48px;font-size:1.3rem}
  [data-theme="arcade"] .gx-vs__badge{width:56px;height:56px;font-size:1.3rem}
  [data-theme="arcade"] .gx-vs__side--home{margin-right:-24px;padding-right:34px;clip-path:polygon(0 0,100% 0,calc(100% - 24px) 100%,0 100%)}
  [data-theme="arcade"] .gx-vs__side--away{margin-left:-24px;padding-left:34px;clip-path:polygon(24px 0,100% 0,100% 100%,0 100%)}
  [data-theme="arcade"] .gx-vs__mid{background:var(--bg-2)}
  .gx-vs__side{padding:18px 10px}
  [data-theme="manager"] .gx-vs__side{flex-direction:column!important;text-align:center!important;justify-content:center!important;background:var(--surface)!important;border-top:4px solid var(--home)}
  [data-theme="manager"] .gx-vs__side--away{border-top-color:var(--away)}
  .gx-compare__grid{grid-template-columns:minmax(0,1fr)}
  .mgrid{grid-template-columns:minmax(0,1fr)}
  table.cmp td{white-space:normal}
  .gx-compare__mid{grid-row:auto}
  .gx-menu{grid-template-columns:1fr 1fr;gap:8px}
  .gx-tile{min-height:100px;padding:14px}
  .gx-tile__k{left:14px}
  .gx-cardgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .gx-card--mascot .gx-card__art{width:110px;height:110px}
  .gx-card--mascot .gx-card__name{font-size:1.15rem}
  .gx-card--mascot .gx-card__text{font-size:.85rem}
  .gx-card__pos{font-size:.64rem;max-width:7.5rem}
  .gx-pick__opts{grid-template-columns:1fr}
  [data-theme="manager"] .mrow{grid-template-columns:58px 1fr 48px 1fr}
}
@media (max-width:360px){ .gx-hud__st{display:none} .gx-cardgrid{grid-template-columns:1fr} }

/* ================================ MOTION ================================ */
@media (prefers-reduced-motion:reduce){
  .gx-bg::before,.gx-bg::after,.gx-vs__badge,.gx-tile--main,.gx-hud.bump{animation:none!important}
  .gx-card::after{display:none}
  .gx-card,.gx-tile,.mrow,.chip,.btn,.gx-btn{transition:none!important;transform:none!important}
  .st.live::before{animation:none}
}

/* ================================ MATCH REPLAY (.gx-replay) ================================
   Own animation from match data, never real footage. Variant via [data-variant-active] (set by replay.js):
   arcade | broadcast (site styles) · classic2d | retrotext | datadesk | teletext (Manager options). */
.gx-replay-sec{padding:26px 0 0}
.gx-replay-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;align-items:start}
.gx-replay-grid>.card:only-child{grid-column:1/-1}
.gx-replay-card{padding:14px;clip-path:none!important}
.gx-replay__note{font-size:.85rem;color:var(--text-dim);margin:10px 0 0}
.gx-replay__note strong{color:var(--text)}
.gx-replay__mh{font-size:1.1rem;margin:14px 0 6px}
.gx-moments{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-height:260px;overflow:auto}
.gx-km{display:grid;grid-template-columns:44px 22px 1fr;gap:6px;align-items:start;padding:5px 8px;border-radius:var(--radius);font-size:.92rem;color:var(--text);cursor:default}
.gx-km[role=button]{cursor:pointer}.gx-km[role=button]:hover,.gx-km[role=button]:focus-visible{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.gx-km time{font-family:var(--f-num);color:var(--text-dim)}
.gx-km--goal,.gx-km--pen_goal,.gx-km--og{font-weight:600;background:color-mix(in srgb,var(--accent) 8%,transparent)}
.gx-replay.is-static .gx-replay__stage{padding:12px;border:1px dashed var(--line-strong);border-radius:var(--radius)}
.rp-rm{margin:0 0 10px;color:var(--text-dim)}
.gx-replay.is-failed .gx-replay__stage{display:none}
.rp{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;--rp-bg:#05060f;--rp-fg:#fff;--rp-ac:#00f0a8;--rp-panel:#10133a;--rp-line:rgba(255,255,255,.14);--rp-font:"Oxanium","Barlow Condensed",sans-serif}
.rp-main{display:grid;gap:8px;min-width:0}
.rp-screen{position:relative;aspect-ratio:16/9;background:var(--rp-bg);border-radius:var(--radius);overflow:hidden;isolation:isolate}
.rp-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.rp-bug{position:absolute;left:10px;top:10px;display:flex;align-items:stretch;font:700 clamp(.72rem,1.8vw,.95rem)/1 var(--rp-font);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.4);z-index:2}
.rp-bug>span{display:flex;align-items:center;padding:6px 8px}
.rp-bug__t{background:var(--tc);color:var(--tf);min-width:2.8em;justify-content:center;letter-spacing:.04em}
.rp-bug__s{background:#0b0d1c;padding:6px 10px!important;font-variant-numeric:tabular-nums}
.rp-bug__c{background:var(--rp-ac);color:#03140d;font-variant-numeric:tabular-nums}
.rp-tag{position:absolute;right:8px;top:8px;z-index:2;font:600 .62rem var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.5);padding:3px 6px;border-radius:3px}
.rp-ticker{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;padding:6px 10px;background:rgba(5,6,15,.78);color:#fff;font:600 clamp(.72rem,1.7vw,.9rem)/1.3 var(--f-body);border-left:4px solid var(--rp-ac);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;pointer-events:none}
.rp-ticker.on{opacity:1;transform:none}
.rp-start{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:0;background:radial-gradient(circle,rgba(0,0,0,.25),rgba(0,0,0,.6));color:#fff;font:800 italic clamp(1.1rem,3vw,1.6rem) var(--f-display);text-transform:uppercase;cursor:pointer}
.rp-start__i{display:grid;place-items:center;width:clamp(56px,10vw,84px);height:clamp(56px,10vw,84px);border-radius:50%;background:var(--rp-ac);color:#03140d;font-size:1.8rem;font-style:normal;box-shadow:0 0 30px color-mix(in srgb,var(--rp-ac) 70%,transparent)}
.gx-replay.is-playing .rp-start,.gx-replay.is-paused .rp-start{display:none}
.rp-splash{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;pointer-events:none;opacity:0;color:#fff;text-align:center}
.rp-splash.on{opacity:1}
.rp-splash__band{position:absolute;left:-10%;right:-10%;top:32%;height:36%;background:linear-gradient(90deg,transparent,var(--tc,#111) 18%,var(--tc,#111) 82%,transparent);transform:skewY(-6deg) scaleX(0);opacity:.92}
.rp-splash.on .rp-splash__band{animation:rp-band .45s cubic-bezier(.2,.9,.3,1.2) forwards}
.rp-splash__big{position:relative;font:800 italic clamp(2.4rem,10vw,6rem)/.9 "Barlow Condensed",Impact,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--tf,#fff);text-shadow:0 4px 0 rgba(0,0,0,.35),0 0 30px rgba(255,255,255,.35)}
.rp-splash.on .rp-splash__big{animation:rp-pop .5s cubic-bezier(.2,1.4,.4,1) both}
.rp-splash__who,.rp-splash__sc{position:relative;font:700 clamp(.85rem,2.6vw,1.3rem) var(--rp-font);text-transform:uppercase;letter-spacing:.08em;color:var(--tf,#fff)}
.rp-splash__sc{font-size:clamp(.75rem,2vw,1rem);opacity:.9}
.rp-splash--small .rp-splash__big{font-size:clamp(1.6rem,6vw,3rem)}
.rp-splash--small .rp-splash__band{height:22%;top:39%}
@keyframes rp-band{to{transform:skewY(-6deg) scaleX(1)}}
@keyframes rp-pop{from{transform:scale(2.4) skewX(-10deg);opacity:0}to{transform:none;opacity:1}}
.rp-tthead{display:none}
.rp-comm{display:none;padding:10px 12px;font:600 .95rem/1.35 var(--f-body);min-height:2.9em}
.rp-graph{display:none;width:100%;height:150px;border-radius:var(--radius)}
.rp-gnote{display:none;margin:0;font-size:.78rem;color:var(--text-dim)}
.rp-ctrl{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rp-btn{min-width:44px;min-height:40px;padding:4px 10px;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text);font:700 .9rem var(--f-ui);border-radius:var(--radius);cursor:pointer}
.rp-btn[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.rp-btn:hover{border-color:var(--accent)}
.rp-scrub{position:relative;flex:1 1 160px;min-width:140px;height:40px;display:flex;align-items:center}
.rp-range{width:100%;accent-color:var(--accent);position:relative;z-index:1;background:transparent;margin:0}
.rp-marks{position:absolute;left:8px;right:8px;top:4px;height:8px;pointer-events:none}
.rp-mark{position:absolute;top:0;width:4px;height:8px;margin-left:-2px;border-radius:1px;background:var(--text-dim)}
.rp-mark--goal,.rp-mark--pen_goal,.rp-mark--og{width:9px;height:9px;margin-left:-4px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--accent)}
.rp-mark--yellow{background:#f2c94c}.rp-mark--red{background:#e8574a}.rp-mark--sub{background:var(--accent-2);height:5px;top:2px}.rp-mark--ht{background:var(--text);width:2px;height:14px;top:-3px}
.rp-time{font:700 .95rem var(--f-num);min-width:3.2em;text-align:right;color:var(--text)}
.rp-side{display:none}
.rp-stats{width:100%;border-collapse:collapse;font-size:.88rem}
.rp-stats td{width:22%;text-align:center;font-family:var(--f-num);padding:3px 4px}
.rp-stats th{font:600 .76rem var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);padding:3px 4px}
.rp-stats tr{border-bottom:1px solid var(--line)}
.rp-side__h{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;font-family:var(--f-ui)}
.rp-side__sc{font:800 1.3rem var(--f-num)}
.rp-poss,.rp-foot{font-size:.75rem;color:var(--text-dim);margin:6px 0 0}
.rp-log{list-style:none;margin:8px 0 0;padding:0;max-height:240px;overflow:auto;font-size:.85rem}
.rp-log__i{display:grid;grid-template-columns:42px 1fr;gap:6px;padding:4px 6px;border-bottom:1px solid var(--line)}
.rp-log__i time{font-family:var(--f-num);color:var(--text-dim)}
.rp-log--goal,.rp-log--pen_goal,.rp-log--og{font-weight:700}

/* broadcast skin */
[data-variant-active="broadcast"] .rp{--rp-bg:#a8c1de;--rp-ac:#0052cc;--rp-font:"Rajdhani","Barlow",sans-serif}
[data-variant-active="broadcast"] .rp-bug{border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 6px 18px rgba(0,30,90,.3)}
[data-variant-active="broadcast"] .rp-bug__s{background:#fff;color:#0a1d40}
[data-variant-active="broadcast"] .rp-bug__c{background:#003d99;color:#fff}
[data-variant-active="broadcast"] .rp-ticker{background:#fff;color:#0a1d40;border-left-color:#0052cc;border-radius:8px;box-shadow:0 6px 18px rgba(0,30,90,.25)}
[data-variant-active="broadcast"] .rp-splash__band{top:auto;bottom:12%;height:26%;transform:scaleX(0);left:6%;right:6%;border-radius:14px;background:linear-gradient(90deg,#003d99,var(--tc) 60%);opacity:1}
[data-variant-active="broadcast"] .rp-splash.on .rp-splash__band{animation:rp-band2 .4s ease-out forwards}
[data-variant-active="broadcast"] .rp-splash{justify-content:flex-end;padding-bottom:13%}
[data-variant-active="broadcast"] .rp-splash__big{font:700 clamp(2rem,7vw,4rem)/.9 "Rajdhani",sans-serif;color:#fff;text-shadow:none}
[data-variant-active="broadcast"] .rp-splash__who,[data-variant-active="broadcast"] .rp-splash__sc{color:#fff}
@keyframes rp-band2{to{transform:scaleX(1)}}
[data-variant-active="broadcast"] .rp-start__i{color:#fff}

/* manager variants share the side panel */
[data-variant-active="classic2d"] .rp,[data-variant-active="datadesk"] .rp,[data-variant-active="retrotext"] .rp{grid-template-columns:minmax(0,1fr) 240px}
[data-variant-active="classic2d"] .rp-side,[data-variant-active="datadesk"] .rp-side,[data-variant-active="retrotext"] .rp-side{display:block;background:#25282e;color:#e9eaed;border:1px solid rgba(255,255,255,.12);border-radius:3px;padding:8px;font-family:"Barlow",sans-serif;--text-dim:#a9aeb8;--text:#e9eaed;--line:rgba(255,255,255,.08)}
[data-variant-active="classic2d"] .rp-screen,[data-variant-active="datadesk"] .rp-screen{aspect-ratio:105/68;border-radius:2px}
[data-variant-active="classic2d"] .rp-tag,[data-variant-active="datadesk"] .rp-tag,[data-variant-active="retrotext"] .rp-tag{top:auto;bottom:6px}
/* (a) Classic 2D */
[data-variant-active="classic2d"] .rp{--rp-ac:#4cbb67;--rp-font:"Barlow","Rajdhani",sans-serif}
[data-variant-active="classic2d"] .rp-bug{left:6px;top:6px;box-shadow:none;border:1px solid rgba(255,255,255,.3)}
[data-variant-active="classic2d"] .rp-bug__s{background:#2d3037}
[data-variant-active="classic2d"] .rp-bug__c{background:#383c45;color:#e9eaed}
[data-variant-active="classic2d"] .rp-ticker{display:none}
[data-variant-active="classic2d"] .rp-comm{display:block;background:#2d3037;color:#f2f2f2;border:1px solid rgba(255,255,255,.12);border-left:4px solid #4cbb67;border-radius:2px}
[data-variant-active="classic2d"] .rp-splash__band{background:#2d3037;opacity:.95;transform:none;top:40%;height:20%;left:0;right:0}
[data-variant-active="classic2d"] .rp-splash.on .rp-splash__band{animation:none}
[data-variant-active="classic2d"] .rp-splash__big{font:700 clamp(1.4rem,5vw,2.6rem) "Barlow Condensed",sans-serif;font-style:normal;text-shadow:none;color:#fff;animation:none!important}
[data-variant-active="classic2d"] .rp-splash__sc{display:none}
[data-variant-active="classic2d"] .rp-start__i,[data-variant-active="datadesk"] .rp-start__i{border-radius:4px}
/* (b) Retro Text */
[data-variant-active="retrotext"] .rp{--rp-bg:#1b3552;--rp-ac:#c8d4e3;--rp-font:"Rajdhani",monospace}
[data-variant-active="retrotext"] .rp-main{background:#2b4c74;border:2px solid #9fb3cc;padding:8px;border-radius:2px;grid-template-areas:"comm" "screen" "ctrl"}
[data-variant-active="retrotext"] .rp-screen{grid-area:screen;aspect-ratio:105/68;max-width:220px;justify-self:end;border:1px solid #9fb3cc;border-radius:0}
[data-variant-active="retrotext"] .rp-comm{grid-area:comm;display:flex;align-items:center;justify-content:center;text-align:center;min-height:6.5em;background:#d9e2ec;color:#10243d;font:700 clamp(1.05rem,2.6vw,1.45rem)/1.3 "Rajdhani",sans-serif;border:2px inset #9fb3cc;padding:14px}
[data-variant-active="retrotext"] .rp-ctrl{grid-area:ctrl}
[data-variant-active="retrotext"] .rp-bug,[data-variant-active="retrotext"] .rp-ticker,[data-variant-active="retrotext"] .rp-splash,[data-variant-active="retrotext"] .rp-tag{display:none}
[data-variant-active="retrotext"] .rp-start{font-size:.8rem}[data-variant-active="retrotext"] .rp-start__i{width:40px;height:40px;font-size:1rem;border-radius:2px;background:#d9e2ec}
[data-variant-active="retrotext"] .rp-side{background:#2b4c74;border:2px solid #9fb3cc;color:#eef3f8;--text-dim:#c8d4e3;--line:rgba(255,255,255,.15)}
[data-variant-active="retrotext"] .rp-btn{background:#c8d4e3;color:#10243d;border:2px outset #e8eef5;border-radius:0}
[data-variant-active="retrotext"] .rp-btn[aria-pressed=true]{border-style:inset;background:#9fb3cc}
[data-variant-active="retrotext"] .rp-time{color:#fff}
/* (c) Data Desk */
[data-variant-active="datadesk"] .rp{--rp-bg:#17191d;--rp-ac:#79b8ff}
[data-variant-active="datadesk"] .rp-graph,[data-variant-active="datadesk"] .rp-gnote{display:block}
[data-variant-active="datadesk"] .rp-ticker{background:#25282e;border-left-color:#79b8ff;font-size:.8rem}
[data-variant-active="datadesk"] .rp-bug{box-shadow:none;font-size:.78rem}
[data-variant-active="datadesk"] .rp-bug__s{background:#25282e}[data-variant-active="datadesk"] .rp-bug__c{background:#79b8ff}
[data-variant-active="datadesk"] .rp-splash__band{opacity:.75;height:24%;top:38%}
[data-variant-active="datadesk"] .rp-splash__big{font-size:clamp(1.6rem,6vw,3.2rem)}
/* (d) Teletext */
[data-variant-active="teletext"] .rp{--rp-bg:#000;--rp-ac:#ffff00;--rp-font:ui-monospace,"Courier New",monospace}
[data-variant-active="teletext"] .rp-main{background:#000;padding:8px;border-radius:0;font-family:ui-monospace,"Courier New",monospace}
[data-variant-active="teletext"] .rp-screen{aspect-ratio:4/3;border-radius:0;max-height:70vh}
[data-variant-active="teletext"] .rp-canvas{image-rendering:pixelated;top:12%;height:88%}
[data-variant-active="teletext"] .rp-tthead{display:block;position:absolute;left:0;right:0;top:0;height:12%;z-index:2;background:#000;color:#fff;font:700 clamp(.7rem,2.2vw,1.05rem)/1 ui-monospace,"Courier New",monospace;padding:2% 2%;white-space:pre;overflow:hidden}
[data-variant-active="teletext"] .rp-bug,[data-variant-active="teletext"] .rp-ticker,[data-variant-active="teletext"] .rp-tag{display:none}
[data-variant-active="teletext"] .rp-comm{display:block;background:#000;color:#00ffff;font:700 clamp(.85rem,2.4vw,1.05rem)/1.35 ui-monospace,"Courier New",monospace;border-top:2px solid #0000ff}
[data-variant-active="teletext"] .rp-splash__band{background:#0000ff;transform:none;opacity:1;left:8%;right:8%;top:38%;height:24%;animation:none!important}
[data-variant-active="teletext"] .rp-splash__big{font:700 clamp(1.8rem,7vw,3.4rem) ui-monospace,"Courier New",monospace;color:#ffff00;text-shadow:none;transform:scaleY(1.6);animation:none!important}
[data-variant-active="teletext"] .rp-splash__who,[data-variant-active="teletext"] .rp-splash__sc{color:#fff;font-family:ui-monospace,monospace}
[data-variant-active="teletext"] .rp-splash.on .rp-splash__big{animation:rp-blink 1s steps(2) infinite!important}
@keyframes rp-blink{50%{opacity:.2}}
[data-variant-active="teletext"] .rp-btn{background:#000;color:#00ff00;border:1px solid #00ff00;border-radius:0;font-family:ui-monospace,monospace}
[data-variant-active="teletext"] .rp-btn[aria-pressed=true]{background:#00ff00;color:#000}
[data-variant-active="teletext"] .rp-time{color:#ffff00;font-family:ui-monospace,monospace}
[data-variant-active="teletext"] .rp-start{background:rgba(0,0,0,.7);font-family:ui-monospace,monospace;font-style:normal;color:#ffff00}
[data-variant-active="teletext"] .rp-start__i{border-radius:0;background:#ff00ff;box-shadow:none}
@media (max-width:900px){
  .gx-replay-grid{grid-template-columns:minmax(0,1fr)}
  [data-variant-active="classic2d"] .rp,[data-variant-active="datadesk"] .rp,[data-variant-active="retrotext"] .rp{grid-template-columns:minmax(0,1fr)}
  .rp-log{max-height:160px}
}
@media (max-width:640px){
  .rp-bug{left:6px;top:6px}.rp-bug>span{padding:4px 5px}
  .rp-tag{display:none}
  [data-variant-active="retrotext"] .rp-screen{max-width:150px}
}
@media (prefers-reduced-motion:reduce){ .rp-splash.on .rp-splash__band,.rp-splash.on .rp-splash__big{animation:none!important;transform:none} .rp-ticker{transition:none} }

/* ===== FM-style 2D highlights (classic2d) — the main Highlights experience =====
   Original design: grey/dark-blue data panels, striped top-down pitch, kit-coloured numbered dots. */
.rp-fmbar,.rp-strip{display:none}
[data-variant-active="classic2d"] .rp{grid-template-columns:minmax(0,1fr)!important;gap:0;background:#1d2633;border:1px solid #3a4658;border-radius:3px;padding:6px;
  --fm-panel:#26303f;--fm-panel2:#2f3b4d;--fm-line:#45536a;--fm-text:#eef1f5;--fm-dim:#aab4c3;--fm-ac:#6fcf5a;
  font-family:Tahoma,Verdana,"Segoe UI",Geneva,"DejaVu Sans",sans-serif;font-variant-numeric:tabular-nums}
[data-variant-active="classic2d"] .rp-side,[data-variant-active="classic2d"] .rp-bug,[data-variant-active="classic2d"] .rp-tag{display:none!important}
[data-variant-active="classic2d"] .rp-fmbar{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:stretch;gap:1px;background:var(--fm-line);border:1px solid var(--fm-line);margin-bottom:4px;font-size:13px;font-weight:700;color:var(--fm-text)}
.rp-fmbar>span{background:linear-gradient(#34425a,#26303f);padding:5px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rp-fmbar__t--h{text-align:right;box-shadow:inset -4px 0 0 var(--tc)}
.rp-fmbar__t--a{box-shadow:inset 4px 0 0 var(--tc)}
.rp-fmbar__s{background:#11171f!important;font-size:15px;min-width:64px;text-align:center;letter-spacing:.04em}
.rp-fmbar__c{background:#3b4a63!important;color:#ffe680;min-width:52px;text-align:center}
[data-variant-active="classic2d"] .rp-screen{border:1px solid #11171f;border-radius:0;box-shadow:none}
[data-variant-active="classic2d"] .rp-comm{display:block;margin:4px 0 0;padding:5px 8px;min-height:2.2em;background:#11171f;color:#f4f6f8;border:1px solid var(--fm-line);border-left:3px solid var(--fm-ac);border-radius:0;font:700 13px/1.45 Tahoma,Verdana,"Segoe UI",Geneva,"DejaVu Sans",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-variant-active="classic2d"] .rp-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;background:var(--fm-line);border:1px solid var(--fm-line);margin-top:4px;font-size:12px;color:var(--fm-text)}
.rp-strip__c{display:grid;grid-template-columns:2.6em 1fr 2.6em;align-items:center;background:var(--fm-panel);padding:3px 6px}
.rp-strip__c:nth-child(even){background:var(--fm-panel2)}
.rp-strip__c small{text-align:center;color:var(--fm-dim);font-size:11px}
.rp-strip__c b:last-child{text-align:right}
[data-variant-active="classic2d"] .rp-ctrl{margin-top:4px;background:var(--fm-panel);border:1px solid var(--fm-line);padding:4px;gap:4px;border-radius:0}
[data-variant-active="classic2d"] .rp-btn,.gx-kmf .rp-btn{font:700 12px Tahoma,Verdana,"Segoe UI",Geneva,"DejaVu Sans",sans-serif;background:linear-gradient(#45536a,#34425a);color:#eef1f5;border:1px solid #11171f;border-radius:2px;min-height:30px;padding:3px 10px;clip-path:none;box-shadow:none;text-transform:none}
[data-variant-active="classic2d"] .rp-btn[aria-pressed="true"],.gx-kmf .rp-btn[aria-pressed="true"]{background:linear-gradient(#6fcf5a,#4fa83e);color:#0b1a08}
[data-variant-active="classic2d"] .rp-time{color:#ffe680;font-size:12px}
[data-variant-active="classic2d"] .rp-splash__band{background:#11171f;border-top:2px solid var(--fm-ac);border-bottom:2px solid var(--fm-ac)}
[data-variant-active="classic2d"] .rp-splash__big{font:700 clamp(1.2rem,4.4vw,2rem) Tahoma,Verdana,"Segoe UI",Geneva,"DejaVu Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase}
[data-variant-active="classic2d"] .rp-splash__sub{font:700 13px Tahoma,Verdana,sans-serif}
/* key-moments list styled as an FM data table */
.gx-kmf{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0 4px}
[data-variant-active="classic2d"] .gx-moments{border:1px solid var(--line);gap:0;font-size:13px}
[data-variant-active="classic2d"] .gx-km{border-radius:0;border:0;border-bottom:1px solid var(--line);padding:5px 8px;margin:0}
[data-variant-active="classic2d"] .gx-km:nth-child(even){background:color-mix(in srgb,var(--text) 5%,transparent)}
.gx-km__big{font-style:normal;font-size:.8em;color:var(--text-dim);margin-left:4px}
.gx-replay__mh{font-size:14px;margin:14px 0 0;text-transform:uppercase;letter-spacing:.04em}
/* official highlights: secondary button below the 2D replay */
.gx-yt{margin:12px 0 0}
.gx-yt>summary{list-style:none;display:inline-flex;cursor:pointer}
.gx-yt>summary::-webkit-details-marker{display:none}
.gx-yt[open]>summary{margin-bottom:10px}
.gx-yt .video{position:relative;aspect-ratio:16/9;background:#000}
.gx-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.gx-replay-grid{grid-template-columns:minmax(0,1fr)!important}
/* 2D highlight cards (home + /highlights/) */
.gx-hlr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:0 0 10px}
.gx-hlr{display:grid;gap:4px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);text-decoration:none;font-variant-numeric:tabular-nums}
.gx-hlr:hover,.gx-hlr:focus-visible{border-color:var(--accent)}
.gx-hlr__pitch{position:relative;display:block;aspect-ratio:105/68;background:repeating-linear-gradient(90deg,#3b8a35 0 10%,#44963d 10% 20%);border:1px solid #11171f;overflow:hidden}
.gx-hlr__pitch::before{content:"";position:absolute;inset:6%;border:1px solid rgba(255,255,255,.8);background:linear-gradient(90deg,transparent calc(50% - .5px),rgba(255,255,255,.8) calc(50% - .5px) calc(50% + .5px),transparent 0)}
.gx-hlr__pitch::after{content:"";position:absolute;left:50%;top:50%;width:18%;aspect-ratio:1;border:1px solid rgba(255,255,255,.8);border-radius:50%;transform:translate(-50%,-50%)}
.gx-hlr__pitch i{position:absolute;inset:0;z-index:1;background:
  radial-gradient(circle at 30% 30%,var(--home) 0 3.2%,transparent 3.6%),radial-gradient(circle at 34% 62%,var(--home) 0 3.2%,transparent 3.6%),radial-gradient(circle at 44% 45%,var(--home) 0 3.2%,transparent 3.6%),radial-gradient(circle at 18% 50%,var(--home) 0 3.2%,transparent 3.6%),
  radial-gradient(circle at 62% 38%,var(--away) 0 3.2%,transparent 3.6%),radial-gradient(circle at 66% 70%,var(--away) 0 3.2%,transparent 3.6%),radial-gradient(circle at 57% 55%,var(--away) 0 3.2%,transparent 3.6%),radial-gradient(circle at 82% 50%,var(--away) 0 3.2%,transparent 3.6%),
  radial-gradient(circle at 52% 47%,#fff 0 1.6%,transparent 2%)}
.gx-hlr__sc{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center;font-weight:700;font-size:14px}
.gx-hlr__sc b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gx-hlr__sc b:last-child{text-align:right}
.gx-hlr__sc em{font-style:normal;background:#11171f;color:#fff;padding:1px 8px;border-radius:2px}
.gx-hlr small{color:var(--text-dim);font-size:12px}
.gx-hlr__cta{font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}
.gx-home-hero{padding:34px 0 8px}
@media (max-width:560px){
  [data-variant-active="classic2d"] .rp{padding:3px}
  [data-variant-active="classic2d"] .rp-fmbar{font-size:12px}
  .rp-fmbar>span{padding:4px 5px}
  .rp-fmbar__s{min-width:50px;font-size:14px}
  .rp-fmbar__c{min-width:40px}
  [data-variant-active="classic2d"] .rp-comm{white-space:normal;font-size:13px;min-height:3.1em}
  [data-variant-active="classic2d"] .rp-strip{grid-template-columns:1fr 1fr}
  .gx-hlr-grid{grid-template-columns:1fr 1fr;gap:8px}
  .gx-hlr__sc{font-size:12px}
}

/* ===== Type system: FM07-style (default, flag `type_fm07` in features.json; off = Oxanium/Rajdhani/Barlow above) =====
   Plain Windows-UI system sans, small and dense, bold modest headings, tabular numbers. System fonts only: nothing to self-host. */
html:has(> body[data-type="fm07"]){font-size:13px}
body[data-type="fm07"]{
  --f-sys:Tahoma,Verdana,"Segoe UI",Geneva,"DejaVu Sans",sans-serif;
  --f-display:var(--f-sys); --f-ui:var(--f-sys); --f-num:var(--f-sys); --f-body:var(--f-sys); --f-title:var(--f-sys); --f-accent:var(--f-sys);
  --w-display:700; --s-display:normal; --track-ui:.02em; --rp-font:var(--f-sys);
  font-family:var(--f-sys);font-size:13px;line-height:1.45;font-variant-numeric:tabular-nums;letter-spacing:0;-webkit-font-smoothing:auto}
body[data-type="fm07"] :is(h1,h2,h3,h4){font-family:var(--f-sys);font-weight:700;font-style:normal;letter-spacing:0;line-height:1.2;text-shadow:none}
body[data-type="fm07"] h1{font-size:1.85rem!important;text-transform:none}
body[data-type="fm07"] h2{font-size:1.38rem!important;text-transform:none}
body[data-type="fm07"] h3{font-size:1.08rem!important;text-transform:uppercase;letter-spacing:.02em}
body[data-type="fm07"] .eyebrow,body[data-type="fm07"] .kicker,body[data-type="fm07"] .comp-h,body[data-type="fm07"] .day-h{font-family:var(--f-sys);font-style:normal;font-size:.9rem;letter-spacing:.04em}
body[data-type="fm07"] .lead{font-size:1.08rem;line-height:1.5}
body[data-type="fm07"] .brand{font-family:var(--f-sys);font-style:normal;letter-spacing:0}
@media (min-width:641px){body[data-type="fm07"] .brand{font-size:1.15rem}}
body[data-type="fm07"] :is(.btn,.gx-btn,.chip,.gx-tabs button,nav a,.menu-btn,.gx-theme button){font-family:var(--f-sys);font-style:normal;font-size:.95rem;letter-spacing:.01em}
body[data-type="fm07"] :is(.sc,.num,.mini,.r99,.r20,.pbar,time,.gx-score,.score,.rp-time){font-family:var(--f-sys);font-variant-numeric:tabular-nums;font-style:normal}
body[data-type="fm07"] :is(.gx-vs h1,.gx-vs .sc,.gx-prematch h1){font-size:1.6rem!important}
/* FM-style data tables: tight rows, 1px borders, alternating shading */
body[data-type="fm07"] table{border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
body[data-type="fm07"] table :is(th,td){padding:3px 7px;border:1px solid var(--line-strong,var(--line));line-height:1.35}
body[data-type="fm07"] table thead th{font-family:var(--f-sys);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;background:var(--surface-3,var(--surface))}
body[data-type="fm07"] table tbody tr:nth-child(even){background:color-mix(in srgb,var(--text) 6%,transparent)}
body[data-type="fm07"] .mrow{padding-top:5px;padding-bottom:5px;font-size:13px;border-bottom:1px solid var(--line)}
body[data-type="fm07"] .mrow:nth-of-type(even){background:color-mix(in srgb,var(--text) 4%,transparent)}
@media (max-width:640px){
  html:has(> body[data-type="fm07"]){font-size:14px}
  body[data-type="fm07"]{font-size:14px}
  body[data-type="fm07"] h1{font-size:1.6rem!important}
  body[data-type="fm07"] h2{font-size:1.25rem!important}
  body[data-type="fm07"] table{font-size:13px}
}

/* match rows: long names never run into the status/score columns */
.mrow .tm{min-width:0}
.mrow .nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}   /* QA Nov 1: one line, full name in title */
@media (max-width:640px){.mrow .nm{font-size:13px}}
@media (max-width:480px){.mrow .crest{display:none}}
/* broadcast: scorer list sits on the blue VS panel, keep it readable */
[data-theme="broadcast"] .gx-prematch ul.events,[data-theme="broadcast"] .gx-prematch ul.events li,[data-theme="broadcast"] .gx-prematch .meta{color:#f3f7ff;opacity:1}

/* readability pass for the FM07 type system (WCAG AA on small labels) */
.fm{color:#0b0f14} .b-d{color:#0b0f14}
body[data-type="fm07"] :is(.fm,.gx-card__pos,.gx-km__big,.gx-vs__tag){font-size:11px}
body[data-type="fm07"] .crest{font-size:8px}
[data-theme="manager"] [data-band] :is(.r20,.r99),[data-theme="manager"] [data-band]:is(.r20,.r99){color:#111}
[data-theme="broadcast"] .fm,[data-theme="broadcast"] .b-d{color:#fff}
[data-theme="broadcast"] .fm.W{background:#087a46} [data-theme="broadcast"] .fm.D,[data-theme="broadcast"] .b-d{background:#5d6b84}

/* Featured creators (Expert Corner) — match-page sidebar, all three themes via tokens */
.gx-experts h3{margin:2px 0 10px}
.gx-xp{border:1px solid var(--line);background:var(--surface-2,var(--surface));border-radius:var(--radius);padding:10px;margin:0 0 10px}
.gx-xp__h{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
.gx-xp__h b{display:block;font-size:14px} .gx-xp__h small{display:block;color:var(--text-dim);font-size:12px}
.gx-xp__av{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:13px;letter-spacing:.02em}
.gx-xp__k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-2);border:1px solid var(--line-strong,var(--line));padding:2px 6px;border-radius:2px}
.gx-xp__pill{display:inline-block;margin:8px 0 0;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--text)}
.gx-xp__v{margin:8px 0 0}
.gx-xp__v>summary{list-style:none;display:inline-flex;cursor:pointer} .gx-xp__v>summary::-webkit-details-marker{display:none}
.gx-xp__v .video{position:relative;aspect-ratio:16/9;background:#000;margin-top:8px} .gx-xp__v iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.gx-xp__t{font-size:13px;margin:8px 0 4px;color:var(--text)}
.gx-xp__sum{font-size:13px;margin:0 0 6px;color:var(--text)} .gx-xp__sum span{color:var(--text-dim);font-weight:700}
.gx-xp__l{font-size:12.5px;margin:0} .gx-xp__l a{color:var(--accent-2)}
[data-theme="arcade"] .gx-xp{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
[data-theme="broadcast"] .gx-xp__h{border-bottom:3px solid var(--accent);padding-bottom:6px}
[data-theme="manager"] .gx-xp{border-radius:2px} [data-theme="manager"] .gx-xp__av{border-radius:2px}
.mgrid .col>*{min-width:0;max-width:100%}
.gx-experts{overflow-wrap:anywhere}
.gx-xp__h>div{min-width:0}
@media (max-width:480px){
  .mrow,[data-theme="manager"] .mrow{grid-template-columns:44px minmax(0,1fr) 44px minmax(0,1fr);gap:4px;padding:8px 8px}
  .mrow .st{font-size:11px;line-height:1.2}
  .mrow .nm{overflow-wrap:break-word;hyphens:manual}
  .mrow .tm{gap:3px}
}
@media (max-width:480px){
  .mrow .pwa-star{min-width:24px;width:24px;min-height:24px;padding:0;margin:0;display:inline-grid;place-items:center;flex:none}
  .mrow .nm{font-size:12px;letter-spacing:-.02em}
}

/* ---- language picker (header, next to the style switcher) + Accept-Language suggestion bar ---- */
.gx-lang{position:relative}
.gx-lang>summary{list-style:none;display:flex;align-items:center;gap:4px;min-height:34px;min-width:34px;padding:4px 8px;border:1px solid rgba(255,255,255,.22);border-radius:calc(var(--radius) + 4px);background:rgba(0,0,0,.25);color:var(--hdr-text);font:600 .82rem var(--f-ui);letter-spacing:.06em;cursor:pointer;white-space:nowrap}
.gx-lang>summary::-webkit-details-marker{display:none}
.gx-lang>summary:hover{background:rgba(255,255,255,.1)}
.gx-lang>summary:focus-visible{outline:2px solid var(--hdr-accent);outline-offset:2px}
.nav .gx-lang ul,.gx-lang ul{display:block;order:0;left:auto;bottom:auto;flex-direction:column;position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:150px;margin:0;padding:6px;list-style:none;background:var(--surface,#111);color:var(--text,#fff);border:1px solid var(--line,rgba(255,255,255,.2));border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.nav .gx-lang li a,.gx-lang li a{display:block;padding:8px 10px;border-radius:var(--radius);color:inherit;text-decoration:none;font:500 .92rem var(--f-ui)}
.gx-lang li a:hover,.gx-lang li a:focus-visible{background:rgba(127,127,127,.18)}
.gx-lang li a[aria-current]{font-weight:700;box-shadow:inset 3px 0 0 var(--accent,var(--hdr-accent))}
.gx-langbar{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 14px;background:var(--surface,#111);color:var(--text,#fff);border-bottom:1px solid var(--line,rgba(255,255,255,.2));font:500 .92rem var(--f-ui)}
.gx-langbar a{color:inherit;font-weight:700}
.gx-langbar__x{min-width:32px;min-height:32px;border:0;border-radius:var(--radius);background:transparent;color:inherit;cursor:pointer;font-size:1rem}
@media (max-width:480px){.gx-lang>summary{padding:4px 6px}}
/* longer labels (de/fr/pt) in the key-numbers table must wrap, not widen the page */
table.cmp tbody th{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
@media (max-width:480px){table.cmp td{width:28%}}

/* screen-reader-only text (QA Nov 1) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* QA Nov 1: keep the footer clear of the bottom-right Netlify badge on phones */
@media (max-width:820px){.site-footer{padding-bottom:88px}}