/* ════════════════════════════════════════════════════════════
   VOTEBALL v5.5 — COMPLETE PRODUCTION PLATFORM
   Brand: Teal #458694 + Green-Yellow #EFDE60 + Dark #0A1628
   Logo: Voteball "Voice Concept" SVG
   ════════════════════════════════════════════════════════════ */

/* ── BRAND PALETTE (from logo design) ── */
:root {
  /* ── VOTEBALL BRAND v2 (from Brand Identity Guidelines) ── */
  --brand-blue:   #00C8FF;   /* Electric Blue primary */
  --brand-green:  #23CD32;   /* Neon Green primary */
  --brand-navy:   #0A142A;   /* Deep Space Navy */
  --brand-black:  #000000;   /* Midnight Black */
  --brand-glow:   #0EEFFF;   /* Subtle Luminous Glow */
  /* Legacy aliases (keep for compatibility) */
  --brand-teal:   #00C8FF;
  --brand-lime:   #23CD32;
  --brand-dark:   #0A142A;
  --brand-cyan:   #0EEFFF;

  /* DARK THEME — Deep Space Navy base */
  --bg:    #050C1A;
  --s1:    #0A142A;
  --s2:    #0E1E38;
  --s3:    #132646;
  --s4:    #182E54;
  --s5:    #1D3662;
  --bdr:   rgba(0,200,255,.22);
  --bdr2:  rgba(0,200,255,.1);
  --tx:    #D4F0FF;
  --tx2:   #6ABED8;
  --mu:    #2E6A85;

  /* BRAND ACCENTS */
  --g:    #00C8FF;   /* Electric Blue — primary interactive */
  --g2:   #0EEFFF;   /* Luminous Glow */
  --gd:   #0090CC;   /* Deeper blue */
  --gdim: rgba(0,200,255,.09);
  --yw:   #23CD32;   /* Neon Green — highlights / XP */
  --rd:   #FF4D6A;   /* Red — danger / away */
  --bl:   #00C8FF;   /* Blue */
  --or:   #FF9F43;   /* Orange — streaks */
  --pu:   #A855F7;
  --pk:   #F472B6;

  /* REACTIONS */
  --r-fire:   #FF6B35;
  --r-goal:   #00C8FF;
  --r-ycard:  #EFDE60;
  --r-rcard:  #FF4D6A;
  --r-var:    #38BDF8;
  --r-offside:#A855F7;

  /* FONT */
  --font-ar: 'Tajawal', sans-serif;
  --font-en: 'Inter', sans-serif;
  --mono:    'JetBrains Mono', monospace;
  --font:    var(--font-ar);
}

[data-theme="light"] {
  --bg:   #EEF4F7;
  --s1:   #FFFFFF;
  --s2:   #F0F7FA;
  --s3:   #E4EFF4;
  --s4:   #D8EAF0;
  --s5:   #CCE4EC;
  --bdr:  rgba(69,134,148,.22);
  --bdr2: rgba(69,134,148,.1);
  --tx:   #0A1628;
  --tx2:  #2D6E8A;
  --mu:   #6AAABF;
  --g:    #358A84;
  --gd:   #1F6B65;
  --gdim: rgba(53,138,132,.09);
  --yw:   #B8A800;
}

[data-lang="en"] { --font: var(--font-en); }
[data-lang="en"] body { direction: ltr; }
[data-lang="en"] .hdr-right { flex-direction: row-reverse; }
[data-lang="en"] .match-row.live-m { border-right: none; border-left: 3px solid var(--rd); }
[data-lang="en"] .rank-item:hover { transform: translateX(3px); }
[data-lang="en"] .notif-panel { left: auto; right: 0; border-left: none; border-right: 1px solid var(--bdr); transform: translateX(-100%); }
[data-lang="en"] .notif-panel.open { transform: translateX(0); }
[data-lang="en"] .modal-close { left: auto; right: 14px; }
[data-lang="en"] .rm-close { left: auto; right: 14px; }
[data-lang="en"] .toast { right: auto; left: 22px; }

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 15px; }
body { font-family: var(--font); background: var(--bg); color: var(--tx); line-height: 1.7; overflow-x: hidden; transition: background .3s, color .3s; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font); border: none; background: none; }
input, select, textarea { font-family: var(--font); }

/* ── PITCH BG ── */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 59px, var(--bdr2) 60px),
    repeating-linear-gradient(90deg, transparent 0, transparent 59px, var(--bdr2) 60px);
  opacity: .4;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(78,205,196,.07) 0%, transparent 65%);
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 3px; }

/* ── PAGES ── */
.page { display: none; position: relative; z-index: 1; min-height: 100vh; }
.page.active { display: block; animation: pageIn .28s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ══════════════════════════════════════════════════
   VOTEBALL LOGO SVG (Voice Concept)
══════════════════════════════════════════════════ */
.vb-logo-svg { display: flex; align-items: center; gap: 9px; font-size: 1.28rem; font-weight: 900; color: var(--tx); flex-shrink: 0; }
.vb-logo-svg .mark {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 9px; overflow: hidden;
  background: linear-gradient(135deg, #0A1628, #142844);
  border: 1px solid var(--bdr);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 22px rgba(0,200,255,.4), 0 0 8px rgba(35,205,50,.2);
  transition: transform .22s;
}
.vb-logo-svg .mark:hover { transform: rotate(-6deg) scale(1.07); }
.vb-logo-svg .mark svg { width: 26px; height: 26px; }
.vb-logo-svg .txt { letter-spacing: -.3px; }
.vb-logo-svg .txt .ball { color: var(--brand-cyan); }

/* ══════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════ */
.hdr {
  position: sticky; top: 0; z-index: 1000; height: 62px;
  background: rgba(6,13,24,.94); backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid var(--bdr2);
  padding: 0 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: background .3s;
}
[data-theme="light"] .hdr { background: rgba(238,244,247,.94); }

.nav { display: flex; align-items: center; gap: 2px; }
.nv { padding: 6px 11px; font-size: .82rem; font-weight: 600; color: var(--tx2); border-radius: 8px; transition: .18s; white-space: nowrap; }
.nv:hover { color: var(--tx); background: var(--s2); }
.nv.on { color: var(--g); background: var(--gdim); }

.hdr-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* XP chip */
.xp-chip { display: flex; align-items: center; gap: 5px; background: rgba(239,222,96,.1); border: 1px solid rgba(239,222,96,.22); border-radius: 20px; padding: 3px 10px; font-size: .72rem; font-weight: 800; color: var(--yw); font-family: var(--mono); }

/* Icon buttons */
.icon-btn { position: relative; width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--tx2); transition: .18s; }
.icon-btn:hover { color: var(--tx); background: var(--s2); }
.icon-btn svg { width: 19px; height: 19px; }
.ibadge { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; background: var(--rd); border-radius: 50%; border: 2px solid var(--bg); animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.6)} }

/* Lang toggle */
.lang-toggle { display: flex; background: var(--s2); border: 1px solid var(--bdr2); border-radius: 8px; overflow: hidden; }
.lang-btn { padding: 5px 10px; font-size: .74rem; font-weight: 700; color: var(--tx2); transition: .18s; }
.lang-btn.on { background: var(--g); color: #000; }

/* Theme btn */
.theme-btn { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--s2); border: 1px solid var(--bdr2); color: var(--tx2); font-size: 16px; transition: .18s; }
.theme-btn:hover { border-color: var(--g); }

/* Auth buttons */
.btn-sign { padding: 6px 14px; border: 1px solid var(--bdr); border-radius: 8px; color: var(--tx); font-size: .8rem; font-weight: 600; transition: .18s; }
.btn-sign:hover { border-color: var(--g); color: var(--g); }
.btn-join { padding: 7px 16px; background: var(--g); border-radius: 8px; color: #000; font-size: .8rem; font-weight: 800; transition: .18s; box-shadow: 0 0 14px rgba(78,205,196,.26); }
.btn-join:hover { background: var(--g2); transform: translateY(-1px); }
.u-chip { display: flex; align-items: center; gap: 7px; background: var(--s2); border: 1px solid var(--bdr2); border-radius: 20px; padding: 4px 12px 4px 4px; transition: .18s; }
.u-chip:hover { border-color: var(--bdr); }
.u-av { width: 26px; height: 26px; background: var(--gdim); border-radius: 50%; border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center; font-size: 13px; overflow: hidden; }
.u-av img { width: 100%; height: 100%; object-fit: cover; }
.u-nm { font-size: .78rem; font-weight: 700; color: var(--tx); }
.ham { display: none; flex-direction: column; gap: 4px; padding: 7px; border-radius: 8px; background: var(--s2); border: 1px solid var(--bdr2); }
.ham span { width: 20px; height: 2px; background: var(--tx); border-radius: 2px; transition: .22s; }
.ham.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.ham.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ham.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }
.ham span { width: 20px; height: 2px; background: var(--tx); border-radius: 2px; }

/* ══════════════════════════════════════════════════
   CLUB / PLAYER FLAGS (real logos via API)
══════════════════════════════════════════════════ */
.club-logo {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--s3); border: 1px solid var(--bdr2);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0; overflow: hidden;
  transition: .2s;
}
.club-logo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.club-logo.lg { width: 52px; height: 52px; font-size: 24px; }
.club-logo.xl { width: 64px; height: 64px; font-size: 28px; }
.player-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--s3), var(--s4));
  border: 2px solid var(--bdr);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0; overflow: hidden;
}
.player-avatar img { width: 100%; height: 100%; object-fit: cover; }
.flag-img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; }

/* ══════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════ */
.pc { max-width: 1100px; margin: 0 auto; padding: 24px 18px; }
.ptit { font-size: 1.45rem; font-weight: 900; color: var(--tx); margin-bottom: 4px; }
.psub { font-size: .84rem; color: var(--tx2); margin-bottom: 20px; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
@media(max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr;}}
@media(min-width:681px) and (max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr;}}
.card { background: var(--s1); border: 1px solid var(--bdr2); border-radius: 14px; padding: 20px; margin-bottom: 14px; transition: .22s; }
.card:hover { border-color: var(--bdr); box-shadow: 0 4px 22px rgba(0,0,0,.25); }
.card h3 { font-size: .94rem; font-weight: 800; color: var(--tx); margin-bottom: 5px; }
.card p { font-size: .83rem; color: var(--tx2); line-height: 1.7; }

/* Buttons */
.btn-g { padding: 8px 18px; background: var(--g); border-radius: 9px; color: #000; font-size: .84rem; font-weight: 800; transition: .18s; box-shadow: 0 0 14px rgba(78,205,196,.22); }
.btn-g:hover { background: var(--g2); transform: translateY(-1px); }
.btn-o { padding: 7px 15px; border: 1px solid var(--bdr); border-radius: 9px; color: var(--tx); font-size: .82rem; font-weight: 600; transition: .18s; }
.btn-o:hover { border-color: var(--g); color: var(--g); }
.btn-sm { padding: 4px 12px; border-radius: 7px; font-size: .74rem; font-weight: 700; transition: .17s; }
.btn-sm-g { background: var(--g); color: #000; }
.btn-sm-g:hover { background: var(--g2); }
.btn-sm-o { border: 1px solid var(--bdr); color: var(--tx2); }
.btn-sm-o:hover { border-color: var(--g); color: var(--g); }

/* Pills */
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; padding: 2px 9px; border-radius: 20px; border: 1px solid; }
.pill-g { background: var(--gdim); color: var(--g); border-color: rgba(78,205,196,.22); }
.pill-y { background: rgba(239,222,96,.1); color: var(--yw); border-color: rgba(239,222,96,.22); }
.pill-b { background: rgba(56,189,248,.1); color: var(--bl); border-color: rgba(56,189,248,.22); }
.pill-r { background: rgba(255,77,106,.1); color: var(--rd); border-color: rgba(255,77,106,.22); }
.pill-new { background: rgba(255,159,67,.12); color: var(--or); border-color: rgba(255,159,67,.24); font-size: .6rem; text-transform: uppercase; letter-spacing: .5px; }

/* Section head */
.sh { text-align: center; padding: 50px 18px 24px; max-width: 660px; margin: 0 auto; }
.sh-tag { font-size: .68rem; font-weight: 700; color: var(--g); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
.sh h2 { font-size: clamp(1.4rem,3.2vw,2.1rem); font-weight: 900; color: var(--tx); margin-bottom: 8px; }
.sh p { font-size: .88rem; color: var(--tx2); }

/* Toast */
.toast { position: fixed; bottom: 22px; right: 22px; z-index: 9999; background: var(--s1); border: 1px solid var(--g); border-radius: 12px; padding: 12px 18px; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 28px rgba(78,205,196,.18); transform: translateY(100px); opacity: 0; transition: all .3s cubic-bezier(.16,1,.3,1); max-width: 320px; pointer-events:none; }
.toast.show { transform: translateY(0); opacity: 1; }
.t-ico { font-size: 1.2rem; }
.t-msg { font-size: .84rem; font-weight: 600; color: var(--tx); }

/* Scroll top */
.scroll-top { position: fixed; bottom: 22px; left: 22px; z-index: 500; width: 38px; height: 38px; background: var(--g); border-radius: 50%; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(78,205,196,.35); transition: .2s; color: #000; }
.scroll-top svg { width: 18px; height: 18px; }
.scroll-top.show { display: flex; }
.scroll-top:hover { transform: translateY(-3px); }

/* ══════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════ */
.hero { padding: 70px 18px 54px; text-align: center; max-width: 900px; margin: 0 auto; animation: fu .7s ease both; }
@keyframes fu { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
.hero-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--gdim); border: 1px solid var(--bdr); border-radius: 20px; padding: 5px 14px; font-size: .7rem; font-weight: 700; color: var(--g); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 22px; }
.investor-demo-badge { display:inline-flex; align-items:center; margin:-12px auto 16px; padding:4px 10px; border:1px solid rgba(239,222,96,.35); border-radius:999px; background:rgba(239,222,96,.1); color:var(--yw); font-size:.66rem; font-weight:800; letter-spacing:.2px; }
.investor-demo-badge[hidden] { display:none; }
.hbd { width: 6px; height: 6px; background: var(--g); border-radius: 50%; animation: pulse 1.5s infinite; }
.hero h1 { font-size: clamp(2rem,5.2vw,4rem); font-weight: 900; line-height: 1.1; color: var(--tx); margin-bottom: 16px; }
.hero h1 .ac { color: var(--g); }
.hero h1 .yw { color: var(--yw); }
.hero-sub { font-size: clamp(.9rem,2vw,1.1rem); color: var(--tx2); max-width: 580px; margin: 0 auto 28px; line-height: 1.75; }
.hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.btn-hero { padding: 14px 28px; background: var(--g); border-radius: 11px; color: #000; font-size: .96rem; font-weight: 800; box-shadow: 0 0 28px rgba(78,205,196,.36); transition: .2s; }
.btn-hero:hover { background: var(--g2); transform: translateY(-2px); }
.btn-hero-o { padding: 14px 28px; background: none; border: 1px solid var(--bdr); border-radius: 11px; color: var(--tx); font-size: .96rem; font-weight: 700; transition: .2s; }
.btn-hero-o:hover { border-color: var(--g); color: var(--g); }
.hstats { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-bottom: 44px; }
.hs { text-align: center; }
.hsn { font-size: 1.8rem; font-weight: 900; font-family: var(--mono); background: linear-gradient(135deg,var(--tx),var(--g)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hsl { font-size: .68rem; color: var(--mu); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }

/* TICKER */
.ticker-wrap { background: var(--s1); border: 1px solid var(--bdr); border-radius: 11px; padding: 12px 16px; max-width: 780px; margin: 0 auto 50px; display: flex; align-items: center; gap: 12px; overflow: hidden; }
.live-b { background: var(--rd); color: #fff; font-size: .64rem; font-weight: 800; padding: 3px 9px; border-radius: 20px; flex-shrink: 0; animation: pulse .9s infinite; }
.ticker-inner { overflow: hidden; flex: 1; }
.ticker-tr { display: flex; gap: 34px; animation: tk 24s linear infinite; white-space: nowrap; }
@keyframes tk { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.tm-item { display: flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 700; color: var(--tx); }
.tm-score { background: var(--g); color: #000; font-family: var(--mono); padding: 2px 8px; border-radius: 5px; font-size: .8rem; font-weight: 800; }
.tm-min { font-size: .64rem; color: var(--rd); font-weight: 700; }

/* FEATURES */
.feat-grid { max-width: 1060px; margin: 0 auto; padding: 0 18px 64px; display: grid; grid-template-columns: repeat(auto-fit,minmax(225px,1fr)); gap: 12px; }
.fc { background: var(--s1); border: 1px solid var(--bdr2); border-radius: 14px; padding: 20px; transition: .25s; }
.fc:hover { border-color: var(--bdr); transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.25); }
.fc-icon { width: 42px; height: 42px; border-radius: 11px; background: var(--gdim); border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.fc-icon svg { width: 22px; height: 22px; color: var(--g); }
.fc h3 { font-size: .9rem; font-weight: 800; color: var(--tx); margin-bottom: 5px; }
.fc p { font-size: .79rem; color: var(--tx2); line-height: 1.65; }

/* ══════════════════════════════════════════════════
   CHEER POWER
══════════════════════════════════════════════════ */
.cheer-card { background: linear-gradient(135deg,var(--s1),var(--s2)); border: 1px solid var(--bdr); border-radius: 18px; padding: 24px; max-width: 720px; margin: 0 auto 14px; position: relative; overflow: hidden; }
.cheer-card::before { content:''; position:absolute; top:-60px; right:-60px; width:180px; height:180px; background:radial-gradient(circle,rgba(78,205,196,.09),transparent); border-radius:50%; pointer-events:none; }
.cheer-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.cheer-league { font-size:.72rem; font-weight:700; color:var(--mu); text-transform:uppercase; letter-spacing:1px; }
.live-chip { background:var(--rd); color:#fff; font-size:.62rem; font-weight:800; padding:3px 9px; border-radius:20px; animation:pulse .9s infinite; display:flex; align-items:center; gap:4px; }
.cheer-teams { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; margin-bottom:18px; }
.ct-team { display:flex; flex-direction:column; align-items:center; gap:8px; }
.ct-name { font-size:.88rem; font-weight:800; color:var(--tx); text-align:center; }
.ct-score-box { text-align:center; }
.ct-sc { font-size:1.9rem; font-weight:900; color:var(--tx); font-family:var(--mono); background:var(--s3); border:1px solid var(--bdr); border-radius:9px; padding:6px 18px; }
.ct-min { font-size:.68rem; color:var(--rd); font-weight:700; margin-top:3px; }
.cp-wrap { margin-bottom:16px; }
.cp-label { display:flex; justify-content:space-between; font-size:.72rem; font-weight:700; margin-bottom:5px; }
.cp-l { color:var(--g); } .cp-r { color:var(--rd); }
.cp-bar { height:12px; background:var(--s3); border-radius:6px; overflow:hidden; display:flex; }
.cpb-h { height:100%; background:linear-gradient(90deg,var(--gd),var(--g)); border-radius:6px 0 0 6px; transition:width .5s ease; }
.cpb-a { height:100%; background:linear-gradient(90deg,var(--rd),#ff8a9a); border-radius:0 6px 6px 0; transition:width .5s ease; }
.cp-counts { display:flex; justify-content:space-between; font-size:.67rem; color:var(--mu); margin-top:4px; font-family:var(--mono); }
.cheer-btns { display:flex; gap:10px; justify-content:center; }
.ch-btn { flex:1; max-width:200px; padding:12px 18px; border-radius:11px; font-size:.88rem; font-weight:800; display:flex; align-items:center; justify-content:center; gap:8px; transition:.18s; }
.ch-h { background:var(--g); color:#000; box-shadow:0 0 18px rgba(78,205,196,.28); }
.ch-h:hover { background:var(--g2); transform:scale(1.03); }
.ch-a { background:var(--rd); color:#fff; box-shadow:0 0 18px rgba(255,77,106,.28); }
.ch-a:hover { background:#ff6a80; transform:scale(1.03); }
.ch-btn:active { transform:scale(.96)!important; }
.cheer-particle { position:fixed; z-index:9999; font-size:22px; pointer-events:none; animation:pf 1s ease-out forwards; }
@keyframes pf { 0%{opacity:1;transform:translate(0,0)scale(1)} 100%{opacity:0;transform:translate(var(--dx),var(--dy))scale(.15)} }

/* ══════════════════════════════════════════════════
   FOOTBALL REACTIONS (upgraded)
══════════════════════════════════════════════════ */
.react-bar { display:flex; align-items:center; gap:5px; padding:10px 14px; border-top:1px solid var(--bdr2); flex-wrap:wrap; }
.react-btn { display:flex; align-items:center; gap:5px; padding:5px 10px; border-radius:20px; font-size:.78rem; font-weight:600; color:var(--tx2); background:var(--s2); border:1px solid var(--bdr2); transition:.18s; cursor:pointer; user-select:none; }
.react-btn:hover { transform:scale(1.06); }
.react-btn.active { border-color:currentColor; }
.react-btn.active.rf { color:var(--r-fire); background:rgba(255,107,53,.1); }
.react-btn.active.rg { color:var(--r-goal); background:rgba(78,205,196,.1); }
.react-btn.active.ry { color:var(--r-ycard); background:rgba(239,222,96,.1); }
.react-btn.active.rr { color:var(--r-rcard); background:rgba(255,77,106,.1); }
.react-btn.active.rv { color:var(--r-var); background:rgba(56,189,248,.1); }
.react-btn.active.ro { color:var(--r-offside); background:rgba(168,85,247,.1); }
.react-emoji { font-size:16px; transition:transform .15s; }
.react-btn:hover .react-emoji { transform:scale(1.4); }
.react-btn.active .react-emoji { animation:reactPop .3s ease; }
@keyframes reactPop { 0%{transform:scale(1)} 50%{transform:scale(1.8)} 100%{transform:scale(1.2)} }
.react-count { font-family:var(--mono); font-size:.72rem; }
.react-picker-wrap { position:relative; }
.react-more-btn { padding:5px 10px; border-radius:20px; background:var(--s2); border:1px solid var(--bdr2); color:var(--tx2); font-size:.74rem; font-weight:700; transition:.18s; cursor:pointer; }
.react-more-btn:hover { border-color:var(--g); color:var(--g); }
.react-picker { position:absolute; bottom:calc(100% + 8px); right:0; background:var(--s1); border:1px solid var(--bdr); border-radius:14px; padding:10px; display:none; gap:6px; box-shadow:0 8px 32px rgba(0,0,0,.4); z-index:200; min-width:160px; flex-direction:column; }
.react-picker.show { display:flex; }
.rp-opt { display:flex; align-items:center; gap:8px; padding:7px 11px; border-radius:8px; cursor:pointer; transition:.15s; font-size:.82rem; font-weight:600; color:var(--tx2); background:var(--s2); border:1px solid var(--bdr2); width:100%; }
.rp-opt:hover { border-color:currentColor; }
.rp-opt.rf { color:var(--r-fire); } .rp-opt.rg { color:var(--r-goal); }
.rp-opt.ry { color:var(--r-ycard); } .rp-opt.rr { color:var(--r-rcard); }
.rp-opt.rv { color:var(--r-var); } .rp-opt.ro { color:var(--r-offside); }

/* ══════════════════════════════════════════════════
   MATCHES PAGE
══════════════════════════════════════════════════ */
.search-box { display:flex; align-items:center; gap:10px; background:var(--s1); border:1px solid var(--bdr2); border-radius:12px; padding:10px 16px; margin-bottom:14px; transition:.2s; }
.search-box:focus-within { border-color:var(--g); box-shadow:0 0 0 3px var(--gdim); }
.search-box svg { width:18px; height:18px; color:var(--mu); flex-shrink:0; }
.search-inp { flex:1; background:none; border:none; outline:none; color:var(--tx); font-size:.88rem; }
.search-inp::placeholder { color:var(--mu); }
.filter-row { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px; }
.fchip { padding:5px 13px; border-radius:20px; border:1px solid var(--bdr2); background:var(--s1); color:var(--tx2); font-size:.76rem; font-weight:600; transition:.18s; white-space:nowrap; }
.fchip:hover { border-color:var(--bdr); color:var(--tx); }
.fchip.on { background:var(--g); color:#000; border-color:var(--g); }
.day-tabs { display:flex; gap:6px; margin-bottom:18px; border-bottom:1px solid var(--bdr2); padding-bottom:12px; }
.dtab { padding:7px 16px; border-radius:8px; border:1px solid transparent; background:none; color:var(--tx2); font-size:.84rem; font-weight:600; transition:.17s; }
.dtab:hover { color:var(--tx); background:var(--s2); }
.dtab.on { background:var(--g); color:#000; }
.league-g { margin-bottom:18px; }
.league-hdr { display:flex; align-items:center; gap:8px; padding:9px 14px; background:var(--s2); border-radius:10px 10px 0 0; border:1px solid var(--bdr2); border-bottom:none; }
.league-hdr img { width:22px; height:22px; object-fit:contain; }
.league-nm { font-size:.84rem; font-weight:700; color:var(--tx); }
.league-cnt { font-size:.7rem; color:var(--mu); margin-right:auto; }
[data-lang="en"] .league-cnt { margin-right:0; margin-left:auto; }
.match-row { background:var(--s1); border:1px solid var(--bdr2); border-top:none; padding:13px 16px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; transition:.18s; cursor:pointer; }
.match-row:last-child { border-radius:0 0 10px 10px; }
.match-row:hover { background:var(--s2); border-color:var(--bdr); }
.match-row.live-m { border-right:3px solid var(--rd); }
.tm-side { display:flex; align-items:center; gap:9px; }
.tm-side.away { flex-direction:row-reverse; }
.tm-name { font-size:.85rem; font-weight:700; color:var(--tx); }
.mc { text-align:center; }
.mscore { font-size:1.2rem; font-weight:900; color:var(--tx); font-family:var(--mono); background:var(--s2); border:1px solid var(--bdr2); padding:5px 13px; border-radius:7px; white-space:nowrap; }
.mtime { font-size:.7rem; color:var(--mu); margin-top:3px; }
.mstat { display:inline-block; font-size:.6rem; font-weight:700; padding:2px 7px; border-radius:10px; margin-top:3px; }
.ms-l { background:rgba(255,77,106,.14); color:var(--rd); }
.ms-f { background:rgba(78,205,196,.09); color:var(--g); }
.ms-u { background:rgba(56,189,248,.09); color:var(--bl); }
.rate-b { background:var(--g); color:#000; font-size:.65rem; font-weight:800; border-radius:6px; padding:3px 10px; margin-top:3px; display:block; margin-inline:auto; transition:.17s; }
.rate-b:hover { background:var(--g2); }

/* ══════════════════════════════════════════════════
   FANHALL
══════════════════════════════════════════════════ */
.fh-grid { display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start; }
@media(max-width:820px){ .fh-grid { grid-template-columns:1fr; } }
.post-card { background:var(--s1); border:1px solid var(--bdr2); border-radius:14px; overflow:hidden; margin-bottom:12px; transition:.2s; }
.post-card:hover { border-color:var(--bdr); box-shadow:0 4px 18px rgba(0,0,0,.22); }
.post-hdr { display:flex; align-items:center; gap:10px; padding:14px 16px 10px; }
.post-body { padding:0 16px 12px; font-size:.86rem; color:var(--tx); line-height:1.7; }
.post-img { width:100%; height:170px; background:var(--s3); display:flex; align-items:center; justify-content:center; font-size:52px; margin:8px 0; }
.post-yt { margin:8px 16px 12px; border-radius:10px; overflow:hidden; }
.post-yt-thumb { width:100%; height:150px; background:var(--s3); display:flex; align-items:center; justify-content:center; font-size:48px; position:relative; cursor:pointer; }
.yt-play { position:absolute; width:46px; height:46px; background:rgba(255,0,0,.9); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; color:#fff; }
.post-yt-meta { padding:8px 12px; background:#0a0a0a; }
.post-yt-title { font-size:.8rem; font-weight:700; color:#fff; }
.post-yt-domain { font-size:.7rem; color:#888; }
.post-link { margin:8px 16px 12px; border:1px solid var(--bdr2); border-radius:10px; overflow:hidden; cursor:pointer; transition:.18s; }
.post-link:hover { border-color:var(--g); }
.post-link-img { height:100px; background:var(--s3); display:flex; align-items:center; justify-content:center; font-size:36px; }
.post-link-meta { padding:10px 13px; }
.post-link-title { font-size:.82rem; font-weight:700; color:var(--tx); margin-bottom:3px; }
.post-link-domain { font-size:.7rem; color:var(--mu); }
.post-reel { position:relative; margin:8px 16px 12px; border-radius:10px; overflow:hidden; background:#000; aspect-ratio:9/16; max-height:340px; cursor:pointer; }
.reel-thumb { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:64px; background:linear-gradient(135deg,var(--s3),#000); position:relative; }
.reel-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.reel-play-btn { width:54px; height:54px; background:rgba(255,255,255,.9); border-radius:50%; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px); transition:.2s; }
.reel-play-btn svg { width:22px; height:22px; margin-right:-3px; }
.reel-meta { position:absolute; bottom:0; left:0; right:0; padding:12px; background:linear-gradient(transparent,rgba(0,0,0,.85)); }
.reel-title { font-size:.82rem; font-weight:700; color:#fff; }
.reel-views { font-size:.68rem; color:rgba(255,255,255,.7); }
.reel-badge { position:absolute; top:10px; right:10px; background:rgba(255,77,106,.9); color:#fff; font-size:.62rem; font-weight:800; padding:3px 8px; border-radius:5px; font-family:var(--mono); }
.shorts-strip { display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; margin-bottom:16px; }
.shorts-strip::-webkit-scrollbar { display:none; }
.short-card { flex-shrink:0; width:120px; border-radius:10px; overflow:hidden; background:var(--s3); cursor:pointer; border:1px solid var(--bdr2); transition:.2s; position:relative; }
.short-card:hover { border-color:var(--g); transform:scale(1.03); }
.short-thumb { height:180px; display:flex; align-items:center; justify-content:center; font-size:36px; background:linear-gradient(135deg,var(--s3),var(--s5)); }
.short-label { padding:7px 8px; font-size:.68rem; font-weight:700; color:var(--tx); line-height:1.3; }
.short-dur { position:absolute; top:7px; right:7px; background:rgba(0,0,0,.75); color:#fff; font-size:.6rem; font-weight:700; font-family:var(--mono); padding:2px 5px; border-radius:4px; }
.short-views { position:absolute; bottom:44px; right:7px; background:rgba(0,0,0,.7); color:#fff; font-size:.58rem; font-family:var(--mono); padding:1px 5px; border-radius:4px; }
/* Composer */
.composer { background:var(--s1); border:1px solid var(--bdr); border-radius:14px; padding:16px; margin-bottom:14px; }
.composer-top { display:flex; gap:10px; margin-bottom:12px; }
.comp-inp { flex:1; background:var(--s2); border:1px solid var(--bdr2); border-radius:9px; padding:10px 14px; color:var(--tx); font-size:.86rem; outline:none; resize:none; min-height:56px; transition:.18s; }
.comp-inp:focus { border-color:var(--g); }
.comp-inp::placeholder { color:var(--mu); }
.comp-actions { display:flex; gap:7px; justify-content:space-between; align-items:center; }
.comp-types { display:flex; gap:5px; }
.ctype-btn { width:32px; height:32px; background:var(--s2); border:1px solid var(--bdr2); border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:14px; transition:.17s; }
.ctype-btn:hover { border-color:var(--g); }
.comp-post { padding:7px 18px; background:var(--g); border-radius:7px; color:#000; font-size:.82rem; font-weight:800; transition:.18s; }
.comp-post:hover { background:var(--g2); }

/* ══════════════════════════════════════════════════
   RANKINGS
══════════════════════════════════════════════════ */
.rank-tabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.rtab { padding:6px 13px; border-radius:8px; border:1px solid var(--bdr2); background:none; color:var(--tx2); font-size:.79rem; font-weight:600; transition:.17s; }
.rtab.on { background:var(--gdim); border-color:var(--bdr); color:var(--g); }
.rank-item { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--s1); border:1px solid var(--bdr2); border-radius:10px; margin-bottom:7px; transition:.18s; cursor:pointer; }
.rank-item:hover { border-color:var(--bdr); background:var(--s2); transform:translateX(-3px); }
.ri-num { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:900; flex-shrink:0; }
.r1 { background:var(--yw); color:#000; box-shadow:0 0 9px rgba(239,222,96,.4); }
.r2 { background:#C0C0C0; color:#000; }
.r3 { background:#CD7F32; color:#fff; }
.rn { background:var(--s3); color:var(--tx2); }
.ri-info { flex:1; min-width:0; }
.ri-name { font-size:.84rem; font-weight:700; color:var(--tx); }
.ri-meta { font-size:.68rem; color:var(--mu); }
.ri-val { font-size:.9rem; font-weight:900; color:var(--g); font-family:var(--mono); }
.ri-lbl { font-size:.62rem; color:var(--mu); }
.t-up { color:var(--g); font-size:.7rem; }
.t-dn { color:var(--rd); font-size:.7rem; }
.t-st { color:var(--tx2); font-size:.7rem; }
.supp-btn { padding:3px 9px; border:1px solid var(--bdr); border-radius:6px; color:var(--g); font-size:.68rem; font-weight:700; transition:.17s; flex-shrink:0; }
.supp-btn:hover,.supp-btn.on { background:var(--g); color:#000; border-color:var(--g); }

/* ══════════════════════════════════════════════════
   PROFILE — Rep Bars
══════════════════════════════════════════════════ */
.p-hero { background:linear-gradient(135deg,var(--s1),var(--s2)); border:1px solid var(--bdr2); border-radius:16px; padding:24px; margin-bottom:18px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.p-av { width:76px; height:76px; border-radius:50%; border:3px solid var(--g); background:var(--gdim); display:flex; align-items:center; justify-content:center; font-size:30px; flex-shrink:0; box-shadow:0 0 22px rgba(78,205,196,.26); overflow:hidden; }
.p-av img { width:100%; height:100%; object-fit:cover; }
.p-info { flex:1; min-width:0; }
.p-info h2 { font-size:1.3rem; font-weight:900; color:var(--tx); }
.p-info p { font-size:.8rem; color:var(--tx2); }
.p-badges-row { display:flex; gap:5px; margin-top:6px; flex-wrap:wrap; }
.f-counts { display:flex; gap:16px; margin-top:6px; }
.fc-it { text-align:center; cursor:pointer; }
.fc-n { font-size:1rem; font-weight:900; color:var(--tx); font-family:var(--mono); }
.fc-l { font-size:.66rem; color:var(--mu); }
.rep-bars { flex:1; display:flex; flex-direction:column; gap:9px; min-width:180px; }
.rbl { display:flex; justify-content:space-between; font-size:.72rem; margin-bottom:3px; }
.rbn { font-weight:700; color:var(--tx2); }
.rbv { font-weight:800; font-family:var(--mono); }
.rb-g { color:var(--g); } .rb-b { color:var(--bl); } .rb-y { color:var(--yw); }
.rb-track { height:5px; background:var(--s3); border-radius:3px; overflow:hidden; }
.rb-fill { height:100%; border-radius:3px; transition:width .8s ease; }
.rbf-l { background:linear-gradient(90deg,var(--gd),var(--g)); }
.rbf-s { background:linear-gradient(90deg,#1e6ea7,var(--bl)); }
.rbf-r { background:linear-gradient(90deg,#9a6500,var(--yw)); }
.xp-bar-wrap { background:var(--s1); border:1px solid var(--bdr2); border-radius:10px; padding:14px; margin-bottom:16px; }
.xp-bar-lbl { display:flex; justify-content:space-between; font-size:.72rem; color:var(--mu); margin-bottom:5px; }
.xp-bar-track { height:7px; background:var(--s3); border-radius:4px; overflow:hidden; }
.xp-bar-fill { height:100%; background:linear-gradient(90deg,var(--gd),var(--g)); border-radius:4px; transition:width .8s ease; }
.badges-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:9px; margin:16px 0; }
.badge-it { background:var(--s2); border:1px solid var(--bdr2); border-radius:10px; padding:12px 8px; text-align:center; transition:.2s; }
.badge-it:hover { border-color:rgba(239,222,96,.3); transform:translateY(-3px); }
.badge-it.locked { opacity:.3; filter:grayscale(1); }
.badge-it.unlocked { border-color:rgba(239,222,96,.25); }
.b-em { font-size:26px; margin-bottom:4px; }
.b-nm { font-size:.67rem; font-weight:700; color:var(--tx); }
.b-xp { font-size:.6rem; color:var(--g); font-family:var(--mono); }

/* ══════════════════════════════════════════════════
   NOTIFICATIONS PANEL
══════════════════════════════════════════════════ */
.notif-ov { display:none; position:fixed; inset:0; z-index:3000; background:rgba(6,13,24,.75); backdrop-filter:blur(8px); }
.notif-ov.open { display:block; }
.notif-panel { position:fixed; top:0; left:0; bottom:0; width:350px; max-width:100vw; background:var(--s1); border-left:1px solid var(--bdr); z-index:3001; transform:translateX(100%); transition:transform .28s cubic-bezier(.16,1,.3,1); display:flex; flex-direction:column; }
.notif-panel.open { transform:translateX(0); }
.np-hdr { padding:16px 18px; border-bottom:1px solid var(--bdr2); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.np-title { font-size:.96rem; font-weight:800; color:var(--tx); }
.np-close { background:var(--s3); border-radius:7px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:var(--tx2); transition:.17s; }
.np-close:hover { background:var(--rd); color:#fff; }
.np-settings { padding:12px 18px; border-bottom:1px solid var(--bdr2); flex-shrink:0; }
.np-stit { font-size:.63rem; font-weight:700; color:var(--mu); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.np-toggle { display:flex; align-items:center; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--bdr2); }
.np-toggle:last-child { border-bottom:none; }
.np-tl { font-size:.79rem; color:var(--tx); }
.ts { position:relative; width:34px; height:18px; cursor:pointer; }
.ts input { opacity:0; width:0; height:0; }
.tsl { position:absolute; inset:0; background:var(--s3); border-radius:9px; transition:.22s; border:1px solid var(--bdr2); }
.tsl::before { content:''; position:absolute; width:12px; height:12px; background:#fff; border-radius:50%; bottom:2px; right:2px; transition:.22s; }
input:checked+.tsl { background:var(--g); border-color:var(--g); }
input:checked+.tsl::before { transform:translateX(-16px); }
.np-list { flex:1; overflow-y:auto; padding:6px 0; }
.ni { display:flex; align-items:flex-start; gap:10px; padding:11px 18px; border-bottom:1px solid var(--bdr2); transition:.15s; cursor:pointer; }
.ni:hover { background:var(--s2); }
.ni.unread { background:rgba(78,205,196,.04); }
.ni-icon { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.ni-g { background:rgba(78,205,196,.1); } .ni-r { background:rgba(255,77,106,.1); } .ni-b { background:rgba(56,189,248,.1); } .ni-y { background:rgba(239,222,96,.1); } .ni-p { background:rgba(168,85,247,.1); }
.ni-body { flex:1; }
.ni-title { font-size:.82rem; font-weight:700; color:var(--tx); }
.ni-time { font-size:.68rem; color:var(--mu); }
.ni-dot { width:7px; height:7px; background:var(--g); border-radius:50%; flex-shrink:0; margin-top:5px; }

/* ══════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════ */
.modal-ov { display:none; position:fixed; inset:0; z-index:4000; background:rgba(6,13,24,.92); backdrop-filter:blur(14px); align-items:center; justify-content:center; padding:18px; }
.modal-ov.open { display:flex; }
.modal-box { background:var(--s1); border:1px solid var(--bdr); border-radius:20px; width:100%; max-width:430px; padding:28px; position:relative; animation:mIn .28s cubic-bezier(.16,1,.3,1) both; }
@keyframes mIn { from{opacity:0;transform:scale(.94) translateY(16px)} to{opacity:1;transform:none} }
.modal-close { position:absolute; top:14px; left:14px; background:var(--s3); border-radius:7px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:var(--tx2); transition:.17s; font-size:.9rem; }
.modal-close:hover { background:var(--rd); color:#fff; }
.rm-ov { display:none; position:fixed; inset:0; z-index:5500; background:rgba(6,13,24,.9); backdrop-filter:blur(14px); overflow-y:auto; padding:18px; }
.rm-ov.open { display:flex; align-items:flex-start; justify-content:center; }
.rm-box { background:var(--s1); border:1px solid var(--bdr); border-radius:18px; width:100%; max-width:640px; padding:24px; margin:auto; position:relative; animation:mIn .28s ease both; }
.rm-close { position:absolute; top:14px; left:14px; background:var(--s3); border-radius:8px; width:33px; height:33px; display:flex; align-items:center; justify-content:center; color:var(--tx2); transition:.17s; font-size:.9rem; }
.rm-close:hover { background:var(--rd); color:#fff; }
.rm-match-hdr { text-align:center; padding-bottom:16px; border-bottom:1px solid var(--bdr2); margin-bottom:16px; }
.rm-teams { display:flex; align-items:center; justify-content:center; gap:13px; margin-bottom:6px; }
.rm-tn { font-size:.96rem; font-weight:800; color:var(--tx); }
.rm-sc { background:var(--s2); border:1px solid var(--bdr); border-radius:8px; padding:6px 16px; font-size:1.4rem; font-weight:900; color:var(--g); font-family:var(--mono); }
.rm-lg { font-size:.74rem; color:var(--mu); }
.cd-bar { background:var(--s2); border:1px solid var(--bdr2); border-radius:8px; padding:10px 14px; margin-bottom:15px; display:flex; align-items:center; justify-content:space-between; }
.cd-lbl { font-size:.76rem; color:var(--mu); }
.cd-t { font-family:var(--mono); color:var(--g); font-weight:700; font-size:.86rem; }
.rm-cats { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.rcat { padding:5px 13px; border-radius:7px; border:1px solid var(--bdr2); background:none; color:var(--tx2); font-size:.78rem; font-weight:600; transition:.17s; }
.rcat.on { background:var(--gdim); border-color:var(--bdr); color:var(--g); }
.pl-row { display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--bdr2); }
.pl-row:last-child { border-bottom:none; }
.pl-info { flex:1; }
.pl-nm { font-size:.88rem; font-weight:700; color:var(--tx); }
.pl-pos { font-size:.68rem; color:var(--mu); }
.stars { display:flex; gap:3px; align-items:center; }
.star { font-size:20px; cursor:pointer; color:var(--s4); transition:.13s; user-select:none; }
.star.on { color:var(--yw); }
.star:hover { transform:scale(1.3); }
.sv { font-size:.76rem; font-weight:700; color:var(--g); font-family:var(--mono); min-width:20px; text-align:center; }
.sub-btn { width:100%; padding:13px; background:var(--g); border-radius:10px; color:#000; font-size:.92rem; font-weight:800; margin-top:16px; transition:.18s; box-shadow:0 0 20px rgba(78,205,196,.22); }
.sub-btn:hover:not(:disabled) { background:var(--g2); transform:translateY(-1px); }
.sub-btn:disabled { opacity:.36; cursor:not-allowed; }
.rm-success { display:none; text-align:center; padding:32px 0; }
.rm-success.show { display:block; }
.suc-ico { font-size:56px; margin-bottom:12px; animation:bounce .5s ease; }
@keyframes bounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }
.suc-tit { font-size:1.3rem; font-weight:900; color:var(--tx); margin-bottom:6px; }
.suc-sub { font-size:.86rem; color:var(--tx2); margin-bottom:16px; }
.suc-fsi { background:var(--gdim); border:1px solid var(--bdr); border-radius:10px; padding:14px; }
.suc-n { font-size:1.9rem; font-weight:900; color:var(--g); font-family:var(--mono); }
.suc-xp { background:rgba(239,222,96,.1); border:1px solid rgba(239,222,96,.22); border-radius:7px; padding:7px 14px; font-size:.8rem; font-weight:700; color:var(--yw); margin-top:10px; display:inline-block; }

/* AUTH */
.auth-ov { display:none; position:fixed; inset:0; z-index:5000; background:rgba(6,13,24,.95); backdrop-filter:blur(18px); overflow-y:auto; padding:18px; }
.auth-ov.open { display:flex; align-items:center; justify-content:center; }
.auth-box { background:var(--s1); border:1px solid var(--bdr); border-radius:20px; width:100%; max-width:420px; padding:28px; position:relative; animation:mIn .28s ease both; }
.auth-logo { text-align:center; margin-bottom:20px; }
.auth-logo h2 { font-size:1.3rem; font-weight:900; color:var(--tx); }
.auth-logo p { font-size:.82rem; color:var(--tx2); }
.social-btns { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.soc-btn { display:flex; align-items:center; justify-content:center; gap:9px; padding:10px; background:var(--s2); border:1px solid var(--bdr2); border-radius:9px; color:var(--tx); font-size:.86rem; font-weight:700; transition:.17s; }
.soc-btn:hover { border-color:var(--g); }
.divider { display:flex; align-items:center; gap:10px; margin:12px 0; color:var(--mu); font-size:.72rem; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--bdr2); }
.auth-tabs { display:flex; gap:0; margin-bottom:18px; background:var(--s2); border-radius:8px; padding:3px; }
.atab { flex:1; padding:8px; border-radius:6px; color:var(--tx2); font-size:.84rem; font-weight:700; transition:.17s; }
.atab.on { background:var(--g); color:#000; }
.fgroup { margin-bottom:13px; }
.fl { font-size:.76rem; font-weight:700; color:var(--tx2); margin-bottom:5px; display:block; }
.fi { width:100%; padding:10px 13px; background:var(--s2); border:1px solid var(--bdr2); border-radius:8px; color:var(--tx); font-size:.86rem; outline:none; transition:.17s; }
.fi:focus { border-color:var(--g); box-shadow:0 0 0 3px var(--gdim); }
.fi::placeholder { color:var(--mu); }
.fsel { width:100%; padding:10px 13px; background:var(--s2); border:1px solid var(--bdr2); border-radius:8px; color:var(--tx); font-size:.86rem; outline:none; cursor:pointer; }
.tsb { background:var(--s2); border:1px solid var(--bdr2); border-radius:10px; padding:12px; margin-bottom:13px; }
.tsb-title { font-size:.78rem; font-weight:700; color:var(--g); margin-bottom:9px; }
.tsb-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.tsb-lbl { font-size:.74rem; color:var(--tx2); min-width:74px; }
.fb { width:100%; padding:12px; background:var(--g); border-radius:9px; color:#000; font-size:.92rem; font-weight:800; transition:.18s; margin-top:5px; box-shadow:0 0 17px rgba(78,205,196,.22); }
.fb:hover { background:var(--g2); }

/* PREDICTIONS */
.pred-grid { display:grid; grid-template-columns:1fr 290px; gap:18px; align-items:start; }
@media(max-width:760px) { .pred-grid { grid-template-columns:1fr; } }
.pred-card { background:var(--s1); border:1px solid var(--bdr2); border-radius:14px; overflow:hidden; margin-bottom:12px; }
.pred-h { padding:12px 16px; background:var(--s2); border-bottom:1px solid var(--bdr2); display:flex; align-items:center; justify-content:space-between; }
.pred-lg { font-size:.74rem; font-weight:700; color:var(--mu); }
.pred-dl { font-size:.7rem; color:var(--or); font-weight:600; }
.pred-body { padding:16px; }
.pred-teams { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.pred-team { text-align:center; }
.pred-tn { font-size:.8rem; font-weight:700; color:var(--tx); margin-top:5px; }
.pred-vs { font-size:1rem; font-weight:900; color:var(--mu); }
.pred-inputs { display:flex; align-items:center; gap:7px; justify-content:center; margin-bottom:12px; }
.score-inp { width:52px; height:52px; background:var(--s2); border:2px solid var(--bdr); border-radius:9px; text-align:center; font-size:1.3rem; font-weight:900; color:var(--tx); outline:none; transition:.17s; font-family:var(--mono); }
.score-inp:focus { border-color:var(--g); box-shadow:0 0 0 3px var(--gdim); }
.score-dash { font-size:1.1rem; font-weight:900; color:var(--mu); }
.pred-sub { width:100%; padding:10px; background:var(--g); border-radius:9px; color:#000; font-size:.88rem; font-weight:800; transition:.17s; }
.pred-sub:hover { background:var(--g2); }
.pred-sub:disabled { opacity:.38; cursor:not-allowed; }
.pred-pts { display:flex; align-items:center; justify-content:space-between; margin-top:9px; }
.pred-pts-i { font-size:.7rem; color:var(--mu); }
.pred-pts-v { font-size:.78rem; font-weight:800; color:var(--yw); font-family:var(--mono); }
.pred-lb { background:var(--s1); border:1px solid var(--bdr2); border-radius:12px; padding:18px; }
.pred-lb-t { font-size:.9rem; font-weight:800; color:var(--tx); margin-bottom:12px; }
.plb-row { display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid var(--bdr2); }
.plb-row:last-child { border-bottom:none; }
.plb-rk { width:22px; text-align:center; font-size:.76rem; font-weight:900; }
.plb-1 { color:var(--yw); }
.plb-av { width:28px; height:28px; border-radius:50%; background:var(--s3); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; overflow:hidden; }
.plb-av img { width:100%; height:100%; object-fit:cover; }
.plb-nm { flex:1; font-size:.82rem; font-weight:700; color:var(--tx); }
.plb-pts { font-size:.86rem; font-weight:900; color:var(--g); font-family:var(--mono); }
.plb-acc { font-size:.68rem; color:var(--mu); }

/* ONBOARDING */
.ob-overlay { display:none; position:fixed; inset:0; z-index:9000; background:rgba(6,13,24,.97); backdrop-filter:blur(20px); align-items:center; justify-content:center; padding:20px; }
.ob-overlay.open { display:flex; }
.ob-box { background:var(--s1); border:1px solid var(--bdr); border-radius:24px; width:100%; max-width:480px; padding:36px 32px; position:relative; animation:mIn .4s ease both; }
.ob-steps { display:flex; gap:8px; justify-content:center; margin-bottom:32px; }
.ob-step { width:32px; height:4px; border-radius:2px; background:var(--s3); transition:.3s; }
.ob-step.active { background:var(--g); width:48px; }
.ob-step.done { background:var(--gd); }
.ob-icon { font-size:52px; text-align:center; margin-bottom:16px; }
.ob-title { font-size:1.4rem; font-weight:900; color:var(--tx); text-align:center; margin-bottom:8px; }
.ob-sub { font-size:.88rem; color:var(--tx2); text-align:center; margin-bottom:28px; line-height:1.7; }
.ob-xp-table { background:var(--s2); border-radius:10px; padding:14px 16px; margin-bottom:20px; }
.ob-xp-row { display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--bdr2); font-size:.82rem; }
.ob-xp-row:last-child { border-bottom:none; }
.ob-xp-act { color:var(--tx2); }
.ob-xp-val { font-weight:800; color:var(--yw); font-family:var(--mono); }
.ob-btn { width:100%; padding:14px; background:var(--g); border-radius:11px; color:#000; font-size:1rem; font-weight:800; transition:.2s; box-shadow:0 0 24px rgba(78,205,196,.3); }
.ob-btn:hover { background:var(--g2); transform:translateY(-2px); }
.ob-skip { display:block; text-align:center; margin-top:12px; font-size:.8rem; color:var(--mu); cursor:pointer; transition:.18s; }
.ob-skip:hover { color:var(--tx2); }
.ob-react-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:20px; }
.ob-react-item { background:var(--s2); border-radius:9px; padding:12px 8px; text-align:center; border:1px solid var(--bdr2); }
.ob-react-icon { font-size:24px; margin-bottom:4px; }
.ob-react-nm { font-size:.72rem; font-weight:700; color:var(--tx); }

/* REFERRAL */
.ref-ico { font-size:46px; text-align:center; margin-bottom:10px; }
.ref-h3 { font-size:1.25rem; font-weight:900; color:var(--tx); text-align:center; margin-bottom:5px; }
.ref-sub { font-size:.84rem; color:var(--tx2); text-align:center; margin-bottom:18px; }
.ref-rewards { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:18px; }
.ref-rw { background:var(--s2); border:1px solid var(--bdr2); border-radius:9px; padding:12px; text-align:center; }
.ref-rw-ico { font-size:20px; margin-bottom:4px; }
.ref-rw-val { font-size:.88rem; font-weight:800; color:var(--g); }
.ref-rw-lbl { font-size:.68rem; color:var(--mu); }
.ref-link-box { background:var(--s2); border:1px solid var(--bdr); border-radius:9px; padding:12px 14px; margin-bottom:12px; }
.ref-link-lbl { font-size:.68rem; color:var(--mu); font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:5px; }
.ref-link-row { display:flex; gap:7px; }
.ref-input { flex:1; background:var(--s3); border:1px solid var(--bdr2); border-radius:7px; padding:8px 11px; color:var(--g); font-family:var(--mono); font-size:.78rem; outline:none; }
.ref-copy { padding:8px 13px; background:var(--g); border-radius:7px; color:#000; font-weight:800; font-size:.78rem; white-space:nowrap; transition:.17s; }
.ref-copy:hover { background:var(--g2); }
.ref-stats { display:flex; gap:14px; justify-content:center; margin-bottom:14px; }
.refst { text-align:center; }
.refst-n { font-size:1.3rem; font-weight:900; color:var(--yw); font-family:var(--mono); }
.refst-l { font-size:.68rem; color:var(--mu); }
.ref-shares { display:flex; gap:7px; justify-content:center; flex-wrap:wrap; }
.ref-sh-btn { padding:7px 14px; border-radius:7px; border:1px solid var(--bdr2); background:none; color:var(--tx); font-size:.76rem; font-weight:700; display:flex; align-items:center; gap:5px; transition:.17s; }
.ref-sh-btn:hover { border-color:var(--g); color:var(--g); }

@media(max-width:480px) { .hero h1 { font-size:1.95rem; } .hero-cta { flex-direction:column; align-items:stretch; } .hstats { gap:22px; } }

/* FOOTER */
footer { background:var(--s1); border-top:1px solid var(--bdr2); padding:28px 18px; text-align:center; margin-top:52px; }
.foot-logo { font-size:1.1rem; font-weight:900; color:var(--tx); margin-bottom:6px; }
.foot-logo .ball { color:var(--brand-cyan); }
.foot-links { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin:11px 0; }
.foot-links a { font-size:.76rem; color:var(--tx2); transition:.17s; }
.foot-links a:hover { color:var(--g); }
footer p { font-size:.74rem; color:var(--mu); }

/* BOTTOM NAV */
.bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; background:rgba(6,13,24,.97); border-top:1px solid var(--bdr2); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); z-index:900; padding:6px 0 calc(6px + env(safe-area-inset-bottom)); will-change:transform; }
[data-theme="light"] .bottom-nav { background:rgba(238,244,247,.97); }
.bn-inner { display:flex; justify-content:space-around; align-items:center; max-width:500px; margin:0 auto; position:relative; }
.bn-item { display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 8px; border-radius:10px; transition:.18s; color:var(--mu); min-width:48px; background:none; border:none; cursor:pointer; font-family:var(--font); }
.bn-item.on { color:var(--g); }
.bn-icon { font-size:20px; }
.bn-label { font-size:.56rem; font-weight:700; }
.bn-more-menu { position:absolute; bottom:100%; right:max(8px,env(safe-area-inset-right)); background:var(--s1); border:1px solid var(--bdr); border-radius:14px 14px 0 0; padding:8px 0; min-width:190px; box-shadow:0 -8px 32px rgba(0,0,0,.35); z-index:901; }
.bn-more-menu[hidden] { display:none; }
.bn-more-item { display:flex; align-items:center; gap:10px; padding:13px 18px; min-height:44px; width:100%; background:none; border:0; color:var(--tx); font-size:.9rem; font-family:var(--font); font-weight:600; cursor:pointer; text-align:start; }
.bn-more-item:hover,.bn-more-item:focus-visible { background:var(--s2); }
.mobile-lang-switch { display:none; }

button,.bn-item,.nv,.fchip,.rtab,.dtab { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],textarea,select,.fi,.comp-inp,.score-inp,.search-inp { font-size:16px !important; }
@media (pointer:coarse) {
  * { touch-action:manipulation; }
  input,textarea,select { touch-action:auto; }
}

/* ══════════════════════════════════════════
   v5.5 ADDITIONS
══════════════════════════════════════════ */

/* Club logo img */
.club-logo-img { width:100%; height:100%; object-fit:contain; padding:2px; border-radius:50%; }
.flag-img { width:22px; height:16px; border-radius:3px; object-fit:cover; vertical-align:middle; }
.player-img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* Loading skeleton */
.skel { background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 50%,var(--s2) 75%); background-size:200% 100%; animation:skelAnim 1.4s infinite; border-radius:6px; }
@keyframes skelAnim { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skel-row { height:56px; border-radius:10px; margin-bottom:8px; }
.skel-card { height:110px; border-radius:14px; margin-bottom:12px; }

/* Awards page */
.awards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-bottom:20px; }
.award-card { background:var(--s1); border:1px solid var(--bdr2); border-radius:16px; overflow:hidden; transition:.22s; }
.award-card:hover { border-color:var(--bdr); transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,.3); }
.award-card-head { padding:14px 16px; background:linear-gradient(135deg,var(--s2),var(--s3)); border-bottom:1px solid var(--bdr2); display:flex; align-items:center; justify-content:space-between; }
.award-cat { font-size:.78rem; font-weight:800; color:var(--g); }
.award-period { font-size:.68rem; color:var(--mu); }
.award-body { padding:16px; }
.award-podium { display:flex; gap:8px; align-items:flex-end; justify-content:center; margin-bottom:14px; }
.podium-item { text-align:center; }
.podium-pos { width:52px; height:52px; border-radius:50%; background:var(--s3); border:2px solid var(--bdr); display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 auto 5px; overflow:hidden; }
.podium-pos.gold { border-color:var(--yw); background:rgba(239,222,96,.1); }
.podium-pos.silver { border-color:#C0C0C0; background:rgba(192,192,192,.1); }
.podium-pos.bronze { border-color:#CD7F32; background:rgba(205,127,50,.1); }
.podium-name { font-size:.68rem; font-weight:700; color:var(--tx); max-width:60px; }
.podium-score { font-size:.62rem; color:var(--g); font-family:var(--mono); }
.podium-medal { font-size:1.1rem; }
.award-countdown { background:var(--s2); border:1px solid var(--bdr2); border-radius:8px; padding:8px 12px; display:flex; align-items:center; justify-content:space-between; font-size:.72rem; }
.award-cd-lbl { color:var(--mu); }
.award-cd-t { color:var(--or); font-weight:800; font-family:var(--mono); }

/* Integrity badge */
.integrity-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(78,205,196,.08); border:1px solid rgba(78,205,196,.18); border-radius:6px; padding:3px 9px; font-size:.68rem; font-weight:700; color:var(--g); }
.integrity-section { background:var(--s1); border:1px solid var(--bdr2); border-radius:12px; padding:14px 16px; max-width:720px; margin:0 auto 20px; }
.integrity-toggle { display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.integrity-body { display:none; margin-top:10px; font-size:.8rem; color:var(--tx2); line-height:1.7; }
.integrity-body.open { display:block; }
.integrity-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; margin-top:10px; }
.integrity-item { background:var(--s2); border-radius:8px; padding:10px 12px; }
.integrity-item-icon { font-size:18px; margin-bottom:4px; }
.integrity-item-title { font-size:.74rem; font-weight:700; color:var(--tx); }
.integrity-item-desc { font-size:.68rem; color:var(--mu); }

/* Continent filter */
.cont-filter { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.cont-btn { padding:4px 12px; border-radius:20px; border:1px solid var(--bdr2); background:none; color:var(--tx2); font-size:.74rem; font-weight:600; transition:.17s; display:flex; align-items:center; gap:4px; }
.cont-btn:hover { border-color:var(--g); color:var(--g); }
.cont-btn.on { background:var(--g); color:#000; border-color:var(--g); }

/* Enhanced match card */
.match-league-badge { display:flex; align-items:center; gap:5px; }
.live-score-pulse { animation:scorePulse 1s infinite; }
@keyframes scorePulse { 0%,100%{color:var(--rd)} 50%{color:#ff8fa0} }

/* Team selector search */
.team-search-wrap { margin-bottom:10px; }
.team-search-inp { width:100%; padding:8px 12px; background:var(--s2); border:1px solid var(--bdr2); border-radius:8px; color:var(--tx); font-size:.84rem; outline:none; transition:.17s; }
.team-search-inp:focus { border-color:var(--g); }

/* Enhanced player row in ratings */
.pl-photo { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--s3),var(--s4)); border:2px solid var(--bdr); overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; }
.pl-pos-badge { font-size:.58rem; font-weight:800; padding:2px 5px; border-radius:4px; font-family:var(--mono); }
.pos-gk { background:rgba(255,159,67,.15); color:var(--or); }
.pos-def { background:rgba(56,189,248,.12); color:var(--bl); }
.pos-mid { background:rgba(78,205,196,.12); color:var(--g); }
.pos-fwd { background:rgba(255,77,106,.12); color:var(--rd); }

/* Ranking enhanced */
.ri-flag { width:20px; height:14px; border-radius:2px; object-fit:cover; }
.ri-pos-badge { font-size:.58rem; font-weight:800; padding:1px 5px; border-radius:3px; }
.fsi-bar-wrap { flex:1; max-width:80px; }
.fsi-bar { height:4px; background:var(--s3); border-radius:2px; overflow:hidden; }
.fsi-bar-fill { height:100%; background:linear-gradient(90deg,var(--gd),var(--g)); border-radius:2px; }

/* ══════ MY TEAM PAGE ══════ */
.sub-tabs { display:flex; gap:5px; margin-bottom:16px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
.sub-tabs::-webkit-scrollbar { display:none; }
.stab { padding:7px 16px; border-radius:20px; border:1px solid var(--bdr2); background:none; color:var(--tx2); font-size:.8rem; font-weight:700; white-space:nowrap; transition:.17s; flex-shrink:0; }
.stab:hover { border-color:var(--g); color:var(--g); }
.stab.on { background:var(--g); color:#000; border-color:var(--g); }
.sub-page { display:none; }
.sub-page.active { display:block; animation:pageIn .25s ease both; }

/* Squad */
.squad-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.squad-card { background:var(--s1); border:1px solid var(--bdr2); border-radius:12px; padding:14px; text-align:center; transition:.22s; }
.squad-card:hover { border-color:var(--bdr); transform:translateY(-2px); }
.sq-photo { width:56px; height:56px; border-radius:50%; background:var(--s3); border:2px solid var(--bdr); margin:0 auto 8px; display:flex; align-items:center; justify-content:center; font-size:22px; overflow:hidden; }
.sq-number { font-size:.6rem; font-weight:900; background:var(--g); color:#000; border-radius:4px; padding:1px 6px; font-family:var(--mono); display:inline-block; margin-bottom:4px; }
.sq-name { font-size:.78rem; font-weight:700; color:var(--tx); margin-bottom:3px; }
.sq-pos { font-size:.62rem; }
.sq-support { padding:4px 12px; background:var(--gdim); border:1px solid var(--bdr); border-radius:6px; color:var(--g); font-size:.68rem; font-weight:700; margin-top:7px; transition:.17s; }
.sq-support:hover, .sq-support.on { background:var(--g); color:#000; }

/* Stats bars */
.stat-section { margin-bottom:18px; }
.stat-label { font-size:.82rem; font-weight:700; color:var(--tx); margin-bottom:8px; }
.stat-bar-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.stat-bar-lbl { font-size:.72rem; color:var(--tx2); min-width:60px; }
.stat-bar-track { flex:1; height:8px; background:var(--s3); border-radius:4px; overflow:hidden; }
.stat-bar-fill { height:100%; border-radius:4px; transition:width .8s ease; }
.sbf-w { background:var(--g); }
.sbf-d { background:var(--yw); }
.sbf-l { background:var(--rd); }
.stat-val { font-size:.72rem; font-weight:800; color:var(--tx); font-family:var(--mono); min-width:28px; text-align:center; }
.stadium-card { background:var(--s2); border:1px solid var(--bdr2); border-radius:12px; padding:16px; margin-top:14px; }
.stadium-icon { font-size:36px; margin-bottom:10px; }
.stadium-name { font-size:1.1rem; font-weight:900; color:var(--tx); margin-bottom:4px; }
.stadium-meta { font-size:.8rem; color:var(--tx2); }

/* League Table */
.table-wrap { overflow-x:auto; }
.league-table { width:100%; border-collapse:collapse; font-size:.8rem; }
.league-table th { padding:8px 6px; font-size:.68rem; font-weight:700; color:var(--mu); text-align:center; border-bottom:2px solid var(--bdr); position:sticky; top:0; background:var(--bg); }
.league-table th:first-child, .league-table td:first-child { text-align:center; width:30px; }
.league-table th:nth-child(2), .league-table td:nth-child(2) { text-align:right; min-width:130px; }
[data-lang="en"] .league-table th:nth-child(2), [data-lang="en"] .league-table td:nth-child(2) { text-align:left; }
.league-table td { padding:8px 6px; border-bottom:1px solid var(--bdr2); text-align:center; transition:.15s; }
.league-table tr:hover td { background:var(--s2); }
.lt-rank { font-size:.72rem; font-weight:900; color:var(--tx2); }
.lt-team { display:flex; align-items:center; gap:7px; }
.lt-pts { font-weight:900; color:var(--g); font-family:var(--mono); }
.lt-cl { background:rgba(56,189,248,.08); }
.lt-el { background:rgba(239,222,96,.06); }
.lt-rel { background:rgba(255,77,106,.06); }
.lt-self td { font-weight:800; }
.lt-self .lt-pts { color:var(--yw); }

/* Scorers */
.scorer-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--bdr2); }
.scorer-row:last-child { border-bottom:none; }
.scorer-rank { width:26px; font-size:.72rem; font-weight:900; color:var(--mu); text-align:center; }
.scorer-photo { width:44px; height:44px; border-radius:50%; background:var(--s3); border:2px solid var(--bdr); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; overflow:hidden; }
.scorer-info { flex:1; }
.scorer-name { font-size:.84rem; font-weight:700; color:var(--tx); }
.scorer-club { font-size:.7rem; color:var(--mu); }
.scorer-goals { font-size:1.1rem; font-weight:900; color:var(--g); font-family:var(--mono); }
.scorer-assists { font-size:.7rem; color:var(--tx2); }

/* Match Detail View */
.match-detail-ov { display:none; position:fixed; inset:0; z-index:3500; background:var(--bg); overflow-y:auto; }
.match-detail-ov.open { display:block; animation:pageIn .25s ease both; }
.md-header { background:linear-gradient(135deg,var(--s1),var(--s2)); border-bottom:1px solid var(--bdr); padding:16px 18px; display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:10; }
.md-back { width:36px; height:36px; border-radius:9px; background:var(--s3); display:flex; align-items:center; justify-content:center; color:var(--tx2); flex-shrink:0; font-size:1.1rem; transition:.17s; }
.md-back:hover { background:var(--s4); color:var(--tx); }
.md-score-area { flex:1; }
.md-teams { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:4px; }
.md-tn { font-size:.88rem; font-weight:800; color:var(--tx); }
.md-score { font-size:2rem; font-weight:900; color:var(--g); font-family:var(--mono); padding:4px 18px; background:var(--s3); border-radius:9px; border:1px solid var(--bdr); }
.md-lg-badge { text-align:center; font-size:.7rem; color:var(--mu); }
.md-tabs { display:flex; border-bottom:2px solid var(--bdr2); padding:0 18px; }
.md-tab { padding:10px 16px; font-size:.82rem; font-weight:700; color:var(--tx2); border-bottom:2px solid transparent; margin-bottom:-2px; transition:.17s; white-space:nowrap; }
.md-tab.on { color:var(--g); border-bottom-color:var(--g); }
.md-content { padding:18px; }
.md-sub { display:none; }
.md-sub.active { display:block; }

/* Comments */
.comment-input-wrap { display:flex; gap:10px; padding:14px 18px; background:var(--s1); border-top:1px solid var(--bdr2); position:sticky; bottom:0; }
.comment-inp { flex:1; padding:9px 12px; background:var(--s2); border:1px solid var(--bdr2); border-radius:20px; color:var(--tx); font-size:.84rem; outline:none; font-family:var(--font); transition:.17s; }
.comment-inp:focus { border-color:var(--g); }
.comment-send { padding:9px 16px; background:var(--g); border-radius:20px; color:#000; font-size:.8rem; font-weight:800; transition:.17s; flex-shrink:0; }
.comment-send:hover { background:var(--g2); }
.comment-item { display:flex; gap:10px; padding:12px 0; border-bottom:1px solid var(--bdr2); }
.comment-item:last-child { border-bottom:none; }
.comment-av { width:36px; height:36px; border-radius:50%; background:var(--s3); border:1px solid var(--bdr2); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.comment-body { flex:1; }
.comment-meta { display:flex; align-items:center; gap:7px; margin-bottom:3px; }
.comment-user { font-size:.78rem; font-weight:700; color:var(--tx); }
.comment-time { font-size:.66rem; color:var(--mu); }
.comment-text { font-size:.82rem; color:var(--tx); line-height:1.55; margin-bottom:6px; }
.comment-actions { display:flex; gap:10px; }
.ca-btn { display:flex; align-items:center; gap:3px; font-size:.7rem; color:var(--tx2); background:none; border:none; cursor:pointer; font-family:var(--font); transition:.15s; }
.ca-btn:hover { color:var(--g); }
.ca-btn.liked { color:var(--rd); }

/* Timeline events */
.event-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--bdr2); }
.event-min { font-size:.72rem; font-weight:900; color:var(--g); font-family:var(--mono); min-width:35px; }
.event-icon { font-size:16px; }
.event-desc { font-size:.82rem; color:var(--tx); }

/* Lineup pitch */
.lineup-pitch { background:linear-gradient(180deg,#1a4d1a 0%,#0d3b0d 100%); border-radius:12px; padding:20px; margin-bottom:14px; position:relative; }
.lineup-row { display:flex; justify-content:center; gap:8px; margin-bottom:14px; }
.lineup-player { text-align:center; }
.lineup-circle { width:38px; height:38px; background:var(--g); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:900; color:#000; margin:0 auto 3px; border:2px solid rgba(255,255,255,.2); overflow:hidden; font-family:var(--mono); }
.lineup-circle.away { background:var(--rd); color:#fff; }
.lineup-pname { font-size:.58rem; color:#fff; max-width:44px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lineup-num { font-size:.56rem; color:rgba(255,255,255,.6); }

/* Settings */
.settings-accord { margin-bottom:8px; }
.settings-accord-hdr { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:var(--s1); border:1px solid var(--bdr2); border-radius:10px; cursor:pointer; transition:.18s; }
.settings-accord-hdr:hover { border-color:var(--bdr); }
.settings-accord-hdr h3 { font-size:.9rem; font-weight:800; color:var(--tx); }
.settings-accord-body { display:none; padding:14px 16px; background:var(--s1); border:1px solid var(--bdr2); border-top:none; border-radius:0 0 10px 10px; }
.settings-accord-body.open { display:block; }
.settings-inp { width:100%; padding:10px 12px; background:var(--s2); border:1px solid var(--bdr2); border-radius:8px; color:var(--tx); font-size:.86rem; outline:none; font-family:var(--font); transition:.17s; margin-bottom:10px; }
.settings-inp:focus { border-color:var(--g); }
.avatar-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin:10px 0; }
.avatar-opt { width:44px; height:44px; border-radius:50%; background:var(--s3); border:2px solid var(--bdr2); display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer; transition:.17s; margin:0 auto; }
.avatar-opt:hover { border-color:var(--g); }
.avatar-opt.on { border-color:var(--yw); box-shadow:0 0 10px rgba(239,222,96,.3); }

/* Notification rich cards */
.notif-card { display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-bottom:1px solid var(--bdr2); transition:.15s; cursor:pointer; }
.notif-card:hover { background:var(--s2); }
.notif-card.unread { background:rgba(78,205,196,.04); }
.nc-avatars { display:flex; flex-shrink:0; }
.nc-av { width:38px; height:38px; border-radius:50%; background:var(--s3); border:2px solid var(--bdr); display:flex; align-items:center; justify-content:center; font-size:16px; }
.nc-av + .nc-av { margin-right:-12px; }
[data-lang="en"] .nc-av + .nc-av { margin-right:0; margin-left:-12px; }
.nc-body { flex:1; }
.nc-title { font-size:.82rem; font-weight:700; color:var(--tx); margin-bottom:2px; }
.nc-sub { font-size:.72rem; color:var(--tx2); }
.nc-time { font-size:.66rem; color:var(--mu); }
.nc-score-badges { display:flex; gap:5px; margin-top:5px; }
.nc-team-badge { font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:5px; background:var(--s3); }
.notif-mark-all { width:100%; padding:10px; text-align:center; font-size:.78rem; font-weight:700; color:var(--g); background:none; border:none; cursor:pointer; border-bottom:1px solid var(--bdr2); transition:.17s; font-family:var(--font); }
.notif-mark-all:hover { background:var(--gdim); }

/* League browser */
.leagues-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.league-card { background:var(--s1); border:1px solid var(--bdr2); border-radius:12px; padding:16px; text-align:center; cursor:pointer; transition:.22s; }
.league-card:hover { border-color:var(--g); transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.2); }
.league-card.on { border-color:var(--g); background:var(--gdim); }
.lc-logo { font-size:32px; margin-bottom:8px; }
.lc-name { font-size:.74rem; font-weight:700; color:var(--tx); }
.lc-country { font-size:.62rem; color:var(--mu); }

/* Global search */
.global-search-ov { display:none; position:fixed; inset:0; z-index:6000; background:rgba(6,13,24,.95); backdrop-filter:blur(18px); }
.global-search-ov.open { display:flex; flex-direction:column; }
.gs-bar { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--bdr2); }
.gs-input { flex:1; padding:10px 14px; background:var(--s2); border:1px solid var(--bdr); border-radius:10px; color:var(--tx); font-size:.96rem; outline:none; font-family:var(--font); }
.gs-input::placeholder { color:var(--mu); }
.gs-close { padding:8px 14px; color:var(--tx2); font-size:.88rem; transition:.17s; }
.gs-close:hover { color:var(--tx); }
.gs-results { flex:1; overflow-y:auto; padding:16px 18px; }
.gs-category { font-size:.7rem; font-weight:800; color:var(--mu); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:8px; margin-top:16px; }
.gs-item { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--s1); border-radius:9px; margin-bottom:6px; cursor:pointer; transition:.17s; }
.gs-item:hover { background:var(--s2); }
.gs-item-icon { width:36px; height:36px; border-radius:50%; background:var(--s3); display:flex; align-items:center; justify-content:center; font-size:16px; }
.gs-item-info { flex:1; }
.gs-item-name { font-size:.84rem; font-weight:700; color:var(--tx); }
.gs-item-meta { font-size:.7rem; color:var(--mu); }

/* ═══════════════ VOTEBALL v9 NEW CSS ═══════════════ */

/* National flag + team dot in posts */
.nat-flag { font-size:14px; line-height:1; }
.team-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }

/* FanHall tabs */
.fh-tabs { display:flex; gap:6px; margin-bottom:14px; }
.fh-tab { padding:6px 14px; border-radius:20px; border:1px solid var(--bdr2); background:none; color:var(--tx2); font-size:.78rem; font-weight:700; transition:.17s; position:relative; }
.fh-tab:hover { border-color:var(--g); color:var(--g); }
.fh-tab.on { background:var(--g); color:#000; border-color:var(--g); }
.fh-tab-badge { position:absolute; top:-5px; right:-5px; background:var(--rd); color:#fff; border-radius:50%; width:16px; height:16px; font-size:.55rem; font-weight:900; display:flex; align-items:center; justify-content:center; }

/* Not Cool button + disputed */
.not-cool-btn { display:flex; align-items:center; gap:3px; padding:4px 9px; border-radius:7px; background:none; border:1px solid var(--bdr2); color:var(--tx2); font-size:.72rem; font-weight:600; cursor:pointer; transition:.17s; font-family:var(--font); }
.not-cool-btn:hover { border-color:var(--rd); color:var(--rd); }
.not-cool-btn.active { background:rgba(255,77,106,.1); border-color:var(--rd); color:var(--rd); }
.disputed-post { border-color:rgba(239,222,96,.4) !important; }

/* Full post overlay */
.fullpost-ov { display:none; position:fixed; inset:0; z-index:5500; background:rgba(6,13,24,.95); backdrop-filter:blur(16px); overflow-y:auto; }
.fullpost-ov.open { display:flex; flex-direction:column; animation:pageIn .25s ease both; }
.fp-header { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--bdr2); background:var(--s1); position:sticky; top:0; z-index:5; }
.fp-back { width:34px; height:34px; border-radius:8px; background:var(--s3); display:flex; align-items:center; justify-content:center; color:var(--tx2); font-size:1rem; flex-shrink:0; }
.fp-back:hover { background:var(--s4); color:var(--tx); }
.fp-content { flex:1; max-width:680px; margin:0 auto; width:100%; padding:0 0 80px; }
.fp-comment-bar { position:sticky; bottom:0; background:var(--s1); border-top:1px solid var(--bdr2); padding:10px 18px; display:flex; gap:9px; align-items:center; }

/* Favorites */
.fav-btn { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:none; border:1px solid var(--bdr2); font-size:14px; transition:.17s; flex-shrink:0; }
.fav-btn:hover, .fav-btn.on { background:rgba(239,222,96,.12); border-color:var(--yw); }
.fav-btn.on { color:var(--yw); }

/* Cheering bar visual */
.cheer-bar { height:6px; border-radius:3px; display:flex; overflow:hidden; margin-top:8px; background:var(--s3); }
.cb-home { background:var(--g); transition:width .5s ease; }
.cb-away { background:var(--rd); transition:width .5s ease; }
.cheer-pct { display:flex; justify-content:space-between; font-size:.62rem; color:var(--mu); font-family:var(--mono); margin-top:3px; }

/* Loyalty warning */
.loyalty-warning { border:1px solid var(--yw); background:rgba(239,222,96,.08); border-radius:9px; padding:12px 14px; font-size:.8rem; color:var(--yw); margin:12px 0; }

/* Continent tabs in matches */
.continent-tabs { display:flex; gap:5px; margin-bottom:10px; overflow-x:auto; scrollbar-width:none; }
.continent-tabs::-webkit-scrollbar { display:none; }

/* Dashboard strip */
.dashboard-strip { display:flex; gap:10px; overflow-x:auto; padding:0 18px 4px; scrollbar-width:none; margin:16px 0; }
.dashboard-strip::-webkit-scrollbar { display:none; }
.dash-card { flex-shrink:0; width:200px; background:var(--s1); border:1px solid var(--bdr2); border-radius:14px; padding:14px; cursor:pointer; transition:.22s; }
.dash-card:hover { border-color:var(--bdr); transform:translateY(-2px); }
.dash-card-title { font-size:.7rem; font-weight:700; color:var(--mu); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; }
.dash-card-value { font-size:1.5rem; font-weight:900; color:var(--g); font-family:var(--mono); margin-bottom:4px; }
.dash-card-sub { font-size:.72rem; color:var(--tx2); }

/* Onboarding grid for nat teams / clubs */
.ob-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:14px 0; max-height:260px; overflow-y:auto; scrollbar-width:thin; }
.ob-grid-item { background:var(--s2); border:2px solid var(--bdr2); border-radius:10px; padding:10px 6px; text-align:center; cursor:pointer; transition:.18s; }
.ob-grid-item:hover { border-color:var(--g); }
.ob-grid-item.on { border-color:var(--g); background:var(--gdim); }
.ob-grid-icon { font-size:22px; margin-bottom:4px; }
.ob-grid-name { font-size:.62rem; font-weight:700; color:var(--tx); }
.ob-search { width:100%; padding:8px 12px; background:var(--s2); border:1px solid var(--bdr2); border-radius:8px; color:var(--tx); font-size:.84rem; outline:none; font-family:var(--font); margin-bottom:10px; }
.ob-search:focus { border-color:var(--g); }

/* My Team Hub enhancements */
.team-hub-header { background:linear-gradient(135deg,var(--s1),var(--s2)); border:1px solid var(--bdr); border-radius:16px; padding:20px; margin-bottom:16px; display:flex; align-items:center; gap:14px; }
.team-hub-logo { width:64px; height:64px; border-radius:50%; border:3px solid var(--g); display:flex; align-items:center; justify-content:center; font-size:28px; flex-shrink:0; overflow:hidden; box-shadow:0 0 20px rgba(78,205,196,.22); }
.team-fan-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(255,77,106,.1); border:1px solid rgba(255,77,106,.2); border-radius:20px; padding:3px 10px; font-size:.7rem; font-weight:700; color:var(--rd); }

/* Search suggestions */
.search-suggestions { position:absolute; top:100%; right:0; left:0; z-index:100; background:var(--s1); border:1px solid var(--bdr); border-radius:0 0 10px 10px; box-shadow:0 8px 24px rgba(0,0,0,.3); display:none; }
.search-suggestions.show { display:block; }
.search-sug-item { display:flex; align-items:center; gap:9px; padding:9px 14px; cursor:pointer; font-size:.82rem; color:var(--tx2); transition:.15s; }
.search-sug-item:hover { background:var(--s2); color:var(--tx); }
.search-sug-cat { font-size:.64rem; font-weight:700; color:var(--mu); letter-spacing:1px; text-transform:uppercase; padding:7px 14px 3px; }

/* User profile overlay */
.userprofile-ov { display:none; position:fixed; inset:0; z-index:5000; background:var(--bg); overflow-y:auto; }
.userprofile-ov.open { display:block; animation:pageIn .25s ease both; }
.up-hero { background:linear-gradient(135deg,var(--s1),var(--s3)); padding:24px 18px; text-align:center; }
.up-av { width:72px; height:72px; border-radius:50%; border:3px solid var(--g); background:var(--gdim); display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 10px; box-shadow:0 0 20px rgba(78,205,196,.25); }
.up-name { font-size:1.2rem; font-weight:900; color:var(--tx); }
.up-meta { font-size:.78rem; color:var(--tx2); margin:4px 0 12px; }
.up-stats { display:flex; justify-content:center; gap:20px; margin:12px 0 16px; }
.up-stat { text-align:center; }
.up-stat-n { font-size:1.1rem; font-weight:900; color:var(--tx); font-family:var(--mono); }
.up-stat-l { font-size:.64rem; color:var(--mu); }
.follow-large-btn { padding:10px 28px; background:var(--g); border-radius:10px; color:#000; font-size:.9rem; font-weight:800; transition:.18s; }
.follow-large-btn:hover { background:var(--g2); }
.follow-large-btn.following { background:var(--s3); color:var(--tx2); border:1px solid var(--bdr); }

/* Scorers in Rankings */
.scorers-table { width:100%; border-collapse:collapse; }
.scorers-table th { padding:9px 8px; font-size:.68rem; font-weight:700; color:var(--mu); text-transform:uppercase; letter-spacing:.5px; border-bottom:2px solid var(--bdr); background:var(--s2); text-align:center; }
.scorers-table th:nth-child(2) { text-align:right; }
[data-lang="en"] .scorers-table th:nth-child(2) { text-align:left; }
.scorers-table td { padding:10px 8px; border-bottom:1px solid var(--bdr2); text-align:center; font-size:.82rem; }
.scorers-table tr:nth-child(odd) td { background:rgba(78,205,196,.03); }
.sc-rank-gold td { border-right:3px solid var(--yw); }
.sc-rank-silver td { border-right:3px solid #C0C0C0; }
.sc-rank-bronze td { border-right:3px solid #CD7F32; }
[data-lang="en"] .sc-rank-gold td, [data-lang="en"] .sc-rank-silver td, [data-lang="en"] .sc-rank-bronze td { border-right:none; border-left:3px solid; }
.sc-goals { font-size:.92rem; font-weight:900; color:var(--g); font-family:var(--mono); }
.sc-player-cell { display:flex; align-items:center; gap:8px; }

/* Change club warning modal */
.warning-ov { display:none; position:fixed; inset:0; z-index:7000; background:rgba(6,13,24,.92); backdrop-filter:blur(14px); align-items:center; justify-content:center; padding:18px; }
.warning-ov.open { display:flex; }
.warning-box { background:var(--s1); border:1px solid rgba(239,222,96,.3); border-radius:18px; width:100%; max-width:400px; padding:28px; text-align:center; animation:mIn .3s ease both; }
@keyframes mIn { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:none} }
.warning-icon { font-size:52px; margin-bottom:12px; }
.warning-title { font-size:1.1rem; font-weight:900; color:var(--yw); margin-bottom:8px; }
.warning-body { font-size:.84rem; color:var(--tx2); line-height:1.7; margin-bottom:18px; }
.warning-btns { display:flex; gap:10px; }
.warning-cancel { flex:1; padding:11px; border:1px solid var(--bdr); border-radius:9px; color:var(--tx); font-size:.86rem; font-weight:700; transition:.17s; font-family:var(--font); }
.warning-cancel:hover { border-color:var(--g); color:var(--g); }
.warning-confirm { flex:1; padding:11px; background:var(--yw); border-radius:9px; color:#000; font-size:.86rem; font-weight:800; transition:.17s; }
.warning-confirm:hover { background:#f5e832; }

/* My favorites card in profile */
.fav-section { background:var(--s1); border:1px solid var(--bdr2); border-radius:14px; padding:16px; margin-bottom:14px; }
.fav-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.fav-chip { display:flex; align-items:center; gap:5px; background:var(--s2); border:1px solid var(--bdr2); border-radius:20px; padding:4px 11px; font-size:.74rem; font-weight:700; color:var(--tx); }
.fav-chip .remove-fav { color:var(--mu); font-size:.8rem; cursor:pointer; transition:.15s; }
.fav-chip .remove-fav:hover { color:var(--rd); }

/* ── RATING MODAL v9 PREMIUM ── */
.pl-av { width:44px; height:44px; background:var(--s3); border-radius:50%;
  border:2px solid var(--bdr2); display:flex; align-items:center;
  justify-content:center; font-size:18px; flex-shrink:0; }
.pl-flag { font-size:20px; }
.pl-pos-wrap { display:flex; align-items:center; gap:5px; margin-top:3px; }
.pos-badge { font-size:.58rem; font-weight:800; padding:1px 5px;
  border-radius:4px; font-family:var(--mono); }
.pos-gk  { background:rgba(255,159,67,.15); color:#FF9F43; }
.pos-def { background:rgba(56,189,248,.12); color:#38BDF8; }
.pos-mid { background:rgba(78,205,196,.12); color:var(--g); }
.pos-fwd { background:rgba(255,77,106,.12); color:var(--rd); }
.pl-country-flag { font-size:12px; opacity:.7; }
.suc-n { font-size:2.8rem; font-weight:900; color:var(--g);
  font-family:var(--mono); line-height:1; }
.suc-fsi { background:var(--gdim); border:1px solid var(--bdr);
  border-radius:12px; padding:16px; margin-bottom:12px; }
.suc-xp { display:inline-block; background:rgba(78,205,196,.1);
  border:1px solid rgba(78,205,196,.25); border-radius:20px;
  padding:5px 16px; font-size:.88rem; font-weight:800; color:var(--g); }
.rm-success.show { display:block; animation:ratingSuccess .4s cubic-bezier(.16,1,.3,1) both; }
@keyframes ratingSuccess {
  from { opacity:0; transform:scale(.9) translateY(10px); }
  to   { opacity:1; transform:none; }
}
.pl-row { transition:background .3s ease; border-radius:8px; padding:12px 6px; }
.pl-row:hover { background:rgba(78,205,196,.05); }
.star.on { color:var(--yw); text-shadow:0 0 8px rgba(239,222,96,.5); }
.star:hover { color:var(--yw); transform:scale(1.25); }
.sub-btn:hover:not(:disabled) { background:var(--g2,#3ecdc4); transform:translateY(-1px);
  box-shadow:0 0 32px rgba(78,205,196,.5); }
.sub-btn:active:not(:disabled) { transform:scale(.98); }
/* Rating cat buttons */
.rcat { transition:all .2s; }
.rcat:hover { border-color:var(--g); color:var(--g); }
.rcat.on { background:var(--g); color:#000; border-color:var(--g); }


/* ── MATCH DETAIL VOTE TAB ── */
.md-tab-vote { color:var(--yw) !important; }
.md-tab-vote.on { background:var(--yw) !important; color:#000 !important;
  border-color:var(--yw) !important; box-shadow:0 0 14px rgba(255,218,68,.3); }
.md-tab-vote:hover:not(.on) { border-color:var(--yw); }

/* Vote tab content area */
#md-vote-view { padding:16px 0; }
.mdvote-header { text-align:center; margin-bottom:20px; }
.mdvote-title { font-size:1.1rem; font-weight:900; margin-bottom:5px; }
.mdvote-sub { font-size:.8rem; color:var(--mu); }
.mdvote-teams-strip {
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:var(--s2); border:1px solid var(--bdr2); border-radius:12px;
  padding:12px; margin-bottom:16px;
}
.mdvote-team-block { display:flex; flex-direction:column; align-items:center; gap:5px; flex:1; }
.mdvote-score-block { text-align:center; }
.mdvote-score { font-size:1.6rem; font-weight:900; font-family:var(--mono);
  background:linear-gradient(135deg,var(--s1),var(--s3));
  border:1px solid var(--bdr); border-radius:10px; padding:3px 14px; }
.mdvote-team-name { font-size:.82rem; font-weight:800; }
.mdvote-btn-open {
  display:block; width:100%; padding:14px;
  background:linear-gradient(135deg,var(--gd),var(--g));
  border-radius:12px; color:#000; font-size:.95rem; font-weight:900;
  margin-bottom:12px; text-align:center;
  box-shadow:0 0 22px rgba(78,205,196,.3);
  transition:transform .15s, box-shadow .2s;
}
.mdvote-btn-open:hover { transform:translateY(-2px); box-shadow:0 0 32px rgba(78,205,196,.5); }
.mdvote-btn-open:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.mdvote-upcoming-msg {
  text-align:center; padding:24px; background:var(--s2);
  border-radius:12px; color:var(--mu); font-size:.86rem;
}
.mdvote-already { text-align:center; padding:20px;
  background:rgba(78,205,196,.08); border:1px solid rgba(78,205,196,.2);
  border-radius:12px; color:var(--g); font-size:.9rem; font-weight:700; }


/* ── MATCH CARD STATES ── */
.match-row.finished-m { border-right: 3px solid rgba(78,205,196,.3); }
[data-lang="en"] .match-row.finished-m { border-right:none; border-left:3px solid rgba(78,205,196,.3); }
.match-row.finished-m:hover { border-right-color:var(--g); }
[data-lang="en"] .match-row.finished-m:hover { border-left-color:var(--g); }

/* Rated badge */
.mstat.ms-rated { 
  background:rgba(78,205,196,.1); border:1px solid rgba(78,205,196,.25);
  color:var(--g); border-radius:6px; padding:2px 7px;
  font-size:.64rem; font-weight:700;
}

/* Rate button */
.rate-b {
  background: linear-gradient(135deg, #007ACC, var(--g));
  color:#000; border-radius:7px; padding:4px 11px;
  font-size:.72rem; font-weight:800; border:none;
  box-shadow:0 0 10px rgba(78,205,196,.3);
  transition:transform .15s, box-shadow .15s;
  white-space:nowrap;
}
.rate-b:hover { transform:scale(1.05); box-shadow:0 0 16px rgba(78,205,196,.5); }

/* Match detail rating hint bar */
#md-rating-hint { gap:10px; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile & Tablet
   Breakpoints:
     900px  → tablet: hamburger kicks in, hide desktop nav
     640px  → mobile: trim header, stack layouts
     400px  → small mobile: tightest adjustments
   ══════════════════════════════════════════════════════════════ */

/* ── TABLET: ≤ 900px ─────────────────────────────────────── */
@media (max-width: 900px) {
  /* Hide desktop nav, show hamburger */
  .nav { display: none; }
  .ham { display: flex; }
  /* Mobile nav dropdown */
  .nav.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 62px;
    right: 0;
    left: 0;
    background: rgba(6,13,24,.98);
    border-bottom: 1px solid var(--bdr);
    padding: 8px 10px 12px;
    gap: 3px;
    z-index: 999;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
  }
  [data-theme="light"] .nav.open { background: rgba(238,244,247,.98); }
  .nav.open .nv {
    padding: 10px 14px;
    font-size: .9rem;
    border-radius: 9px;
    text-align: right;
  }
  [data-lang="en"] .nav.open .nv { text-align: left; }
  .mobile-lang-switch { display:flex; gap:8px; padding:10px 4px 2px; border-top:1px solid var(--bdr2); margin-top:4px; }
  .mobile-lang-switch button { flex:1; min-height:44px; padding:8px; background:var(--s2); border:1px solid var(--bdr2); border-radius:8px; color:var(--tx); font-size:.82rem; font-weight:700; }

  /* Hero — reduce top padding */
  .hero { padding: 48px 18px 36px; }

  /* Grids: 3-col → 2-col on tablet */
  .g3 { grid-template-columns: 1fr 1fr; }
  .g4 { grid-template-columns: 1fr 1fr; }

  /* FanHall grid already handled at 820px */

  /* Show bottom nav */
  .bottom-nav { display: block; }
  .page { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .bn-item { min-height:44px; min-width:44px; padding:6px 4px; }
  .fchip { min-height:36px; }
  .dtab { min-height:40px; }
  .rtab,.react-btn { min-height:36px; }
  .react-btn { padding:6px 10px; }
  .match-row { cursor:pointer; }
  .ham { min-width:44px; min-height:44px; justify-content:center; align-items:center; }
}

/* ── TABLET PORTRAIT: 641px – 900px ── */
@media (min-width:641px) and (max-width:900px) {
  .pc { padding:18px 20px; }
  .g3,.g4 { grid-template-columns:1fr 1fr; }
  .fh-grid,.rank-grid,.pred-grid { grid-template-columns:1fr; }
  .cheer-teams { gap:10px; }
  .hero { padding:48px 24px 36px; }
  .tm-name { max-width:110px; font-size:.82rem; }
  .dashboard-strip { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; overflow:visible; }
  .bn-item { min-width:56px; padding:6px 8px; }
  .bn-icon { font-size:22px; }
  .bn-label { font-size:.6rem; }
}

/* ── MOBILE: ≤ 640px ─────────────────────────────────────── */
@media (max-width: 640px) {

  /* ── Header cleanup ── */
  .hdr { padding: 0 12px; gap: 8px; overflow:hidden; }
  .hdr-right { flex-shrink:1; min-width:0; }

  /* Keep search available; hide only the lower-priority notification/referral icons. */
  .hdr-right .icon-btn:nth-of-type(3) { display:none; }
  /* Hide lang toggle in header (accessible via hamburger menu) */
  .hdr-right .lang-toggle { display: none; }
  /* Hide XP chip in header */
  .xp-chip { display: none !important; }
  /* Shrink sign-in/join buttons */
  .btn-sign { padding: 5px 10px; font-size: .74rem; }
  .btn-join { padding: 6px 12px; font-size: .74rem; }
  /* Shrink user chip */
  .u-nm { display: none; }
  .u-chip { padding: 4px; }

  /* ── Layout ── */
  .pc { padding: 16px 12px; }
  .ptit { font-size: 1.2rem; }

  /* ── Hero ── */
  .hero { padding: 32px 16px 28px; }
  .hero h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.15; }
  .hero-sub { font-size: .88rem; margin-bottom: 22px; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 8px; }
  .btn-hero, .btn-hero-o { padding: 12px 20px; font-size: .9rem; }

  /* Stats: 2×2 grid */
  .hstats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 10px;
    margin-bottom: 28px;
  }
  .hsn { font-size: 1.4rem; }
  .hsl { font-size: .64rem; }

  /* Ticker — simplify */
  .ticker-wrap { padding: 9px 12px; gap: 8px; }

  /* ── Grids: always single column ── */
  .g2, .g3, .g4 { grid-template-columns: 1fr; }

  /* ── Cards ── */
  .card { padding: 14px; }

  /* ── Match rows ── */
  .match-row {
    padding: 10px 10px;
    gap: 6px;
  }
  .tm-name {
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90px;
  }
  .mscore { font-size: 1rem; padding: 4px 9px; }
  .club-logo { width: 26px; height: 26px; font-size: 10px; }
  .club-logo.lg { width: 40px; height: 40px; }

  /* ── Day tabs: scrollable ── */
  .day-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; padding-bottom: 6px; }
  .day-tabs::-webkit-scrollbar { display: none; }
  .dtab { font-size: .78rem; padding: 6px 12px; flex-shrink: 0; }

  /* Filter chips: scrollable */
  .filter-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .filter-row::-webkit-scrollbar { display: none; }
  .fchip { flex-shrink: 0; }

  /* ── Rating Modal — full-height bottom sheet ── */
  .rm-ov {
    padding: 0;
    align-items: flex-end;
  }
  .rm-box {
    border-radius: 20px 20px 0 0;
    max-width: 100%;
    width:100%;
    max-height:calc(92vh - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior:contain;
    padding:20px 16px calc(16px + env(safe-area-inset-bottom));
    margin: 0;
    -webkit-overflow-scrolling: touch;
  }
  /* Bigger star touch targets */
  .star { font-size: 26px; padding: 2px; }
  .pl-row { gap: 8px; padding: 10px 0; }
  .pl-nm { font-size: .82rem; }
  .pl-photo { width: 36px !important; height: 36px !important; }
  .rm-cats { gap: 5px; }
  .rcat { font-size: .74rem; padding: 5px 10px; }
  .sub-btn { padding: 14px; font-size: .88rem; }

  /* ── Auth Modal — full-height bottom sheet ── */
  .auth-ov { padding: 0; align-items: flex-end; }
  .auth-box {
    border-radius: 20px 20px 0 0;
    max-width: 100%;
    width:100%;
    max-height:calc(95vh - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior:contain;
    padding:24px 18px calc(18px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  /* ── Generic Modal — bottom sheet ── */
  .modal-ov { padding: 0; align-items: flex-end; }
  .modal-box {
    border-radius: 20px 20px 0 0;
    max-width: 100%;
    max-height:calc(95vh - env(safe-area-inset-bottom));
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:22px 18px calc(18px + env(safe-area-inset-bottom));
  }
  .notif-panel { width:100vw; max-width:100vw; }

  /* ── Profile ── */
  .p-hero { flex-direction: column; text-align: center; padding: 18px 14px; gap: 14px; }
  .rep-bars { min-width: unset; }
  .p-badges-row { justify-content: center; }
  .f-counts { justify-content: center; }
  .badges-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }

  /* ── Rankings ── */
  .rank-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .rank-tabs::-webkit-scrollbar { display: none; }
  .rtab { flex-shrink: 0; }
  .ri-meta { display: none; }
  .fsi-bar-wrap { display: none; }

  /* ── League table: horizontal scroll ── */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .league-table { min-width: 480px; }

  /* ── Onboarding ── */
  .ob-box { padding: 24px 18px; border-radius: 16px; }
  .ob-grid { grid-template-columns: repeat(3, 1fr); }

  /* ── Match Detail ── */
  .md-header { padding: 12px 14px; gap: 9px; }
  .md-score { font-size: 1.5rem; padding: 3px 12px; }
  .md-tn { font-size: .78rem; }
  .md-tab { padding: 8px 10px; font-size: .76rem; }
  .md-content { padding: 14px; }

  /* ── Lineup pitch ── */
  .lineup-circle { width: 32px; height: 32px; font-size: .6rem; }
  .lineup-pname { font-size: .52rem; max-width: 38px; }
  .lineup-row { gap: 4px; margin-bottom: 10px; }

  /* ── FanHall ── */
  .composer { padding: 12px; }
  .comp-inp { min-height:48px; }
  .shorts-strip { margin-bottom: 10px; }
  .short-card { width: 100px; }
  .short-thumb { height: 150px; }

  /* ── Cheer card ── */
  .cheer-card { padding: 16px 14px; }
  .cheer-teams { gap: 8px; }
  .ct-sc { font-size: 1.5rem; padding: 5px 12px; }
  .ct-name { font-size: .8rem; }
  .ch-btn { font-size: .82rem; padding: 10px 12px; }

  /* ── Squad grid ── */
  .squad-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

  /* ── Dashboard strip cards: show every card without clipped horizontal overflow ── */
  .dashboard-strip {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    overflow:visible;
    padding:0 12px 4px;
  }
  .dash-card { width:auto; min-width:0; padding:12px 10px; }
  .dash-card-title { font-size:.61rem; letter-spacing:.2px; white-space:normal; min-height:2.2em; }
  .dash-card-value { font-size:1.3rem; }
  .dash-card-sub { font-size:.66rem; line-height:1.45; }

  /* ── Toast: bottom-center on mobile ── */
  .toast {
    right: 12px;
    left: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    max-width: unset;
    z-index:9998;
  }
  [data-lang="en"] .toast { right: 12px; left: 12px; }

  /* ── Scroll-top button ── */
  .scroll-top { bottom: 80px; left: 12px; }

  /* ── Section headers ── */
  .sh { padding: 32px 14px 18px; }
  .sh h2 { font-size: clamp(1.2rem, 4.5vw, 1.6rem); }

  /* ── Feature grid ── */
  .feat-grid { grid-template-columns: 1fr; padding: 0 14px 40px; }

  /* ── Bottom nav labels: Arabic update ── */
  .bn-label { font-size: .52rem; }
  .bn-item { min-width:44px; min-height:44px; padding:4px 3px; }

  /* ── Predictions ── */
  .score-inp { width: 46px; height: 46px; font-size: 1.1rem; }
}

/* ── SMALL MOBILE: ≤ 390px ──────────────────────────────── */
@media (max-width: 390px) {
  .hero h1 { font-size: 1.6rem; }
  .hstats { gap: 12px 8px; }
  .hsn { font-size: 1.2rem; }
  .tm-name { max-width: 72px; font-size: .74rem; }
  .match-row { padding: 9px 8px; gap: 4px; }
  .mscore { font-size: .9rem; padding: 3px 7px; }
  .club-logo { width: 22px; height: 22px; }
  .hdr { padding: 0 8px; gap: 5px; }
  .pc { padding: 12px 10px; }
  .vb-logo-svg { gap: 6px; font-size: 1.08rem; }
  .vb-logo-svg .mark { width: 32px; height: 32px; }
  .hdr-right { gap: 4px; }
  .hdr-right .icon-btn:first-of-type { display: none; }
  .btn-sign { display: inline-flex; padding: 5px 8px; font-size: .7rem; }
  .btn-join { padding: 6px 9px; font-size: .7rem; }
  .ham { padding: 6px; }
}

@media (max-width: 350px) {
  .theme-btn { display: none; }
  .vb-logo-svg { font-size: 1rem; }
  .vb-logo-svg .mark { width: 30px; height: 30px; }
}