/* =====================================================
   FANTASY PREMIER SOCCER LEAGUE — DESIGN SYSTEM v2
   Refined, subtle palette. Consistent sentence colours.
   Smart ad zones. Betway sponsorship. Clean alignment.
   ===================================================== */

:root {
  --bg-base:      #0C0F14;
  --bg-surface:   #121720;
  --bg-card:      #18202C;
  --bg-card-hover:#1D2638;
  --bg-input:     #0F1520;

  --red:          #B91C3A;
  --red-soft:     #D4274F;
  --red-muted:    rgba(185,28,58,0.15);
  --red-border:   rgba(185,28,58,0.25);

  --gold:         #C9963A;
  --gold-soft:    #DBA94A;
  --gold-muted:   rgba(201,150,58,0.12);
  --gold-border:  rgba(201,150,58,0.22);

  --green:        #1A6B42;
  --green-soft:   #22895A;
  --green-muted:  rgba(26,107,66,0.12);
  --green-border: rgba(26,107,66,0.22);

  --betway:       #00A551;
  --betway-dark:  #007A3D;
  --betway-muted: rgba(0,165,81,0.1);
  --betway-border:rgba(0,165,81,0.22);

  --text-primary:   #E8EDF4;
  --text-secondary: #8A97A8;
  --text-muted:     rgba(255,255,255,.72);
  --text-faint:     #2D3748;

  --border:       rgba(232,237,244,0.06);
  --border-soft:  rgba(232,237,244,0.10);
  --border-bright:rgba(232,237,244,0.14);

  --heading-primary:   #E8EDF4;
  --heading-accent:    #C9963A;
  --heading-section:   #E8EDF4;
  --eyebrow-color:     #B91C3A;
  --stat-highlight:    #C9963A;

  --font-display: 'Montserrat Alternates', sans-serif;
  --font-ui:      'Rajdhani', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  --radius:   4px;
  --radius-lg:8px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg-base);
  color:var(--text-primary);
  font-family:var(--font-body);
  overflow-x:hidden;
  line-height:1.5;
  padding-top:0;
}
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--bg-surface); }
::-webkit-scrollbar-thumb { background:var(--red); border-radius:2px; }

/* =====================================================
   SPONSOR RIBBON
   ===================================================== */
.sponsor-ribbon { display:none !important; }
.sponsor-ribbon-text {
  font-family:var(--font-ui);
  font-size:.65rem; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--text-muted);
}
.betway-badge {
  display:flex; align-items:center; gap:.5rem;
  background:var(--betway-muted); border:1px solid var(--betway-border);
  border-radius:100px; padding:.28rem .85rem .28rem .55rem;
  text-decoration:none; transition:background .2s;
}
.betway-badge:hover { background:rgba(0,165,81,.16); }
.betway-badge-dot { width:8px; height:8px; border-radius:50%; background:var(--betway); flex-shrink:0; }
.betway-badge-label {
  font-family:var(--font-ui); font-size:.72rem; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--betway);
}
.betway-badge-sub {
  font-family:var(--font-ui); font-size:.62rem; font-weight:500;
  letter-spacing:1px; text-transform:uppercase; color:rgba(0,165,81,.65);
}

/* =====================================================
   NAVIGATION
   ===================================================== */
.nav {
  display:none;
  position:fixed; top:0; left:0; right:0; z-index:9500;
  align-items:center; justify-content:space-between;
  padding:0 1rem; height:60px;
  background:rgba(10,13,18,.97);
  backdrop-filter:saturate(180%) blur(28px);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  border-bottom:1px solid rgba(255,255,255,.08);
  overflow:visible;
}
.nav-logo { display:flex; align-items:center; gap:14px; text-decoration:none; flex-shrink:0; }
.nav-logo img { height:38px; flex-shrink:0; filter:drop-shadow(0 0 10px rgba(185,28,58,.35)); }
.nav-wordmark { display:flex; flex-direction:column; align-items:flex-start; gap:1px; }
.nav-word-top { font-family:var(--font-ui); font-size:.62rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--text-secondary); line-height:1; white-space:nowrap; }
.nav-word-mid { font-family:var(--font-display); font-size:.95rem; font-weight:900; letter-spacing:.5px; color:var(--text-primary); line-height:1; white-space:nowrap; }
.nav-word-bot { font-family:var(--font-display); font-size:.95rem; font-weight:900; letter-spacing:.5px; color:var(--red-soft); line-height:1; white-space:nowrap; }
.nav-links { display:flex; align-items:center; gap:2rem; list-style:none; }
.nav-links a { font-family:var(--font-ui); font-size:.88rem; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; color:var(--text-secondary); transition:color .2s; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; right:0; height:1px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.nav-links a:hover { color:var(--text-primary); }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-right { display:flex; align-items:center; gap:.4rem; flex-shrink:0; overflow:visible; }
.btn-login { font-family:var(--font-ui); font-size:.82rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; color:var(--text-secondary); padding:.45rem 1rem; border:1px solid var(--border-soft); border-radius:var(--radius); transition:all .2s; }
.btn-login:hover { color:var(--text-primary); border-color:var(--border-bright); }
.btn-signup { font-family:var(--font-ui); font-size:.75rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#fff; padding:.4rem 1rem; background:var(--red); border-radius:var(--radius); transition:background .2s; border:none; cursor:pointer; white-space:nowrap; flex-shrink:0; display:inline-block; }
.btn-signup:hover { background:var(--red-soft); }

/* =====================================================
   TYPOGRAPHY
   ===================================================== */
.eyebrow { font-family:var(--font-ui); font-size:.72rem; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--eyebrow-color); margin-bottom:.9rem; display:block; }
.section-title { font-family:var(--font-display); font-weight:900; font-size:clamp(1.9rem,4vw,3rem); line-height:1.05; letter-spacing:-.3px; color:var(--heading-section); margin-bottom:2.5rem; }
.section-title.gold { color:var(--heading-accent); }
.hero-title { font-family:var(--font-display); font-weight:900; font-size:clamp(3rem,7.5vw,6.8rem); line-height:.96; letter-spacing:-1px; text-align:center; }
.hero-title .line-white { display:block; color:var(--text-primary); }
.hero-title .line-gold  { display:block; color:var(--gold-soft); }
.hero-title .line-ghost { display:block; color:transparent; -webkit-text-stroke:1px rgba(232,237,244,.12); }

/* =====================================================
   HERO
   ===================================================== */
.hero { min-height:calc(100vh - 100px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:5rem 2rem 3rem; text-align:center; position:relative; overflow:hidden; }
.hero-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.hero-glow { position:absolute; top:40%; left:50%; transform:translate(-50%,-50%); width:800px; height:400px; background:radial-gradient(ellipse, rgba(185,28,58,.05) 0%, transparent 65%); }
.hero-grid { position:absolute; inset:0; background-image:linear-gradient(var(--border) 1px, transparent 1px),linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent); }
.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; background:var(--red-muted); border:1px solid var(--red-border); border-radius:100px; padding:.32rem 1rem; font-family:var(--font-ui); font-size:.7rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--red-soft); margin-bottom:1.8rem; animation:fadeUp .5s ease both; }
.hero-eyebrow-pulse { width:5px; height:5px; border-radius:50%; background:var(--red-soft); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.5)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.hero h1 { margin-bottom:1.4rem; animation:fadeUp .5s .08s ease both; }
.hero-sub { max-width:500px; font-size:1rem; line-height:1.75; color:var(--text-secondary); margin:0 auto 2.2rem; animation:fadeUp .5s .16s ease both; }
.hero-cta-row { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; animation:fadeUp .5s .24s ease both; }
.btn-hero-primary { font-family:var(--font-ui); font-size:.92rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#fff; background:var(--red); padding:.9rem 2.2rem; border-radius:var(--radius); border:none; cursor:pointer; text-decoration:none; transition:background .2s, transform .15s; box-shadow:0 4px 20px rgba(185,28,58,.22); }
.btn-hero-primary:hover { background:var(--red-soft); transform:translateY(-2px); }
.btn-hero-outline { font-family:var(--font-ui); font-size:.92rem; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--text-secondary); padding:.9rem 1.8rem; border-radius:var(--radius); border:1px solid var(--border-soft); cursor:pointer; background:transparent; text-decoration:none; transition:all .2s; }
.btn-hero-outline:hover { color:var(--text-primary); border-color:var(--border-bright); }
.hero-stats { display:flex; margin-top:2rem; flex-wrap:nowrap; justify-content:center; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; animation:fadeUp .5s .32s ease both; width:100%; }
.hero-stat { padding:.6rem .3rem; background:var(--bg-card); border-right:1px solid var(--border); text-align:center; flex:1; min-width:0; overflow:hidden; }
.hero-stat:last-child { border-right:none; }
.hero-stat-num { font-family:var(--font-display); font-size:clamp(.72rem,2.4vw,1.3rem); font-weight:900; color:var(--stat-highlight); line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; max-width:100%; }
.hero-stat-label { font-family:var(--font-ui); font-size:.65rem; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); margin-top:4px; }

/* =====================================================
   PITCH PREVIEW (desktop landing only)
   ===================================================== */
.pitch-section { padding:2rem 2rem 4rem; display:flex; justify-content:center; }
.pitch-wrap { max-width:780px; width:100%; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 32px 64px rgba(0,0,0,.45); animation:fadeUp .6s .4s ease both; }
.pitch-bar { padding:.75rem 1.4rem; background:var(--bg-surface); border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.pitch-bar-gw { font-family:var(--font-ui); font-size:.72rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); }
.pitch-bar-gw span { color:var(--gold-soft); font-size:.9rem; margin-left:4px; }
.pitch-bar-pts { font-family:var(--font-ui); font-size:.72rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); }
.pitch-bar-pts span { color:var(--green-soft); font-size:.95rem; margin-left:4px; }
.pitch-green { background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0px,rgba(255,255,255,.012) 1px,transparent 1px,transparent 48px),linear-gradient(180deg,#0A3B1C,#0C4220 50%,#0A3B1C); padding:1.5rem .8rem; display:flex; flex-direction:column; gap:1.2rem; position:relative; }
.p-center-circle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80px; height:80px; border:1px solid rgba(255,255,255,.06); border-radius:50%; pointer-events:none; }
.p-halfway { position:absolute; top:50%; left:6%; right:6%; height:1px; background:rgba(255,255,255,.05); pointer-events:none; }
.p-box-top,.p-box-bot { position:absolute; left:50%; transform:translateX(-50%); width:160px; height:50px; border:1px solid rgba(255,255,255,.05); pointer-events:none; }
.p-box-top { top:0; border-top:none; }
.p-box-bot { bottom:0; border-bottom:none; }
.prow { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.3rem .5rem; position:relative; z-index:1; padding:.2rem .3rem; min-height:68px; }
.pc { display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; transition:transform .15s; min-width:62px; }
.pc:hover { transform:translateY(-4px); }
.pc-shirt { width:54px; height:54px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; border:2px solid rgba(255,255,255,.15); position:relative; transition:border-color .2s, box-shadow .2s; box-shadow:0 3px 10px rgba(0,0,0,.4); }
.pc:hover .pc-shirt { border-color:var(--gold-soft); box-shadow:0 4px 16px rgba(219,169,74,.3); }
.pc-shirt.s1 { background:linear-gradient(135deg,#1a3a6b,#2a5298); }
.pc-shirt.s2 { background:linear-gradient(135deg,#8b0000,#cc0000); }
.pc-shirt.s3 { background:linear-gradient(135deg,#1a5c1a,#267326); }
.pc-shirt.s4 { background:linear-gradient(135deg,#4a2882,#7b4fcf); }
.pc-shirt.s5 { background:linear-gradient(135deg,#8b6000,#c89200); }
.pc-shirt.s6 { background:linear-gradient(135deg,#004d5c,#007a8c); }
.cap-badge,.vc-badge { position:absolute; top:-4px; right:-4px; width:15px; height:15px; border-radius:50%; font-family:var(--font-display); font-size:.5rem; font-weight:900; display:flex; align-items:center; justify-content:center; }
.cap-badge { background:var(--gold); color:var(--bg-base); }
.vc-badge  { background:var(--text-primary); color:var(--bg-base); }
.pc-name { font-family:var(--font-ui); font-size:.62rem; font-weight:700; letter-spacing:.3px; background:rgba(0,0,0,.75); padding:2px 6px; border-radius:4px; white-space:nowrap; color:#fff; border:1px solid rgba(255,255,255,.1); max-width:62px; overflow:hidden; text-overflow:ellipsis; text-align:center; }
.pc-pts { font-family:var(--font-display); font-size:.68rem; font-weight:900; color:var(--gold-soft); text-align:center; background:rgba(0,0,0,.5); padding:1px 4px; border-radius:3px; }
.pitch-bench-row { background:var(--bg-surface); border-top:1px dashed var(--border); padding:.7rem .8rem; display:flex; justify-content:center; align-items:center; gap:1.8rem; }
.bench-tag { font-family:var(--font-ui); font-size:.6rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); }

/* =====================================================
   LIVE TICKER
   ===================================================== */
.ticker { background:var(--bg-surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:.6rem 0; overflow:hidden; position:relative; width:100%; max-width:100vw; contain:layout; }
.ticker::before,.ticker::after { content:''; position:absolute; top:0; bottom:0; width:60px; z-index:2; }
.ticker::before { left:0; background:linear-gradient(90deg,var(--bg-surface),transparent); }
.ticker::after  { right:0; background:linear-gradient(-90deg,var(--bg-surface),transparent); }
.ticker-track { display:flex; gap:2.5rem; width:max-content; flex-shrink:0; animation:tickerroll 45s linear infinite; will-change:transform; }
@keyframes tickerroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* Ensure ticker-track uses the right duration based on content width */
.ti { display:flex; align-items:center; gap:.55rem; white-space:nowrap; }
.ti-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.ti-dot.r { background:var(--red-soft); }
.ti-dot.g { background:var(--green-soft); }
.ti-dot.o { background:var(--gold-soft); }
.ti-label { font-family:var(--font-ui); font-size:.78rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--text-secondary); }
.ti-score { font-family:var(--font-ui); font-size:.78rem; font-weight:700; color:var(--text-primary); }

/* =====================================================
   HOW TO PLAY
   ===================================================== */
.section-wrap { padding:5.5rem 2rem; max-width:1100px; margin:0 auto; }
.how-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5px; }
.how-card { background:var(--bg-card); padding:2rem 1.6rem; border-top:2px solid transparent; transition:border-color .25s, background .25s; cursor:default; }
.how-card:hover { border-color:var(--red); background:var(--bg-card-hover); }
.how-num { font-family:var(--font-display); font-size:2.8rem; font-weight:900; color:var(--text-faint); line-height:1; margin-bottom:.6rem; transition:color .25s; }
.how-card:hover .how-num { color:var(--red-muted); }
.how-icon { font-size:1.6rem; margin-bottom:.8rem; }
.how-title { font-family:var(--font-ui); font-size:.98rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--text-primary); margin-bottom:.55rem; }
.how-desc { font-size:.85rem; line-height:1.65; color:var(--text-secondary); }

/* =====================================================
   FEATURES
   ===================================================== */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5px; }
.feat-card { background:var(--bg-card); padding:1.8rem 1.6rem; border-left:2px solid transparent; transition:all .22s; }
.feat-card:hover { background:var(--bg-card-hover); border-left-color:var(--gold); }
.feat-icon { width:40px; height:40px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:1rem; }
.feat-icon.ri { background:var(--red-muted); }
.feat-icon.gi { background:var(--gold-muted); }
.feat-icon.gr { background:var(--green-muted); }
.feat-title { font-family:var(--font-ui); font-size:.95rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--text-primary); margin-bottom:.5rem; }
.feat-desc { font-size:.84rem; line-height:1.65; color:var(--text-secondary); }

/* =====================================================
   SCORING TABLE
   ===================================================== */
.scoring-wrap { background:var(--bg-surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:5.5rem 2rem; }
.scoring-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start; }
table.pts-table { width:100%; border-collapse:collapse; margin-top:1.8rem; }
table.pts-table th { text-align:left; padding:.6rem .9rem; font-family:var(--font-ui); font-size:.67rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#fff; background:var(--bg-card); border-bottom:1px solid var(--red); }
table.pts-table td { padding:.65rem .9rem; font-size:.84rem; border-bottom:1px solid var(--border); color:var(--text-secondary); transition:background .15s; }
table.pts-table tr:hover td { background:rgba(232,237,244,.02); color:var(--text-primary); }
table.pts-table .pv { font-family:var(--font-ui); font-weight:700; font-size:.92rem; text-align:right; }
.pv.pos { color:var(--green-soft); }
.pv.neg { color:var(--red-soft); }
.pv.neu { color:var(--gold-soft); }
.chips-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-top:1.8rem; }
.chip { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; transition:border-color .2s; }
.chip:hover { border-color:var(--gold-border); }
.chip-name { font-family:var(--font-ui); font-size:.82rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:.35rem; }
.chip-name.wc { color:var(--red-soft); }
.chip-name.tc { color:var(--gold-soft); }
.chip-name.bb { color:var(--green-soft); }
.chip-name.fh { color:#6eaadd; }
.chip-desc { font-size:.78rem; line-height:1.55; color:#fff; opacity:.9; }
.tip-box { margin-top:1rem; padding:1rem 1.1rem; background:rgba(185,28,58,.05); border:1px solid var(--red-border); border-radius:var(--radius); }
.tip-label { font-family:var(--font-ui); font-size:.68rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--red-soft); margin-bottom:.35rem; }
.tip-text { font-size:.8rem; color:var(--text-secondary); line-height:1.6; }

/* =====================================================
   LEGAL
   ===================================================== */
.legal-section { background:var(--bg-surface); border-top:1px solid var(--border); padding:4rem 2rem; }
.legal-inner { max-width:1100px; margin:0 auto; }
.legal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.8rem; }
.legal-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem; }
.legal-icon { font-size:1.3rem; margin-bottom:.5rem; }
.legal-head { font-family:var(--font-ui); font-size:.82rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--text-primary); margin-bottom:.4rem; }
.legal-body { font-size:.78rem; color:var(--text-secondary); line-height:1.6; }
.legal-disc { margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--border); font-size:.75rem; color:var(--text-muted); line-height:1.7; }
.legal-disc strong { color:var(--text-secondary); }

/* =====================================================
   PAGE ROUTING + BOTTOM NAV
   ===================================================== */
.page { display:none; }
.page.active { display:block; }

.bottom-nav {
  position:fixed !important;
  bottom:.9rem; left:.75rem; right:.75rem;
  z-index:9999 !important;
  display:flex; gap:0;
  background:rgba(10,13,18,.78);
  backdrop-filter:blur(40px) saturate(200%);
  -webkit-backdrop-filter:blur(40px) saturate(200%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:100px; padding:.35rem;
  box-shadow:0 8px 40px rgba(0,0,0,.7), 0 0 0 .5px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.08);
  will-change:transform; transform:translateZ(0);
  pointer-events:auto !important; visibility:visible !important;
  contain:layout style; isolation:isolate;
}
@supports (-webkit-touch-callout: none) {
  .bottom-nav { position:fixed !important; bottom:.9rem !important; }
}
.bnav-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-family:var(--font-ui); font-size:.5rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:.45rem .25rem; border-radius:100px; background:transparent; color:rgba(255,255,255,.72); border:none; cursor:pointer; transition:color .18s ease, background .18s ease; white-space:nowrap; flex:1; min-width:0; }
.bnav-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; flex-shrink:0; display:block; transition:stroke .18s ease; }
.bnav-btn:active { transform:scale(.94); }
.bnav-btn.active { background:var(--red); color:#fff; box-shadow:0 2px 12px rgba(185,28,58,.45); }
.bnav-btn:not(.active):hover { color:rgba(255,255,255,.75); }
.bnav-label { font-family:var(--font-ui); font-size:.48rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:inherit; pointer-events:none; line-height:1; }
.bnav-icon { display:none !important; }

/* Budget meta strip */
.meta-strip { display:flex; gap:.8rem; }
.meta-pill { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:.5rem 1rem; }
.meta-pill-label { font-family:var(--font-ui); font-size:.6rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); }
.meta-pill-val { font-family:var(--font-display); font-size:1.1rem; font-weight:900; color:var(--green-soft); line-height:1.1; }
.meta-pill-val.gold { color:var(--gold-soft); }

/* =====================================================
   SQUAD PAGE — PITCH + PLAYER PANEL
   ===================================================== */

.page-section {
  padding: 1.2rem 1rem calc(7rem + env(safe-area-inset-bottom, 0px));
  max-width: 960px; margin: 0 auto; width: 100%; overflow-x: hidden;
}
.page-head {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:1.2rem; flex-wrap:wrap; gap:.8rem;
}

/* ── MAIN GRID: pitch left, player list right on desktop ── */
.squad-body-grid {
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,340px);
  gap:1rem;
  align-items:start;
}

/* ── SQUAD PITCH WRAP ──────────────────────────────────────
   Key fix: NO padding-top, NO absolute overlays inside.
   The pitch background is pure CSS. Rows stack naturally.
   ──────────────────────────────────────────────────────── */
.squad-pitch-wrap {
  width:100%;
  background:
    /* Subtle stripe pattern */
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.018) 0px,
      rgba(255,255,255,.018) 1px,
      transparent 1px,
      transparent 44px
    ),
    /* Base green gradient */
    linear-gradient(180deg, #0d4a22 0%, #0f5226 30%, #0e4f24 50%, #0f5226 70%, #0d4a22 100%);
  border-radius:12px;
  overflow:hidden;
  /* NO padding-top — rows provide their own spacing */
  padding:0.6rem 0.4rem 0.8rem;
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  position:relative;
  /* Subtle pitch border */
  border:1.5px solid rgba(255,255,255,.12);
  box-shadow:0 8px 32px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Decorative pitch markings — purely cosmetic via pseudo-elements,
   never interfere with player layout */
.squad-pitch-wrap::before {
  content:'';
  position:absolute;
  top:50%;
  left:6%; right:6%;
  height:1px;
  background:rgba(255,255,255,.12);
  pointer-events:none;
  z-index:0;
}
.squad-pitch-wrap::after {
  content:'';
  position:absolute;
  top:calc(50% - 32px);
  left:50%;
  transform:translateX(-50%);
  width:64px; height:64px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}

/* ── PLAYER ROWS ── */
.prow {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:4px 6px;
  position:relative;
  z-index:1;
  padding:4px 2px;
  min-height:68px;
  width:100%;
}

/* GK row: subtle separator from defenders */
#p-gk {
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:4px;
  padding-top:6px;
}

/* ── PLAYER CARD ON PITCH ── */
.pc {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  cursor:pointer; transition:transform .15s;
  min-width:56px; max-width:70px;
  flex:0 0 auto;
}
.pc:hover { transform:translateY(-3px); }

.pc-shirt {
  width:50px; height:50px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(255,255,255,.18);
  position:relative;
  transition:border-color .2s, box-shadow .2s;
  box-shadow:0 3px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
  flex-shrink:0;
}
.pc:hover .pc-shirt { border-color:var(--gold-soft); box-shadow:0 4px 16px rgba(219,169,74,.35); }
.pc-shirt.s1 { background:linear-gradient(145deg,#1a3a6b,#2a5298); }
.pc-shirt.s2 { background:linear-gradient(145deg,#8b0000,#cc0000); }
.pc-shirt.s3 { background:linear-gradient(145deg,#1a5c1a,#267326); }
.pc-shirt.s4 { background:linear-gradient(145deg,#4a2882,#7b4fcf); }
.pc-shirt.s5 { background:linear-gradient(145deg,#8b6000,#c89200); }
.pc-shirt.s6 { background:linear-gradient(145deg,#004d5c,#007a8c); }

.cap-badge, .vc-badge {
  position:absolute; top:-5px; right:-5px;
  width:16px; height:16px; border-radius:50%;
  font-family:var(--font-display); font-size:.52rem; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.cap-badge { background:var(--gold); color:#000; }
.vc-badge  { background:#e0e0e0; color:#000; }

.pc-name {
  font-family:var(--font-ui); font-size:.62rem; font-weight:700;
  background:rgba(0,0,0,.8); padding:2px 6px; border-radius:4px;
  white-space:nowrap; color:#fff;
  max-width:72px; overflow:hidden; text-overflow:ellipsis; text-align:center;
  line-height:1.2;
}
.pc-pts {
  font-family:var(--font-display); font-size:.66rem; font-weight:900;
  color:var(--gold-soft); text-align:center;
  background:rgba(0,0,0,.55); padding:1px 5px; border-radius:3px;
}

/* ── BENCH STRIP ── */
.bench-strip {
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
  border-top:1.5px dashed rgba(255,255,255,.18);
  border-radius:0 0 10px 10px;
  padding:.6rem .8rem;
  display:flex; flex-direction:column; gap:.4rem; align-items:center;
  margin-top:.2rem;
}

/* ── PLAYER PANEL (list) ──────────────────────────────────
   Fixed height with internal scroll. Add button always visible.
   ──────────────────────────────────────────────────────── */
.player-panel {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  display:flex; flex-direction:column;
  /* Sticky on desktop so it scrolls alongside the pitch */
  position:sticky;
  top:72px;
  max-height:calc(100vh - 90px);
  overflow:hidden;           /* clip, let inner div scroll */
}

.panel-header {
  padding:.75rem 1rem;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; gap:.6rem; flex-wrap:wrap;
  position:sticky; top:0; z-index:10;
  flex-shrink:0;
}
.panel-title { font-family:var(--font-ui); font-size:.72rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); }
.filter-tabs { display:flex; gap:.3rem; flex-wrap:wrap; }
.ftab { font-family:var(--font-ui); font-size:.68rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:.28rem .65rem; border-radius:100px; background:rgba(232,237,244,.05); color:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.15); cursor:pointer; transition:all .2s; white-space:nowrap; display:inline-flex; align-items:center; gap:2px; }
.ftab.active { background:var(--red); color:#fff; border-color:var(--red); }
.ftab:hover:not(.active) { color:var(--text-primary); background:rgba(255,255,255,.06); }

.panel-search {
  padding:.55rem .9rem;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.panel-search input {
  width:100%; background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--radius); padding:.55rem .9rem .55rem 2.2rem;
  color:var(--text-primary); font-family:var(--font-body); font-size:.88rem;
  outline:none; transition:border-color .2s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.3)' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:9px center;
}
.panel-search input::placeholder { color:rgba(255,255,255,.25); }
.panel-search input:focus { border-color:var(--red-border); }

/* The scrollable list area */
#player-list {
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  flex:1;
}

/* ── PLAYER LIST ITEM ─────────────────────────────────────
   Critical fix: use strict flex with no-shrink on price+btn
   ──────────────────────────────────────────────────────── */
.pli {
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.65rem .85rem;
  border-bottom:1px solid rgba(255,255,255,.04);
  cursor:pointer;
  transition:background .15s;
  /* Prevent any overflow */
  min-width:0;
  overflow:hidden;
}
.pli:hover { background:rgba(255,255,255,.04); }
.pli:last-child { border-bottom:none; }

/* picked state */
.pli-picked {
  background:rgba(34,137,90,.07) !important;
  border-left:3px solid #22895A !important;
  padding-left:calc(.85rem - 3px) !important;
}
.pli-picked:hover { background:rgba(34,137,90,.12) !important; }

/* Shirt icon */
.pli-shirt {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  border:2px solid rgba(255,255,255,.1);
  background:var(--bg-surface);
}
/* Shirt colour variants */
.pli-shirt.s1 { border-color:rgba(42,82,152,.5); background:rgba(26,58,107,.3); }
.pli-shirt.s2 { border-color:rgba(204,0,0,.5);   background:rgba(139,0,0,.3); }
.pli-shirt.s3 { border-color:rgba(38,115,38,.5);  background:rgba(26,92,26,.3); }
.pli-shirt.s4 { border-color:rgba(123,79,207,.5); background:rgba(74,40,130,.3); }
.pli-shirt.s5 { border-color:rgba(200,146,0,.5);  background:rgba(139,96,0,.3); }
.pli-shirt.s6 { border-color:rgba(0,122,140,.5);  background:rgba(0,77,92,.3); }

/* EPL Fantasy style avatar — player photo or team logo */
.pli-avatar {
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; position:relative; overflow:hidden;
  border:1.5px solid rgba(255,255,255,.12);
  background:var(--bg-surface);
}
.pli-avatar > img:first-child { display:block; }

/* Name + club — allow to shrink, truncate gracefully */
.pli-info { flex:1 1 0; min-width:0; overflow:hidden; }
.pli-name { font-family:var(--font-ui); font-size:.84rem; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; }
.pli-club { font-size:.68rem; color:var(--text-muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Position badge — fixed width, never shrinks */
.pli-pos {
  font-family:var(--font-ui); font-size:.58rem; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase;
  padding:.2rem .5rem; border-radius:4px;
  flex-shrink:0;
  white-space:nowrap;
}
.pos-gk  { background:rgba(201,150,58,.18); color:#DBA94A; }
.pos-def { background:rgba(34,137,90,.18);  color:#22895A; }
.pos-mid { background:rgba(185,28,58,.18);  color:#E05C7A; }
.pos-fwd { background:rgba(80,140,220,.15); color:#6eaadd; }

/* Price — fixed width, never shrinks */
.pli-price {
  font-family:var(--font-display); font-size:.9rem; font-weight:900;
  color:var(--gold-soft);
  flex-shrink:0;
  white-space:nowrap;
  min-width:42px;
  text-align:right;
}

/* ADD button — large touch target, never shrinks to zero */
.add-btn {
  width:30px; height:30px;
  border-radius:50%;
  background:var(--red);
  border:none; color:#fff;
  font-size:1.1rem; line-height:1;
  cursor:pointer;
  flex-shrink:0;       /* NEVER collapse */
  display:flex; align-items:center; justify-content:center;
  transition:background .18s, transform .12s, box-shadow .18s;
  box-shadow:0 2px 8px rgba(185,28,58,.3);
}
.add-btn:hover  { background:#c0213d; transform:scale(1.1); box-shadow:0 4px 14px rgba(185,28,58,.45); }
.add-btn:active { transform:scale(.93); }

/* =====================================================
   LEAGUE TABLE
   ===================================================== */
.league-table-wrap { width:100%; border-radius:10px; border:1px solid rgba(255,255,255,.07); background:var(--bg-card); overflow:hidden; }
.lt-header,.lt-row { display:grid; align-items:center; padding:.55rem .8rem; gap:.3rem; }
.lt-header { background:rgba(255,255,255,.04); font-family:var(--font-ui); font-size:.6rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.35); border-bottom:1px solid rgba(255,255,255,.06); }
.lt-row { border-bottom:1px solid rgba(255,255,255,.04); transition:background .15s; }
.lt-row:last-child { border-bottom:none; }
.lt-row:hover { background:rgba(255,255,255,.02) !important; }
.lt-pos { font-family:var(--font-display); font-size:.9rem; font-weight:900; }
.lt-club { display:flex; align-items:center; gap:.5rem; overflow:hidden; }
.lt-club img { width:22px; height:22px; object-fit:contain; flex-shrink:0; }
.lt-club-name { font-family:var(--font-ui); font-size:.8rem; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lt-stat { font-family:var(--font-ui); font-size:.8rem; font-weight:600; color:rgba(255,255,255,.6); text-align:center; }
.lt-pts  { font-family:var(--font-display); font-size:.95rem; font-weight:900; color:#DBA94A; text-align:right; }

/* =====================================================
   FIXTURE / RESULT ROWS
   ===================================================== */
.fix-row { background:var(--bg-card); border:1px solid rgba(255,255,255,.07); border-radius:8px; padding:.55rem .6rem; margin-bottom:.35rem; display:grid; grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr) 58px; align-items:center; column-gap:.3rem; width:100%; overflow:hidden; min-height:44px; }
.fix-team { display:flex; align-items:center; gap:.3rem; min-width:0; overflow:hidden; }
.fix-team.away { flex-direction:row-reverse; }
.fix-team img { width:20px; height:20px; object-fit:contain; flex-shrink:0; }
.fix-team-name { font-family:var(--font-ui); font-size:.72rem; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1; }
.fix-score { font-family:var(--font-display); font-size:.9rem; font-weight:900; color:rgba(255,255,255,.45); text-align:center; line-height:1; white-space:nowrap; }
.fix-score.result { color:#22895A; }
.fix-score.live   { color:#D4274F; }
.fix-date { font-family:var(--font-ui); font-size:.55rem; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:rgba(255,255,255,.28); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.4; }

/* =====================================================
   MISC COMPONENTS
   ===================================================== */
.squad-price { color:var(--text-secondary) !important; }
.bench-player { opacity:.55; }
.bench-player .pc-shirt { width:36px; height:36px; font-size:.85rem; }
.league-promo { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem; text-align:center; margin-top:.8rem; }
.league-promo-title { font-family:var(--font-display); font-size:1.3rem; font-weight:900; color:var(--text-primary); margin-bottom:.4rem; }
.league-promo-sub { font-size:.85rem; color:var(--text-secondary); max-width:360px; margin:0 auto 1.3rem; line-height:1.6; }

/* =====================================================
   AUTH MODAL
   ===================================================== */
.auth-modal { display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.7); backdrop-filter:blur(6px); align-items:center; justify-content:center; padding:1rem; }
.auth-modal.active,.auth-modal.open { display:flex; }
.auth-box { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2.5rem 2rem; width:100%; max-width:420px; box-shadow:0 24px 64px rgba(0,0,0,.5); animation:fadeUp .25s ease; }
.auth-box-title { font-family:var(--font-display); font-size:1.6rem; font-weight:900; color:var(--text-primary); margin-bottom:1.5rem; text-align:center; }
.auth-field { margin-bottom:1rem; }
.auth-field label { display:block; font-family:var(--font-ui); font-size:.72rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:.4rem; }
.auth-field input { width:100%; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); padding:.65rem .9rem; color:var(--text-primary); font-family:var(--font-body); font-size:.9rem; outline:none; transition:border-color .2s; }
.auth-field input:focus { border-color:var(--red-border); }
.auth-error { color:var(--red-soft); font-size:.78rem; margin-top:.3rem; min-height:1rem; font-family:var(--font-body); }
.auth-submit { width:100%; margin-top:1.2rem; font-family:var(--font-ui); font-size:.92rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#fff; background:var(--red); border:none; padding:.85rem; border-radius:var(--radius); cursor:pointer; transition:background .2s; }
.auth-submit:hover { background:var(--red-soft); }
.auth-submit:disabled { opacity:.6; cursor:not-allowed; }
.auth-switch { text-align:center; margin-top:1.2rem; font-size:.82rem; color:var(--text-muted); }
.auth-switch a { color:var(--red-soft); text-decoration:none; font-weight:600; cursor:pointer; }
.auth-switch a:hover { text-decoration:underline; }
.auth-close { position:absolute; top:1rem; right:1rem; background:none; border:none; color:var(--text-muted); font-size:1.3rem; cursor:pointer; padding:.3rem; transition:color .2s; }
.auth-close:hover { color:var(--text-primary); }

/* =====================================================
   USER MENU
   ===================================================== */
.user-menu { display:none; align-items:center; gap:.6rem; }
.user-menu-label { font-family:var(--font-ui); font-size:.8rem; font-weight:700; letter-spacing:1px; color:var(--text-secondary); }
.btn-logout { font-family:var(--font-ui); font-size:.78rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); background:none; border:1px solid var(--border); border-radius:var(--radius); padding:.38rem .8rem; cursor:pointer; transition:all .2s; }
.btn-logout:hover { color:var(--red-soft); border-color:var(--red-border); }

/* =====================================================
   TOAST
   ===================================================== */
.toast { position:fixed; bottom:6rem; left:50%; transform:translateX(-50%) translateY(20px); z-index:2000; padding:.7rem 1.4rem; border-radius:100px; font-family:var(--font-ui); font-size:.85rem; font-weight:700; letter-spacing:.5px; opacity:0; transition:opacity .25s, transform .25s; white-space:nowrap; pointer-events:none; box-shadow:0 4px 20px rgba(0,0,0,.4); }
.toast.toast-visible { opacity:1; transform:translateX(-50%) translateY(0); }
.toast-success { background:var(--green); color:#fff; }
.toast-warning { background:var(--gold); color:var(--bg-base); }
.toast-error   { background:var(--red); color:#fff; }
.toast-info    { background:var(--bg-card); color:var(--text-primary); border:1px solid var(--border); }

/* =====================================================
   LOADING / EMPTY STATES
   ===================================================== */
.loading-players, .no-results { padding:2rem; text-align:center; font-family:var(--font-ui); font-size:.85rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); }

/* =====================================================
   PLAYER MODAL
   ===================================================== */
.player-modal { display:none !important; }
.player-modal.open { display:flex !important; }

/* =====================================================
   GLOBAL — no horizontal scroll
   ===================================================== */
html, body {
  margin:0; padding:0; min-height:100%;
  background:var(--bg-base); color:var(--text-primary);
  overflow-x:clip;
}

/* =====================================================
   LEAGUES PAGE
   ===================================================== */
.league-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:.8rem; }
.league-head { padding:1rem 1.4rem; background:var(--bg-surface); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.league-badge { display:flex; align-items:center; gap:.8rem; }
.league-icon { width:36px; height:36px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.li-global { background:var(--red-muted); }
.li-private { background:var(--gold-muted); }
.league-name { font-family:var(--font-ui); font-size:.95rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--text-primary); }
.league-type { font-size:.72rem; color:var(--text-muted); margin-top:1px; }
.league-rank-num { font-family:var(--font-display); font-size:1.5rem; font-weight:900; color:var(--gold-soft); line-height:1; text-align:right; }
.league-rank-label { font-family:var(--font-ui); font-size:.62rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); text-align:right; }
.srow { display:flex; align-items:center; gap:.9rem; padding:.65rem 1.4rem; border-bottom:1px solid var(--border); transition:background .12s; }
.srow:hover { background:rgba(232,237,244,.02); }
.srow:last-child { border-bottom:none; }
.srank { font-family:var(--font-display); font-size:.95rem; font-weight:900; width:26px; text-align:center; color:var(--text-muted); flex-shrink:0; }
.srank.top { color:var(--gold-soft); }
.srank.you { color:var(--red-soft); }
.smanager { flex:1; }
.sname { font-family:var(--font-ui); font-size:.88rem; font-weight:700; color:var(--text-primary); }
.steam { font-size:.7rem; color:var(--text-muted); margin-top:1px; }
.sgw { font-family:var(--font-ui); font-size:.72rem; color:var(--text-muted); text-align:right; }
.stotal { font-family:var(--font-display); font-size:1rem; font-weight:900; color:var(--text-primary); min-width:46px; text-align:right; }
.you-row-bg { background:rgba(185,28,58,.04); }
.you-tag { background:var(--red); font-family:var(--font-ui); font-size:.55rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:.1rem .35rem; border-radius:2px; margin-left:.4rem; color:#fff; }

/* =====================================================
   RESPONSIVE — Tablet / Mobile
   ===================================================== */
@media (max-width:900px) {
  .nav {
    display:flex !important;
    top:0 !important;
    height:calc(56px + env(safe-area-inset-top, 0px));
    padding-top:env(safe-area-inset-top, 0px);
    padding-left:.75rem; padding-right:.75rem;
    overflow:visible; align-items:center;
  }
  body { padding-top:calc(56px + env(safe-area-inset-top, 0px)) !important; }
  .nav-links { display:none; }
  .nav-right { gap:.35rem; flex-shrink:0; overflow:visible; }
  .btn-login  { padding:.35rem .6rem; font-size:.7rem; letter-spacing:.5px; }
  .btn-signup { padding:.35rem .7rem; font-size:.7rem; letter-spacing:.5px; }
  .how-grid   { grid-template-columns:1fr 1fr; }
  .features-grid { grid-template-columns:1fr 1fr; }
  .scoring-inner { grid-template-columns:1fr; }
  .clubs-grid { grid-template-columns:repeat(2,1fr); }
  .legal-grid { grid-template-columns:1fr; }
  .foot-inner { flex-direction:column; text-align:center; }
  .hero-stats { flex-wrap:wrap; }

  /* ── SQUAD PAGE: single column on mobile ── */
  .squad-body-grid {
    grid-template-columns:1fr !important;
    gap:.75rem;
  }
  .squad-pitch-wrap {
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
  }
  .prow {
    justify-content:center !important;
    width:100% !important;
  }

  /* Pitch: compact, shows full formation */
  .squad-pitch-wrap {
    padding:.5rem .3rem .65rem;
    gap:.25rem;
    border-radius:10px;
  }

  .pc-shirt { width:44px; height:44px; }
  .pc       { min-width:50px; max-width:64px; }
  .pc-name  { font-size:.58rem; max-width:60px; }
  .pc-pts   { font-size:.6rem; }

  /* Player panel: NOT sticky on mobile, natural flow */
  .player-panel {
    position:static;
    max-height:none;
    overflow:visible;
    width:100% !important;
  }

  /* Player list: scrollable at a comfortable height */
  #player-list {
    max-height:55vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Player list item: tighter but still shows all elements */
  .pli { padding:.55rem .7rem; gap:.4rem; }
  .pli-shirt { width:32px; height:32px; }
  .pli-name  { font-size:.78rem; }
  .pli-club  { font-size:.65rem; }
  .pli-pos   { font-size:.55rem; padding:.15rem .4rem; }
  .pli-price { font-size:.82rem; min-width:38px; }
  .add-btn   { width:28px; height:28px; font-size:1rem; }
}

@media (max-width:480px) {
  .page-section { padding:1rem .6rem 7rem; }
  .squad-pitch-wrap { padding:.4rem .2rem .5rem; }
  .pc-shirt { width:40px; height:40px; }
  .pc       { min-width:44px; max-width:58px; }
  .pc-name  { font-size:.54rem; max-width:54px; }
  .pli      { padding:.5rem .6rem; gap:.35rem; }
  .pli-shirt { width:30px; height:30px; }
  .add-btn   { width:26px; height:26px; font-size:.95rem; }
  .pli-pos   { display:none; } /* hide on very small screens to save space */
  .how-grid  { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:1fr; }
  .chips-grid    { grid-template-columns:1fr; }
  .bottom-nav { width:calc(100% - 1.5rem); border-radius:100px; }
  .bnav-btn   { min-width:36px; padding:.35rem .2rem; }
  .bnav-label { font-size:.42rem; letter-spacing:.3px; }
}

@media (max-width:375px) {
  .pc-shirt { width:36px; height:36px; }
  .pc-name  { font-size:.5rem; max-width:48px; }
  .pli-price { font-size:.78rem; min-width:34px; }
  .add-btn   { width:24px; height:24px; font-size:.85rem; }
}

/* =====================================================
   DESKTOP: hide bottom nav (top nav used instead)
   ===================================================== */
@media (min-width:901px) {
  .nav { display:flex !important; height:60px; padding:0 2rem; justify-content:space-between; }
  body { padding-top:60px !important; padding-bottom:0 !important; }
  .bottom-nav { display:none !important; }
  .nav-links { display:flex !important; align-items:center; gap:1.5rem; list-style:none; flex:1; margin-left:1.5rem; }
  .nav-links a { font-size:.8rem; letter-spacing:.8px; }
  .nav-right { display:flex; align-items:center; gap:.5rem; }
  .theme-toggle { display:none !important; }
  .page-section,.page-wrap { padding-left:2rem; padding-right:2rem; }
  /* On desktop: pitch + player panel side by side, panel sticky */
  .squad-body-grid { grid-template-columns:1fr 360px; align-items:start; }
  .player-panel { position:sticky; top:72px; max-height:calc(100vh - 88px); overflow:hidden; }
  #player-list  { overflow-y:auto; max-height:calc(100vh - 220px); }
}

/* =====================================================
   THEME-AWARE UTILITY CLASSES
   ===================================================== */
.fix-date-label  { color:rgba(255,255,255,.35); }
.sr-name-text    { color:#fff; }
.sr-club-text    { color:rgba(255,255,255,.45); }
.sr-rank-num     { color:rgba(255,255,255,.3); }
.inj-player-name { color:#fff; }
.inj-desc-text   { color:rgba(255,255,255,.6); }
.inj-club-text   { color:rgba(255,255,255,.4); }

/* =====================================================
   LIVE MATCH CENTER — Expanded fixture card
   ===================================================== */

/* ── Expanded container ── */
.fix-expand {
  background: var(--bg-surface);
  border-top: 1px solid rgba(255,255,255,.06);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* ── Tab bar ── */
.mc-tabs {
  display: flex;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.mc-tabs::-webkit-scrollbar { display: none; }
.mc-tab {
  flex-shrink: 0;
  padding: .6rem .9rem;
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.mc-tab.active { color: var(--gold-soft); border-bottom-color: var(--gold-soft); }
.mc-tab:hover:not(.active) { color: rgba(255,255,255,.7); }
.mc-tab-body { display: none; }
.mc-tab-body.show { display: block; }

/* ── Section heading inside panel ── */
.mc-section-head {
  padding: .35rem .9rem;
  font-family: var(--font-ui);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.025);
  border-bottom: 1px solid rgba(255,255,255,.04);
}

/* ── Match Timeline ── */
.mc-timeline {
  padding: .6rem .9rem .5rem;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.15);
}
.mc-tl-track {
  position: relative;
  height: 30px;
  display: flex;
  align-items: center;
}
.mc-tl-bg {
  position: absolute; left: 0; right: 0; height: 2px;
  background: rgba(255,255,255,.08); border-radius: 2px;
}
.mc-tl-prog {
  position: absolute; left: 0; height: 2px;
  background: linear-gradient(90deg, var(--red), var(--gold-soft));
  border-radius: 2px; transition: width .5s;
}
.mc-tl-evt {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  transform: translateX(-50%);
}
.mc-tl-evt-icon {
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; border: 1.5px solid var(--bg-surface); z-index: 1;
}
.mc-tl-evt-icon.goal-h { background: var(--green-soft); }
.mc-tl-evt-icon.goal-a { background: var(--red); }
.mc-tl-evt-icon.yc     { background: #C9963A; }
.mc-tl-evt-icon.rc     { background: var(--red); }
.mc-tl-evt-min {
  font-family: var(--font-ui); font-size: .48rem; color: rgba(255,255,255,.3);
}
.mc-tl-labels {
  display: flex; justify-content: space-between;
  font-family: var(--font-ui); font-size: .52rem;
  color: rgba(255,255,255,.22); padding: 2px 1px 0;
}

/* ── Match stats bars ── */
.mc-stats-wrap { padding: .65rem .9rem; }
.mc-stat-row {
  display: grid;
  grid-template-columns: 28px 1fr auto 1fr 28px;
  gap: .3rem;
  align-items: center;
  margin-bottom: .45rem;
}
.mc-stat-val {
  font-family: var(--font-ui); font-size: .75rem; font-weight: 700;
  color: var(--text-primary);
}
.mc-stat-val.left { text-align: right; }
.mc-stat-val.right { text-align: left; }
.mc-stat-lbl {
  font-family: var(--font-ui); font-size: .6rem; font-weight: 600;
  color: rgba(255,255,255,.32); text-align: center; white-space: nowrap;
}
.mc-bar-wrap {
  height: 4px; background: rgba(255,255,255,.07);
  border-radius: 2px; overflow: hidden;
}
.mc-bar-wrap.left { direction: rtl; }
.mc-bar-fill {
  height: 100%; border-radius: 2px; transition: width .4s;
}
.mc-bar-home { background: var(--gold-soft); }
.mc-bar-away { background: var(--red-soft); }

/* ── Possession rings ── */
.mc-poss-row {
  display: flex; justify-content: space-around; align-items: center;
  padding: .8rem .9rem .5rem;
  border-top: 1px solid var(--border); margin-top: .35rem;
}
.mc-poss-block { text-align: center; }
.mc-poss-ring { position: relative; width: 60px; height: 60px; margin: 0 auto .25rem; }
.mc-poss-ring svg { transform: rotate(-90deg); display: block; }
.mc-poss-pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: .95rem; font-weight: 900;
}
.mc-poss-lbl {
  font-family: var(--font-ui); font-size: .58rem; font-weight: 700;
  color: rgba(255,255,255,.35); letter-spacing: .5px;
}
.mc-poss-mid-lbl {
  font-family: var(--font-ui); font-size: .58rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255,255,255,.25); text-align: center;
}

/* ── My Points tab ── */
.mc-mypts-wrap { padding: .7rem .9rem; }
.mc-mypts-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .55rem;
}
.mc-mypts-title {
  font-family: var(--font-ui); font-size: .6rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.35);
}
.mc-mypts-total {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 900;
  color: var(--gold-soft);
}
.mc-pt-row {
  display: flex; align-items: center; gap: .45rem;
  padding: .38rem .55rem; border-radius: 7px;
  background: var(--bg-card); margin-bottom: .28rem;
  border: 1px solid rgba(255,255,255,.04);
}
.mc-pt-pos-badge {
  font-family: var(--font-ui); font-size: .55rem; font-weight: 700;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.55);
  padding: 1px 5px; border-radius: 3px; min-width: 28px; text-align: center;
  flex-shrink: 0;
}
.mc-pt-name {
  flex: 1; font-family: var(--font-ui); font-size: .78rem; font-weight: 700;
  color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-pt-cap {
  background: var(--gold); color: #000;
  font-size: .48rem; font-weight: 900; font-family: var(--font-display);
  padding: 1px 4px; border-radius: 2px;
}
.mc-pt-vc  { background: rgba(255,255,255,.7); color: #000; font-size: .48rem; font-weight: 900; font-family: var(--font-display); padding: 1px 4px; border-radius: 2px; }
.mc-pt-events { display: flex; gap: 2px; font-size: .65rem; flex-shrink: 0; }
.mc-pt-pts {
  font-family: var(--font-display); font-size: .88rem; font-weight: 900;
  min-width: 30px; text-align: right; flex-shrink: 0;
}
.mc-pt-pts.pos { color: var(--gold-soft); }
.mc-pt-pts.neg { color: var(--red-soft); }
.mc-pt-pts.zero { color: rgba(255,255,255,.3); }
.mc-nopts {
  text-align: center; padding: 1.2rem;
  font-family: var(--font-ui); font-size: .75rem;
  color: rgba(255,255,255,.3); font-weight: 600;
}

/* ── Disposable live chat ── */
.mc-chat-wrap { padding: .65rem .9rem; display: flex; flex-direction: column; gap: .45rem; }
.mc-chat-meta {
  display: flex; justify-content: space-between; align-items: center;
}
.mc-chat-live-badge {
  display: flex; align-items: center; gap: .35rem;
  font-family: var(--font-ui); font-size: .6rem; font-weight: 700;
  color: var(--green-soft); letter-spacing: 1px; text-transform: uppercase;
}
.mc-chat-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-soft); animation: livePulse 1.2s infinite;
}
.mc-chat-ephemeral-note {
  font-family: var(--font-ui); font-size: .58rem;
  color: rgba(255,255,255,.25); font-style: italic;
}
.mc-chat-msgs {
  display: flex; flex-direction: column; gap: .35rem;
  max-height: 180px; overflow-y: auto;
  padding: .2rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.mc-chat-msgs::-webkit-scrollbar { width: 3px; }
.mc-chat-msgs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }
.mc-chat-msg {
  background: var(--bg-card); border: 1px solid rgba(255,255,255,.04);
  border-radius: 8px; padding: .42rem .6rem;
}
.mc-chat-msg-meta {
  display: flex; align-items: center; gap: .35rem; margin-bottom: .15rem;
}
.mc-chat-msg-user {
  font-family: var(--font-ui); font-size: .68rem; font-weight: 700;
  color: var(--gold-soft);
}
.mc-chat-msg-pts {
  font-size: .55rem; background: rgba(34,137,90,.15);
  color: var(--green-soft); padding: 1px 5px; border-radius: 3px;
  font-family: var(--font-ui); font-weight: 700;
}
.mc-chat-msg-time {
  font-family: var(--font-ui); font-size: .55rem;
  color: rgba(255,255,255,.22); margin-left: auto;
}
.mc-chat-msg-text {
  font-size: .78rem; color: var(--text-primary); line-height: 1.45;
}
.mc-chat-compose {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 10px; padding: .5rem .7rem;
  display: flex; gap: .5rem; align-items: flex-end;
}
.mc-chat-compose textarea {
  background: transparent; border: none; outline: none;
  flex: 1; color: #fff; font-family: var(--font-body);
  font-size: .8rem; resize: none; min-height: 32px; max-height: 80px;
  line-height: 1.45;
}
.mc-chat-compose textarea::placeholder { color: rgba(255,255,255,.22); }
.mc-chat-send {
  background: var(--red); border: none; border-radius: 7px;
  color: #fff; padding: .32rem .85rem;
  font-family: var(--font-ui); font-size: .7rem; font-weight: 700;
  cursor: pointer; flex-shrink: 0; align-self: flex-end;
  transition: background .15s;
}
.mc-chat-send:hover { background: var(--red-soft); }
.mc-chat-login-note {
  text-align: center; font-family: var(--font-ui); font-size: .72rem;
  color: rgba(255,255,255,.3); padding: .5rem;
  background: var(--bg-card); border-radius: 7px;
  border: 1px solid var(--border);
}

/* ── Player stats (existing, now inside a tab) ── */
.mc-team-stats-wrap { padding: .3rem 0; }

/* ── GW points pill — show when squad registered ── */
.gw-pts-pill-visible { display: flex !important; }