@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600&family=Rajdhani:wght@500;600;700&display=swap');

:root {
  --navy:  #050d1a;
  --navy2: #080f1f;
  --navy3: #0d1829;
  --cyan:  #00c8ff;
  --cyan-dim: rgba(0,200,255,0.10);
  --red:   #dc1e32;
  --red-hot:#ff2d55;
  --orange:#ff6b1a;
  --gold:  #f5c842;
  --green: #00e676;
  --off:   #e8edf5;
  --gray:  #5a6a80;
  --gray2: #8a9ab0;
  --border:  rgba(255,255,255,0.06);
  --borderc: rgba(0,200,255,0.12);
  --nav-h: 58px;
  --sb-w:  210px;
  --fd: 'Bebas Neue', sans-serif;
  --fu: 'Oswald', sans-serif;
  --fs: 'Rajdhani', sans-serif;
  --fb: 'Inter', sans-serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { background:var(--navy); color:var(--off); font-family:var(--fb); font-size:14px; overflow-x:hidden; min-height:100vh }
a { color:inherit; text-decoration:none }
img { max-width:100%; display:block }
button { cursor:pointer; font-family:var(--fb); border:none; outline:none }

::-webkit-scrollbar { width:4px }
::-webkit-scrollbar-track { background:var(--navy2) }
::-webkit-scrollbar-thumb { background:var(--cyan); border-radius:2px }

@keyframes dot      { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
@keyframes ticker   { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes fadeUp   { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin     { to{transform:rotate(360deg)} }
@keyframes shimmer  { 0%{background-position:-200%} 100%{background-position:200%} }

/* ══════════════════ NAVBAR ══════════════════ */
.navbar {
  position:sticky; top:0; z-index:1000;
  height:var(--nav-h);
  display:flex; align-items:center;
  padding:0 16px 0 10px;
  background:rgba(5,13,26,.97);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--borderc);
  gap:0;
}
.navbar::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:.18;
}

.hamburger { display:flex; flex-direction:column; justify-content:center; gap:5px; background:none; border:none; cursor:pointer; padding:8px 10px 8px 4px; flex-shrink:0 }
.hamburger span { display:block; width:20px; height:2px; background:var(--off); border-radius:1px; transition:.25s }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.hamburger.open span:nth-child(2) { opacity:0 }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

.nav-logo {
  font-family:var(--fd); font-size:22px; letter-spacing:3px;
  display:flex; align-items:center; gap:2px; flex-shrink:0; margin-right:auto;
  background:linear-gradient(135deg,#fff,var(--cyan));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.nav-dot {
  width:6px; height:6px; background:var(--red); border-radius:50%;
  animation:dot 1.2s ease infinite; -webkit-text-fill-color:initial;
  margin:0 1px 2px; flex-shrink:0;
}

.nav-links { display:none; align-items:center; gap:2px }
.nav-links a {
  font-family:var(--fs); font-size:11px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--gray2); padding:6px 11px;
  transition:.2s; position:relative; white-space:nowrap;
}
.nav-links a:hover { color:var(--off) }
.nav-links a.active { color:var(--cyan) }
.nav-links a.active::after { content:''; position:absolute; bottom:-3px; left:11px; right:11px; height:1px; background:var(--cyan) }
.nav-links a.sl { color:var(--red); background:rgba(220,30,50,.10); border:1px solid rgba(220,30,50,.2); padding:5px 11px }
.nav-links a.sl.active { background:rgba(220,30,50,.2) }

.nav-right { display:flex; align-items:center; gap:8px; flex-shrink:0 }
.nav-search { display:none; align-items:center; gap:6px; background:var(--navy3); border:1px solid var(--border); border-radius:20px; padding:5px 13px }
.nav-search input { background:none; border:none; outline:none; color:var(--off); font-family:var(--fb); font-size:12px; width:110px }
.nav-search input::placeholder { color:var(--gray) }
.nav-search:focus-within { border-color:rgba(0,200,255,.3) }
.nb   { font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; background:transparent; color:var(--off); border:1px solid var(--border); padding:6px 12px; cursor:pointer; transition:.2s }
.nb:hover { border-color:var(--cyan); color:var(--cyan) }
.nb-f { font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; background:var(--cyan); color:var(--navy); border:none; padding:6px 12px; cursor:pointer; transition:.2s }
.nb-f:hover { background:#fff }

/* ══════════════════ MOBILE DRAWER ══════════════════ */
.drawer-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:999; backdrop-filter:blur(4px) }
.drawer-overlay.open { display:block }
.drawer {
  position:fixed; top:0; left:0; bottom:0; width:265px;
  background:var(--navy2); border-right:1px solid var(--borderc);
  z-index:1001; transform:translateX(-100%); transition:transform .3s ease;
  overflow-y:auto; display:flex; flex-direction:column;
}
.drawer.open { transform:translateX(0) }
.drawer-hdr { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--borderc); flex-shrink:0 }
.drawer-logo { font-family:var(--fd); font-size:20px; letter-spacing:3px; background:linear-gradient(135deg,#fff,var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:flex; align-items:center; gap:2px }
.drawer-close { background:none; border:none; cursor:pointer; color:var(--gray2); font-size:20px; padding:4px; line-height:1 }
.drawer-body { padding:8px 0; flex:1; overflow-y:auto }
.dr-sec { font-family:var(--fs); font-size:9px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--gray); padding:12px 16px 5px }
.dr-sec:not(:first-child) { border-top:1px solid var(--border); margin-top:6px }
.drl { display:flex; align-items:center; gap:9px; padding:10px 16px; font-family:var(--fs); font-size:13px; font-weight:600; letter-spacing:.5px; color:var(--gray2); transition:.2s; cursor:pointer; border-left:2px solid transparent }
.drl:hover { color:var(--off); background:rgba(0,200,255,.06); border-left-color:var(--cyan) }
.drl.active { color:var(--cyan); background:rgba(0,200,255,.08); border-left-color:var(--cyan) }
.drl.red { color:var(--red) }
.drl.red:hover,.drl.red.active { color:var(--red-hot); background:rgba(220,30,50,.07); border-left-color:var(--red) }
.dr-count { margin-left:auto; font-family:var(--fs); font-size:9px; font-weight:700; background:rgba(255,45,85,.15); color:var(--red-hot); border:1px solid rgba(255,45,85,.25); padding:1px 7px }

/* ══════════════════ TICKER ══════════════════ */
.ticker { background:rgba(0,0,0,.65); border-bottom:1px solid rgba(0,200,255,.07); display:flex; align-items:center; height:34px; overflow:hidden }
.tlbl { flex-shrink:0; display:flex; align-items:center; gap:5px; padding:0 12px; border-right:1px solid var(--borderc); font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--red); white-space:nowrap }
.tdot { width:5px; height:5px; border-radius:50%; background:var(--red); animation:dot 1.2s ease infinite }
.tscroll { flex:1; overflow:hidden }
.tinner { display:flex; white-space:nowrap; animation:ticker 32s linear infinite }
.ti { font-family:var(--fs); font-size:12px; font-weight:600; color:var(--gray2); padding:0 18px; display:inline-flex; align-items:center; gap:6px }
.tscore { font-family:var(--fd); font-size:14px; color:#fff }
.tsep { color:var(--cyan); opacity:.25; font-size:8px }

/* ══════════════════ LAYOUT ══════════════════ */
.layout { display:flex; min-height:calc(100vh - var(--nav-h) - 34px) }

.sidebar {
  display:none; width:var(--sb-w); flex-shrink:0;
  background:var(--navy2); border-right:1px solid var(--borderc);
  position:sticky; top:calc(var(--nav-h) + 34px);
  height:calc(100vh - var(--nav-h) - 34px);
  overflow-y:auto; padding:10px 0;
}
.sidebar::-webkit-scrollbar { width:3px }
.sb-sec { font-family:var(--fs); font-size:9px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--gray); padding:12px 14px 5px }
.sb-sec:not(:first-child) { border-top:1px solid var(--border); margin-top:6px }
.sbl { display:flex; align-items:center; gap:8px; padding:9px 14px; font-family:var(--fs); font-size:12px; font-weight:600; letter-spacing:.5px; color:var(--gray2); transition:.2s; cursor:pointer; border-left:2px solid transparent }
.sbl:hover { color:var(--off); background:rgba(0,200,255,.06); border-left-color:var(--cyan) }
.sbl.active { color:var(--cyan); background:rgba(0,200,255,.08); border-left-color:var(--cyan) }
.sbl.red { color:var(--red) }
.sbl.red:hover,.sbl.red.active { color:var(--red-hot); background:rgba(220,30,50,.07); border-left-color:var(--red) }
.sb-count { margin-left:auto; font-family:var(--fs); font-size:9px; font-weight:700; background:rgba(255,45,85,.15); color:var(--red-hot); border:1px solid rgba(255,45,85,.25); padding:1px 7px }

.content { flex:1; min-width:0; padding:20px 14px 60px }

/* ══════════════════ SHARED COMPONENTS ══════════════════ */
.pg-hdr { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px }
.pg-title { font-family:var(--fd); font-size:clamp(24px,6vw,42px); color:#fff; letter-spacing:1px; line-height:1 }
.pg-title span { color:var(--cyan) }
.pg-title .r { color:var(--red) }
.eyebrow { font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--cyan); margin-bottom:5px }

.card { background:var(--navy2); border:1px solid var(--border); overflow:hidden }
.card-hdr { display:flex; align-items:center; justify-content:space-between; padding:10px 13px; border-bottom:1px solid var(--border) }
.card-ttl { font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase }

.filter-tabs { display:flex; gap:4px; margin-bottom:16px; flex-wrap:wrap }
.ftab { font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:7px 13px; background:transparent; border:1px solid var(--border); color:var(--gray2); cursor:pointer; transition:.2s }
.ftab:hover { color:var(--off) }
.ftab.active { background:var(--cyan); border-color:var(--cyan); color:var(--navy) }

.live-pill { display:inline-flex; align-items:center; gap:5px; background:rgba(255,45,85,.13); border:1px solid rgba(255,45,85,.27); color:var(--red-hot); font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:4px 10px }
.lp-dot { width:5px; height:5px; border-radius:50%; background:var(--red-hot); animation:dot 1s ease infinite }

.badge-r    { font-family:var(--fs); font-size:9px; font-weight:700; background:rgba(255,45,85,.12); color:var(--red-hot); border:1px solid rgba(255,45,85,.22); padding:2px 8px }
.badge-g    { font-family:var(--fs); font-size:9px; font-weight:700; background:rgba(0,230,118,.12); color:var(--green); border:1px solid rgba(0,230,118,.22); padding:2px 8px }
.badge-gr   { font-family:var(--fs); font-size:9px; font-weight:700; background:rgba(90,106,128,.2); color:var(--gray2); border:1px solid var(--border); padding:2px 8px }
.badge-gold { font-family:var(--fs); font-size:9px; font-weight:700; background:rgba(245,200,66,.12); color:var(--gold); border:1px solid rgba(245,200,66,.2); padding:2px 8px }

.btn-cyan { font-family:var(--fs); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; background:var(--cyan); color:var(--navy); border:none; padding:10px 18px; cursor:pointer; transition:.2s; display:inline-block; clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%) }
.btn-cyan:hover { background:#fff }
.btn-red  { font-family:var(--fs); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; background:var(--red); color:#fff; border:none; padding:10px 18px; cursor:pointer; transition:.2s; display:inline-block }
.btn-red:hover  { background:var(--red-hot) }
.btn-ol   { font-family:var(--fs); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; background:transparent; color:var(--off); border:1px solid rgba(255,255,255,.18); padding:10px 18px; cursor:pointer; transition:.2s; display:inline-block }
.btn-ol:hover { border-color:var(--cyan); color:var(--cyan) }

/* ══════════════════ HERO ══════════════════ */
.hero {
  padding:32px 0 28px;
  background:radial-gradient(ellipse 120% 60% at -10% 50%,rgba(30,111,255,.07) 0%,transparent 60%);
  position:relative; overflow:hidden;
}
.hero::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(rgba(0,200,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,200,255,.03) 1px,transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
}
.hero-eyebrow { font-family:var(--fs); font-size:11px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--cyan); margin-bottom:8px }
.hero-title { font-family:var(--fd); font-size:clamp(52px,14vw,96px); line-height:.9; letter-spacing:2px; margin-bottom:14px }
.hero-title .stroke { -webkit-text-stroke:2px var(--off); color:transparent }
.hero-title .ac { color:var(--cyan) }
.hero-sub { font-family:var(--fb); font-size:13px; font-weight:300; color:var(--gray2); line-height:1.8; margin-bottom:22px; max-width:500px }
.hero-btns { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px }
.hero-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:2px }
.hstat { background:var(--navy3); border:1px solid var(--border); padding:13px 8px; text-align:center }
.hstat-num { font-family:var(--fd); font-size:clamp(24px,6vw,36px); color:#fff; line-height:1 }
.hstat-num.live { color:var(--green) }
.hstat-lbl { font-family:var(--fs); font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--gray); margin-top:2px }

/* ══════════════════ FEATURED MATCH ══════════════════ */
.feat-match {
  background:var(--navy3); border:1px solid var(--borderc);
  padding:18px 14px; position:relative; overflow:hidden; margin-bottom:24px;
}
.feat-match::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--cyan),#1e6fff,var(--cyan));
  background-size:200%; animation:shimmer 3s linear infinite;
}
.fm-grid { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin-bottom:12px }
.fm-team { text-align:center }
.fm-badge { font-size:clamp(28px,8vw,44px); margin-bottom:4px }
.fm-name { font-family:var(--fu); font-size:clamp(13px,4vw,17px); font-weight:700 }
.fm-center { text-align:center }
.fm-score { font-family:var(--fd); font-size:clamp(40px,12vw,60px); letter-spacing:8px; line-height:1; margin:6px 0 }
.fm-ht { font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:2px; color:var(--gray); text-transform:uppercase; margin-bottom:10px }
.fm-btns { display:flex; gap:6px; justify-content:center; flex-wrap:wrap }
.fm-events { display:flex; flex-wrap:wrap; gap:5px; padding-top:12px; border-top:1px solid var(--border) }
.fme { font-family:var(--fs); font-size:10px; font-weight:600; padding:3px 9px; border-radius:20px }
.fme.g { background:rgba(0,230,118,.1); color:var(--green); border:1px solid rgba(0,230,118,.2) }
.fme.y { background:rgba(245,200,66,.1); color:var(--gold); border:1px solid rgba(245,200,66,.2) }

/* ══════════════════ MATCH LIST ══════════════════ */
.home-grid { display:grid; grid-template-columns:1fr; gap:20px }
.lg-group { margin-bottom:14px }
.lg-hdr { display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--navy3); border-left:3px solid var(--cyan); margin-bottom:2px }
.lg-name { font-family:var(--fu); font-size:13px; font-weight:600 }
.lg-cnt  { font-family:var(--fs); font-size:9px; font-weight:700; letter-spacing:2px; color:var(--gray); margin-left:auto; text-transform:uppercase }

.match-row { background:var(--navy2); border-bottom:1px solid rgba(255,255,255,.04); cursor:pointer; transition:.2s; padding:10px 12px; display:flex; flex-direction:column; gap:6px; position:relative; overflow:hidden }
.match-row::before { content:''; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--cyan); opacity:.035; transition:.3s }
.match-row:hover::before { width:100% }
.match-row:hover { background:var(--navy3) }
.mr-top { display:flex; align-items:center; justify-content:space-between }
.ms-live { font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:1px; color:var(--green); display:flex; align-items:center; gap:4px }
.ms-live::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; animation:dot 1.2s ease infinite }
.ms-ft  { font-family:var(--fs); font-size:10px; font-weight:700; color:var(--gray) }
.ms-ht  { font-family:var(--fs); font-size:10px; font-weight:700; color:var(--gold) }
.ms-ns  { font-family:var(--fd); font-size:16px; color:var(--off) }
.watch-btn { font-family:var(--fs); font-size:9px; font-weight:700; letter-spacing:2px; background:rgba(220,30,50,.13); color:var(--red); border:1px solid rgba(220,30,50,.27); padding:4px 9px; cursor:pointer; transition:.2s; white-space:nowrap; display:inline-block; text-decoration:none }
.watch-btn:hover { background:var(--red); color:#fff }
.mr-mid { display:flex; align-items:center; justify-content:space-between; gap:6px }
.mr-team { display:flex; align-items:center; gap:5px; font-family:var(--fu); font-size:13px; font-weight:600; color:var(--off); flex:1; min-width:0 }
.mr-team span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mr-team.right { justify-content:flex-end }
.mr-score { font-family:var(--fd); font-size:20px; letter-spacing:3px; color:#fff; white-space:nowrap; flex-shrink:0; text-align:center; min-width:52px }
.mr-vs    { font-family:var(--fs); font-size:11px; font-weight:700; color:var(--gray); letter-spacing:2px; text-align:center; min-width:32px }
.team-logo { width:18px; height:18px; object-fit:contain; flex-shrink:0 }

/* ══════════════════ SIDEBAR NEWS ══════════════════ */
.sn-item { display:flex; gap:8px; padding:9px 12px; border-bottom:1px solid var(--border); cursor:pointer; transition:.2s }
.sn-item:hover { background:var(--navy3) }
.sn-title { font-family:var(--fu); font-size:12px; font-weight:600; line-height:1.4; margin-bottom:3px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
.sn-src   { font-family:var(--fs); font-size:9px; font-weight:700; letter-spacing:2px; color:var(--gray) }

/* ══════════════════ STREAMS ══════════════════ */
.streams-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:2px }
.sc2 { background:var(--navy2); border:1px solid var(--border); overflow:hidden; cursor:pointer; transition:all .25s; display:block; color:inherit; text-decoration:none }
.sc2:hover { border-color:rgba(220,30,50,.35); transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,.4) }
.sc2-inner { padding:16px; background:linear-gradient(135deg,var(--navy3),var(--navy2)); position:relative }
.sc2-inner::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--red),var(--orange)) }
.sc2-vs  { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px }
.sc2-team { flex:1; text-align:center }
.sc2-emoji { font-size:28px; margin-bottom:4px }
.sc2-name  { font-family:var(--fu); font-size:12px; font-weight:600 }
.sc2-vstxt { font-family:var(--fd); font-size:16px; color:var(--gray); letter-spacing:2px; flex-shrink:0 }
.sc2-foot  { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:var(--navy3); border-top:1px solid var(--border) }
.sc2-cat   { font-family:var(--fs); font-size:9px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--cyan) }

/* ══════════════════ STREAM WATCH ══════════════════ */
.sw-bc { display:flex; align-items:center; gap:8px; padding:10px 0 14px; font-family:var(--fs); font-size:11px; font-weight:700; letter-spacing:2px; color:var(--gray) }
.sw-back { color:var(--gray2); transition:.2s; text-transform:uppercase; cursor:pointer }
.sw-back:hover { color:var(--cyan) }
.sw-cur { color:var(--off); text-transform:uppercase }
.sw-header-row { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px }
.sw-title { font-family:var(--fd); font-size:clamp(18px,5vw,28px); color:#fff; letter-spacing:2px }
.src-btns { display:flex; gap:4px; flex-wrap:wrap; align-items:center }
.src-lbl { font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gray) }
.src-btn { font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; background:var(--navy3); border:1px solid var(--border); color:var(--gray2); padding:6px 12px; cursor:pointer; transition:.2s }
.src-btn.active { background:var(--cyan); border-color:var(--cyan); color:var(--navy) }
.src-btn:hover:not(.active) { border-color:rgba(255,255,255,.15); color:var(--off) }

.big-player { background:#000; width:100%; position:relative; overflow:hidden; aspect-ratio:16/9 }
.big-player iframe,.player-ph { position:absolute; top:0; left:0; width:100%; height:100%; border:none }
.player-ph { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:linear-gradient(135deg,var(--navy),var(--navy3)); cursor:pointer }
.ph-home { font-family:var(--fd); font-size:clamp(20px,5vw,48px); color:#fff; letter-spacing:3px; text-align:center }
.ph-vs   { font-family:var(--fs); font-size:12px; font-weight:700; letter-spacing:4px; color:var(--gray2); text-align:center; text-transform:uppercase; margin:-8px 0 6px }
.ph-away { font-family:var(--fd); font-size:clamp(20px,5vw,48px); color:#fff; letter-spacing:3px; text-align:center }
.ph-btn  { width:72px; height:72px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; font-size:24px; cursor:pointer; transition:.2s; border:none; color:#fff; box-shadow:0 0 50px rgba(220,30,50,.3) }
.ph-btn:hover { background:var(--red-hot); transform:scale(1.08) }
.ph-hint { font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gray) }
.disc { background:rgba(5,13,26,.9); border-top:1px solid var(--border); padding:7px 12px; font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:1px; color:var(--gray) }
.sw-grid { display:grid; grid-template-columns:1fr; gap:16px; padding-top:18px }

/* ══════════════════ SCORE CARD ══════════════════ */
.scard { background:var(--navy3); border:1px solid var(--border); padding:20px; position:relative; overflow:hidden; margin-bottom:14px }
.scard::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--cyan),#1e6fff) }
.scard-lg    { font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--cyan); text-align:center; margin-bottom:12px }
.scard-teams { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px }
.scard-t     { text-align:center }
.scard-tname { font-family:var(--fu); font-size:clamp(14px,4vw,18px); font-weight:700; margin-top:6px }
.scard-score { font-family:var(--fd); font-size:clamp(40px,10vw,52px); color:#fff; letter-spacing:8px; line-height:1 }
.scard-vs    { font-family:var(--fd); font-size:22px; color:var(--gray); letter-spacing:3px }

/* ══════════════════ EVENTS ══════════════════ */
.ev-card { background:var(--navy2); border:1px solid var(--border) }
.ev-row { display:grid; grid-template-columns:1fr 50px 1fr; align-items:center; padding:9px 14px; border-bottom:1px solid rgba(255,255,255,.03) }
.ev-l { text-align:right } .ev-r { text-align:left } .ev-c { text-align:center }
.ev-ico { font-size:16px }
.ev-min { font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:1px; color:var(--red) }
.ev-p   { font-family:var(--fu); font-size:12px; font-weight:600 }

/* ══════════════════ PREDICTION ══════════════════ */
.pred { background:var(--navy2); border:1px solid var(--border); margin-bottom:12px }
.pbars { display:flex; height:7px; border-radius:2px; overflow:hidden; margin-bottom:7px }
.pb-h { background:#1e6fff } .pb-d { background:var(--gray) } .pb-a { background:var(--red) }
.plbls { display:flex; justify-content:space-between; font-family:var(--fs); font-size:10px; font-weight:700; color:var(--gray2); margin-bottom:12px }
.odds  { display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px }
.odd   { background:var(--navy3); border:1px solid var(--border); padding:9px; text-align:center; cursor:pointer; transition:.2s }
.odd:hover { border-color:var(--cyan) }
.odd-l { font-family:var(--fs); font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gray); display:block; margin-bottom:3px }
.odd-v { font-family:var(--fd); font-size:22px }
.more-sc { background:var(--navy2); border:1px solid var(--border) }
.ms-row { display:flex; align-items:center; justify-content:space-between; padding:10px 13px; border-bottom:1px solid var(--border); cursor:pointer; transition:.2s }
.ms-row:hover { background:var(--navy3) }
.ms-teams { font-family:var(--fu); font-size:12px; font-weight:600 }
.ms-cat   { font-family:var(--fs); font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gray) }
.ms-watch { font-family:var(--fs); font-size:9px; font-weight:700; letter-spacing:1px; color:var(--red) }

/* ══════════════════ MATCH DETAIL ══════════════════ */
.match-hero { background:var(--navy3); border:1px solid var(--border); padding:20px 14px; position:relative; overflow:hidden; margin-bottom:18px }
.match-hero::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--cyan),transparent) }
.mh-grid   { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px }
.mh-team   { text-align:center }
.mh-logo   { font-size:clamp(36px,10vw,56px); margin-bottom:6px }
.mh-name   { font-family:var(--fu); font-size:clamp(13px,4vw,20px); font-weight:700 }
.mh-sub    { font-family:var(--fs); font-size:9px; font-weight:700; letter-spacing:2px; color:var(--gray); margin-top:3px; text-transform:uppercase }
.mh-center { text-align:center }
.mh-lg     { font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--cyan); margin-bottom:7px }
.mh-score  { font-family:var(--fd); font-size:clamp(44px,12vw,64px); letter-spacing:8px; line-height:1 }
.mh-ht     { font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:2px; color:var(--gray); margin-top:5px; text-transform:uppercase }

.match-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:18px; overflow-x:auto }
.match-tabs::-webkit-scrollbar { display:none }
.mtab { font-family:var(--fs); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gray2); padding:10px 14px; background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; transition:.2s; white-space:nowrap }
.mtab.active { color:var(--cyan); border-bottom-color:var(--cyan) }
.mtab.str { color:var(--red) }
.mtab.str.active { color:var(--red); border-bottom-color:var(--red) }
.md-grid { display:grid; grid-template-columns:1fr; gap:14px }

.stat-r    { margin-bottom:14px }
.stat-lbls { display:flex; justify-content:space-between; font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--gray); margin-bottom:5px }
.stat-val  { font-family:var(--fd); font-size:16px }
.stat-bar  { height:4px; background:var(--navy3); border-radius:2px; overflow:hidden; display:flex }
.stat-h { background:var(--cyan) } .stat-a { background:var(--red) }

/* ══════════════════ NEWS ══════════════════ */
.news-grid { display:grid; grid-template-columns:1fr; gap:2px }
.nc { background:var(--navy3); border:1px solid var(--border); overflow:hidden; cursor:pointer; transition:.2s }
.nc:hover { border-color:var(--borderc) }
.nc-art { position:relative; overflow:hidden }
.nc-art-inner { width:100%; height:100%; transition:transform .5s }
.nc:hover .nc-art-inner { transform:scale(1.04) }
.nc-ov  { position:absolute; inset:0; background:linear-gradient(to top,rgba(8,15,31,.95) 0%,transparent 60%) }
.nc-cat { position:absolute; top:10px; left:10px; font-family:var(--fs); font-size:9px; font-weight:700; letter-spacing:3px; text-transform:uppercase; padding:3px 9px }
.nc-body { padding:13px 14px }
.nc-title { font-family:var(--fu); font-size:15px; font-weight:600; line-height:1.4; margin-bottom:6px; transition:color .2s }
.nc:hover .nc-title { color:var(--cyan) }
.nc-meta    { font-family:var(--fb); font-size:11px; color:var(--gray); display:flex; gap:8px }
.nc-excerpt { font-family:var(--fb); font-size:12px; color:var(--gray2); line-height:1.6; margin-top:5px }

/* ══════════════════ STANDINGS ══════════════════ */
.standings-tbl { width:100%; border-collapse:collapse }
.standings-tbl th { font-family:var(--fs); font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gray); padding:8px 10px; text-align:left; border-bottom:1px solid var(--border); background:var(--navy3) }
.standings-tbl td { padding:8px 10px; font-family:var(--fb); font-size:13px; border-bottom:1px solid rgba(255,255,255,.03); transition:.2s }
.standings-tbl tr:hover td { background:var(--navy3) }
.s-pos { font-family:var(--fd); font-size:14px; color:var(--gray2); width:26px; position:relative }
.s-pos.top  { color:var(--cyan) }
.s-pos.rel  { color:var(--gold) }
.s-pos.drop { color:var(--red) }
.s-pos.top::before  { content:''; position:absolute; left:-10px; top:0; bottom:0; width:2px; background:var(--cyan) }
.s-pos.rel::before  { content:''; position:absolute; left:-10px; top:0; bottom:0; width:2px; background:var(--gold) }
.s-pos.drop::before { content:''; position:absolute; left:-10px; top:0; bottom:0; width:2px; background:var(--red) }
.s-team { font-family:var(--fu); font-size:13px; font-weight:600 }
.s-pts  { font-family:var(--fd); font-size:16px; text-align:right }
.fb   { display:inline-block; width:17px; height:17px; border-radius:2px; font-family:var(--fs); font-size:9px; font-weight:700; text-align:center; line-height:17px }
.fb.w { background:rgba(0,230,118,.2); color:var(--green) }
.fb.d { background:rgba(90,106,128,.28); color:var(--gray2) }
.fb.l { background:rgba(255,45,85,.2); color:var(--red-hot) }

/* ══════════════════ PLAYERS ══════════════════ */
.players-grid { display:grid; grid-template-columns:1fr; gap:2px }
.pcard { background:var(--navy2); border:1px solid var(--border) }
.pcard-hdr   { display:flex; align-items:center; justify-content:space-between; padding:10px 13px; border-bottom:1px solid var(--border); background:var(--navy3) }
.pcard-title { font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--cyan) }
.pcard-sub   { font-family:var(--fs); font-size:9px; font-weight:700; letter-spacing:2px; color:var(--gray); text-transform:uppercase }
.prow { display:flex; align-items:center; gap:10px; padding:10px 13px; border-bottom:1px solid rgba(255,255,255,.03); cursor:pointer; transition:.2s }
.prow:hover { background:var(--navy3) }
.p-rank { font-family:var(--fd); font-size:19px; color:var(--gray2); width:22px; flex-shrink:0 }
.p-rank.top { color:var(--gold) }
.p-info { flex:1 }
.p-name { font-family:var(--fu); font-size:13px; font-weight:600 }
.p-club { font-family:var(--fb); font-size:11px; color:var(--gray2) }
.p-val  { font-family:var(--fd); font-size:24px }
.p-unit { font-family:var(--fs); font-size:9px; font-weight:700; letter-spacing:1px; color:var(--gray) }

/* ══════════════════ LEAGUES ══════════════════ */
.leagues-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:2px }
.lc { background:var(--navy3); border:1px solid var(--border); padding:18px 10px; text-align:center; cursor:pointer; transition:.2s; text-decoration:none; display:block; color:inherit }
.lc:hover { border-color:var(--borderc); transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.3) }
.lc-icon { font-size:32px; margin-bottom:6px }
.lc-name { font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gray2) }

/* League detail */
.ldh { display:flex; align-items:center; gap:14px; background:var(--navy3); border:1px solid var(--border); padding:18px; margin-bottom:18px; position:relative; overflow:hidden }
.ldh::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--cyan),#1e6fff) }
.ldh-ico  { font-size:44px }
.ldh-name { font-family:var(--fd); font-size:clamp(26px,7vw,36px); letter-spacing:2px }
.ldh-ctr  { font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--cyan); margin-top:3px }
.ld-tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:18px; overflow-x:auto }
.ld-tabs::-webkit-scrollbar { display:none }
.ld-tab { font-family:var(--fs); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gray2); padding:10px 14px; background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; transition:.2s; white-space:nowrap }
.ld-tab.active { color:var(--cyan); border-bottom-color:var(--cyan) }

/* ══════════════════ PREDICTIONS PAGE ══════════════════ */
.pred-card { background:var(--navy3); border:1px solid var(--border); padding:16px }
.pred-card:hover { border-color:var(--borderc) }
.preds-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:2px }

/* ══════════════════ AUTH ══════════════════ */
.auth-wrap { min-height:80vh; display:flex; align-items:center; justify-content:center; padding:60px 16px }
.auth-box  { width:100%; max-width:420px }
.auth-logo { font-family:var(--fd); font-size:30px; letter-spacing:3px; text-align:center; margin-bottom:6px; background:linear-gradient(135deg,#fff,var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.auth-sub  { font-family:var(--fs); font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gray); text-align:center; margin-bottom:28px }
.form-group { margin-bottom:16px }
.form-label { font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gray2); display:block; margin-bottom:7px }
.form-input { width:100%; background:var(--navy3); border:1px solid var(--border); color:var(--off); font-family:var(--fb); font-size:13px; padding:10px 14px; transition:.2s }
.form-input:focus { outline:none; border-color:rgba(0,200,255,.3) }
.form-input::placeholder { color:var(--gray) }
.alert-error   { background:rgba(255,45,85,.1); border:1px solid rgba(255,45,85,.2); color:var(--red-hot); padding:10px 14px; margin-bottom:14px; font-size:13px; font-family:var(--fb) }
.alert-success { background:rgba(0,230,118,.1); border:1px solid rgba(0,230,118,.2); color:var(--green); padding:10px 14px; margin-bottom:14px; font-size:13px; font-family:var(--fb) }

/* ══════════════════ UTILITIES ══════════════════ */
.loading-spinner { display:flex; align-items:center; gap:10px; padding:32px 14px; color:var(--gray2); font-family:var(--fs); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase }
.spinner { width:18px; height:18px; border:2px solid var(--border); border-top-color:var(--cyan); border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0 }
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:50px 16px; text-align:center }
.es-icon { font-size:40px; margin-bottom:14px; opacity:.4 }
.es-text  { font-family:var(--fs); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gray) }
#toast-container { position:fixed; bottom:20px; right:16px; z-index:9999; display:flex; flex-direction:column; gap:6px }
.toast { background:var(--navy3); border:1px solid var(--border); color:var(--off); font-family:var(--fs); font-size:11px; font-weight:700; letter-spacing:1px; padding:11px 16px; display:flex; align-items:center; gap:7px; animation:fadeUp .3s ease }
.toast.success { border-color:rgba(0,230,118,.3); color:var(--green) }
.toast.error   { border-color:rgba(255,45,85,.3); color:var(--red-hot) }
.view-all { font-family:var(--fs); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gray2); border-bottom:1px solid var(--gray); padding-bottom:2px; transition:.2s }
.view-all:hover { color:var(--cyan); border-color:var(--cyan) }

/* ══════════════════ FOOTER ══════════════════ */
footer { background:var(--navy2); padding:40px 14px 24px; border-top:1px solid rgba(0,200,255,.06) }
.fg { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-bottom:26px }
.fb-brand { font-family:var(--fd); font-size:20px; letter-spacing:3px; margin-bottom:8px; background:linear-gradient(135deg,#fff,var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:flex; align-items:center; gap:3px }
.fb-desc { font-family:var(--fb); font-size:12px; font-weight:300; color:var(--gray2); line-height:1.7 }
.fc h4 { font-family:var(--fs); font-size:9px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--off); margin-bottom:12px }
.fc ul { list-style:none }
.fc ul li { margin-bottom:7px }
.fc ul li a { font-family:var(--fb); font-size:12px; color:var(--gray2); transition:.2s }
.fc ul li a:hover { color:var(--cyan) }
.fb-btm { display:flex; flex-direction:column; gap:10px; padding-top:18px; border-top:1px solid var(--border) }
.fb-copy { font-family:var(--fs); font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gray) }
.socs { display:flex; gap:6px }
.soc  { width:28px; height:28px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer; transition:.2s; color:var(--gray) }
.soc:hover { border-color:var(--cyan); color:var(--cyan) }

/* ══════════════════ RESPONSIVE ══════════════════ */
@media(min-width:640px) {
  .streams-grid  { grid-template-columns:repeat(2,1fr) }
  .news-grid     { grid-template-columns:3fr 2fr }
  .players-grid  { grid-template-columns:1fr 1fr }
  .home-grid     { grid-template-columns:1fr 240px }
  .sw-grid       { grid-template-columns:1fr 280px }
  .md-grid       { grid-template-columns:1fr 240px }
  .fg            { grid-template-columns:2fr 1fr 1fr }
  .fb-btm        { flex-direction:row; justify-content:space-between; align-items:center }
  .big-player    { aspect-ratio:unset; padding-bottom:56.25% }
}

@media(min-width:900px) {
  .sidebar    { display:block }
  .nav-links  { display:flex }
  .hamburger  { display:none }
  .content    { padding:24px 28px 60px }
  .nav-search { display:flex }
  .big-player { padding-bottom:0 !important; height:calc((100vw - var(--sb-w)) * 0.5); max-height:660px }
  .news-grid  { grid-template-columns:2fr 1fr }
  .streams-grid { grid-template-columns:repeat(3,1fr) }
  .players-grid { grid-template-columns:1fr 1fr }
  .fg { grid-template-columns:2fr 1fr 1fr 1fr }
}