/* =====================
   FifaStream 2026 — FIFA Official Navy & Gold
   Deep Navy · Gold · White
   ===================== */

:root {
  /* FIFA Navy */
  --navy:    #0D1B2A;
  --navy-2:  #1A2E45;
  --navy-3:  #243B55;
  --navy-4:  #162337;
  --navy-5:  #08111A;

  /* FIFA Gold */
  --gold:       #FFD700;
  --gold-dark:  #C9A800;
  --gold-dim:   rgba(255, 215, 0, 0.09);
  --gold-subtle: rgba(255, 215, 0, 0.05);

  /* Backward-compat sky → gold */
  --sky:       #FFD700;
  --sky-dark:  #FFD700;
  --sky-deep:  #C9A800;
  --sky-pale:  rgba(255, 215, 0, 0.09);
  --sky-light: rgba(255, 215, 0, 0.06);
  --sky-mid:   rgba(255, 215, 0, 0.35);

  /* Backward-compat cream → navy */
  --cream:   #0D1B2A;
  --cream-2: #162337;

  /* Card surface */
  --white: #1A2E45;

  /* Text — white on dark bg */
  --dark:        #FFFFFF;
  --dark-2:      rgba(255, 255, 255, 0.9);
  --dark-3:      rgba(255, 255, 255, 0.78);
  --muted:       rgba(255, 255, 255, 0.62);
  --muted-light: rgba(255, 255, 255, 0.38);

  /* Borders — gold tinted */
  --border:      rgba(255, 215, 0, 0.18);
  --border-sky:  rgba(255, 215, 0, 0.32);

  /* Functional */
  --red:       #EF4444;
  --red-light: rgba(239, 68, 68, 0.12);
  --green-acc: #22C55E;

  /* Aliases */
  --green:       #FFD700;
  --green-dim:   #C9A800;
  --cyan:        #FFD700;
  --bg:          #0D1B2A;
  --bg2:         #162337;
  --bg3:         #1A2E45;
  --text:        #FFFFFF;
  --text-muted:  rgba(255, 255, 255, 0.62);
  --text-dim:    rgba(255, 255, 255, 0.38);
  --card:        #1A2E45;
  --card-border: rgba(255, 215, 0, 0.18);
  --accent:      #FFD700;

  /* Shadows — deeper on dark bg */
  --shadow-sm:   0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-md:   0 8px 32px rgba(0, 0, 0, 0.55);
  --shadow-lg:   0 20px 60px rgba(0, 0, 0, 0.65);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);

  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Barlow', sans-serif;

  /* Radius */
  --r:    16px;
  --r-sm: 10px;
}

/* ── Global ────────────────────────────────────── */
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }
img, iframe, video { max-width: 100%; height: auto; }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--dark);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--cream-2); }
::-webkit-scrollbar-thumb { background: var(--sky-dark); border-radius: 3px; }

a { color: var(--sky-dark); text-decoration: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Keyframes ─────────────────────────────────── */
@keyframes fadeUp    { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn    { from { opacity:0; } to { opacity:1; } }
@keyframes spin      { to { transform:rotate(360deg); } }
@keyframes float     { 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-16px) scale(1.02);} }
@keyframes gradMove  { 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
@keyframes shimmer   { 0%{background-position:-200% center;} 100%{background-position:200% center;} }
@keyframes ticker    { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes pulseDot  { 0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,0.6); } 50%{ box-shadow:0 0 0 8px rgba(239,68,68,0); } }
@keyframes pulseSky  { 0%,100%{ box-shadow:0 0 0 0 rgba(255,215,0,0.5); } 50%{ box-shadow:0 0 0 8px rgba(255,215,0,0); } }
@keyframes glowBorder{ 0%,100%{ box-shadow: 0 0 25px rgba(255,215,0,0.15), var(--shadow-card); } 50%{ box-shadow: 0 0 55px rgba(255,215,0,0.4), var(--shadow-md); } }
@keyframes revealBar { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes slideRight{ from { opacity:0; transform:translateX(-20px); } to { opacity:1; transform:translateX(0); } }
@keyframes waveRise  { 0%{transform:scaleY(0.4);opacity:0.3;} 50%{transform:scaleY(1);opacity:1;} 100%{transform:scaleY(0.4);opacity:0.3;} }

/* Intro animations */
@keyframes introBall    { 0%{transform:scale(0) rotate(-40deg);opacity:0;} 65%{transform:scale(1.3) rotate(10deg);} 85%{transform:scale(0.95) rotate(-3deg);} 100%{transform:scale(1) rotate(0deg);opacity:1;} }
@keyframes introSlide   { from{transform:translateY(28px);opacity:0;} to{transform:translateY(0);opacity:1;} }
@keyframes progressBar  { from{width:0;} to{width:100%;} }
@keyframes introFadeOut { from{opacity:1;} to{opacity:0;} }
@keyframes introRingExpand { 0%{transform:scale(0.6);opacity:0.7;} 100%{transform:scale(1.8);opacity:0;} }
@keyframes introBounce  { 0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-12px) rotate(8deg);} }
@keyframes introGlowPulse { 0%,100%{opacity:0.5;transform:scale(1);} 50%{opacity:1;transform:scale(1.15);} }
@keyframes introShimmer { 0%{background-position:-200% center;} 100%{background-position:200% center;} }
@keyframes introFlagIn  { from{opacity:0;transform:translateY(14px) scale(0.7);} to{opacity:1;transform:translateY(0) scale(1);} }
@keyframes introParticle{ 0%{opacity:0;transform:translate(0,0) scale(0);} 30%{opacity:1;} 100%{opacity:0;transform:translate(var(--px),var(--py)) scale(1.2);} }
@keyframes introTagSlide{ from{opacity:0;transform:translateX(-20px);} to{opacity:1;transform:translateX(0);} }

/* ── INTRO OVERLAY ─────────────────────────────── */
#intro-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(ellipse 80% 80% at 50% 40%, #162337 0%, #0D1B2A 55%, #08111A 100%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; overflow: hidden;
  transition: opacity 0.9s ease;
}
#intro-overlay.fade-out { opacity: 0; pointer-events: none; }

/* Expanding rings */
.intro-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(255, 215, 0, 0.22);
  animation: introRingExpand 3s ease-out infinite;
}
.intro-ring-1 { width: 220px; height: 220px; animation-delay: 0s; }
.intro-ring-2 { width: 220px; height: 220px; animation-delay: 1s; }
.intro-ring-3 { width: 220px; height: 220px; animation-delay: 2s; }

/* Static atmosphere rings */
.intro-ring::before {
  content: ''; position: absolute; inset: -60px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06);
}
.intro-ring::after {
  content: ''; position: absolute; inset: -120px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.04);
}

/* Glow orb behind content */
.intro-overlay-glow {
  position: absolute; width: 300px; height: 300px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,215,0,0.14) 0%, transparent 70%);
  animation: introGlowPulse 2.5s ease-in-out infinite;
}

.intro-content {
  position: relative; z-index: 1;
  text-align: center; padding: 0 2rem;
  display: flex; flex-direction: column; align-items: center;
  max-height: 100dvh; overflow: hidden;
}

/* Ball with glow */
.intro-ball-wrap {
  position: relative; display: inline-block; margin-bottom: 1rem;
}
.intro-ball-glow {
  position: absolute; inset: -22px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,0.35) 0%, transparent 70%);
  animation: introGlowPulse 2s ease-in-out infinite;
}
.intro-ball {
  font-size: 4.5rem; line-height: 1; display: block; position: relative;
  animation: introBall 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             introBounce 3s ease-in-out 1.2s infinite;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3));
}

/* Tournament tag */
.intro-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,215,0,0.12); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,215,0,0.4);
  color: #FFD700; font-size: 0.68rem; font-weight: 700;
  padding: 5px 16px; border-radius: 50px;
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 1rem;
  animation: introTagSlide 0.7s ease 0.2s both;
}
.intro-tag-dot { width: 6px; height: 6px; background: #FFD700; border-radius: 50%; animation: introGlowPulse 1.5s infinite; }

.intro-logo {
  font-family: var(--font-display);
  font-size: 3rem; line-height: 1; letter-spacing: 5px;
  background: linear-gradient(135deg, #FFD700 0%, #FFF8DC 40%, #FFD700 60%, #C9A800 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: introSlide 0.7s ease 0.35s both, introShimmer 3s linear 1.2s infinite;
  text-shadow: none;
  filter: drop-shadow(0 0 18px rgba(255,215,0,0.5));
}
.intro-sub {
  color: rgba(255, 215, 0, 0.82); font-size: 0.8rem;
  letter-spacing: 4px; text-transform: uppercase;
  margin-top: 0.6rem; font-weight: 700;
  animation: introSlide 0.7s ease 0.55s both;
}

/* Flags row */
.intro-flags {
  display: flex; gap: 0.9rem; margin-top: 1.4rem; align-items: center;
  animation: introSlide 0.7s ease 0.7s both;
}
.intro-flag {
  width: 48px; height: 36px; border-radius: 5px; object-fit: cover; display: block;
  animation: introFlagIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}
.intro-flag:nth-child(1){animation-delay:.75s;}
.intro-flag:nth-child(2){animation-delay:.88s;}
.intro-flag:nth-child(3){animation-delay:1.01s;}

.intro-bar-wrap {
  width: 220px; height: 3px;
  background: rgba(255,215,0,0.18); border-radius: 2px;
  margin: 1.6rem auto 0; overflow: hidden;
  animation: introSlide 0.7s ease 0.85s both;
}
.intro-bar {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,215,0,0.5), #FFD700, rgba(255,215,0,0.5));
  background-size: 200% auto;
  animation: progressBar 2.8s linear 0.7s both, introShimmer 1.5s linear 0.7s infinite;
  box-shadow: 0 0 8px rgba(255,215,0,0.6);
}
.intro-loading-text {
  color: rgba(255, 215, 0, 0.6); font-size: 0.68rem;
  letter-spacing: 2px; text-transform: uppercase;
  margin-top: 0.6rem; font-weight: 600;
  animation: introSlide 0.7s ease 0.9s both;
}

/* ── HEADER ────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(13, 27, 42, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
.header-inner {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.5rem; gap: 1rem;
}
.logo {
  font-family: var(--font-display);
  font-size: 1.85rem; letter-spacing: 2px;
  color: var(--dark); cursor: pointer; user-select: none;
}
.logo span { color: var(--sky-dark); }

.nav { display: flex; gap: 0.2rem; align-items: center; }
.nav a {
  color: var(--muted); font-weight: 600;
  font-size: 0.82rem; text-transform: uppercase;
  letter-spacing: 1px; padding: 0.45rem 1rem;
  border-radius: 8px; transition: all 0.22s;
  position: relative;
}
.nav a::after {
  content:''; position:absolute;
  bottom:2px; left:50%; right:50%;
  height:2px; background: var(--sky-dark);
  border-radius:1px; transition:all 0.22s;
}
.nav a:hover, .nav a.active {
  color: var(--sky-dark);
  background: var(--sky-pale);
  text-decoration: none;
}
.nav a:hover::after, .nav a.active::after { left:1rem; right:1rem; }

.live-badge {
  background: var(--red); color:#fff;
  font-size: 0.7rem; font-weight: 700;
  padding: 5px 14px; border-radius: 20px;
  animation: pulseDot 1.8s infinite;
  letter-spacing: 1px; white-space: nowrap;
}

/* ── Watch Live nav button ─────────────────────── */
.nav-watch-live {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #0D1B2A; font-size: 0.78rem; font-weight: 800;
  padding: 0.45rem 1.1rem; border-radius: 20px;
  text-decoration: none; letter-spacing: 0.5px;
  white-space: nowrap; transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 12px rgba(255,215,0,0.35);
  animation: pulseDot 1.8s infinite;
}
.nav-watch-live:hover {
  transform: scale(1.05);
  box-shadow: 0 0 22px rgba(255,215,0,0.6);
  text-decoration: none; color: #0D1B2A;
}

/* ── TICKER ────────────────────────────────────── */
.ticker-bar {
  background: var(--sky-light);
  border-bottom: 1px solid var(--border-sky);
  padding: 7px 0; overflow: hidden;
}
.ticker-track {
  display: flex; width: max-content;
  animation: ticker 30s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  white-space: nowrap; padding: 0 3rem;
  font-size: 0.8rem; font-weight: 500; color: var(--dark-2);
}
.ticker-item strong { color: var(--sky-deep); font-weight: 800; }
.ticker-sep { color: var(--muted-light); padding: 0 0.5rem; }

/* ── HERO ──────────────────────────────────────── */
.hero {
  position: relative; min-height: 90vh;
  display: flex; align-items: center;
  overflow: hidden;
  background: linear-gradient(150deg, #0D1B2A 0%, #162337 60%, #1A2E45 100%);
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 65% at 10% 40%, rgba(255,215,0,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 45% 45% at 90% 60%, rgba(255,215,0,0.05) 0%, transparent 60%);
}
.hero::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,215,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,215,0,0.04) 1px, transparent 1px);
  background-size: 55px 55px;
  pointer-events: none;
}

.hero-orb {
  position:absolute; border-radius:50%;
  filter:blur(90px); pointer-events:none;
  animation: float 12s ease-in-out infinite;
}
.hero-orb-1 { width:520px;height:520px; background:radial-gradient(circle,rgba(255,215,0,0.12),transparent); top:-150px;left:-200px; }
.hero-orb-2 { width:360px;height:360px; background:radial-gradient(circle,rgba(255,215,0,0.08),transparent); top:15%;right:-80px; animation-delay:-5s; }
.hero-orb-3 { width:280px;height:280px; background:radial-gradient(circle,rgba(201,168,0,0.1),transparent); bottom:5%;left:38%; animation-delay:-9s; }

.hero-content {
  position:relative; z-index:1;
  width:100%; padding:5rem 0 4rem;
}
.hero-inner {
  display:grid; grid-template-columns:1fr 420px;
  gap:4rem; align-items:center;
}
@media(max-width:1000px){ .hero-inner{grid-template-columns:1fr;} .hero-card-wrap{display:none;} }

.hero-left { animation: fadeUp 0.8s ease; }

.hero-tag {
  display:inline-flex; align-items:center; gap:8px;
  background: var(--sky-pale);
  border: 1px solid var(--border-sky);
  color: var(--sky-deep); font-size:0.75rem; font-weight:700;
  padding:6px 16px; border-radius:50px; margin-bottom:1.6rem;
  letter-spacing:1.5px; text-transform:uppercase;
  animation: fadeUp 0.8s ease 0.1s both;
  box-shadow: var(--shadow-sm);
}
.hero-tag .live-dot {
  width:7px;height:7px; background:var(--red); border-radius:50%;
  animation: pulseDot 1.5s infinite;
}

.hero h1 {
  font-family:var(--font-display);
  font-size: clamp(3.2rem, 7.5vw, 6.5rem);
  line-height:0.93; letter-spacing:3px;
  color: var(--dark);
  margin-bottom:1.2rem;
  animation: fadeUp 0.8s ease 0.2s both;
}
.grad-text {
  background: linear-gradient(135deg, var(--sky-dark) 0%, var(--sky) 50%, var(--sky-deep) 100%);
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  animation: shimmer 4s linear infinite;
}

.hero-sub {
  color: var(--dark-3); font-size:1.08rem; font-weight: 500;
  margin-bottom:2.5rem; max-width:480px; line-height: 1.7;
  animation: fadeUp 0.8s ease 0.3s both;
}
.hero-sub strong { color: var(--dark); font-weight: 800; }

.hero-actions {
  display:flex; gap:1rem; flex-wrap:wrap;
  animation: fadeUp 0.8s ease 0.4s both;
}
.btn-watch {
  display:inline-flex; align-items:center; gap:10px;
  background: linear-gradient(135deg, #C9A800, #FFD700, #C9A800);
  background-size: 200% auto;
  color:#0D1B2A; font-weight:800; font-size:0.92rem;
  padding:0.95rem 2.4rem; border-radius:50px;
  text-decoration:none; transition:all 0.3s;
  letter-spacing:0.5px; text-transform:uppercase;
  box-shadow: 0 6px 24px rgba(255,215,0,0.35);
  animation: shimmer 3s linear infinite;
}
.btn-watch:hover { transform:translateY(-3px); box-shadow: 0 12px 40px rgba(255,215,0,0.5); text-decoration:none; color:#0D1B2A; }

.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color: #FFD700;
  font-weight:700; font-size:0.88rem;
  padding:0.93rem 2rem; border-radius:50px;
  border: 2px solid rgba(255,215,0,0.7);
  text-decoration:none; transition:all 0.3s;
  letter-spacing:0.5px; text-transform:uppercase;
}
.btn-outline:hover { background: #FFD700; color:#0D1B2A; text-decoration:none; transform:translateY(-2px); box-shadow: 0 8px 24px rgba(255,215,0,0.35); }

.hero-stats {
  display:flex; gap:2.5rem; margin-top:3rem;
  padding-top:2rem; border-top:1px solid var(--border);
  animation: fadeUp 0.8s ease 0.5s both; flex-wrap:wrap;
}
.hero-stat .num {
  font-family:var(--font-display); font-size:2.2rem;
  color: var(--sky-dark); line-height:1;
}
.hero-stat .lbl { font-size:0.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-top:2px; }

/* Hero floating card */
.hero-card-wrap { position:relative; animation: fadeUp 0.9s ease 0.3s both; }
.hero-match-card {
  background: var(--white);
  border: 1px solid var(--border-sky);
  border-radius: 20px; padding: 2rem 1.8rem;
  box-shadow: var(--shadow-md);
  animation: glowBorder 4s ease-in-out infinite;
  position:relative; overflow:hidden;
}
.hero-match-card::after {
  content:''; position:absolute; top:0;left:0;right:0; height:3px;
  background:linear-gradient(90deg, var(--sky-dark), var(--sky), var(--sky-dark));
  background-size: 200% auto;
  animation: shimmer 3s linear infinite;
}
.hmc-badge {
  display:inline-flex; align-items:center; gap:6px;
  background: var(--sky-pale);
  border: 1px solid var(--border-sky);
  color: var(--sky-deep); font-size:0.7rem; font-weight:700;
  padding:5px 14px; border-radius:20px; margin-bottom:1.5rem;
  letter-spacing:1.5px; text-transform:uppercase;
}
.hmc-badge .dot { width:6px;height:6px; background:var(--red); border-radius:50%; animation:pulseDot 1.5s infinite; }
.hmc-teams {
  display:flex; align-items:center;
  justify-content:space-between; gap:1rem; margin-bottom:1.5rem;
}
.hmc-team { text-align:center; }
.hmc-flag { font-size:3rem; line-height:1; display:block; margin-bottom:8px; }
.hmc-name { font-weight:700; font-size:0.9rem; color: var(--dark); letter-spacing:0.5px; }
.hmc-vs { font-family:var(--font-display); font-size:2rem; color:var(--muted-light); text-align:center; }
.hmc-info {
  text-align:center; color:var(--muted); font-size:0.82rem;
  margin-bottom:1.5rem; padding:0.6rem;
  background: var(--sky-pale); border-radius:8px;
}
.hmc-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg, #C9A800, #FFD700);
  color:#0D1B2A; font-weight:800; font-size:0.88rem;
  padding:0.85rem; border-radius:12px;
  text-decoration:none; transition:all 0.3s;
  text-transform:uppercase; letter-spacing:0.5px;
  box-shadow: 0 4px 18px rgba(255,215,0,0.35);
}
.hmc-btn:hover { transform:translateY(-2px); box-shadow: 0 8px 28px rgba(255,215,0,0.5); text-decoration:none; color:#0D1B2A; }

/* ── SECTIONS ──────────────────────────────────── */
.section { padding: 4.5rem 0; }
.section-alt { background: var(--sky-pale); }

.sec-head {
  display:flex; align-items:center; gap:1.2rem; margin-bottom:2.5rem;
}
.sec-title {
  font-family:var(--font-display);
  font-size:2rem; letter-spacing:2px; white-space:nowrap; color: var(--dark);
}
.sec-title span { color: var(--sky-dark); }
.sec-line {
  flex:1; height:2px;
  background:linear-gradient(90deg, var(--border-sky), transparent);
  animation: revealBar 1s ease both;
}

/* ── MATCH CARDS ───────────────────────────────── */
.matches-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.5rem;
}
.match-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r); padding:1.8rem;
  position:relative; transition:all 0.3s;
  box-shadow: var(--shadow-card);
  overflow:hidden;
  animation: fadeUp 0.6s ease both;
}
.match-card:nth-child(2) { animation-delay:0.1s; }
.match-card:nth-child(3) { animation-delay:0.2s; }

.match-card::before {
  content:''; position:absolute; top:0;left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--sky-dark), var(--sky));
  transform:scaleX(0); transform-origin:left; transition:transform 0.3s;
}
.match-card:hover {
  transform:translateY(-7px);
  border-color: var(--border-sky);
  box-shadow: var(--shadow-md);
}
.match-card:hover::before { transform:scaleX(1); }
.match-card.live { border-color: rgba(239,68,68,0.3); }
.match-card.live .card-glow-top {
  position:absolute; top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  background-size:200% auto; animation:shimmer 2.5s linear infinite;
}
.match-badge {
  position:absolute; top:1.2rem; right:1.2rem;
  background:var(--red); color:#fff;
  font-size:0.67rem; font-weight:700;
  padding:4px 10px; border-radius:20px;
  animation:pulseDot 2s infinite; letter-spacing:1px;
}
.match-badge-green {
  position: absolute; top: 1.2rem; right: 1.2rem;
  background: linear-gradient(135deg, #C9A800, #FFD700);
  color: #0D1B2A; font-size: 0.65rem; font-weight: 800;
  padding: 4px 10px; border-radius: 20px;
  letter-spacing: 1px; text-transform: uppercase;
}
.match-teams {
  display:flex; align-items:center;
  justify-content:space-between; margin-bottom:1.2rem;
}
.team { display:flex; flex-direction:column; align-items:center; gap:6px; }
.team .flag { font-size:2.6rem; line-height:1; }
.team .name { font-weight:700; font-size:0.88rem; color: var(--dark); letter-spacing:0.5px; }
.vs { display:flex; flex-direction:column; align-items:center; gap:5px; }
.vs-text { font-family:var(--font-display); font-size:1.9rem; color:var(--muted-light); line-height:1; }
.vs-dot { width:7px;height:7px; background:var(--sky-dark); border-radius:50%; box-shadow:0 0 10px rgba(255,215,0,0.5); }
.match-info {
  color:var(--dark-3); font-size:0.82rem; font-weight: 500;
  margin-bottom:1.2rem; text-align:center;
  padding:0.5rem 0.8rem; background: var(--sky-pale);
  border-radius:8px;
}
.btn-card {
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg, #C9A800, #FFD700);
  color:#0D1B2A; font-weight:800; font-size:0.85rem;
  padding:0.75rem; border-radius:10px;
  transition:all 0.3s; text-transform:uppercase; letter-spacing:0.5px;
  box-shadow: 0 4px 14px rgba(255,215,0,0.3);
}
.btn-card:hover { transform:translateY(-2px); box-shadow: 0 8px 28px rgba(255,215,0,0.45); text-decoration:none; color:#0D1B2A; }

.match-card.featured {
  border-color: var(--border-sky);
  box-shadow: 0 0 0 1px rgba(255,215,0,0.15), var(--shadow-md);
}

/* ── UPCOMING ──────────────────────────────────── */
.upcoming-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
  gap:1rem;
}
.upcoming-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-sm); padding:1.2rem 1.4rem;
  transition:all 0.3s; position:relative; overflow:hidden;
  box-shadow: var(--shadow-sm);
}
.upcoming-card::before {
  content:''; position:absolute;
  left:0;top:0;bottom:0; width:3px;
  background:linear-gradient(180deg, var(--sky-dark), var(--sky));
  transform:scaleY(0); transform-origin:bottom; transition:transform 0.3s;
}
.upcoming-card:hover { border-color: var(--border-sky); transform:translateX(5px); box-shadow: var(--shadow-md); }
.upcoming-card:hover::before { transform:scaleY(1); }
.upcoming-time { color: var(--sky-deep); font-size:0.78rem; font-weight:800; margin-bottom:6px; letter-spacing:0.5px; }
.upcoming-teams { font-weight:800; font-size:0.97rem; margin-bottom:5px; color: var(--dark); }
.upcoming-venue { color:var(--dark-3); font-size:0.8rem; font-weight: 500; margin-bottom:10px; }
.soon-badge {
  display:inline-block; background: var(--sky-pale);
  color: var(--sky-deep); border: 1px solid var(--border-sky);
  font-size:0.66rem; font-weight:700; padding:3px 10px;
  border-radius:20px; letter-spacing:1px; text-transform:uppercase;
}

/* ── HOW TO WATCH ──────────────────────────────── */
.steps-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.2rem;
}
.step-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-sm); padding:1.8rem;
  display:flex; align-items:center; gap:1.2rem;
  transition:all 0.3s;
  box-shadow: var(--shadow-sm);
}
.step-card:hover { border-color: var(--border-sky); transform:translateY(-4px); box-shadow: var(--shadow-md); }
.step-num {
  width:48px; height:48px; min-width:48px;
  border-radius:12px;
  background:linear-gradient(135deg, #C9A800, #FFD700);
  color:#0D1B2A; font-weight:800; font-size:1.4rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 18px rgba(255,215,0,0.35);
}
.step-text { color: var(--dark); font-size: 0.95rem; font-weight: 600; }
.step-text strong { color: var(--sky-deep); font-weight: 800; }

/* ── HOST NATIONS STRIP ────────────────────────── */
.hosts-strip {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0;
}
.hosts-inner {
  display: flex; align-items: center;
  justify-content: center; gap: 0; flex-wrap: wrap;
}
.host-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 0.8rem 3rem; text-align: center;
}
.host-flag { font-size: 2.4rem; line-height: 1; }
.host-name { font-weight: 700; font-size: 0.95rem; color: var(--dark); margin-top: 4px; }
.host-venues { font-size: 0.72rem; color: var(--sky-deep); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.host-divider { width: 1px; height: 60px; background: var(--border); }
@media(max-width:600px){ .host-divider{display:none;} .host-item{padding:0.6rem 1.5rem;} }

/* ── MATCH BAR ─────────────────────────────────── */
.match-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
  box-shadow: 0 2px 12px rgba(255,215,0,0.05);
}
.match-bar-inner {
  display:flex; align-items:center;
  justify-content:space-between;
  flex-wrap:wrap; gap:0.8rem;
}
.match-bar-teams {
  font-family:var(--font-display);
  font-size:1.5rem; letter-spacing:2px; color: var(--dark);
}
.match-bar-teams span { color:var(--muted-light); margin:0 0.8rem; }
.match-bar-info {
  color:var(--muted); font-size:0.84rem;
  display:flex; align-items:center; gap:0.6rem;
}
.mbi-dot { width:6px;height:6px; background:var(--red); border-radius:50%; animation:pulseDot 1.5s infinite; }

/* ── PLAYER ────────────────────────────────────── */
.player-section {
  display:grid;
  grid-template-columns:1fr 310px;
  gap:1.5rem; max-width:1200px;
  margin:0 auto; padding:1.5rem 1.5rem;
  align-items:start;
}
@media(max-width:960px){ .player-section{grid-template-columns:1fr;} }

.stream-tabs {
  display:flex; flex-wrap:wrap; gap:0.4rem;
  margin-bottom:1rem;
  background: var(--white);
  padding:0.5rem; border-radius:var(--r-sm);
  border:1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.tab-btn {
  background:transparent; color:var(--muted);
  border:none; padding:0.48rem 1.1rem;
  border-radius:6px; cursor:pointer;
  font-family:var(--font-body); font-size:0.82rem;
  font-weight:600; transition:all 0.22s; letter-spacing:0.3px;
}
.tab-btn:hover { background: var(--sky-pale); color: var(--sky-dark); }
.tab-btn.active {
  background:linear-gradient(135deg, #C9A800, #FFD700);
  color:#0D1B2A; font-weight:700;
  box-shadow: 0 3px 12px rgba(255,215,0,0.4);
}

.player-wrapper {
  position:relative; width:100%; aspect-ratio:16/9;
  background:#000; border-radius:var(--r); overflow:hidden;
  border:1px solid rgba(255,215,0,0.3);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(255,215,0,0.08);
}
.player-wrapper iframe { width:100%; height:100%; border:none; display:block; }

.player-loading {
  position:absolute; inset:0; background:#000;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:1rem; z-index:2;
}
.spinner {
  width:48px; height:48px;
  border:3px solid rgba(255,215,0,0.12);
  border-top-color: #FFD700;
  border-radius:50%;
  animation:spin 0.85s linear infinite;
  box-shadow: 0 0 24px rgba(255,215,0,0.35);
}
.player-loading p { color: var(--muted-light); font-size:0.87rem; }

.stream-tip {
  margin-top:1rem;
  background: var(--sky-pale);
  border:1px solid var(--border-sky);
  border-radius:var(--r-sm); padding:0.8rem 1.2rem;
  font-size:0.83rem; color:var(--muted);
}
.stream-tip strong { color: var(--sky-deep); }

/* ── SIDEBAR ───────────────────────────────────── */
.sidebar { display:flex; flex-direction:column; gap:1.2rem; }
.sidebar-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius:var(--r-sm); padding:1.2rem;
  box-shadow: var(--shadow-sm);
}
.sidebar-title {
  font-weight:700; font-size:0.78rem; margin-bottom:1rem;
  padding-bottom:0.7rem; border-bottom:1px solid var(--border);
  color: var(--muted); text-transform:uppercase; letter-spacing:1.2px;
}
.score-box { display:flex; flex-direction:column; gap:0.8rem; }
.score-team {
  display:flex; align-items:center; justify-content:space-between;
  font-size:0.9rem; padding:0.5rem 0.8rem;
  background: var(--sky-pale); border-radius:8px;
  color: var(--dark);
}
.score-num {
  font-family:var(--font-display); font-size:1.5rem;
  color: var(--sky-dark);
}
.score-status {
  text-align:center; color:var(--red);
  font-size:0.75rem; font-weight:700; margin-top:0.3rem;
  animation:pulseDot 2s infinite; letter-spacing:1px; text-transform:uppercase;
}
.other-match {
  display:flex; align-items:center; justify-content:space-between;
  padding:0.6rem 0; border-bottom:1px solid var(--border);
  font-size:0.84rem; color: var(--dark);
}
.other-match:last-child { border-bottom:none; }
.btn-small {
  background: rgba(255,215,0,0.18); color: #FFD700;
  border:1px solid rgba(255,215,0,0.45); padding:4px 12px;
  border-radius:20px; font-size:0.7rem; font-weight:700;
  cursor:pointer; transition:all 0.2s; text-decoration:none; letter-spacing:0.5px;
}
.btn-small:hover { background: var(--sky-dark); color:#fff; text-decoration:none; }
.share-btns { display:flex; gap:0.5rem; flex-wrap:wrap; }
.share-btn {
  flex:1; padding:0.6rem; border-radius:8px;
  border:none; cursor:pointer; font-family:var(--font-body);
  font-size:0.78rem; font-weight:700; transition:all 0.2s;
}
.share-btn:hover { transform:translateY(-2px); }
.share-btn.whatsapp { background:#25d366; color:#fff; }
.share-btn.copy { background: var(--sky-pale); color: var(--dark); border:1px solid var(--border); }
.share-note { color: var(--sky-dark); font-size:0.78rem; margin-top:0.5rem; }

/* ── PLAYER CONTAINER ──────────────────────────── */
.player-container { width: 100%; }

/* ── AD BANNER WRAP ────────────────────────────── */
.ad-banner-wrap { text-align: center; overflow: hidden; max-width: 100%; }

/* ── LIVE RING / DOT (shared across all player pages) ─ */
@keyframes liveRing   { 0%{transform:scale(1);opacity:.8;} 100%{transform:scale(2.4);opacity:0;} }
@keyframes slideUp    { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
@keyframes broadcastScan { 0%{top:-100%;} 100%{top:200%;} }
@keyframes rippleAnim { to{transform:scale(4);opacity:0;} }
@keyframes borderGlow { 0%,100%{box-shadow:0 0 20px rgba(255,215,0,0.2),0 0 0 1px rgba(255,215,0,0.1);} 50%{box-shadow:0 0 50px rgba(255,215,0,0.4),0 0 0 1px rgba(255,215,0,0.3);} }

.live-ring-wrap { position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px; }
.live-ring      { position:absolute;width:10px;height:10px;border-radius:50%;background:var(--red);opacity:0;animation:liveRing 1.6s ease-out infinite; }
.live-ring:nth-child(2) { animation-delay:.5s; }
.live-dot-core  { width:8px;height:8px;border-radius:50%;background:var(--red);position:relative;z-index:1;box-shadow:0 0 8px var(--red); }

/* ── BROADCAST BADGE ───────────────────────────── */
.broadcast-badge {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,215,0,0.08);
  border:1px solid rgba(255,215,0,0.28);
  border-radius:8px; padding:.55rem 1rem;
  margin-bottom:.8rem; animation:slideUp .4s ease both;
  flex-wrap: wrap;
}
.broadcast-badge span { color:#FFD700;font-weight:700;font-size:.8rem;letter-spacing:1.5px;text-transform:uppercase; }
.quality-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.68rem; font-weight:700;
  background:linear-gradient(135deg,var(--green),var(--cyan));
  color:#000; padding:2px 8px; border-radius:20px;
  letter-spacing:.5px; text-transform:uppercase; margin-left:.4rem;
}

/* ── PLAYER WRAPPER — shared animations ────────── */
.player-wrapper { animation:borderGlow 3s ease-in-out infinite, slideUp .5s ease .2s both; position:relative; }
.player-wrapper::after {
  content:''; position:absolute; left:0; right:0; height:3px;
  background:linear-gradient(90deg,transparent,rgba(255,215,0,0.5),transparent);
  animation:broadcastScan 5s linear infinite;
  pointer-events:none; z-index:3;
}

/* ── TAB RIPPLE ────────────────────────────────── */
.tab-btn .ripple {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.25);
  transform:scale(0); animation:rippleAnim .4s linear;
  pointer-events:none;
}

/* ── STREAM ERROR ──────────────────────────────── */
.stream-error {
  display:none; flex-direction:column;
  align-items:center; justify-content:center;
  gap:1rem; padding:3rem 1rem; text-align:center;
  position:absolute; inset:0; background:var(--bg); z-index:5;
}
.stream-error .err-icon { font-size:3rem; }
.stream-error p { color:var(--text-muted); font-size:.9rem; max-width:300px; }
.stream-error .btn-retry {
  display:inline-flex; align-items:center; gap:.5rem;
  background:linear-gradient(135deg,var(--green),var(--cyan));
  color:#000; font-weight:800; font-size:.85rem;
  padding:.6rem 1.4rem; border-radius:50px;
  border:none; cursor:pointer; transition:transform .2s;
}
.stream-error .btn-retry:hover { transform:scale(1.05); }

/* ── PKT TIME BADGE ────────────────────────────── */
.pkt-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(255,215,0,0.08);
  border:1px solid rgba(255,215,0,0.2);
  border-radius:6px; padding:.3rem .7rem;
  font-size:.75rem; color:var(--gold);
  font-weight:700; margin-top:.5rem;
}

/* ── MATCH CLOCK ───────────────────────────────── */
.match-clock {
  display:flex; align-items:center; gap:.5rem;
  margin-top:.5rem; padding:.4rem .7rem;
  background:rgba(255,215,0,.05); border-radius:6px; font-size:.78rem;
}
.clock-val { font-family:var(--font-display); font-size:1.1rem; color:var(--green); }

/* ── MATCH HERO ────────────────────────────────── */
.match-hero {
  background:linear-gradient(135deg,rgba(255,215,0,0.06),rgba(255,215,0,0.02));
  border-bottom:1px solid rgba(255,215,0,0.12);
  padding:1.2rem 0; animation:slideUp .5s ease both;
}
.match-hero-inner {
  display:flex; align-items:center;
  justify-content:center; gap:2rem;
  flex-wrap:wrap; text-align:center;
}
.mh-team { display:flex; flex-direction:column; align-items:center; gap:.3rem; }
.mh-flag { font-size:2.5rem; }
.mh-name { font-family:var(--font-display); font-size:1.4rem; letter-spacing:1px; }
.mh-vs   { font-family:var(--font-display); font-size:2rem; color:var(--gold); letter-spacing:3px; }
.mh-info { font-size:.8rem; color:var(--text-muted); margin-top:.4rem; }

/* ── STREAM TIP ────────────────────────────────── */
.stream-tip { animation:slideUp .5s ease .4s both; }

/* ── SIDEBAR STAGGER ───────────────────────────── */
.sidebar .sidebar-card:nth-child(1){ animation:slideRight .5s ease .2s both; }
.sidebar .sidebar-card:nth-child(2){ animation:slideRight .5s ease .3s both; }
.sidebar .sidebar-card:nth-child(3){ animation:slideRight .5s ease .4s both; }
.sidebar .sidebar-card:nth-child(4){ animation:slideRight .5s ease .5s both; }

/* ── NEXT MATCH INNER ──────────────────────────── */
.next-match-inner {
  border-left:3px solid var(--green);
  padding-left:.8rem;
  animation:slideRight .5s ease .55s both;
}

/* ── SCHEDULE ──────────────────────────────────── */
.schedule-table-wrap {
  overflow-x:auto; border-radius:var(--r);
  border:1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.schedule-table { width:100%; border-collapse:collapse; font-size:0.9rem; font-weight: 500; }
.schedule-table thead tr { background: var(--sky-pale); }
.schedule-table th {
  color: var(--sky-deep); font-size:0.73rem; text-transform:uppercase;
  letter-spacing:1px; padding:0.9rem 1.2rem; text-align:left;
  border-bottom:2px solid var(--border-sky);
}
.schedule-table td {
  padding:0.8rem 1.2rem; border-bottom:1px solid var(--border); color: var(--dark);
}
.schedule-table tr:last-child td { border-bottom:none; }
.schedule-table tbody tr { transition:background 0.2s; background: var(--white); }
.schedule-table tbody tr:hover td { background: var(--sky-pale); }

/* Schedule filter tabs */
.sched-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; }
.sched-tab {
  background: var(--white); border: 1px solid var(--border);
  color: var(--muted); padding: 0.45rem 1.1rem;
  border-radius: 6px; cursor: pointer;
  font-family: var(--font-body); font-size: 0.82rem;
  font-weight: 600; transition: all 0.22s;
  box-shadow: var(--shadow-sm);
}
.sched-tab:hover { border-color: var(--border-sky); color: var(--sky-dark); background: var(--sky-pale); }
.sched-tab.active {
  background: linear-gradient(135deg, #C9A800, #FFD700);
  color: #0D1B2A; border-color: transparent; font-weight: 700;
  box-shadow: 0 4px 14px rgba(255,215,0,0.4);
}

/* Group / KO tags */
.group-tag {
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
  background: var(--sky-pale); color: var(--sky-deep);
  border: 1px solid var(--border-sky); letter-spacing: 0.5px;
}
.ko-tag {
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
  background: rgba(245, 158, 11, 0.1); color: var(--gold);
  border: 1px solid rgba(245, 158, 11, 0.3); letter-spacing: 0.5px;
}

/* ── STANDINGS ─────────────────────────────────── */
.groups-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:1.2rem;
}
.group-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius:var(--r); padding:1.3rem;
  transition:all 0.3s; position:relative; overflow:hidden;
  box-shadow: var(--shadow-sm);
}
.group-card::before {
  content:''; position:absolute; top:0;left:0;right:0; height:3px;
  background:linear-gradient(90deg, var(--sky-dark), var(--sky));
  transform:scaleX(0); transform-origin:left; transition:transform 0.35s;
}
.group-card:hover::before { transform:scaleX(1); }
.group-card:hover { border-color: var(--border-sky); transform:translateY(-4px); box-shadow: var(--shadow-md); }
.group-title {
  font-family:var(--font-display); font-size:1.4rem;
  color: var(--sky-dark); margin-bottom:1rem;
  padding-bottom:0.5rem; border-bottom:1px solid var(--border);
  letter-spacing:2px;
}
.standings-table { width:100%; border-collapse:collapse; font-size:0.81rem; }
.standings-table th {
  color:var(--muted); text-align:center;
  padding:5px 8px; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.5px;
}
.standings-table th:first-child { text-align:left; color: var(--dark-2); }
.standings-table td { padding:6px 8px; text-align:center; border-bottom:1px solid var(--border); color: var(--dark); }
.standings-table td:first-child { text-align:left; font-weight:600; }
.standings-table tr:last-child td { border-bottom:none; }
.standings-table tbody tr { background: var(--white); transition: background 0.2s; }
.standings-table tbody tr:hover td { background: var(--sky-pale); }

/* ── FOOTER ────────────────────────────────────── */
.footer {
  background: #08111A;
  border-top: 1px solid rgba(255, 215, 0, 0.15);
  padding: 3rem 0; text-align:center;
}
.footer-inner { display:flex; flex-direction:column; align-items:center; gap:1rem; }
.footer .logo { font-size:2rem; margin-bottom:0.2rem; color: #fff; }
.footer .logo span { color: #FFD700; }
.footer p { color: rgba(255,255,255,0.45); font-size:0.83rem; max-width:480px; }
.disclaimer { font-size:0.73rem !important; opacity:0.4; }
.footer-divider {
  width:50px; height:2px; margin:0.3rem auto;
  background:linear-gradient(90deg, #C9A800, #FFD700);
  border-radius:1px;
}
.footer-links { display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center; }
.footer-links a { color:rgba(255,255,255,0.42); font-size:0.8rem; transition:color 0.2s; }
.footer-links a:hover { color: #FFD700; }

/* ── RESPONSIVE ────────────────────────────────── */

/* Global touch improvements */
button, a, .tab-btn, .sched-tab, .btn-card, .btn-watch, .btn-outline, .btn-small {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Fix hover color on btn-small (gold bg needs navy text) */
.btn-small:hover { background: #FFD700; color: #0D1B2A !important; text-decoration: none; }

/* ── Extra animations ── */
@keyframes goldPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,215,0,0.4), var(--shadow-lg), 0 0 40px rgba(255,215,0,0.08); }
  50%      { box-shadow: 0 0 0 8px rgba(255,215,0,0), var(--shadow-lg), 0 0 60px rgba(255,215,0,0.2); }
}
@keyframes shimmerBtn {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
@keyframes entranceUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scanLine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Player border gold pulse */
.player-wrapper { animation: goldPulse 3s ease-in-out infinite; }

/* Shimmer on watch buttons */
.btn-watch, .btn-card, .hmc-btn, .tab-btn.active {
  background-size: 200% auto;
}

/* Page sections animate in */
.section, .player-section { animation: entranceUp 0.6s ease both; }
.section:nth-child(2) { animation-delay: 0.1s; }
.section:nth-child(3) { animation-delay: 0.2s; }

@media (min-width: 1200px) {
  .hero h1 { font-size: 6.5rem; }
  .matches-grid { grid-template-columns: repeat(3, 1fr); }
  .upcoming-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1024px) {
  .hero h1 { font-size: 4rem; }
  .player-section { grid-template-columns: 1fr; }
  .matches-grid { grid-template-columns: repeat(2, 1fr); }
  .upcoming-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .groups-grid { grid-template-columns: repeat(2, 1fr); }
  .sidebar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  /* Tabs scroll at tablet too */
  .stream-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .stream-tabs::-webkit-scrollbar { display: none; }
  .tab-btn { flex-shrink: 0; white-space: nowrap; }
}

/* ─── MOBILE (≤ 768px) ─────────────────────────── */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; width: 100%; }

  /* ── Header — 2-row layout: logo+badge on top, full nav below ── */
  .header-inner {
    padding: 0.5rem 1rem 0.45rem;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "logo badge" "nav nav";
    gap: 0.35rem 0;
    align-items: center;
  }
  .logo { grid-area: logo; font-size: 1.45rem; letter-spacing: 1px; }
  .live-badge {
    grid-area: badge;
    font-size: 0.6rem; padding: 4px 10px;
    letter-spacing: 0.5px; white-space: nowrap;
  }
  .nav {
    grid-area: nav;
    display: flex; gap: 0.3rem; align-items: center;
    justify-content: center; overflow-x: visible;
  }
  .nav a {
    flex: 1; justify-content: center;
    font-size: 0.72rem; font-weight: 700;
    padding: 7px 6px; line-height: 1;
    background: rgba(255,215,0,0.08);
    border-radius: 8px; border: 1px solid rgba(255,215,0,0.2);
    color: rgba(255,255,255,0.72);
    min-height: 34px; display: flex; align-items: center;
    white-space: nowrap;
  }
  .nav a:hover { color: #FFD700; border-color: rgba(255,215,0,0.5); }
  .nav a.active { background: #FFD700; color: #0D1B2A; border-color: #FFD700; font-weight: 800; }

  /* ── Ticker ── */
  .ticker-item { font-size: 0.79rem; padding: 0 1.8rem; }

  /* ── Hero ── */
  .hero { min-height: auto; padding: 2.5rem 0 2.2rem; text-align: center; }
  .hero-content { padding: 0; }
  .hero-tag { font-size: 0.67rem; padding: 5px 14px; margin-bottom: 1.2rem; letter-spacing: 1.2px; }
  .hero h1 { font-size: 2.9rem; line-height: 0.96; margin-bottom: 1rem; letter-spacing: 2px; }
  .hero-sub { font-size: 0.9rem; margin-bottom: 1.8rem; max-width: 100%; line-height: 1.65; }
  .hero-actions { justify-content: center; gap: 0.8rem; flex-direction: column; align-items: center; }
  .btn-watch {
    width: 100%; max-width: 300px; text-align: center; justify-content: center;
    padding: 1rem 1.5rem; font-size: 1rem; min-height: 52px; border-radius: 50px;
  }
  .btn-outline {
    width: 100%; max-width: 300px; text-align: center; justify-content: center;
    padding: 0.9rem 1.5rem; font-size: 0.9rem; min-height: 48px; border-radius: 50px;
  }
  .hero-stats {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem 0.5rem; margin-top: 2rem; padding-top: 1.5rem;
    border-top: 1px solid var(--border);
  }
  .hero-stat { padding: 0.5rem 0.3rem; text-align: center; background: rgba(255,215,0,0.04); border-radius: 8px; }
  .hero-stat .num { font-size: 2rem; }
  .hero-stat .lbl { font-size: 0.68rem; }

  /* ── Host strip ── */
  .host-divider { display: none; }
  .hosts-inner { gap: 0; }
  .host-item { padding: 0.5rem 1rem; }
  .host-flag { font-size: 1.8rem; }
  .host-name { font-size: 0.82rem; }
  .host-venues { font-size: 0.65rem; }

  /* ── Sections ── */
  .section { padding: 2.2rem 0; }
  .container { padding: 0 1rem; }
  .sec-head { margin-bottom: 1.5rem; gap: 0.8rem; }
  .sec-title { font-size: 1.45rem; letter-spacing: 1px; }

  /* ── Match cards ── */
  .matches-grid { grid-template-columns: 1fr; gap: 1rem; }
  .match-card { padding: 1.2rem; border-radius: 14px; }
  .match-teams { margin-bottom: 1rem; }
  .team .flag { font-size: 2.5rem; }
  .team .name { font-size: 0.92rem; font-weight: 800; }
  .vs-text { font-size: 1.8rem; }
  .match-info { font-size: 0.8rem; padding: 0.5rem 0.7rem; border-radius: 10px; margin-bottom: 1rem; }
  .btn-card { padding: 0.88rem; font-size: 0.92rem; min-height: 48px; border-radius: 50px; }

  /* ── Upcoming grid — 2 cols reduces scrolling ── */
  .upcoming-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .upcoming-card { padding: 0.85rem 0.9rem; }
  .upcoming-time { font-size: 0.72rem; }
  .upcoming-teams { font-size: 0.88rem; }
  .upcoming-venue { font-size: 0.72rem; margin-bottom: 6px; }

  /* ── Steps ── */
  .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .step-card { padding: 1rem; flex-direction: column; text-align: center; gap: 0.6rem; min-height: 90px; }
  .step-num { width: 46px; height: 46px; min-width: 46px; font-size: 1.2rem; margin: 0 auto; border-radius: 10px; }
  .step-text { font-size: 0.88rem; }

  /* ── Match bar ── */
  .match-bar { padding: 0.5rem 0.9rem; }
  .match-bar-inner { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .match-bar-teams { font-size: 1.1rem; letter-spacing: 0.5px; }
  .match-bar-info {
    display: block; font-size: 0.73rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
  }
  .mbi-dot { display: none; }

  /* ── Watch page — player section ── */
  .player-section {
    grid-template-columns: 1fr;
    padding: 0.8rem 1rem;
    gap: 1rem;
  }
  .stream-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
  }
  .tab-btn { font-size: 0.7rem; padding: 0.45rem 0.3rem; text-align: center; white-space: normal; flex-shrink: unset; }
  .player-wrapper { border-radius: 10px; }
  .stream-tip { font-size: 0.78rem; padding: 0.6rem 0.8rem; }
  .broadcast-badge { padding: .45rem .75rem; gap: 7px; font-size: .75rem; }
  .quality-badge { margin-left: .2rem; }
  .match-clock { font-size: .73rem; padding: .35rem .6rem; }
  .pkt-badge { font-size: .7rem; padding: .25rem .55rem; }
  .mh-flag { font-size: 2rem; }
  .mh-name { font-size: 1.2rem; }
  .mh-vs { font-size: 1.6rem; }
  .match-hero-inner { gap: 1.2rem; }

  /* ── Sidebar ── */
  .sidebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .sidebar-card { padding: 1rem; }
  .sidebar-title { font-size: 0.72rem; margin-bottom: 0.7rem; padding-bottom: 0.45rem; }
  .score-box { gap: 0.55rem; }
  .score-team { font-size: 0.87rem; padding: 0.48rem 0.7rem; }
  .score-num { font-size: 1.5rem; }
  .score-status { font-size: 0.7rem; }
  .match-clock { margin-top: 0.5rem; font-size: 0.77rem; }
  .other-match { font-size: 0.83rem; padding: 0.6rem 0; }
  .btn-small { font-size: 0.7rem; padding: 5px 12px; min-height: 32px; }
  .share-btn { font-size: 0.78rem; padding: 0.65rem; min-height: 44px; }
  .share-btns { gap: 0.5rem; }

  /* ── Schedule table ── */
  .schedule-table-wrap { border-radius: 10px; }
  .schedule-table { font-size: 0.77rem; }
  .schedule-table th { padding: 0.55rem 0.4rem; font-size: 0.68rem; }
  .schedule-table td { padding: 0.55rem 0.4rem; }
  .schedule-table th:nth-child(4), .schedule-table td:nth-child(4) { display: none; }
  .watch-btn { font-size: 0.7rem; padding: 4px 9px; }
  .sched-tabs { gap: 0.35rem; }
  .sched-tab { font-size: 0.77rem; padding: 0.4rem 0.9rem; min-height: 36px; }

  /* ── Standings ── */
  .groups-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .group-card { padding: 1rem; border-radius: 12px; }
  .group-title { font-size: 1.25rem; margin-bottom: 0.8rem; padding-bottom: 0.4rem; }
  .standings-table { font-size: 0.8rem; }
  .standings-table td { padding: 6px 7px; }
  .standings-table th { padding: 5px 7px; font-size: 0.68rem; }

  /* ── Footer ── */
  .footer { padding: 2rem 1rem; }
  .footer .logo { font-size: 1.6rem; }
  .footer p { font-size: 0.8rem; }
  .footer-links { gap: 1rem; }
  .footer-links a { font-size: 0.8rem; }

  /* ── Intro overlay ── */
  .intro-logo { font-size: 2.8rem; letter-spacing: 4px; }
  .intro-ball { font-size: 4rem; }
  .intro-overlay-glow { width: 260px; height: 260px; }
  .intro-tag { font-size: 0.63rem; letter-spacing: 1.5px; }
  .intro-sub { font-size: 0.73rem; letter-spacing: 3px; }
  .intro-flags { gap: 0.6rem; margin-top: 1rem; }
  .intro-flag { width: 40px; height: 30px; }
  .intro-bar-wrap { width: 170px; margin-top: 1.2rem; }
}

/* ─── SMALL PHONES (≤ 430px) ───────────────────── */
@media (max-width: 430px) {
  .logo { font-size: 1.35rem; }
  .nav a { font-size: 0.68rem; padding: 5px 8px; }
  .live-badge { font-size: 0.58rem; padding: 4px 8px; }

  .hero h1 { font-size: 2.4rem; }
  .hero-sub { font-size: 0.87rem; }
  .btn-watch, .btn-outline { max-width: 100%; font-size: 0.88rem; }
  .hero-stats { gap: 0.5rem; }
  .hero-stat .num { font-size: 1.75rem; }
  .hero-stat .lbl { font-size: 0.62rem; }

  .team .flag { font-size: 2rem; }
  .steps-grid { grid-template-columns: 1fr; }
  .step-card { flex-direction: row; text-align: left; min-height: auto; }
  .step-num { margin: 0; width: 42px; height: 42px; min-width: 42px; }

  .stream-tabs { grid-template-columns: repeat(2, 1fr); }
  .tab-btn { font-size: 0.73rem; padding: 0.5rem 0.8rem; min-height: 38px; }
  .sec-title { font-size: 1.3rem; }
  .match-card { padding: 1.1rem; }

  .intro-logo { font-size: 2.3rem; }
  .intro-ball { font-size: 3.5rem; }
  .intro-ring-1, .intro-ring-2, .intro-ring-3 { width: 180px; height: 180px; }
}

/* ─── ULTRA-SMALL PHONES (≤ 360px) ─────────────── */
@media (max-width: 360px) {
  .logo { font-size: 1.25rem; }
  .nav a { font-size: 0.62rem; padding: 4px 5px; }
  .live-badge { font-size: 0.55rem; padding: 3px 7px; }
  .hero h1 { font-size: 2.1rem; }
  .match-bar-teams { font-size: 0.9rem; letter-spacing: 0px; }
  .broadcast-badge { padding: .35rem .6rem; font-size: .72rem; gap: 6px; }
  .stream-tabs { grid-template-columns: repeat(2, 1fr); }
  .tab-btn { font-size: 0.65rem; padding: 0.4rem 0.3rem; min-height: 34px; }
  .mh-flag { font-size: 1.8rem; }
  .mh-name { font-size: 1rem; }
  .mh-vs { font-size: 1.3rem; }
  .sec-title { font-size: 1.2rem; }
  .match-card { padding: 1rem; }
  .score-num { font-size: 1.3rem; }
  .pkt-badge { font-size: .65rem; }
}

/* ─── LANDSCAPE MOBILE ─────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .hero { padding: 1.2rem 0; min-height: auto; }
  .hero h1 { font-size: 2rem; }
  .hero-stats { margin-top: 0.8rem; padding-top: 0.8rem; }
  .player-wrapper { aspect-ratio: 16/8; }
  .steps-grid { grid-template-columns: repeat(4, 1fr); }
  .intro-ball { font-size: 3rem; }
  .intro-logo { font-size: 2.2rem; }
  .intro-flags { margin-top: 0.6rem; }
  .intro-bar-wrap { margin-top: 0.8rem; }
}

/* ─── iOS SAFE AREA ─────────────────────────────── */
@supports (padding: max(0px)) {
  .header { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
  .footer { padding-bottom: max(2rem, calc(1rem + env(safe-area-inset-bottom))); }
}