/* ═══════════════════════════════════════════════════════════════
   CSPORTS — FIFA World Cup 2026
   Fonts: Bebas Neue (display) · Plus Jakarta Sans (body) · Rajdhani (accent)
   Mobile-first · Production-grade · v6 — Full Redesign
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  --red:        #e63946;
  --red-dark:   #b91c1c;
  --red-glow:   rgba(230,57,70,0.22);
  --gold:       #f4a91f;
  --gold-dark:  #c67f00;
  --gold-glow:  rgba(244,169,31,0.18);
  --green:      #06d6a0;
  --green-glow: rgba(6,214,160,0.15);
  --navy:       #0d2444;
  --navy-mid:   #1a3c6e;
  --bg:         #050c18;
  --bg2:        #080f1f;
  --bg3:        #0d1628;
  --card:       rgba(255,255,255,0.038);
  --card-hover: rgba(255,255,255,0.065);
  --border:     rgba(255,255,255,0.08);
  --border-h:   rgba(255,255,255,0.16);
  --text:       #cdd8e8;
  --text-bright:#edf2f8;
  --text-soft:  #8a9bb4;
  --text-dim:   #6b7f96;
  --muted:      #6b7f96;
  --nav-h:      64px;
  --top-h:      36px;
  --r:          12px;
  --r-lg:       18px;
  --r-xl:       24px;
  --ease:       cubic-bezier(.4,0,.2,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --shadow-sm:  0 2px 12px rgba(0,0,0,0.35);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.45);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.55);
  --font-head:  'Bebas Neue', 'Impact', sans-serif;
  --font-accent:'Rajdhani', 'Barlow Condensed', sans-serif;
  --font-body:  'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
}

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  padding-top: calc(var(--nav-h) + var(--top-h));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ── Container ───────────────────────────────────────────── */
.container { width:100%; max-width:1300px; margin:0 auto; padding:0 18px; }
@media(min-width:640px)  { .container { padding:0 28px; } }
@media(min-width:1024px) { .container { padding:0 40px; } }

/* ══ BACKGROUND ════════════════════════════════════════════ */
.bg-animation {
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 10% 60%, rgba(26,60,110,.28) 0%, transparent 65%),
    radial-gradient(ellipse 45% 38% at 88% 12%, rgba(230,57,70,.12) 0%, transparent 60%),
    radial-gradient(ellipse 35% 30% at 75% 80%, rgba(6,214,160,.06) 0%, transparent 60%),
    linear-gradient(160deg, #050c18 0%, #09142a 55%, #050c18 100%);
}
.bg-particle { position:absolute; border-radius:50%; opacity:.048; animation:bp 32s ease-in-out infinite; }
.bg-particle.p1 { width:550px; height:550px; top:-140px; left:-110px; background:var(--navy-mid); animation-duration:36s; }
.bg-particle.p2 { width:380px; height:380px; bottom:-90px; right:-90px; background:var(--red); animation-duration:28s; animation-delay:-12s; }
.bg-particle.p3 { width:260px; height:260px; top:42%; left:48%; background:var(--gold); animation-duration:24s; animation-delay:-7s; }
@keyframes bp {
  0%,100% { transform:translate(0,0) scale(1); }
  33%      { transform:translate(22px,-30px) scale(1.04); }
  66%      { transform:translate(-16px,18px) scale(.97); }
}
.bg-football { position:absolute; font-size:2rem; opacity:.028; animation:bfb 38s linear infinite; pointer-events:none; user-select:none; }
.bg-football.fb1 { top:8%;  left:4%;  font-size:3.4rem; animation-duration:44s; }
.bg-football.fb2 { top:58%; right:4%; font-size:2.8rem; animation-duration:32s; animation-delay:-15s; }
.bg-football.fb3 { bottom:14%; left:20%; animation-duration:48s; animation-delay:-8s; }
.bg-football.fb4 { top:26%;   right:16%; animation-duration:40s; animation-delay:-22s; }
@keyframes bfb {
  0%  { transform:rotate(0deg)   translateY(0); }
  25% { transform:rotate(90deg)  translateY(-18px); }
  50% { transform:rotate(180deg) translateY(0); }
  75% { transform:rotate(270deg) translateY(18px); }
  100%{ transform:rotate(360deg) translateY(0); }
}

/* ══ TOPBAR ════════════════════════════════════════════════ */
.topbar {
  position:fixed; top:0; left:0; right:0; z-index:1001;
  height: var(--top-h);
  background: rgba(5,10,22,.97);
  border-bottom: 1px solid rgba(255,255,255,.04);
  backdrop-filter: blur(20px);
}
.topbar .container { display:flex; align-items:center; justify-content:space-between; height:100%; }
.topbar-left {
  display: flex; align-items:center; gap:10px;
  font-size: .69rem; color: var(--muted);
  font-family: var(--font-accent); letter-spacing:.08em;
}
.topbar-left i { color: var(--gold); font-size:.62rem; }
.topbar-divider { opacity:.2; }
@media(max-width:480px) { .topbar-divider,.topbar-left>span:last-child { display:none; } }
.topbar-right { display:flex; gap:14px; }
.topbar-right a {
  color: var(--muted); font-size:.72rem;
  transition: color .2s, transform .2s;
  display: flex; align-items:center;
}
.topbar-right a:hover { color: var(--gold); transform: translateY(-1px); }

/* ══ NAVBAR ════════════════════════════════════════════════ */
.navbar {
  position:fixed; top: var(--top-h); left:0; right:0; z-index:1000;
  height: var(--nav-h);
  background: rgba(5,10,22,.94);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(24px); -webkit-backdrop-filter:blur(24px);
  transition: box-shadow .3s, background .3s;
}
.navbar.scrolled {
  background: rgba(5,10,22,.98);
  box-shadow: 0 6px 36px rgba(0,0,0,.7);
}
.nav-container { display:flex; align-items:center; justify-content:space-between; height:100%; }

/* Logo */
.logo { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.logo-icon {
  width: 40px; height:40px; border-radius:10px; flex-shrink:0;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  display: flex; align-items:center; justify-content:center;
  font-size: 1.1rem; color:#fff;
  box-shadow: 0 4px 16px var(--red-glow);
  position: relative; overflow:hidden;
}
.logo-icon::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 60%);
}
.logo-text { line-height:1.05; }
.logo-main {
  display:block; font-family: var(--font-head);
  font-size: 1.6rem; letter-spacing:4px; color:#fff;
}
.logo-sub {
  display:block; font-family: var(--font-accent);
  font-size: .5rem; letter-spacing:2.5px; color: var(--gold);
  text-transform:uppercase; margin-top:1px;
}

/* Desktop nav links */
@media(min-width:960px) {
  .nav-menu {
    display: flex !important; flex-direction:row; gap:0;
    position: static; background:none; backdrop-filter:none;
    padding:0; border:none; overflow:visible; max-height:none;
  }
  .nav-menu li a {
    padding: 8px 13px; font-size:.82rem; position:relative;
    display: flex; align-items:center; gap:7px;
    font-family: var(--font-accent); font-size:.9rem;
    font-weight: 600; letter-spacing:.06em;
    color: var(--muted); transition: color .22s var(--ease);
    border-radius:0;
  }
  .nav-menu li a i { font-size:.74rem; }
  .nav-menu li a::after {
    content:''; position:absolute; bottom:-1px; left:13px; right:13px;
    height: 2px; background: linear-gradient(90deg,var(--red),var(--gold));
    border-radius: 2px;
    transform: scaleX(0); transform-origin:left;
    transition: transform .26s var(--ease);
  }
  .nav-menu li a:hover,
  .nav-menu li a.active { color:#fff; background:none; }
  .nav-menu li a:hover::after,
  .nav-menu li a.active::after { transform: scaleX(1); }
}

/* Mobile menu */
.nav-menu {
  display: none; flex-direction:column; gap:3px;
  position: fixed; top:calc(var(--nav-h) + var(--top-h)); left:0; right:0;
  background: rgba(5,10,22,.98); backdrop-filter:blur(24px);
  padding: 10px 14px 20px; border-bottom:1px solid var(--border);
  max-height: 80vh; overflow-y:auto;
}
.nav-menu.open { display:flex; }
.nav-menu li a {
  display:flex; align-items:center; gap:12px; padding:13px 18px;
  border-radius: var(--r);
  font-family: var(--font-accent); font-size:1.05rem;
  font-weight: 600; letter-spacing:.06em;
  color: var(--muted); transition:all .22s var(--ease);
}
.nav-menu li a i { width:16px; font-size:.8rem; }
.nav-menu li a:hover { color:#fff; background:rgba(255,255,255,.05); }
.nav-menu li a.active {
  color: var(--gold); background:rgba(244,169,31,.08);
  border-left: 3px solid var(--gold);
}

.hamburger { display:flex; flex-direction:column; gap:5px; background:none; border:none; padding:9px; }
.hamburger span { display:block; width:23px; height:2px; background:#fff; border-radius:2px; transition:all .28s var(--ease); }
.hamburger.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
@media(min-width:960px) { .hamburger { display:none; } }

/* ══ BUTTONS ════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items:center; gap:8px;
  padding: 11px 22px; border-radius: 9px; border:none;
  font-family: var(--font-accent); font-size:.98rem;
  font-weight: 700; letter-spacing:.08em;
  transition: all .25s var(--ease); white-space:nowrap;
  cursor: pointer; text-align:center; position:relative;
  overflow: hidden;
}
.btn::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%);
  opacity:0; transition: opacity .25s;
}
.btn:hover::before { opacity:1; }
.btn-primary {
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color:#fff; box-shadow: 0 4px 20px var(--red-glow);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(230,57,70,.45); }
.btn-outline {
  background: transparent; border:1px solid var(--border);
  color: var(--muted);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color:#000; font-weight:800;
}
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 10px 28px var(--gold-glow); }
.btn-sm { padding:8px 16px; font-size:.86rem; border-radius:8px; }
.btn-xs { padding:5px 11px; font-size:.76rem; border-radius:6px; }

/* ══ HERO SLIDER ════════════════════════════════════════════ */
.hero-slider { position:relative; overflow:hidden; height:clamp(250px,54vw,580px); }
.slider-wrapper { display:flex; height:100%; transition:transform .65s var(--ease); will-change:transform; }
.slide { min-width:100%; height:100%; position:relative; display:flex; align-items:center; overflow:hidden; }
.slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.slide::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(108deg, rgba(5,10,22,.92) 0%, rgba(5,10,22,.55) 52%, rgba(5,10,22,.18) 100%);
}
.slide-content { position:relative; z-index:2; padding:22px 18px; max-width:600px; }
@media(min-width:600px) { .slide-content { padding:42px 48px; } }
.slide-badge {
  display:inline-flex; align-items:center; gap:7px; margin-bottom:14px;
  background: var(--red); color:#fff; padding:5px 14px; border-radius:50px;
  font-family: var(--font-accent); font-size:.72rem; font-weight:700; letter-spacing:.16em;
  box-shadow: 0 4px 16px var(--red-glow);
}
.slide h1 {
  font-family: var(--font-head);
  font-size: clamp(2rem,6vw,4.4rem);
  letter-spacing: 2px; color:#fff;
  line-height: 1.0; margin-bottom:10px;
}
.slide p {
  font-size: clamp(.84rem,1.9vw,1rem);
  color: rgba(255,255,255,.72); line-height:1.65;
  margin-bottom: 20px; max-width:420px;
}
.slide-buttons { display:flex; gap:12px; flex-wrap:wrap; }
.slider-btn {
  position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.5); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.88rem; transition:all .24s; backdrop-filter:blur(8px);
  cursor:pointer;
}
.slider-btn:hover { background: var(--red); border-color: var(--red); transform:translateY(-50%) scale(1.08); }
.slider-prev{left:14px;} .slider-next{right:14px;}
@media(min-width:600px) { .slider-prev{left:22px;} .slider-next{right:22px;} }
.slider-dots { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:10; }
.dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.28); cursor:pointer; transition:all .28s; }
.dot.active { background: var(--gold); width:26px; border-radius:4px; }

/* ══ TICKER ═════════════════════════════════════════════════ */
.ticker-bar {
  background: linear-gradient(90deg, rgba(13,36,68,.98), rgba(26,60,110,.65));
  border-top: 1px solid var(--border); border-bottom:1px solid var(--border);
  padding: 9px 0; display:flex; align-items:center; overflow:hidden;
}
.ticker-label {
  background: var(--red); color:#fff; flex-shrink:0;
  padding: 4px 16px; margin-right:16px;
  font-family: var(--font-accent); font-size:.7rem; font-weight:700; letter-spacing:.16em;
  display: flex; align-items:center; gap:6px; white-space:nowrap;
  box-shadow: 4px 0 12px rgba(230,57,70,.3);
}
.ticker-track { overflow:hidden; flex:1; }
.ticker-content { display:flex; gap:2.8rem; white-space:nowrap; animation:ticker 32s linear infinite; align-items:center; }
@keyframes ticker { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
.ticker-item { font-size:.82rem; display:flex; align-items:center; gap:8px; font-family:var(--font-accent); letter-spacing:.04em; }
.ticker-item .score { font-weight:700; color: var(--gold); }

/* ══ SECTIONS ════════════════════════════════════════════════ */
.section    { padding:52px 0; }
.section-sm { padding:30px 0; }
@media(min-width:768px) { .section{padding:72px 0;} .section-sm{padding:40px 0;} }

.section-header { margin-bottom:32px; }
.section-tag {
  display:inline-block; font-family: var(--font-accent);
  font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color: var(--gold); margin-bottom:8px;
}
.section-title {
  font-family: var(--font-head);
  font-size: clamp(1.8rem,3.8vw,2.6rem);
  letter-spacing: 3px; color:#fff; line-height:1.0;
}
.section-header h2 {
  font-family: var(--font-head);
  font-size: clamp(1.8rem,3.8vw,2.6rem);
  letter-spacing: 3px; color:#fff; line-height:1.0;
  display: flex; align-items:center; gap:12px;
}
.section-header h2 i { color: var(--gold); font-size:.82em; }
.section-header p,
.section-subtitle { color: var(--muted); font-size:.88rem; margin-top:6px; }
.section-line {
  height: 3px; width:48px; margin-top:10px;
  background: linear-gradient(90deg, var(--red), var(--gold));
  border-radius: 3px;
}

/* ══ STATS BAR ═══════════════════════════════════════════════ */
.stats-bar {
  background: linear-gradient(135deg, rgba(13,36,68,.92), rgba(26,60,110,.62));
  border: 1px solid rgba(255,255,255,.07); border-radius: var(--r-lg);
  padding: 26px 20px; display:grid;
  grid-template-columns: repeat(2,1fr); gap:20px; text-align:center;
}
@media(min-width:480px) { .stats-bar { grid-template-columns:repeat(4,1fr); } }
.stat-item { text-align:center; }
.stat-value {
  font-family: var(--font-head);
  font-size: clamp(2.2rem,5vw,3.2rem); letter-spacing:2px;
  background: linear-gradient(135deg, var(--gold), #ffe37a);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  line-height: 1;
}
.stat-label {
  font-family: var(--font-accent); font-size:.7rem;
  color: var(--muted); text-transform:uppercase; letter-spacing:.14em; margin-top:5px;
}

/* ══ COUNTDOWN ═══════════════════════════════════════════════ */
.countdown { display:flex; gap:12px; flex-wrap:wrap; }
.countdown-item { text-align:center; }
.countdown-num {
  font-family: var(--font-head);
  font-size: clamp(2rem,5vw,3rem); letter-spacing:3px; color:#fff; display:block;
  background: rgba(255,255,255,.04); border:1px solid var(--border); border-radius:10px;
  padding: 7px 16px; min-width:72px;
}
.countdown-label {
  font-family: var(--font-accent); font-size:.64rem;
  color: var(--muted); text-transform:uppercase; letter-spacing:.14em; margin-top:4px;
}

/* ══ GROUP TABS ═══════════════════════════════════════════════ */
.group-tabs,
.groups-tabs-bar { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px; }
.group-tab {
  padding: 8px 16px; border-radius:8px; cursor:pointer;
  font-family: var(--font-accent); font-size:.86rem; font-weight:600; letter-spacing:.05em;
  color: var(--muted); background: var(--card); border:1px solid var(--border);
  transition: all .22s var(--ease); text-decoration:none;
}
.group-tab:hover { color:#fff; border-color: var(--border-h); background: var(--card-hover); }
.group-tab.active { background: rgba(26,60,110,.55); border-color: var(--gold); color: var(--gold); }

/* Card */
.group-panel.card,
.card {
  background: var(--card); border:1px solid var(--border); border-radius: var(--r-lg);
}

/* ══ POINTS TABLE ═════════════════════════════════════════════ */
.table-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.points-table { width:100%; border-collapse:collapse; font-size:.86rem; min-width:420px; }
.points-table th {
  padding: 10px 11px; text-align:center;
  font-family: var(--font-accent); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--muted); background:rgba(255,255,255,.025); border-bottom:1px solid var(--border);
}
.points-table th:first-child { text-align:left; padding-left:16px; }
.points-table td { padding:11px 11px; text-align:center; border-bottom:1px solid rgba(255,255,255,.03); vertical-align:middle; }
.points-table td:first-child { text-align:left; padding-left:8px; }
.points-table tbody tr:hover { background:rgba(255,255,255,.022); }
.points-table .qualified { border-left:3px solid var(--green); }
.points-table .playoff   { border-left:3px solid var(--gold); }
.team-cell { display:flex; align-items:center; gap:9px; }
.team-flag { width:28px; height:19px; object-fit:cover; border-radius:3px; flex-shrink:0; }
.team-flag-placeholder { width:28px; height:19px; background: var(--navy-mid); border-radius:3px; flex-shrink:0; display:inline-block; }
.team-name-full  { font-weight:600; }
.team-name-short { display:none; font-family: var(--font-accent); font-weight:700; letter-spacing:.05em; }
@media(max-width:500px) {
  .team-name-full  { display:none; }
  .team-name-short { display:block; }
  .points-table th:nth-child(4),.points-table th:nth-child(5),.points-table th:nth-child(6),.points-table th:nth-child(7),
  .points-table td:nth-child(4),.points-table td:nth-child(5),.points-table td:nth-child(6),.points-table td:nth-child(7) { display:none; }
}
.pts { font-family: var(--font-head); font-size:1.1rem; letter-spacing:1px; color: var(--gold); }
.form-dots { display:flex; gap:4px; justify-content:center; }
.form-dot {
  width:19px; height:19px; border-radius:50%;
  font-family: var(--font-accent); font-size:.64rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.form-dot.W { background:rgba(6,214,160,.18); color:var(--green); border:1px solid rgba(6,214,160,.3); }
.form-dot.D { background:rgba(255,255,255,.07); color:#94a3b8; border:1px solid rgba(255,255,255,.12); }
.form-dot.L { background:rgba(230,57,70,.14); color:var(--red); border:1px solid rgba(230,57,70,.28); }

/* ══ MATCH CARDS ══════════════════════════════════════════════ */
.schedule-grid { display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:540px)  { .schedule-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:960px)  { .schedule-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:1200px) { .schedule-grid { grid-template-columns:repeat(4,1fr); } }

.match-card {
  background: var(--card); border:1px solid var(--border); border-radius: var(--r);
  padding:16px; transition:all .28s var(--ease); position:relative; overflow:hidden;
}
.match-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--red), var(--gold));
  transform: scaleX(0); transform-origin:left; transition:transform .28s var(--ease);
}
.match-card:hover { border-color:rgba(244,169,31,.3); transform:translateY(-3px); box-shadow: var(--shadow-md); }
.match-card:hover::before { transform:scaleX(1); }
.match-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-size:.72rem; color: var(--muted); }
.match-stage { font-family: var(--font-accent); font-weight:600; letter-spacing:.06em; }
.match-status-badge,
.match-badge {
  padding: 3px 10px; border-radius:50px; font-family: var(--font-accent);
  font-size:.67rem; font-weight:700; letter-spacing:.1em;
}
.status-live,
.match-badge.live { background:rgba(6,214,160,.14); color:var(--green); border:1px solid rgba(6,214,160,.3); animation:pls 1.6s infinite; }
.status-upcoming,
.match-badge.upcoming { background:rgba(244,169,31,.1); color:var(--gold); border:1px solid rgba(244,169,31,.22); }
.status-completed,
.match-badge.completed { background:rgba(255,255,255,.05); color:#7a8fa8; border:1px solid rgba(255,255,255,.1); }
@keyframes pls { 0%,100%{opacity:1;} 50%{opacity:.42;} }

.match-teams { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.match-team { display:flex; flex-direction:column; align-items:center; gap:7px; flex:1; min-width:0; }
.match-team img { width:40px; height:28px; object-fit:cover; border-radius:4px; }
.match-team-name { font-family: var(--font-accent); font-size:.84rem; font-weight:700; text-align:center; letter-spacing:.02em; line-height:1.2; }
.match-score { text-align:center; flex-shrink:0; }
.score-display {
  font-family: var(--font-head);
  font-size: 2.2rem; letter-spacing:4px; color:#fff; line-height:1;
}
.score-display.live { color: var(--green); text-shadow:0 0 18px var(--green-glow); }
.separator { font-family: var(--font-head); font-size:2.2rem; color: var(--muted); }
.match-venue {
  font-size:.72rem; color: var(--muted); display:flex; align-items:center; gap:6px;
  padding-top:12px; border-top:1px solid var(--border);
}
.match-venue i { color: var(--gold); font-size:.64rem; flex-shrink:0; }
.match-card-footer {
  margin-top:11px; padding-top:11px; border-top:1px solid var(--border);
  font-size:.72rem; color: var(--muted); text-align:center;
  display: flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.match-card-footer span { display:flex; align-items:center; gap:5px; }
.match-card-footer i { color: var(--gold); font-size:.64rem; }
.match-card-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px; font-size:.72rem; color: var(--muted);
}
.date-header {
  font-family: var(--font-head);
  font-size: 1.2rem; letter-spacing:4px; color: var(--gold);
  padding: 13px 0 9px; border-bottom:1px solid var(--border);
  margin-bottom:16px; display:flex; align-items:center; gap:12px;
}

/* ══ TEAM CARDS ═══════════════════════════════════════════════ */
.team-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }
@media(min-width:480px)  { .team-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:768px)  { .team-grid { grid-template-columns:repeat(4,1fr); } }
@media(min-width:1100px) { .team-grid { grid-template-columns:repeat(5,1fr); } }
.team-card {
  background: var(--card); border:1px solid var(--border);
  border-radius: var(--r); padding:18px 12px 14px;
  text-align:center; transition:all .26s var(--ease);
  position: relative; overflow:hidden;
}
.team-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--red), var(--gold));
  transform: scaleX(0); transform-origin:center; transition:transform .28s var(--ease);
}
.team-card:hover { border-color:rgba(244,169,31,.38); transform:translateY(-5px); box-shadow: var(--shadow-md); }
.team-card:hover::after { transform:scaleX(1); }
.team-flag-img { width:62px; height:42px; object-fit:cover; border-radius:4px; margin:0 auto 10px; }
.team-flag-placeholder { width:62px; height:42px; background:var(--navy-mid); border-radius:4px; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.team-name { font-family: var(--font-accent); font-weight:700; font-size:.92rem; letter-spacing:.05em; color:#fff; margin-bottom:4px; }
.team-meta { font-size:.72rem; color: var(--muted); }
.team-group {
  display:inline-block; background:rgba(244,169,31,.1); color:var(--gold);
  border:1px solid rgba(244,169,31,.22); padding:3px 8px; border-radius:50px;
  font-family: var(--font-accent); font-size:.64rem; font-weight:700; margin-top:6px; letter-spacing:.06em;
}

/* ══ NEWS CARDS ═══════════════════════════════════════════════ */
.news-grid { display:grid; grid-template-columns:1fr; gap:22px; }
@media(min-width:600px)  { .news-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px) { .news-grid { grid-template-columns:repeat(3,1fr); } }

.news-card {
  background: var(--card); border:1px solid var(--border); border-radius: var(--r-xl);
  overflow: hidden; transition:all .3s var(--ease);
  display: flex; flex-direction:column; position:relative;
}
.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
  border-color: rgba(244,169,31,.22);
}
.news-img { height:210px; overflow:hidden; flex-shrink:0; position:relative; }
.news-img img { width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.news-card:hover .news-img img { transform:scale(1.07); }
.news-img-overlay {
  position: absolute; inset:0;
  background: linear-gradient(to top, rgba(5,10,22,.7) 0%, transparent 55%);
}
.news-body { padding:20px 18px; flex:1; display:flex; flex-direction:column; }
.news-category {
  font-family: var(--font-accent); font-size:.68rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color: var(--gold); margin-bottom:8px;
}
.news-title {
  font-family: var(--font-head);
  font-size: 1.15rem; letter-spacing:.8px; color: var(--text-bright);
  margin-bottom:9px; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.news-excerpt {
  font-size:.84rem; color: var(--muted); line-height:1.65; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.news-meta {
  margin-top:14px; padding-top:13px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  font-size:.72rem; color: var(--muted);
}
.news-meta i { color: var(--gold); font-size:.64rem; margin-right:4px; }
.read-more {
  font-family: var(--font-accent); color: var(--gold); font-weight:700;
  display:flex; align-items:center; gap:6px; transition:gap .22s var(--ease);
  letter-spacing:.05em; font-size:.82rem;
}
.news-card:hover .read-more { gap:11px; }

/* ══ NEWS DETAIL ══════════════════════════════════════════════ */
.news-detail-img {
  width:100%; height:clamp(210px,44vw,440px); object-fit:cover;
  border-radius: var(--r-xl); margin-bottom:26px;
  box-shadow: var(--shadow-md);
}
.news-detail-title {
  font-family: var(--font-head);
  font-size: clamp(1.8rem,5vw,3.2rem); letter-spacing:2px;
  color:#fff; margin-bottom:14px; line-height:1.05;
}
.news-detail-meta {
  display:flex; flex-wrap:wrap; gap:16px;
  font-size:.82rem; color: var(--muted); margin-bottom:26px;
}
.news-detail-meta span { display:flex; align-items:center; gap:6px; }
.news-detail-meta i { color: var(--gold); }
.news-detail-content { font-size:.96rem; line-height:1.88; color: var(--text); }
.news-detail-content p { margin-bottom:1.15rem; }
.news-detail-content h2,
.news-detail-content h3 {
  font-family: var(--font-head); letter-spacing:2px; color:#fff; margin:2rem 0 .9rem;
}

/* ══ FEATURED CARD ════════════════════════════════════════════ */
.featured-card {
  position:relative; border-radius: var(--r-xl); overflow:hidden;
  border:1px solid rgba(244,169,31,.22); transition:all .32s var(--ease);
  background: var(--card);
}
.featured-card:hover { transform:translateY(-4px); box-shadow:0 24px 72px rgba(0,0,0,.5); border-color:rgba(244,169,31,.5); }
.featured-card:hover img { transform:scale(1.05); }

/* ══ STADIUM CARDS ════════════════════════════════════════════ */
.stadiums-grid { display:grid; grid-template-columns:1fr; gap:22px; }
@media(min-width:560px)  { .stadiums-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px) { .stadiums-grid { grid-template-columns:repeat(3,1fr); } }
.stadium-card {
  background: var(--card); border:1px solid var(--border); border-radius: var(--r-xl);
  overflow:hidden; transition:all .3s var(--ease);
}
.stadium-card:hover { transform:translateY(-5px); box-shadow: var(--shadow-lg); border-color:rgba(244,169,31,.28); }
.stadium-img { height:196px; overflow:hidden; position:relative; }
.stadium-img img { width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.stadium-card:hover .stadium-img img { transform:scale(1.08); }
.capacity-badge {
  position:absolute; bottom:12px; right:12px;
  background:rgba(0,0,0,.84); color:var(--gold); padding:4px 12px; border-radius:50px;
  font-family: var(--font-accent); font-size:.72rem; font-weight:700; backdrop-filter:blur(8px);
  border:1px solid rgba(244,169,31,.2);
}
.stadium-body { padding:17px; }
.stadium-name { font-family: var(--font-head); font-size:1.15rem; letter-spacing:.8px; color:#fff; margin-bottom:4px; }
.stadium-city { font-family: var(--font-accent); font-size:.82rem; color: var(--gold); display:flex; align-items:center; gap:5px; font-weight:600; }
.stadium-desc { font-size:.8rem; color: var(--muted); margin-top:8px; line-height:1.58; }

/* ══ PAGE HERO ════════════════════════════════════════════════ */
.page-hero { padding:36px 0 22px; }
.page-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2rem,5vw,3.2rem); letter-spacing:3px; color:#fff; margin-bottom:6px;
}
.page-hero p { color: var(--muted); font-size:.88rem; }
.breadcrumb {
  display:flex; align-items:center; gap:8px; margin-bottom:12px;
  font-size:.8rem; color: var(--muted); font-family: var(--font-accent); letter-spacing:.04em;
}
.breadcrumb a { color: var(--gold); }
.breadcrumb i { font-size:.52rem; color: var(--muted); }

/* ══ FILTER BAR ═══════════════════════════════════════════════ */
.filter-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:24px; }
.filter-select,
.filter-input {
  background: rgba(255,255,255,.04); border:1px solid var(--border);
  color: var(--text); padding:10px 15px; border-radius:9px;
  font-family: var(--font-body); font-size:.9rem;
  transition: border-color .22s; outline:none;
}
.filter-select:focus,
.filter-input:focus { border-color: var(--gold); box-shadow:0 0 0 3px var(--gold-glow); }
.filter-input { flex:1; min-width:170px; }
.filter-input::placeholder { color: var(--muted); }
select.filter-select option { background: var(--bg2); }

/* ══ ALERTS / BADGES ══════════════════════════════════════════ */
.alert {
  padding:12px 18px; border-radius:9px; margin-bottom:14px;
  font-weight:600; display:flex; align-items:center; gap:9px; font-size:.88rem;
}
.alert-success { background:rgba(6,214,160,.1); border:1px solid rgba(6,214,160,.3); color:var(--green); }
.alert-error,
.alert-danger { background:rgba(230,57,70,.1); border:1px solid rgba(230,57,70,.3); color:var(--red); }
.alert-info { background:rgba(244,169,31,.1); border:1px solid rgba(244,169,31,.3); color:var(--gold); }
.badge {
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:50px;
  font-family: var(--font-accent); font-size:.68rem; font-weight:700; letter-spacing:.06em;
}
.badge-red   { background:rgba(230,57,70,.14); color:var(--red); border:1px solid rgba(230,57,70,.28); }
.badge-gold  { background:rgba(255,215,0,.14); color:#ffd700; border:1px solid rgba(255,215,0,.28); }
.badge-green { background:rgba(6,214,160,.14); color:var(--green); border:1px solid rgba(6,214,160,.28); }

/* ══ FOOTER ═══════════════════════════════════════════════════ */
.footer {
  position:relative; background:rgba(5,10,22,.99);
  border-top:1px solid rgba(255,255,255,.06);
  padding:52px 0 0; margin-top:72px; overflow:hidden;
}
.footer-wave {
  position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--red), var(--gold), var(--green), var(--red));
  background-size:200% 100%; animation:fw 4.5s linear infinite;
}
@keyframes fw { 0%{background-position:0%;} 100%{background-position:200%;} }
.footer-grid { display:grid; gap:32px; grid-template-columns:1fr; }
@media(min-width:600px) { .footer-grid { grid-template-columns:1fr 1fr; } }
@media(min-width:900px) { .footer-grid { grid-template-columns:2fr 1fr 1fr 1.5fr; } }
.footer-brand p { font-size:.84rem; color: var(--muted); line-height:1.8; margin-bottom:18px; }
.footer-social { display:flex; gap:10px; flex-wrap:wrap; }
.footer-social a {
  width:36px; height:36px; border-radius:9px; background:rgba(255,255,255,.04);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  color: var(--muted); font-size:.8rem; transition:all .24s;
}
.footer-social a:hover { background: var(--red); border-color: var(--red); color:#fff; transform:translateY(-3px); }
.footer-links h4 {
  font-family: var(--font-head); font-size:.9rem; letter-spacing:.2em;
  text-transform:uppercase; color:#fff; margin-bottom:16px;
}
.footer-links ul li { margin-bottom:9px; }
.footer-links a {
  font-size:.84rem; color: var(--muted); display:flex; align-items:center;
  gap:6px; transition:all .22s;
}
.footer-links a i { font-size:.56rem; color: var(--gold); }
.footer-links a:hover { color: var(--gold); transform:translateX(4px); }
.footer-info h4 {
  font-family: var(--font-head); font-size:.9rem; letter-spacing:.2em;
  text-transform:uppercase; color:#fff; margin-bottom:16px;
}
.info-item { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:.84rem; color: var(--muted); }
.info-item i { color: var(--gold); width:14px; flex-shrink:0; }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.05); padding:18px 0; margin-top:40px;
  display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  font-size:.76rem; color: var(--muted);
}
@media(min-width:600px) { .footer-bottom { flex-direction:row; justify-content:space-between; text-align:left; } }

/* ══ UTILITIES ════════════════════════════════════════════════ */
.text-center{text-align:center;} .text-gold{color:var(--gold);} .text-muted{color:var(--muted);}
.mt-1{margin-top:.5rem;} .mt-2{margin-top:1rem;} .mt-3{margin-top:1.5rem;} .mt-4{margin-top:2rem;}
.mb-2{margin-bottom:1rem;} .mb-3{margin-bottom:1.5rem;}
.divider{height:1px;background:var(--border);margin:2rem 0;}
.gap-2 { gap:.5rem; }

/* ══ EMPTY / LOADING ═════════════════════════════════════════ */
.empty-state { text-align:center; padding:3rem 1rem; color: var(--muted); }
.empty-state i { font-size:2.6rem; display:block; margin-bottom:12px; opacity:.2; }
.empty-state p { font-size:.9rem; }
.loading { text-align:center; padding:3rem; color: var(--muted); }

/* ══ ANIMATIONS ══════════════════════════════════════════════ */
.fade-in { animation: fi .5s ease both; }
@keyframes fi { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
.stagger > *:nth-child(1)  { animation: fi .45s .04s ease both; }
.stagger > *:nth-child(2)  { animation: fi .45s .09s ease both; }
.stagger > *:nth-child(3)  { animation: fi .45s .14s ease both; }
.stagger > *:nth-child(4)  { animation: fi .45s .19s ease both; }
.stagger > *:nth-child(5)  { animation: fi .45s .24s ease both; }
.stagger > *:nth-child(6)  { animation: fi .45s .29s ease both; }
.stagger > *:nth-child(7)  { animation: fi .45s .34s ease both; }
.stagger > *:nth-child(8)  { animation: fi .45s .39s ease both; }
.stagger > *:nth-child(9)  { animation: fi .45s .44s ease both; }

/* ══ MOBILE-SPECIFIC OVERRIDES ═══════════════════════════════ */
@media(max-width:639px) {
  body { font-size:15.5px; }
  .hero-slider { height:54vw; min-height:230px; }
  .slide-content { padding:18px 16px; }
  .slide h1 { font-size:1.85rem; margin-bottom:7px; }
  .slide p { display:none; }
  .slide-buttons .btn { padding:9px 16px; font-size:.85rem; }
  .section { padding:40px 0; }
  .stats-bar { padding:18px 14px; gap:14px; }
  .match-card { padding:13px; }
  .match-team-name { font-size:.78rem; }
  .score-display { font-size:1.75rem; }
  .news-img { height:186px; }
  .stadium-img { height:166px; }
  .footer { margin-top:50px; }
  .countdown-num { font-size:1.65rem; min-width:58px; padding:5px 12px; }
  .page-hero { padding:24px 0 16px; }
  .page-hero h1 { font-size:1.85rem; letter-spacing:2px; }
  .news-title { font-size:1.05rem; }
  .news-body { padding:16px 15px; }
  .featured-card > div { grid-template-columns:1fr !important; }
  .featured-card > div > div:first-child { height:210px; }
  .btn { padding:10px 18px; font-size:.9rem; }
}

/* ══ SCROLL BAR ══════════════════════════════════════════════ */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ══ SELECTION ═══════════════════════════════════════════════ */
::selection { background: rgba(244,169,31,.3); color:#fff; }

/* ══ FOCUS VISIBLE ═══════════════════════════════════════════ */
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* ══ COMPAT ALIASES (for pages using old var names) ══════════ */
:root {
  --accent:      var(--red);
  --accent2:     var(--gold);
  --white:       #ffffff;
  --card-bg:     var(--card);
  --card-border: var(--border);
  --text-muted:  var(--muted);
  --bg-dark:     var(--bg2);
}

/* ══════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE & LAYOUT FIXES — v6.1
   ══════════════════════════════════════════════════════════ */

/* ── SLIDER: Mobile Fix ─────────────────────────────────── */
.hero-slider {
  height: clamp(260px, 55vw, 580px);
}
.slide-content {
  padding: 20px 18px;
  max-width: 600px;
  width: 100%;
}
.slide h1 {
  font-size: clamp(1.6rem, 5.5vw, 4.4rem);
  line-height: 1.05;
  word-break: break-word;
  hyphens: auto;
}
.slide p {
  font-size: clamp(.82rem, 2.2vw, 1rem);
  display: block !important; /* Show on all screens */
  margin-bottom: 16px;
}
.slide-badge {
  font-size: .68rem;
  padding: 4px 12px;
  margin-bottom: 10px;
}
.slide-buttons { flex-wrap: wrap; gap: 9px; }
.slide-buttons .btn { padding: 9px 16px; font-size: .86rem; }

@media(max-width: 480px) {
  .hero-slider { height: 56vw; min-height: 240px; }
  .slide-content { padding: 16px 14px; }
  .slide h1 { font-size: 1.5rem; margin-bottom: 6px; }
  .slide p { font-size: .8rem; margin-bottom: 12px; -webkit-line-clamp: 2; display: -webkit-box !important; -webkit-box-orient: vertical; overflow: hidden; }
  .slide-buttons .btn { padding: 8px 14px; font-size: .82rem; }
  .slide-badge { font-size: .62rem; padding: 3px 10px; }
}

/* ── COUNTDOWN: Center Fix ──────────────────────────────── */
#countdown,
.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
.section-header.text-center,
.text-center .section-header,
.container.text-center {
  text-align: center;
}
.text-center .countdown { justify-content: center; }
.text-center .section-tag,
.text-center .section-title,
.text-center .section-subtitle { display: block; text-align: center; }
.text-center .section-line { margin: 10px auto 0; }
.countdown-item { text-align: center; }
.countdown-num {
  min-width: 68px;
  padding: 8px 16px;
  text-align: center;
}
@media(max-width: 480px) {
  .countdown { gap: 8px; }
  .countdown-num { min-width: 56px; font-size: 1.6rem; padding: 6px 10px; }
}

/* ── GROUP STANDINGS: Mobile Horizontal Scroll ──────────── */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.table-wrapper::-webkit-scrollbar { height: 4px; }
.table-wrapper::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
.points-table {
  min-width: 480px;
  width: 100%;
}
.group-panel.card {
  overflow: hidden; /* Contain the scroll wrapper */
}
@media(max-width: 640px) {
  .points-table { min-width: 420px; }
  .points-table th, .points-table td { padding: 9px 8px; font-size: .8rem; }
  .team-cell { gap: 6px; }
  .team-flag { width: 24px; height: 16px; }
}

/* ── TEAMS PAGE: Flag Centering Fix ─────────────────────── */
.team-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.team-flag-img {
  display: block;
  margin: 0 auto 10px;
  width: 62px;
  height: 42px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
/* Team card in teams.php uses <img> directly */
.team-card > img,
.team-card img[alt] {
  display: block;
  margin: 0 auto 10px;
  width: 64px;
  height: 44px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.team-card h3 {
  font-family: var(--font-accent);
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  text-align: center;
  letter-spacing: .04em;
}
.team-card .confederation {
  font-size: .72rem;
  color: var(--muted);
  text-align: center;
  margin-bottom: 2px;
}
.rank-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(244,169,31,.15);
  color: var(--gold);
  border: 1px solid rgba(244,169,31,.3);
  padding: 2px 8px;
  border-radius: 50px;
  font-family: var(--font-accent);
  font-size: .66rem;
  font-weight: 700;
}
.team-card {
  position: relative;
}
.team-card-wrap {
  /* Wrapper div fix */
  display: contents;
}
/* Team stats row inside card */
.team-stats-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  width: 100%;
}
.team-stat-item { text-align: center; }
.team-stat-val {
  font-family: var(--font-head);
  font-size: 1.4rem;
  letter-spacing: 1px;
  display: block;
  line-height: 1;
}
.team-stat-label {
  font-family: var(--font-accent);
  font-size: .62rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  display: block;
  margin-top: 2px;
}

/* ── NEWS CARDS: Text & Description Fix ─────────────────── */
.news-title {
  font-family: var(--font-head);
  font-size: 1.12rem;
  letter-spacing: .8px;
  color: var(--text-bright);
  line-height: 1.25;
  margin-bottom: 9px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-excerpt {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.7;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-body {
  padding: 18px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.news-category {
  font-family: var(--font-accent);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 7px;
}
.news-meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .73rem;
  color: var(--muted);
}
/* News section on homepage */
.news-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.news-img {
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.news-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
  display: block;
}
.news-card:hover .news-img img { transform: scale(1.07); }
@media(max-width: 480px) {
  .news-img { height: 178px; }
  .news-title { font-size: 1rem; -webkit-line-clamp: 2; }
  .news-excerpt { font-size: .8rem; }
  .news-body { padding: 14px 13px; }
}

/* ── TEAMS PAGE GRID FIX ────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media(min-width: 480px)  { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media(min-width: 768px)  { .team-grid { grid-template-columns: repeat(4, 1fr); } }
@media(min-width: 1100px) { .team-grid { grid-template-columns: repeat(5, 1fr); } }

/* Override team-card-wrap not breaking grid */
.team-grid > div { display: block; }
.team-card {
  height: 100%;
  align-items: center;
  justify-content: flex-start;
}

/* ══════════════════════════════════════════════════════════════
   v7.1 — DESKTOP RESTORATION + TABLET-SPECIFIC FIXES
   Desktop (≥1024px): keep premium look, just enhance
   Tablet (768–1023px): comfortable, balanced
   Mobile (≤767px): all the mobile-specific fixes
   ══════════════════════════════════════════════════════════════ */

/* ── DESKTOP ENHANCEMENTS (≥1024px) ─────────────────────── */
@media(min-width: 1024px) {
  /* Slider: bigger, more premium feel */
  .hero-slider { height: clamp(420px, 50vw, 620px); }
  .slide-content { padding: 60px 64px; max-width: 720px; }
  .slide h1 { font-size: clamp(2.8rem, 4vw, 4.6rem); letter-spacing: 1.5px; }
  .slide p {
    display: block !important;
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 480px;
    margin-bottom: 24px;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }
  .slide-badge { font-size: .78rem; padding: 6px 16px; margin-bottom: 16px; }
  .slide-buttons .btn { padding: 14px 28px; font-size: 1rem; }

  /* Countdown: larger, more spacious */
  .countdown { gap: 18px; }
  .countdown-num { font-size: 3.2rem; min-width: 88px; padding: 12px 22px; }
  .countdown-label { font-size: .74rem; margin-top: 6px; }

  /* Match cards: 4 per row clean */
  .schedule-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }

  /* News cards: 3 per row clean */
  .news-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .news-img { height: 230px; }
  .news-body { padding: 22px 20px 18px; }
  .news-title { font-size: 1.22rem; }

  /* Team cards: more breathing room */
  .team-grid { grid-template-columns: repeat(5, 1fr); gap: 18px; }

  /* Sections: more vertical space */
  .section { padding: 84px 0; }
  .section-header { margin-bottom: 38px; }
  .section-title { font-size: clamp(2rem, 3.6vw, 2.8rem); }

  /* Stats bar: 4-5 columns, larger numbers */
  .stats-bar { padding: 32px 28px; gap: 24px; }
  .stat-value { font-size: clamp(2.6rem, 4.5vw, 3.6rem); }
}

@media(min-width: 1280px) {
  .schedule-grid { grid-template-columns: repeat(4, 1fr); }
  .container { padding: 0 48px; }
  .hero-slider { height: clamp(480px, 48vw, 680px); }
}

/* ── TABLET (768px – 1023px) FIXES ─────────────────────── */
@media(min-width: 768px) and (max-width: 1023px) {
  /* Slider: balanced for tablet */
  .hero-slider { height: 50vw; max-height: 480px; min-height: 320px; }
  .slide-content { padding: 36px 40px; max-width: 580px; }
  .slide h1 { font-size: clamp(2rem, 4vw, 3rem); }
  .slide p {
    display: block !important;
    font-size: .95rem;
    line-height: 1.6;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box !important;
    overflow: hidden;
    margin-bottom: 18px;
  }
  .slide-buttons .btn { padding: 11px 22px; font-size: .92rem; }

  /* Countdown: nicely centered with tablet sizing */
  .countdown { gap: 14px; justify-content: center; }
  .countdown-num { font-size: 2.4rem; min-width: 78px; padding: 9px 18px; }

  /* News grid 2-up on tablet */
  .news-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .news-img { height: 210px; }

  /* Team grid 4 per row */
  .team-grid { grid-template-columns: repeat(4, 1fr); }

  /* Match grid 2-3 per row */
  .schedule-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── MOBILE (≤767px) — SPECIFIC FIXES ──────────────────── */

@media(max-width: 767px) {
  /* ─── SLIDER MOBILE FIX ─── */
  .hero-slider {
    height: auto;
    min-height: 340px;
  }
  .slide {
    height: auto;
    min-height: 340px;
    align-items: stretch;
  }
  .slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .slide::after {
    background: linear-gradient(180deg, rgba(5,10,22,.45) 0%, rgba(5,10,22,.85) 65%, rgba(5,10,22,.95) 100%);
  }
  .slide-content {
    padding: 100px 18px 60px;
    max-width: 100%;
    align-self: flex-end;
    width: 100%;
  }
  .slide-badge {
    font-size: .62rem;
    padding: 4px 11px;
    margin-bottom: 10px;
    letter-spacing: .12em;
  }
  .slide h1 {
    font-size: 1.95rem !important;
    letter-spacing: 1.2px;
    line-height: 1.05;
    margin-bottom: 8px;
    word-break: break-word;
  }
  .slide p {
    display: -webkit-box !important;
    font-size: .85rem;
    line-height: 1.55;
    color: rgba(255,255,255,.78);
    margin-bottom: 14px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
  }
  .slide-buttons {
    gap: 8px;
    flex-wrap: wrap;
  }
  .slide-buttons .btn {
    padding: 9px 16px;
    font-size: .82rem;
    flex: 0 1 auto;
  }
  .slider-btn { width: 36px; height: 36px; font-size: .76rem; }
  .slider-prev { left: 10px; }
  .slider-next { right: 10px; }
  .slider-dots { bottom: 12px; gap: 6px; }
  .dot { width: 6px; height: 6px; }
  .dot.active { width: 20px; }

  /* ─── COUNTDOWN MOBILE FIX (center perfectly) ─── */
  #countdown,
  .countdown {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    width: 100%;
    margin: 0 auto;
    padding: 0 4px;
  }
  .countdown-item {
    flex: 0 1 auto;
    text-align: center;
  }
  .countdown-num {
    min-width: 60px;
    font-size: 1.75rem;
    padding: 6px 10px;
    letter-spacing: 1.5px;
    margin: 0 auto;
    display: block;
  }
  .countdown-label {
    font-size: .58rem;
    margin-top: 3px;
  }
  /* Force center for the countdown section's parent container */
  .section-sm .container,
  .section .container.text-center {
    text-align: center;
  }
  .section-sm .section-header,
  .section .section-header {
    text-align: center !important;
  }
  .section-header h2,
  .section-title {
    justify-content: center !important;
    text-align: center !important;
  }
  .section-line {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ─── GROUP STANDINGS MOBILE: HORIZONTAL SCROLL ─── */
  /* Group tabs should be horizontally scrollable, not cramped */
  .group-tabs,
  .groups-tabs-bar,
  .news-cat-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 10px !important;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .group-tabs::-webkit-scrollbar,
  .groups-tabs-bar::-webkit-scrollbar,
  .news-cat-bar::-webkit-scrollbar {
    height: 4px;
  }
  .group-tabs::-webkit-scrollbar-thumb,
  .groups-tabs-bar::-webkit-scrollbar-thumb,
  .news-cat-bar::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 2px;
  }
  .group-tab,
  .news-cat-btn {
    flex-shrink: 0 !important;
    scroll-snap-align: start;
    white-space: nowrap !important;
  }

  /* Points table — horizontal scroll for full table */
  .table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    margin: 0 -1px;
  }
  .points-table {
    min-width: 540px !important;
  }
  .points-table th,
  .points-table td {
    padding: 8px 7px;
    font-size: .78rem;
  }
  .points-table th:first-child,
  .points-table td:first-child {
    padding-left: 10px;
    position: sticky;
    left: 0;
    background: var(--bg2);
    z-index: 2;
  }
  /* Show all columns on scroll (override the hide rule from base CSS) */
  .points-table th:nth-child(4),
  .points-table th:nth-child(5),
  .points-table th:nth-child(6),
  .points-table th:nth-child(7),
  .points-table td:nth-child(4),
  .points-table td:nth-child(5),
  .points-table td:nth-child(6),
  .points-table td:nth-child(7) { display: table-cell !important; }
  .team-name-full { display: block !important; font-size: .82rem; }
  .team-name-short { display: none !important; }

  /* Hint scroll arrow */
  .group-panel.card {
    position: relative;
  }
  .group-panel.card::after {
    content: '← swipe →';
    position: absolute;
    top: 22px;
    right: 16px;
    font-family: var(--font-accent);
    font-size: .65rem;
    color: var(--muted);
    letter-spacing: .1em;
    opacity: .65;
    pointer-events: none;
  }

  /* ─── TEAMS PAGE — FLAG CENTERING MOBILE FIX ─── */
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .team-card-wrap {
    display: block !important;
    width: 100%;
  }
  .team-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 16px 10px 14px !important;
  }
  /* The flag inside team-card */
  .team-card > div:first-child,
  .team-card > div[style*="width:68px"],
  .team-card > div[style*="width:62px"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .team-card img[alt] {
    margin: 0 auto !important;
    display: block !important;
  }
  /* Stats row at bottom of card */
  .team-card > div:last-child {
    width: 100% !important;
    justify-content: space-around !important;
  }

  /* ─── NEWS CARDS MOBILE — TEXT FIX ─── */
  .news-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .news-card {
    flex-direction: column;
    border-radius: 14px;
  }
  .news-img {
    height: 180px !important;
  }
  .news-body {
    padding: 16px 14px 14px !important;
  }
  .news-category {
    font-size: .65rem !important;
    margin-bottom: 6px !important;
  }
  .news-title {
    font-size: 1.08rem !important;
    line-height: 1.22 !important;
    -webkit-line-clamp: 2 !important;
    margin-bottom: 8px !important;
    letter-spacing: .5px;
  }
  .news-excerpt {
    font-size: .85rem !important;
    line-height: 1.6 !important;
    color: var(--text) !important;
    -webkit-line-clamp: 3 !important;
    opacity: .82;
  }
  .news-meta {
    font-size: .72rem !important;
    padding-top: 11px !important;
    margin-top: 12px !important;
  }
  .read-more {
    font-size: .76rem !important;
  }

  /* ─── FEATURED NEWS CARD MOBILE ─── */
  .news-featured-card {
    grid-template-columns: 1fr !important;
    border-radius: 16px;
  }
  .news-featured-img { height: 200px !important; }
  .news-featured-gradient {
    background: linear-gradient(to top, rgba(5,10,22,.85) 0%, transparent 55%) !important;
  }
  .news-featured-content { padding: 18px 16px 22px !important; }
  .news-featured-title { font-size: 1.3rem !important; letter-spacing: 1px; line-height: 1.15; }
  .news-featured-excerpt { -webkit-line-clamp: 2 !important; font-size: .82rem !important; }

  /* News page — homepage section, list smaller */
  #news .news-grid { grid-template-columns: 1fr !important; }

  /* Ticker mobile */
  .ticker-label { font-size: .62rem; padding: 3px 12px; margin-right: 10px; }
  .ticker-item { font-size: .76rem; }

  /* Section padding mobile */
  .section { padding: 36px 0; }
  .section-sm { padding: 22px 0; }
  .section-header { margin-bottom: 22px; }
  .section-title,
  .section-header h2 { font-size: 1.7rem !important; letter-spacing: 1.5px !important; }
  .section-subtitle { font-size: .82rem !important; }

  /* Page hero mobile */
  .page-hero { padding: 22px 0 14px; }
  .page-hero h1 { font-size: 1.8rem !important; letter-spacing: 1.5px !important; line-height: 1.05; }
  .page-hero p { font-size: .82rem; }

  /* Stats bar mobile */
  .stats-bar { padding: 16px 12px !important; gap: 12px !important; grid-template-columns: repeat(2, 1fr) !important; }
  .stat-value { font-size: 1.85rem !important; }
  .stat-label { font-size: .62rem !important; }

  /* Match card mobile */
  .match-card { padding: 12px !important; }
  .match-team-name { font-size: .76rem; }
  .score-display, .separator { font-size: 1.6rem; }
  .match-team img { width: 34px; height: 24px; }
}

/* ── EXTRA-SMALL MOBILE (≤380px) ───────────────────────── */
@media(max-width: 380px) {
  .slide h1 { font-size: 1.65rem !important; }
  .slide p { -webkit-line-clamp: 2 !important; font-size: .8rem !important; }
  .slide-buttons .btn { padding: 8px 13px; font-size: .76rem; }
  .countdown-num { min-width: 54px; font-size: 1.55rem; padding: 5px 8px; }
  .stat-value { font-size: 1.65rem !important; }
  .news-title { font-size: 1rem !important; }
  .page-hero h1 { font-size: 1.55rem !important; }
  .team-grid { gap: 10px !important; }
  .team-card { padding: 14px 8px 12px !important; }
}

/* ══════════════════════════════════════════════════════════════
   v8.1 — DESKTOP NAVBAR + THEME TOGGLE + SCORES POLISH
   ══════════════════════════════════════════════════════════════ */

/* ── DESKTOP NAVBAR FIX (≥960px) ───────────────────────────── */
@media(min-width: 960px) {
  .navbar {
    height: 68px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 14px rgba(0,0,0,.3);
  }
  .nav-container {
    gap: 24px;
  }
  .nav-menu {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    align-items: center;
    position: static !important;
    background: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    border: none !important;
    overflow: visible !important;
    max-height: none !important;
    margin: 0;
  }
  .nav-menu li { display: flex; align-items: center; }
  .nav-menu li a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    position: relative;
    font-family: var(--font-accent) !important;
    font-size: .88rem !important;
    font-weight: 600 !important;
    letter-spacing: .07em !important;
    color: rgba(205, 216, 232, .72) !important;
    background: transparent !important;
    transition: all .25s var(--ease) !important;
    border-left: none !important;
    white-space: nowrap;
    line-height: 1;
  }
  .nav-menu li a i {
    font-size: .78rem !important;
    width: auto !important;
    color: var(--gold);
    opacity: .8;
    transition: opacity .22s, transform .22s;
  }
  .nav-menu li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 14px;
    right: 14px;
    height: 2px;
    background: linear-gradient(90deg, var(--red), var(--gold));
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .28s var(--ease);
  }
  .nav-menu li a:hover {
    color: #fff !important;
    background: rgba(255,255,255,.04) !important;
  }
  .nav-menu li a:hover i {
    opacity: 1;
    transform: translateY(-1px) scale(1.05);
  }
  .nav-menu li a:hover::after {
    transform: scaleX(1);
  }
  .nav-menu li a.active {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(244,169,31,.1), rgba(244,169,31,.02)) !important;
    border-left: none !important;
  }
  .nav-menu li a.active i {
    color: var(--gold) !important;
    opacity: 1;
  }
  .nav-menu li a.active::after {
    transform: scaleX(1);
    height: 3px;
    background: linear-gradient(90deg, var(--gold), #ffd700);
    box-shadow: 0 1px 8px var(--gold-glow);
  }
}

@media(min-width: 1100px) {
  .nav-menu li a {
    padding: 11px 16px !important;
    font-size: .92rem !important;
  }
  .nav-menu { gap: 6px !important; }
}

/* ── THEME TOGGLE BUTTON ───────────────────────────────────── */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  margin-left: 12px;
  transition: all .25s var(--ease);
  flex-shrink: 0;
  padding: 0;
}
.theme-toggle:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: rotate(15deg) scale(1.08);
}
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: inline-block; }
html.theme-light .theme-toggle .icon-sun  { display: inline-block; }
html.theme-light .theme-toggle .icon-moon { display: none; }

@media(max-width: 480px) {
  .theme-toggle { width: 28px; height: 28px; font-size: .68rem; margin-left: 8px; }
}

/* ── LIGHT THEME OVERRIDES ─────────────────────────────────── */
html.theme-light {
  --bg:         #f4f6fb;
  --bg2:        #ffffff;
  --bg3:        #eef1f7;
  --card:       rgba(13,36,68,.04);
  --card-hover: rgba(13,36,68,.07);
  --border:     rgba(13,36,68,.12);
  --border-h:   rgba(13,36,68,.22);
  --text:       #1e2a3d;
  --text-bright:#0a1428;
  --text-soft:  #5a6a82;
  --text-dim:   #7a8fa8;
  --muted:      #5a6a82;
  --navy:       #c5d4e8;
  --navy-mid:   #94abcc;
  --shadow-sm:  0 2px 10px rgba(13,36,68,.08);
  --shadow-md:  0 8px 28px rgba(13,36,68,.12);
  --shadow-lg:  0 20px 50px rgba(13,36,68,.18);
}
html.theme-light body { background: var(--bg); color: var(--text); }
html.theme-light .bg-animation {
  background:
    radial-gradient(ellipse 70% 55% at 10% 60%, rgba(244,169,31,.08) 0%, transparent 65%),
    radial-gradient(ellipse 45% 38% at 88% 12%, rgba(230,57,70,.06) 0%, transparent 60%),
    linear-gradient(160deg, #f4f6fb 0%, #e8eef7 55%, #f4f6fb 100%);
}
html.theme-light .bg-particle { opacity: .04; }
html.theme-light .bg-football { opacity: .03; color: var(--navy-mid); }
html.theme-light .topbar {
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(13,36,68,.08);
}
html.theme-light .navbar {
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(13,36,68,.1);
}
html.theme-light .logo-main { color: #0a1428; }
html.theme-light .logo-sub  { color: var(--gold-dark); }
html.theme-light .nav-menu li a { color: rgba(30,42,61,.72) !important; }
html.theme-light .nav-menu li a:hover { color: #0a1428 !important; background: rgba(13,36,68,.05) !important; }
html.theme-light .nav-menu li a.active { color: #0a1428 !important; }
html.theme-light .hamburger span { background: #0a1428; }
html.theme-light .slide::after {
  background: linear-gradient(105deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.4) 55%, rgba(255,255,255,.05) 100%);
}
html.theme-light .slide h1 { color: #0a1428; }
html.theme-light .slide p { color: rgba(30,42,61,.8); }
html.theme-light .ticker-bar {
  background: linear-gradient(90deg, rgba(13,36,68,.85), rgba(26,60,110,.7));
}
html.theme-light .ticker-item { color: #fff !important; }
html.theme-light .section-title,
html.theme-light .section-header h2,
html.theme-light .news-title,
html.theme-light .stadium-name,
html.theme-light .team-name,
html.theme-light .page-hero h1 { color: #0a1428 !important; }
html.theme-light .stats-bar {
  background: linear-gradient(135deg, rgba(13,36,68,.95), rgba(26,60,110,.85));
}
html.theme-light .stats-bar .stat-label { color: rgba(255,255,255,.7); }
html.theme-light .points-table th { background: rgba(13,36,68,.08); color: var(--muted); }
html.theme-light .points-table tbody tr:hover { background: rgba(13,36,68,.03); }
html.theme-light .countdown-num {
  background: #fff;
  color: #0a1428;
  border-color: rgba(13,36,68,.15);
  box-shadow: 0 4px 14px rgba(13,36,68,.08);
}
html.theme-light .match-card,
html.theme-light .news-card,
html.theme-light .team-card,
html.theme-light .stadium-card,
html.theme-light .group-panel.card,
html.theme-light .card,
html.theme-light .nd-sidebar-card,
html.theme-light .nd-share {
  background: #fff;
  border: 1px solid rgba(13,36,68,.1);
  box-shadow: 0 2px 10px rgba(13,36,68,.04);
}
html.theme-light .match-team-name,
html.theme-light .score-display { color: #0a1428; }
html.theme-light .group-tab,
html.theme-light .news-cat-btn {
  background: #fff;
  border-color: rgba(13,36,68,.1);
  color: var(--muted);
}
html.theme-light .group-tab.active {
  background: rgba(244,169,31,.12);
  border-color: var(--gold);
  color: var(--gold-dark);
}
html.theme-light .filter-input,
html.theme-light .filter-select {
  background: #fff;
  border-color: rgba(13,36,68,.15);
  color: var(--text);
}
html.theme-light .footer {
  background: #0a1428;
  color: #d4dde8;
}
html.theme-light .footer-brand p,
html.theme-light .footer-links a,
html.theme-light .info-item,
html.theme-light .footer-bottom p { color: rgba(255,255,255,.7); }
html.theme-light .footer-links h4,
html.theme-light .footer-info h4 { color: #fff; }
html.theme-light ::-webkit-scrollbar-track { background: #e8eef7; }
html.theme-light ::-webkit-scrollbar-thumb { background: rgba(13,36,68,.2); }

/* News-detail specific light theme */
html.theme-light .nd-title,
html.theme-light .nd-content h2,
html.theme-light .nd-content h3 { color: #0a1428; }
html.theme-light .nd-content { color: var(--text); }
html.theme-light .nd-lead { background: rgba(244,169,31,.08); color: #1e2a3d; }
html.theme-light .nd-sidebar-title { color: #0a1428; }
html.theme-light .nd-related-title { color: #0a1428; }
html.theme-light .nd-quick-link { color: var(--muted); }
html.theme-light .nd-quick-link:hover { color: var(--gold-dark); background: rgba(244,169,31,.08); }
html.theme-light .nd-cat-tag { background: rgba(244,169,31,.14); }

/* Featured news card light */
html.theme-light .news-featured-card {
  background: #fff;
  border-color: rgba(244,169,31,.25);
}
html.theme-light .news-featured-title { color: #0a1428; }
html.theme-light .news-featured-excerpt { color: var(--muted); }

/* Players light */
html.theme-light .player-card-featured,
html.theme-light .player-list-card { background: #fff; border-color: rgba(13,36,68,.1); }
html.theme-light .player-name, html.theme-light .plc-name { color: #0a1428; }
html.theme-light .player-stat { background: rgba(13,36,68,.04); border-color: rgba(13,36,68,.08); }
html.theme-light .player-stat-num { color: #0a1428; }

/* ── SCORES PAGE — COMPLETED MATCH RESULT BAR ─────────────── */
.match-result-bar {
  margin-top: 12px;
  padding: 10px 12px;
  background: linear-gradient(90deg, rgba(244,169,31,.1), rgba(244,169,31,.02));
  border: 1px solid rgba(244,169,31,.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-accent);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gold);
}
.match-result-bar i { color: var(--gold); font-size: .9em; }
.match-result-bar.draw {
  background: linear-gradient(90deg, rgba(125,140,168,.1), rgba(125,140,168,.02));
  border-color: rgba(125,140,168,.22);
  color: #94a3b8;
}
.match-result-bar.draw i { color: #94a3b8; }
.match-penalty {
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
  margin-top: 6px;
  font-family: var(--font-accent);
  letter-spacing: .04em;
}
.match-penalty strong { color: var(--gold); }

html.theme-light .match-result-bar {
  background: linear-gradient(90deg, rgba(244,169,31,.14), rgba(244,169,31,.04));
}
html.theme-light .match-result-bar.draw {
  background: linear-gradient(90deg, rgba(125,140,168,.14), rgba(125,140,168,.04));
}

/* Smoother transitions for theme switching */
body, .navbar, .topbar, .card, .match-card, .news-card, .team-card,
.stadium-card, .group-panel, .filter-input, .filter-select, .countdown-num,
.nd-sidebar-card, .stats-bar {
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

/* ── NAV-RIGHT WRAPPER (theme toggle + hamburger) ────────── */
.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
@media(min-width: 960px) {
  .nav-right {
    order: 3;
    margin-left: auto;
  }
  .nav-menu {
    order: 2;
  }
}
.nav-right .theme-toggle {
  margin-left: 0;
}

/* ══════════════════════════════════════════════════════════════
   v9.1 — LIGHT THEME TEXT VISIBILITY FIXES + STADIUM DETAIL
   ══════════════════════════════════════════════════════════════ */

html.theme-light {
  /* Strengthen text colors for readability */
  --text:        #1a2740;
  --text-bright: #060d1c;
  --muted:       #4a5a72;
}

/* All headings + body text dark on light */
html.theme-light body,
html.theme-light p,
html.theme-light span:not(.badge):not([class*="status"]):not(.score-num):not(.separator),
html.theme-light li,
html.theme-light td,
html.theme-light label,
html.theme-light div {
  color: inherit;
}

/* Force dark headings */
html.theme-light h1,
html.theme-light h2,
html.theme-light h3,
html.theme-light h4,
html.theme-light h5,
html.theme-light .section-title,
html.theme-light .section-header h2,
html.theme-light .page-hero h1,
html.theme-light .logo-main,
html.theme-light .news-title,
html.theme-light .news-featured-title,
html.theme-light .stadium-name,
html.theme-light .host-name,
html.theme-light .team-name,
html.theme-light .player-name,
html.theme-light .plc-name,
html.theme-light .match-team-name,
html.theme-light .nd-title,
html.theme-light .nd-sidebar-title,
html.theme-light .nd-related-title,
html.theme-light .sd-title,
html.theme-light .sd-section-title,
html.theme-light .sd-stat-val,
html.theme-light .sd-other-name,
html.theme-light .date-header,
html.theme-light .countdown-num {
  color: #060d1c !important;
}

/* Section subtitle, meta, muted text — readable medium gray */
html.theme-light .section-subtitle,
html.theme-light .page-hero p,
html.theme-light .news-excerpt,
html.theme-light .news-featured-excerpt,
html.theme-light .news-meta,
html.theme-light .stadium-city,
html.theme-light .host-cities,
html.theme-light .team-meta,
html.theme-light .player-desc,
html.theme-light .match-venue,
html.theme-light .match-meta,
html.theme-light .nd-meta,
html.theme-light .nd-content,
html.theme-light .sd-description,
html.theme-light .sd-other-city,
html.theme-light .breadcrumb,
html.theme-light .countdown-label,
html.theme-light .stat-label,
html.theme-light .empty-state {
  color: #4a5a72 !important;
}

/* Body content paragraphs darker for reading */
html.theme-light .nd-content,
html.theme-light .nd-content p,
html.theme-light .sd-description {
  color: #2a3850 !important;
}

/* Gold accents stay gold-dark for contrast on white */
html.theme-light .section-tag,
html.theme-light .news-category,
html.theme-light .stadium-city,
html.theme-light .read-more,
html.theme-light .stadium-view-more,
html.theme-light .sd-location {
  color: var(--gold-dark) !important;
}
html.theme-light .stadium-card:hover .stadium-view-more,
html.theme-light .news-card:hover .read-more { color: var(--gold-dark) !important; }

/* Match score numbers dark */
html.theme-light .score-num,
html.theme-light .score-display,
html.theme-light .sd-match-team { color: #060d1c !important; }
html.theme-light .separator,
html.theme-light .sd-match-vs { color: #4a5a72 !important; }
html.theme-light .pts,
html.theme-light .sd-match-score strong { color: var(--gold-dark) !important; }

/* Cards on light get white bg + visible borders */
html.theme-light .host-card,
html.theme-light .sd-stat,
html.theme-light .sd-match,
html.theme-light .sd-sidebar-card,
html.theme-light .stadium-card {
  background: #ffffff !important;
  border-color: rgba(13,36,68,.1) !important;
}

/* Stat values inside dark gradient stat-bars stay light */
html.theme-light .stats-bar .stat-value { color: #ffd700 !important; }
html.theme-light .stats-bar .stat-label { color: rgba(255,255,255,.75) !important; }

/* Table text */
html.theme-light .points-table td { color: #1a2740 !important; }
html.theme-light .points-table th { color: #4a5a72 !important; }
html.theme-light .team-name-full,
html.theme-light .team-name-short { color: #060d1c !important; }

/* Filter inputs readable */
html.theme-light .filter-input,
html.theme-light .filter-select { color: #1a2740 !important; }
html.theme-light .filter-input::placeholder { color: #8595ad !important; }
html.theme-light select.filter-select option { background: #fff; color: #1a2740; }

/* Group tabs / news cat buttons */
html.theme-light .group-tab,
html.theme-light .news-cat-btn { color: #4a5a72 !important; }
html.theme-light .group-tab:hover,
html.theme-light .news-cat-btn:hover { color: #060d1c !important; }
html.theme-light .group-tab.active { color: var(--gold-dark) !important; }
html.theme-light .news-cat-btn.active { color: var(--red-dark) !important; }

/* Quick links */
html.theme-light .nd-quick-link { color: #4a5a72 !important; }
html.theme-light .nd-quick-link:hover { color: var(--gold-dark) !important; }

/* Player stat values */
html.theme-light .player-stat-num { color: #060d1c !important; }
html.theme-light .player-stat-label { color: #4a5a72 !important; }
html.theme-light .player-country,
html.theme-light .plc-pos,
html.theme-light .plc-stats { color: #4a5a72 !important; }

/* Lead/blockquote on light */
html.theme-light .nd-lead { color: #2a3850 !important; }

/* Sidebar swipe hint, scroll labels */
html.theme-light .group-panel.card::after { color: #8595ad; }

/* Slide text — slides have dark image so keep slide text light always */
html.theme-light .slide h1 { color: #fff !important; }
html.theme-light .slide p { color: rgba(255,255,255,.9) !important; }
html.theme-light .slide::after {
  background: linear-gradient(108deg, rgba(5,10,22,.88) 0%, rgba(5,10,22,.5) 52%, rgba(5,10,22,.15) 100%) !important;
}

/* Footer is dark in both themes — keep text light */
html.theme-light .footer h4,
html.theme-light .footer .logo-main { color: #fff !important; }
html.theme-light .footer p,
html.theme-light .footer a,
html.theme-light .footer .info-item { color: rgba(255,255,255,.72) !important; }

/* Topbar text on light */
html.theme-light .topbar-left { color: #4a5a72; }
html.theme-light .topbar-left i { color: var(--gold-dark); }
html.theme-light .topbar-right a { color: #4a5a72; }
html.theme-light .topbar-right a:hover { color: var(--gold-dark); }

/* Theme toggle button on light */
html.theme-light .theme-toggle { border-color: rgba(13,36,68,.2); color: #4a5a72; }
html.theme-light .theme-toggle:hover { border-color: var(--gold-dark); color: var(--gold-dark); }

/* Match result bar on light */
html.theme-light .match-result-bar { color: var(--gold-dark) !important; }
html.theme-light .match-result-bar i { color: var(--gold-dark) !important; }
html.theme-light .match-team.is-winner .match-team-name { color: var(--gold-dark) !important; }

/* Stadium detail hero text always light (dark image bg) */
html.theme-light .sd-hero-content .sd-title { color: #fff !important; }
html.theme-light .sd-hero-content .sd-location { color: var(--gold) !important; }

/* News detail category tag */
html.theme-light .nd-cat-tag { color: var(--gold-dark) !important; }

/* Match penalty text */
html.theme-light .match-penalty { color: #4a5a72 !important; }
html.theme-light .match-penalty strong { color: var(--gold-dark) !important; }

/* ── Logo image (admin-uploaded) ─────────────────────────── */
.logo-image {
  height: 44px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}
@media(max-width: 480px) {
  .logo-image { height: 36px; max-width: 150px; }
}

/* ══════════════════════════════════════════════════════════════
   v12 — GLOBAL CATEGORY/FILTER BAR (used by news + clubs pages)
   ══════════════════════════════════════════════════════════════ */
.news-cat-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.news-cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 50px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-family: var(--font-accent);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-decoration: none;
  transition: all .22s var(--ease);
  white-space: nowrap;
}
.news-cat-btn i { font-size: .75rem; }
.news-cat-btn:hover {
  color: #fff;
  border-color: var(--border-h);
  background: var(--card-hover);
  transform: translateY(-1px);
}
.news-cat-btn.active {
  background: rgba(230,57,70,.14);
  border-color: var(--red);
  color: #ff6b77;
}

/* ══════════════════════════════════════════════════════════════
   v12.1 — MOBILE/TABLET MENU REDESIGN (readable + beautiful)
   ══════════════════════════════════════════════════════════════ */
@media(max-width: 959px) {
  .nav-menu {
    display: none;
    flex-direction: column;
    gap: 6px;
    position: fixed;
    top: calc(var(--nav-h) + var(--top-h));
    left: 0; right: 0;
    background: linear-gradient(180deg, rgba(8,15,31,.99) 0%, rgba(5,10,22,.99) 100%);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    padding: 16px 16px 24px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 50px rgba(0,0,0,.6);
    max-height: calc(100vh - var(--nav-h) - var(--top-h));
    overflow-y: auto;
    animation: none;
  }
  .nav-menu.open {
    display: flex;
    animation: navSlideDown .32s var(--ease);
  }
  @keyframes navSlideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .nav-menu li { width: 100%; }
  .nav-menu li a {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 15px 18px !important;
    border-radius: 12px;
    font-family: var(--font-accent);
    font-size: 1.08rem !important;
    font-weight: 600;
    letter-spacing: .04em;
    color: #e8eef5 !important;            /* bright, readable */
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.06);
    border-left: 3px solid transparent;
    transition: all .22s var(--ease);
  }
  .nav-menu li a i {
    width: 22px;
    font-size: .95rem !important;
    color: var(--gold);
    text-align: center;
    flex-shrink: 0;
  }
  .nav-menu li a::after { display: none !important; }  /* no underline on mobile */
  .nav-menu li a:hover,
  .nav-menu li a:active {
    color: #fff !important;
    background: rgba(255,255,255,.07);
    border-left-color: var(--red);
    transform: translateX(3px);
  }
  .nav-menu li a.active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(244,169,31,.16), rgba(244,169,31,.04));
    border-left: 3px solid var(--gold);
  }
  .nav-menu li a.active i { color: var(--gold); }

  /* Hamburger bigger tap target + clearer */
  .hamburger {
    display: flex;
    padding: 10px;
    gap: 5px;
  }
  .hamburger span {
    width: 24px; height: 2.5px;
    background: #fff;
    border-radius: 3px;
  }
  html.theme-light .hamburger span { background: #0a1428; }

  /* Light theme mobile menu */
  html.theme-light .nav-menu {
    background: linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);
    border-bottom: 1px solid rgba(13,36,68,.12);
    box-shadow: 0 16px 50px rgba(13,36,68,.18);
  }
  html.theme-light .nav-menu li a {
    color: #1a2740 !important;
    background: rgba(13,36,68,.03);
    border-color: rgba(13,36,68,.08);
  }
  html.theme-light .nav-menu li a:hover { color: #060d1c !important; background: rgba(13,36,68,.06); }
  html.theme-light .nav-menu li a.active { color: #060d1c !important; }
}

/* Tablet: roomier nav drawer */
@media(min-width: 600px) and (max-width: 959px) {
  .nav-menu {
    left: auto; right: 0;
    width: 340px;
    border-left: 1px solid var(--border);
    border-bottom-left-radius: 16px;
    max-height: calc(100vh - var(--nav-h) - var(--top-h));
  }
  .nav-menu.open { animation: navSlideRight .32s var(--ease); }
  @keyframes navSlideRight {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
  }
}

/* ══════════════════════════════════════════════════════════════
   v13 — CLEARER ACTIVE PAGE INDICATOR (desktop + mobile)
   ══════════════════════════════════════════════════════════════ */

/* Desktop — bold pill + glowing underline for active */
@media(min-width: 960px) {
  .nav-menu li a.active {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(244,169,31,.22), rgba(244,169,31,.06)) !important;
    border-radius: 8px 8px 0 0 !important;
    font-weight: 700 !important;
  }
  .nav-menu li a.active i { color: var(--gold) !important; opacity: 1 !important; }
  .nav-menu li a.active::after {
    transform: scaleX(1) !important;
    left: 6px !important; right: 6px !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--gold), #ffd700) !important;
    box-shadow: 0 0 12px var(--gold), 0 1px 6px var(--gold-glow) !important;
    border-radius: 3px 3px 0 0 !important;
  }
  /* Tiny dot above active for extra clarity */
  .nav-menu li a.active::before {
    content: '';
    position: absolute;
    top: 2px; left: 50%; transform: translateX(-50%);
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px var(--gold);
  }
  html.theme-light .nav-menu li a.active {
    color: #060d1c !important;
    background: linear-gradient(180deg, rgba(244,169,31,.28), rgba(244,169,31,.08)) !important;
  }
}

/* Mobile/Tablet — strong highlighted active item */
@media(max-width: 959px) {
  .nav-menu li a.active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(244,169,31,.28), rgba(244,169,31,.08)) !important;
    border-left: 4px solid var(--gold) !important;
    font-weight: 700 !important;
    box-shadow: inset 0 0 0 1px rgba(244,169,31,.25);
    position: relative;
  }
  .nav-menu li a.active i { color: var(--gold) !important; }
  /* "current" check mark on the right */
  .nav-menu li a.active::before {
    content: '\f00c';  /* fa-check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 18px; top: 50%; transform: translateY(-50%);
    color: var(--gold);
    font-size: .8rem;
  }
  html.theme-light .nav-menu li a.active {
    color: #060d1c !important;
    background: linear-gradient(90deg, rgba(244,169,31,.3), rgba(244,169,31,.1)) !important;
  }
}

/* Team card CTA — pill button style */
.team-card-cta {
  font-family: var(--font-accent);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 7px 16px;
  border-radius: 50px;
  background: rgba(244,169,31,.1);
  border: 1px solid rgba(244,169,31,.25);
  transition: all .26s var(--ease);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.team-card-cta i {
  font-size: .7rem;
  transition: transform .26s var(--ease);
}
.team-card-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  opacity: 0;
  transition: opacity .26s var(--ease);
  z-index: -1;
}
.team-card:hover .team-card-cta {
  color: #1a1400;
  border-color: var(--gold);
  box-shadow: 0 4px 14px var(--gold-glow);
  transform: translateY(-1px);
}
.team-card:hover .team-card-cta::before { opacity: 1; }
.team-card:hover .team-card-cta i { transform: translateX(4px); }
html.theme-light .team-card-cta { color: var(--gold-dark); background: rgba(244,169,31,.12); }
html.theme-light .team-card:hover .team-card-cta { color: #1a1400; }

/* ══════════════════════════════════════════════════════════════
   v13.1 — SHARED DETAIL-PAGE STYLES (.cd-*) used by club + team detail
   ══════════════════════════════════════════════════════════════ */

/* Tabs */
.cd-tabs {
  display: flex; gap: 8px; margin-bottom: 24px;
  border-bottom: 1px solid var(--border); padding-bottom: 0; flex-wrap: wrap;
}
.cd-tab {
  background: none; border: none; padding: 12px 20px;
  font-family: var(--font-accent); font-size: .95rem; font-weight: 700;
  letter-spacing: .05em; color: var(--muted); cursor: pointer;
  position: relative; transition: color .22s;
  display: flex; align-items: center; gap: 8px;
}
.cd-tab i { font-size: .85em; }
.cd-tab::after {
  content: ''; position: absolute; bottom: -1px; left: 14px; right: 14px;
  height: 3px; background: linear-gradient(90deg, var(--red), var(--gold));
  border-radius: 3px; transform: scaleX(0); transition: transform .26s var(--ease);
}
.cd-tab:hover { color: #fff; }
.cd-tab.active { color: var(--gold); }
.cd-tab.active::after { transform: scaleX(1); }
.cd-panel { display: none; }
.cd-panel.active { display: block; animation: fi .4s ease; }

/* Position groups */
.cd-pos-group { margin-bottom: 28px; }
.cd-pos-title {
  font-family: var(--font-head); font-size: 1.3rem; letter-spacing: 1.5px;
  color: #fff; margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.cd-pos-title span {
  font-size: .8rem; background: rgba(244,169,31,.12); color: var(--gold);
  padding: 2px 10px; border-radius: 50px; font-family: var(--font-accent);
}

/* Squad grid */
.cd-squad-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 14px; }
.cd-player {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px 12px; text-align: center; transition: all .26s var(--ease);
}
.cd-player:hover { transform: translateY(-4px); border-color: rgba(244,169,31,.3); box-shadow: var(--shadow-md); }
.cd-player-top { position: relative; display: flex; justify-content: center; margin-bottom: 10px; }
.cd-player-num {
  position: absolute; top: 0; left: 0;
  font-family: var(--font-head); font-size: 1.5rem; color: var(--gold); line-height: 1;
}
.cd-player-img {
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  background: rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; border: 2px solid var(--border);
}
.cd-player-img img { width: 100%; height: 100%; object-fit: cover; }
.cd-player-name { font-family: var(--font-accent); font-weight: 700; font-size: .92rem; color: #fff; margin-bottom: 3px; line-height: 1.2; }
.cd-player-nat { font-size: .72rem; color: var(--muted); margin-bottom: 10px; }
.cd-player-stats {
  display: flex; justify-content: center; gap: 14px;
  font-family: var(--font-accent); font-size: .78rem; color: var(--muted);
  padding-top: 10px; border-top: 1px solid var(--border);
}
.cd-player-stats i { color: var(--gold); font-size: .7rem; margin-right: 3px; }

/* Matches */
.cd-matches { display: flex; flex-direction: column; gap: 12px; }
.cd-match {
  display: flex; align-items: center; gap: 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 14px 18px; transition: all .22s var(--ease);
}
.cd-match:hover { border-color: rgba(244,169,31,.25); }
.cd-match-comp { font-family: var(--font-accent); font-size: .72rem; font-weight: 600; color: var(--gold); letter-spacing: .06em; width: 120px; flex-shrink: 0; }
.cd-match-main { flex: 1; display: flex; align-items: center; justify-content: center; gap: 16px; }
.cd-match-club { font-family: var(--font-accent); font-weight: 700; font-size: .95rem; color: #fff; }
.cd-match-opp { font-family: var(--font-accent); font-weight: 600; font-size: .92rem; color: var(--text); display: flex; align-items: center; gap: 8px; }
.cd-match-opp img { width: 24px; height: 24px; object-fit: contain; }
.cd-match-score { font-family: var(--font-head); font-size: 1.5rem; letter-spacing: 2px; color: var(--gold); min-width: 70px; text-align: center; }
.cd-match-vs { font-family: var(--font-accent); color: var(--muted); font-weight: 700; }
.cd-match-date { font-size: .74rem; color: var(--muted); width: 90px; text-align: right; flex-shrink: 0; }
.cd-match-result-tag { font-family: var(--font-accent); font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 50px; }
.cd-match-result-tag.W { background: rgba(6,214,160,.15); color: var(--green); }
.cd-match-result-tag.L { background: rgba(230,57,70,.15); color: var(--red); }
.cd-match-result-tag.D { background: rgba(255,255,255,.08); color: #94a3b8; }

@media(max-width: 640px) {
  .cd-match { flex-wrap: wrap; gap: 8px; }
  .cd-match-comp { width: 100%; }
  .cd-match-date { width: 100%; text-align: left; }
  .cd-squad-grid { grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); }
  .cd-tab { padding: 10px 14px; font-size: .85rem; }
}

/* Light theme */
html.theme-light .cd-player,
html.theme-light .cd-match { background: #fff; border-color: rgba(13,36,68,.1); }
html.theme-light .cd-pos-title,
html.theme-light .cd-player-name,
html.theme-light .cd-match-club { color: #060d1c !important; }
html.theme-light .cd-match-comp { color: var(--gold-dark) !important; }
html.theme-light .cd-tab:hover { color: #060d1c; }

/* ── Dropdown Submenu ─────────────────────────────────── */
.has-submenu { position: relative; }
.has-submenu > a { display: flex; align-items: center; gap: 6px; }
.submenu-arrow { font-size: .6rem !important; transition: transform .25s var(--ease); opacity: .7; }
.has-submenu:hover .submenu-arrow,
.has-submenu.open .submenu-arrow { transform: rotate(180deg); }

.submenu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 210px;
  background: #ffffff;
  border: 1px solid rgba(13,36,68,.13);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 40px rgba(13,36,68,.18);
  padding: 8px 0;
  z-index: 999;
  animation: submenuIn .18s var(--ease);
}
@keyframes submenuIn {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}
.submenu li { list-style: none; }
.submenu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  font-size: .86rem;
  color: #1e2a3d;
  text-decoration: none;
  transition: all .18s;
  border-left: 2px solid transparent !important;
  font-family: var(--font-accent);
  font-weight: 600;
}
.submenu li a i { width: 16px; color: #94a3b8; font-size: .78rem; }
.submenu li a:hover,
.submenu li a.active {
  background: rgba(230,57,70,.07) !important;
  border-left-color: var(--red) !important;
  color: #d62839 !important;
}
.submenu li a:hover i,
.submenu li a.active i { color: var(--red) !important; }
.submenu-divider { height: 1px; background: var(--border); margin: 4px 12px; pointer-events: none; }

.has-submenu:hover .submenu { display: block; }

/* Mobile submenu */
@media(max-width: 1024px) {
  .submenu {
    position: static;
    display: none;
    box-shadow: none;
    border: none;
    border-left: 2px solid rgba(244,169,31,.2);
    border-radius: 0;
    margin: 4px 0 4px 24px;
    padding: 4px 0;
    background: transparent;
    animation: none;
  }
  .has-submenu.open .submenu { display: block; }
  .has-submenu:hover .submenu { display: none; }
  .has-submenu.open .submenu { display: block; }
  .has-submenu > a { cursor: pointer; }
}

/* Cricket bat icon fallback */
.fa-cricket-bat-ball::before { content: "🏏"; font-style: normal; }

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — COMPREHENSIVE TEXT & ELEMENT VISIBILITY FIX
   ═══════════════════════════════════════════════════════════ */

/* ── Core text colours ── */
html.theme-light body,
html.theme-light p,
html.theme-light span,
html.theme-light div,
html.theme-light li,
html.theme-light td,
html.theme-light th,
html.theme-light label { color: #1e2a3d; }

html.theme-light h1,
html.theme-light h2,
html.theme-light h3,
html.theme-light h4,
html.theme-light h5,
html.theme-light h6 { color: #0a1428; }

html.theme-light a { color: #1a3c6e; }
html.theme-light a:hover { color: #d62839; }

/* ── Page hero ── */
html.theme-light .page-hero { background: linear-gradient(135deg, #1a3c6e 0%, #0d1e3d 100%); }
html.theme-light .page-hero h1,
html.theme-light .page-hero p,
html.theme-light .page-hero .breadcrumb,
html.theme-light .page-hero .breadcrumb a,
html.theme-light .page-hero .breadcrumb span { color: #fff !important; }
html.theme-light .page-hero .breadcrumb i { color: rgba(255,255,255,.6); }

/* ── Navbar links & submenu — light stays default (white bg already set above) ── */
/* Dark mode submenu */
html:not(.theme-light) .submenu {
  background: rgba(5,12,30,.97);
  border-color: rgba(244,169,31,.18);
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
  backdrop-filter: blur(12px);
}
html:not(.theme-light) .submenu li a { color: #cdd8e8 !important; }
html:not(.theme-light) .submenu li a:hover,
html:not(.theme-light) .submenu li a.active {
  background: rgba(244,169,31,.08) !important;
  border-left-color: var(--gold) !important;
  color: #fff !important;
}
html:not(.theme-light) .submenu li a:hover i,
html:not(.theme-light) .submenu li a.active i { color: var(--gold) !important; }
html:not(.theme-light) .submenu-divider { background: rgba(255,255,255,.08); }

/* ── Cards — all varieties ── */
html.theme-light .card,
html.theme-light .cric-card,
html.theme-light .icc-team-card,
html.theme-light .icc-match-card,
html.theme-light .cric-team-card,
html.theme-light .cric-match-card-full,
html.theme-light .cric-upcoming-card,
html.theme-light .cric-mini-match,
html.theme-light .cric-player-row,
html.theme-light .club-card,
html.theme-light .squad-player,
html.theme-light .cric-std-row,
html.theme-light .icc-rankings-header { background: #fff; border-color: rgba(13,36,68,.1); }

html.theme-light .cric-banner { background: #fff; border-color: rgba(13,36,68,.1); }
html.theme-light .cric-subnav-link { background: #f4f6fb; border-color: rgba(13,36,68,.1); color: #5a6a82; }
html.theme-light .cric-subnav-link:hover { color: #0a1428; }
html.theme-light .cric-subnav-link.active { background: rgba(244,169,31,.1); border-color: var(--gold); color: #b8860b; }

/* ── Cricket tabs ── */
html.theme-light .cric-tab { background: #fff; border-color: rgba(13,36,68,.12); color: #1e2a3d; }
html.theme-light .icc-tab  { background: #fff; border-color: rgba(13,36,68,.12); color: #1e2a3d; }
html.theme-light .cric-filter-btn { background: #fff; border-color: rgba(13,36,68,.12); color: #1e2a3d; }

/* ── Text inside cards ── */
html.theme-light .cst-tname,
html.theme-light .cpr-name,
html.theme-light .itc-name,
html.theme-light .cuc-team,
html.theme-light .cmf-tname,
html.theme-light .imc-tname,
html.theme-light .club-name,
html.theme-light .squad-name,
html.theme-light .ctc-name { color: #0a1428 !important; }

html.theme-light .cpr-meta,
html.theme-light .cuc-meta span,
html.theme-light .cmf-venue,
html.theme-light .imc-venue,
html.theme-light .itc-short,
html.theme-light .club-coach,
html.theme-light .club-stadium,
html.theme-light .club-meta-row span,
html.theme-light .squad-role,
html.theme-light .squad-stats span,
html.theme-light .cric-banner-item,
html.theme-light .cric-see-all,
html.theme-light .news-date,
html.theme-light .news-views,
html.theme-light .news-excerpt { color: #5a6a82 !important; }

html.theme-light .cric-bstat small,
html.theme-light .cric-bstat strong,
html.theme-light .cpr-stat small { color: #1e2a3d; }

html.theme-light .cric-day-label { color: #b8860b; border-color: rgba(13,36,68,.1); }

/* ── Standings table ── */
html.theme-light .cric-std-head { color: #5a6a82; border-color: rgba(13,36,68,.08); }
html.theme-light .cric-standings-table { background: #fff; }
html.theme-light .cric-std-row { border-color: rgba(13,36,68,.06); }
html.theme-light .cric-std-row:hover { background: rgba(13,36,68,.03); }
html.theme-light .cst-rank { color: #94a3b8; }

/* ── Club cards ── */
html.theme-light .club-card-top { background: rgba(13,36,68,.02); border-color: rgba(13,36,68,.08); }
html.theme-light .club-league { color: #b8860b; }
html.theme-light .club-trophies { color: #b8860b; }
html.theme-light .club-desc { color: #5a6a82; }

/* ── News cards ── */
html.theme-light .news-card { background: #fff; border-color: rgba(13,36,68,.1); }
html.theme-light .news-title { color: #0a1428 !important; }
html.theme-light .news-body  { background: #fff; }
html.theme-light .news-badge-cat { background: rgba(13,36,68,.7); }
html.theme-light .filter-btn { background: #fff; border-color: rgba(13,36,68,.12); color: #5a6a82; }
html.theme-light .filter-btn.active,
html.theme-light .filter-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ── ICC ── */
html.theme-light .icc-squad-panel { background: rgba(13,36,68,.03); border-color: rgba(13,36,68,.08); }
html.theme-light .squad-player { background: #f4f6fb; border-color: rgba(13,36,68,.08); }
html.theme-light .itc-meta span { color: #5a6a82; }
html.theme-light .imc-series { color: #5a6a82; }

/* ── Section titles ── */
html.theme-light .section-title { color: #0a1428 !important; }
html.theme-light .section-subtitle { color: #5a6a82 !important; }

/* ── Empty state ── */
html.theme-light .empty-state { color: #5a6a82; }
html.theme-light .empty-state i { color: #94a3b8; }

/* ── Breadcrumb ── */
html.theme-light .breadcrumb a,
html.theme-light .breadcrumb span { color: rgba(255,255,255,.8) !important; }

/* ── Mobile submenu ── */
@media(max-width:1024px) {
}

/* ══ LIGHT MODE — CRITICAL VISIBILITY FIXES ══════════════════════════ */

/* News cards — clear shadow so cards stand out on light bg */
html.theme-light .news-card {
  background: #fff !important;
  border-color: rgba(13,36,68,.12) !important;
  box-shadow: 0 2px 16px rgba(13,36,68,.08) !important;
}
html.theme-light .news-card:hover {
  box-shadow: 0 12px 40px rgba(13,36,68,.16) !important;
  border-color: rgba(244,169,31,.35) !important;
}
html.theme-light .news-title  { color: #0a1428 !important; }
html.theme-light .news-excerpt { color: #4a5a72 !important; }
html.theme-light .news-meta    { color: #5a6a82 !important; border-color: rgba(13,36,68,.1) !important; }
html.theme-light .news-category { color: #b8860b !important; }
html.theme-light .news-body { background: #fff !important; }
html.theme-light #news .section-tag { color: #b8860b !important; }

/* HOF hero stats — force white text on dark hero bg */
html.theme-light .hof-hero { background: #0a1428 !important; }
html.theme-light .hof-hero-bg { opacity: 1 !important; }
html.theme-light .hof-hero-badge { color: #f4a91f !important; border-color: rgba(244,169,31,.4) !important; }
html.theme-light .hof-hero-title { color: #ffffff !important; }
html.theme-light .hof-hero-sub   { color: rgba(205,216,232,.85) !important; }
html.theme-light .hof-hero-stats {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
}
html.theme-light .hof-hs span  { color: #f4a91f !important; }
html.theme-light .hof-hs small { color: rgba(220,230,245,.75) !important; }
html.theme-light .hof-hs-div   { background: rgba(255,255,255,.2) !important; }