/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── VVM Brand Palette ───────────────────────────────────────────────────── */
:root {
  --navy-deep:   #030b18;
  --navy-dark:   #061226;
  --navy-panel:  #09193a;
  --navy-mid:    #0d2a5a;
  --navy-light:  #1a4a8a;
  --orange:      #f5821f;
  --orange-hot:  #ff9d42;
  --orange-dim:  rgba(245,130,31,0.18);
  --orange-glow: rgba(245,130,31,0.45);
  --gold:        #ffd700;
  --silver:      #b8c8e0;
  --bronze:      #9aaccc;
  --white:       #ffffff;
  --white-dim:   rgba(255,255,255,0.55);
  --white-faint: rgba(255,255,255,0.08);
  --border:      rgba(245,130,31,0.22);
  --font-head:   'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  --font-body:   'Rajdhani', 'Segoe UI', sans-serif;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--white);
  background: var(--navy-deep);
}

/* Animated gradient background */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 80% 60% at 20% 30%, rgba(13,42,90,0.7) 0%, transparent 60%),
              radial-gradient(ellipse 60% 50% at 80% 70%, rgba(245,130,31,0.12) 0%, transparent 55%),
              radial-gradient(ellipse 100% 80% at 50% 50%, #030b18 40%, #061226 100%);
  animation: bgPulse 12s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes bgPulse {
  from { opacity: 1; }
  to   { opacity: 0.7; }
}

/* Floating ambient orbs */
.orb {
  position: fixed; border-radius: 50%; filter: blur(90px);
  pointer-events: none; z-index: 0; will-change: transform;
}
.orb-1 {
  width: 35vw; height: 35vw;
  background: radial-gradient(circle, rgba(13,42,90,0.6), transparent 70%);
  top: -10%; left: -8%;
  animation: orbDrift1 20s ease-in-out infinite alternate;
}
.orb-2 {
  width: 28vw; height: 28vw;
  background: radial-gradient(circle, rgba(245,130,31,0.14), transparent 70%);
  bottom: -8%; right: -5%;
  animation: orbDrift2 25s ease-in-out infinite alternate;
}
.orb-3 {
  width: 20vw; height: 20vw;
  background: radial-gradient(circle, rgba(26,74,138,0.4), transparent 70%);
  top: 40%; left: 50%;
  animation: orbDrift3 18s ease-in-out infinite alternate;
}
@keyframes orbDrift1 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(4vw, 6vh) scale(1.15); }
}
@keyframes orbDrift2 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-5vw, -4vh) scale(1.2); }
}
@keyframes orbDrift3 {
  from { transform: translate(-50%,-50%) scale(1); }
  to   { transform: translate(calc(-50% + 3vw), calc(-50% - 5vh)) scale(0.85); }
}

/* Particle layer */
.particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.particle {
  position: absolute; border-radius: 50%;
  background: var(--orange);
  opacity: 0;
  animation: particleRise linear infinite;
}
@keyframes particleRise {
  0%   { opacity: 0;    transform: translateY(0)   scale(1); }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.2; }
  100% { opacity: 0;    transform: translateY(-100vh) scale(0.3); }
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.layout {
  position: relative; z-index: 1;
  width: 100vw; height: 100vh;
  display: grid;
  grid-template-rows: 9vh 1fr 6.5vh;
  overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.5vw;
  background: rgba(3,11,24,0.85);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  position: relative; overflow: hidden;
}
/* Scanning shimmer line */
.hd::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(245,130,31,0.08), transparent);
  animation: hdScan 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hdScan {
  from { left: -60%; }
  to   { left: 120%; }
}
/* Bottom glow line */
.hd-glow-line {
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--orange) 30%, #ffd700 50%, var(--orange) 70%, transparent 100%);
  animation: linePulse 3s ease-in-out infinite;
}
@keyframes linePulse {
  0%,100% { opacity: 0.5; transform: scaleX(0.8); }
  50%     { opacity: 1;   transform: scaleX(1); }
}

.hd-left { display: flex; align-items: center; gap: 1.2vw; }
.hd-logo { height: clamp(28px, 4.5vh, 52px); width: auto; object-fit: contain; }
.hd-divider {
  width: 1px; height: clamp(24px, 3.5vh, 40px);
  background: var(--border); flex-shrink: 0;
}
.hd-title-block { line-height: 1.15; }
.hd-title {
  font-family: var(--font-head);
  font-size: clamp(16px, 2.2vw, 36px);
  letter-spacing: 0.12em;
  color: var(--white);
}
.hd-subtitle {
  font-size: clamp(9px, 0.85vw, 13px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--white-dim);
}

.hd-center { display: flex; flex-direction: column; align-items: center; gap: 0.5vh; }
.sheet-dots { display: flex; gap: 0.5vw; }
.dot {
  width: clamp(6px,0.55vw,10px); height: clamp(6px,0.55vw,10px);
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: background .4s, transform .4s, box-shadow .4s;
}
.dot.active {
  background: var(--orange);
  transform: scale(1.5);
  box-shadow: 0 0 8px var(--orange-glow);
}
.sheet-label {
  font-family: var(--font-head);
  font-size: clamp(13px, 1.5vw, 22px);
  letter-spacing: 0.15em;
  color: var(--orange);
  text-shadow: 0 0 14px var(--orange-glow);
  text-transform: uppercase;
  animation: labelBreath 3s ease-in-out infinite alternate;
}
@keyframes labelBreath {
  from { text-shadow: 0 0 8px rgba(245,130,31,0.4); }
  to   { text-shadow: 0 0 20px rgba(245,130,31,0.8), 0 0 35px rgba(245,130,31,0.3); }
}

.hd-right { text-align: right; }
.clock {
  font-family: var(--font-head);
  font-size: clamp(18px, 2.2vw, 34px);
  letter-spacing: 0.06em; color: var(--white);
}
.last-updated {
  font-size: clamp(8px, 0.7vw, 11px);
  color: var(--white-dim); margin-top: 2px;
}

/* ── Main Grid ───────────────────────────────────────────────────────────── */
.main {
  display: grid;
  grid-template-columns: 1fr 26vw 1fr;
  gap: 1vw;
  padding: 1vh 2vw;
  transition: opacity 0.55s ease, transform 0.55s ease;
  will-change: opacity;
  min-height: 0;
}
.main.fading { opacity: 0; transform: translateY(8px); }

/* ── Panel Base ──────────────────────────────────────────────────────────── */
.panel {
  background: rgba(9,25,58,0.75);
  border: 1px solid var(--border);
  border-radius: clamp(6px, 0.8vw, 14px);
  overflow: hidden;
  display: flex; flex-direction: column;
  backdrop-filter: blur(8px);
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: panelIn 0.6s ease both;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Orange top accent bar */
.panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), var(--orange-hot), var(--orange), transparent);
  animation: topBarPulse 4s ease-in-out infinite alternate;
}
@keyframes topBarPulse {
  from { opacity: 0.5; }
  to   { opacity: 1; box-shadow: 0 0 12px var(--orange-glow); }
}

.panel-title {
  font-family: var(--font-head);
  font-size: clamp(11px, 1.2vw, 18px);
  letter-spacing: 0.2em;
  color: var(--orange);
  padding: clamp(8px, 1.2vh, 16px) clamp(10px, 1.2vw, 20px) clamp(6px, 1vh, 12px);
  border-bottom: 1px solid rgba(245,130,31,0.12);
  background: rgba(0,0,0,0.2);
  display: flex; align-items: center; gap: 0.6vw;
  flex-shrink: 0;
}
.pt-icon { font-size: clamp(10px, 1.1vw, 16px); }

/* ── League Table ────────────────────────────────────────────────────────── */
.league-body {
  flex: 1; overflow: hidden; min-height: 0;
  padding: clamp(6px,0.8vh,12px) clamp(8px,0.8vw,14px);
  display: flex; flex-direction: column;
  gap: clamp(4px, 0.6vh, 8px);
}
.league-row {
  display: grid;
  grid-template-columns: clamp(32px,3vw,52px) 1fr clamp(60px,5.5vw,90px) clamp(70px,6vw,100px);
  align-items: center;
  gap: 0.6vw;
  padding: clamp(6px,0.9vh,12px) clamp(8px,0.8vw,14px);
  border-radius: clamp(4px,0.4vw,8px);
  background: rgba(255,255,255,0.04);
  border-left: 3px solid rgba(255,255,255,0.1);
  position: relative; overflow: hidden;
  transition: background 0.3s;
  animation: rowSlide 0.5s ease both;
}
.league-row::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(245,130,31,0.04), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.league-row:nth-child(1) { border-left-color: var(--gold);   animation-delay: .05s; }
.league-row:nth-child(2) { border-left-color: var(--silver); animation-delay: .10s; }
.league-row:nth-child(3) { border-left-color: var(--bronze); animation-delay: .15s; }
.league-row:nth-child(n+4) { animation-delay: .18s; }

@keyframes rowSlide {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

.lr-rank {
  font-family: var(--font-head);
  font-size: clamp(18px, 2vw, 30px);
  text-align: center; line-height: 1;
}
.lr-rank.r1 { color: var(--gold);   text-shadow: 0 0 12px rgba(255,215,0,0.6); }
.lr-rank.r2 { color: var(--silver); }
.lr-rank.r3 { color: var(--bronze); }
.lr-rank.rn { color: var(--white-dim); }

.lr-info { overflow: hidden; }
.lr-team {
  font-family: var(--font-head);
  font-size: clamp(14px, 1.5vw, 22px);
  letter-spacing: 0.05em; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lr-captain {
  font-size: clamp(9px, 0.7vw, 12px);
  color: var(--white-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}

.lr-goals { text-align: right; }
.lr-goals-val {
  font-family: var(--font-head);
  font-size: clamp(16px, 1.8vw, 28px);
  color: var(--orange);
  line-height: 1;
}
.lr-goals-lbl {
  font-size: clamp(8px, 0.55vw, 10px);
  color: var(--white-dim);
  text-transform: uppercase; letter-spacing: 0.1em;
}

.pct-bar-wrap {
  background: rgba(255,255,255,0.07);
  border-radius: 3px; height: 5px; overflow: hidden; margin-bottom: 3px;
}
.pct-bar { height: 100%; border-radius: 3px; transition: width 1.2s ease; }
.pct-val {
  font-family: var(--font-head);
  font-size: clamp(14px, 1.5vw, 22px);
  line-height: 1;
}

/* ── Champion Spotlight ──────────────────────────────────────────────────── */
.panel-center { overflow: visible !important; }

.champ-body {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: clamp(8px, 1vh, 16px) clamp(12px, 1.2vw, 24px) clamp(12px, 2vh, 24px);
  position: relative; overflow: hidden;
}

/* Spinning halo */
.champ-halo {
  position: absolute;
  width: min(28vw, 360px); height: min(28vw, 360px);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(245,130,31,0) 0deg,
    rgba(245,130,31,0.5) 60deg,
    rgba(255,200,80,0.55) 120deg,
    rgba(13,42,90,0.3) 180deg,
    rgba(245,130,31,0) 240deg,
    rgba(245,130,31,0.35) 300deg,
    rgba(245,130,31,0) 360deg
  );
  filter: blur(20px);
  animation: haloSpin 5s linear infinite;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
@keyframes haloSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* Counter-spin inner halo */
.champ-halo-inner {
  position: absolute;
  width: min(16vw, 200px); height: min(16vw, 200px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,130,31,0.25) 0%, rgba(13,42,90,0.2) 50%, transparent 70%);
  filter: blur(12px);
  animation: haloSpin 3.5s linear infinite reverse;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.champ-card {
  position: relative; z-index: 2; width: 100%;
  background: linear-gradient(145deg, rgba(9,25,58,0.95), rgba(13,42,90,0.9));
  border: 1.5px solid rgba(245,130,31,0.5);
  border-radius: clamp(8px, 1vw, 16px);
  padding: clamp(12px, 2vh, 28px) clamp(12px, 1.5vw, 24px);
  text-align: center;
  animation: champGlow 2.5s ease-in-out infinite alternate;
  overflow: hidden;
}
.champ-card::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(245,130,31,0.06), transparent);
  animation: champSheen 4s ease-in-out infinite;
}
@keyframes champSheen {
  from { left: -100%; }
  to   { left: 200%; }
}

@keyframes champGlow {
  from {
    box-shadow: 0 0 20px rgba(245,130,31,0.35), 0 0 50px rgba(245,130,31,0.15), 0 8px 32px rgba(0,0,0,0.5);
    border-color: rgba(245,130,31,0.4);
  }
  to {
    box-shadow: 0 0 35px rgba(245,130,31,0.6), 0 0 80px rgba(245,130,31,0.25), 0 0 120px rgba(245,130,31,0.1), 0 8px 32px rgba(0,0,0,0.5);
    border-color: rgba(255,170,80,0.75);
  }
}

.champ-trophy {
  display: block;
  font-size: clamp(32px, 4.5vh, 60px);
  animation: trophyFloat 3.5s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(245,130,31,0.6));
}
@keyframes trophyFloat {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%     { transform: translateY(-8px) rotate(4deg); }
}
.champ-label {
  font-size: clamp(8px, 0.65vw, 11px);
  letter-spacing: 0.3em; color: var(--white-dim);
  text-transform: uppercase; margin: clamp(6px, 1vh, 12px) 0 4px;
}
.champ-name {
  font-family: var(--font-head);
  font-size: clamp(20px, 2.8vw, 42px);
  letter-spacing: 0.06em; color: var(--orange);
  line-height: 1;
  text-shadow: 0 0 20px rgba(245,130,31,0.6);
  animation: namePulse 2.5s ease-in-out infinite alternate;
}
@keyframes namePulse {
  from { text-shadow: 0 0 12px rgba(245,130,31,0.5); }
  to   { text-shadow: 0 0 28px rgba(245,130,31,0.9), 0 0 50px rgba(245,130,31,0.4); }
}

.champ-divider {
  width: 75%; height: 1px; margin: clamp(8px, 1.2vh, 16px) auto;
  background: linear-gradient(90deg, transparent, rgba(245,130,31,0.5), transparent);
}
.champ-stats { display: flex; justify-content: space-around; gap: 0.5vw; }
.cs-item  { text-align: center; }
.cs-val   {
  font-family: var(--font-head);
  font-size: clamp(20px, 2.4vw, 36px);
  color: var(--white); line-height: 1;
}
.cs-val.orange { color: var(--orange); }
.cs-lbl   {
  font-size: clamp(8px, 0.55vw, 10px);
  letter-spacing: 0.2em; color: var(--white-dim);
  text-transform: uppercase; margin-top: 3px;
}

.champ-team-row { margin-top: clamp(8px, 1.2vh, 16px); }
.champ-team   {
  font-family: var(--font-head);
  font-size: clamp(13px, 1.4vw, 20px);
  color: rgba(255,255,255,0.8); letter-spacing: 0.12em;
}
.champ-leader { font-size: clamp(9px, 0.65vw, 11px); color: var(--white-dim); margin-top: 3px; }

/* Spark particles inside card */
.sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.spark {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--orange); opacity: 0;
  animation: sparkRise linear infinite;
}
@keyframes sparkRise {
  0%   { opacity: 0.9; transform: translateY(0) translateX(0) scale(1); }
  100% { opacity: 0;   transform: translateY(-90px) translateX(var(--dx,0px)) scale(0.2); }
}

/* ── Chart Panel ─────────────────────────────────────────────────────────── */
.chart-body {
  flex: 1; min-height: 0;
  padding: clamp(8px, 1vh, 16px) clamp(10px, 1vw, 18px);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
#perfChart { max-width: 100%; max-height: 100%; }

/* ── Ticker Tape ─────────────────────────────────────────────────────────── */
.ticker-bar {
  background: rgba(3,11,24,0.9);
  border-top: 1px solid var(--border);
  display: flex; align-items: center;
  overflow: hidden;
  backdrop-filter: blur(8px);
  padding: 0 1vw;
  gap: 1vw;
}
.ticker-label {
  flex-shrink: 0;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-head);
  font-size: clamp(10px, 1vw, 14px);
  letter-spacing: 0.15em; padding: 3px 10px;
  border-radius: 3px;
  animation: liveBlink 1s step-start infinite;
}
@keyframes liveBlink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.3; }
}
.ticker-track { flex: 1; overflow: hidden; height: 100%; display: flex; align-items: center; }
.ticker-content {
  display: inline-block; white-space: nowrap;
  font-family: var(--font-head);
  font-size: clamp(12px, 1.4vw, 20px);
  letter-spacing: 0.05em; color: var(--white);
  animation: tickerScroll 70s linear infinite;
}
@keyframes tickerScroll {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-100%); }
}

/* ── No-data overlay ─────────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(3,11,24,0.96);
  display: none; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 2vh;
}
.overlay.visible { display: flex; }
.overlay-logo { height: clamp(40px, 6vh, 70px); width: auto; margin-bottom: 1vh; }
.overlay-ball { font-size: clamp(48px, 8vh, 90px); animation: trophyFloat 2s ease-in-out infinite; }
.overlay h2 {
  font-family: var(--font-head);
  font-size: clamp(20px, 3vw, 42px);
  color: var(--orange); letter-spacing: 0.15em;
}
.overlay p   { color: var(--white-dim); font-size: clamp(12px, 1.2vw, 18px); }
.overlay-hint { margin-top: 0.5vh; font-size: clamp(10px, 0.9vw, 14px); }

/* ── Nav Buttons ─────────────────────────────────────────────────────────── */
.nav-btn {
  position: fixed; top: 50%; z-index: 50;
  transform: translateY(-50%);
  width: clamp(36px, 3.2vw, 56px); height: clamp(72px, 10vh, 120px);
  background: rgba(9,25,58,0.7);
  border: 1px solid rgba(245,130,31,0.35);
  border-radius: clamp(4px, 0.4vw, 8px);
  color: var(--orange);
  font-size: clamp(24px, 3vw, 46px);
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
  user-select: none;
}
.nav-btn:hover {
  background: rgba(245,130,31,0.18);
  border-color: var(--orange);
  box-shadow: 0 0 20px rgba(245,130,31,0.35);
  color: #fff;
}
.nav-btn:active { transform: translateY(-50%) scale(0.93); }
.nav-prev { left:  0.8vw; }
.nav-next { right: 0.8vw; }

/* ── Performance bar colours ─────────────────────────────────────────────── */
.pct-great  { background: var(--orange); }
.pct-good   { background: #e0a020; }
.pct-warn   { background: #c06010; }
.pct-low    { background: #803010; }

/* ── Utility ─────────────────────────────────────────────────────────────── */
.no-data { color: var(--white-dim); font-style: italic; font-size: clamp(11px, 0.9vw, 14px); text-align: center; padding: 2vh 0; }

/* ── Pitch SVG overlay ───────────────────────────────────────────────────── */
.pitch-svg {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ── League auto-scroll (>8 teams) ──────────────────────────────────────── */
.league-body { overflow: hidden; }
.league-scroller {
  animation: leagueScrollUp linear infinite;
  will-change: transform;
}
@keyframes leagueScrollUp {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* ── Live dot in nav dots ────────────────────────────────────────────────── */
.dot.dot-live { background: rgba(220,40,40,0.35); }
.dot.dot-live.active {
  background: #ff3333;
  box-shadow: 0 0 8px rgba(255,40,40,0.8);
  animation: liveDotPulse 1s ease-in-out infinite alternate;
}
@keyframes liveDotPulse {
  from { box-shadow: 0 0 5px rgba(255,40,40,0.5); }
  to   { box-shadow: 0 0 14px rgba(255,40,40,1), 0 0 24px rgba(255,40,40,0.4); }
}

/* ── Podium (2nd & 3rd below champion) ───────────────────────────────────── */
.podium-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(6px, 0.7vw, 12px);
  margin-top: clamp(8px, 1vh, 14px);
  width: 100%;
  flex-shrink: 0;
}
.podium-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(245,130,31,0.2);
  border-radius: clamp(6px, 0.7vw, 10px);
  padding: clamp(8px, 1.1vh, 14px) clamp(8px, 0.8vw, 14px);
  text-align: center;
  position: relative; overflow: hidden;
  transition: border-color .3s;
  animation: podiumIn 0.6s ease both;
}
.podium-card:first-child { animation-delay: .1s; border-color: rgba(192,192,192,0.3); }
.podium-card:last-child  { animation-delay: .2s; border-color: rgba(205,127,50,0.3); }
.podium-card:first-child::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--silver),transparent); }
.podium-card:last-child::before  { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--bronze),transparent); }
.podium-empty { background: transparent; border: none; }
@keyframes podiumIn {
  from { opacity:0; transform: translateY(10px); }
  to   { opacity:1; transform: translateY(0); }
}
.podium-medal { font-size: clamp(16px, 2vw, 26px); line-height: 1; }
.podium-flag  { font-size: clamp(18px, 2.2vw, 28px); margin: 2px 0; }
.podium-name  {
  font-family: var(--font-head);
  font-size: clamp(12px, 1.3vw, 18px);
  color: var(--white); letter-spacing: 0.06em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.1;
}
.podium-team  { font-size: clamp(8px, 0.6vw, 10px); color: var(--white-dim); margin: 1px 0 4px; }
.podium-goals {
  font-family: var(--font-head);
  font-size: clamp(14px, 1.6vw, 22px);
  color: var(--orange);
}
.podium-goals span { font-size: clamp(8px, 0.6vw, 10px); color: var(--white-dim); }
.podium-pct   { font-family: var(--font-head); font-size: clamp(11px, 1.2vw, 16px); margin-top: 1px; }

/* ── Live panel (spans all 3 columns) ───────────────────────────────────── */
.panel-live {
  grid-column: 1 / -1;
  flex-direction: column;
}

/* ── Match grid ──────────────────────────────────────────────────────────── */
.match-grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 0.8vw, 14px);
  padding: clamp(10px, 1.2vh, 18px) clamp(12px, 1.2vw, 20px);
  align-content: start;
  overflow: hidden;
}
.match-card {
  background: rgba(9,25,58,0.7);
  border: 1px solid rgba(245,130,31,0.2);
  border-radius: clamp(6px, 0.6vw, 10px);
  padding: clamp(8px, 1vh, 14px) clamp(10px, 0.9vw, 16px);
  position: relative;
  overflow: hidden;
  animation: matchIn 0.5s ease both;
  transition: border-color .3s;
}
.match-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(245,130,31,0.5), transparent);
}
.match-card.is-live {
  border-color: rgba(255,50,50,0.5);
  box-shadow: 0 0 16px rgba(255,50,50,0.15);
}
.match-card.is-live::before { background: linear-gradient(90deg, transparent, rgba(255,50,50,0.7), transparent); }
.match-card.is-pre  { border-color: rgba(26,74,138,0.5); opacity: 0.85; }
.match-card.is-final { opacity: 0.75; }
@keyframes matchIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Live pip (blinking dot top-right) */
.live-pip {
  position: absolute; top: clamp(6px,0.7vh,10px); right: clamp(6px,0.7vw,10px);
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff3333;
  animation: liveBlink 1s step-start infinite;
}

.mc-status {
  font-size: clamp(9px, 0.7vw, 11px);
  color: var(--white-dim); letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: clamp(4px, 0.5vh, 8px);
}
.match-card.is-live .mc-status { color: #ff6666; }

.mc-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(4px, 0.5vw, 8px);
}
.mc-team {
  display: flex; align-items: center; gap: clamp(4px, 0.4vw, 8px);
  min-width: 0;
}
.mc-home { justify-content: flex-end; flex-direction: row; }
.mc-away { justify-content: flex-start; flex-direction: row-reverse; }
.mc-name {
  font-family: var(--font-head);
  font-size: clamp(12px, 1.2vw, 17px);
  letter-spacing: 0.05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 10vw;
}
.crest {
  width: clamp(20px, 2.2vw, 34px); height: clamp(20px, 2.2vw, 34px);
  object-fit: contain; flex-shrink: 0;
}
.crest-fallback { font-size: clamp(14px, 1.6vw, 22px); }

.mc-score {
  display: flex; align-items: center; gap: clamp(3px, 0.3vw, 6px);
  flex-shrink: 0;
}
.sc-home, .sc-away {
  font-family: var(--font-head);
  font-size: clamp(22px, 2.8vw, 42px);
  color: var(--white); line-height: 1;
  min-width: clamp(20px, 2vw, 34px); text-align: center;
}
.match-card.is-live .sc-home,
.match-card.is-live .sc-away { color: var(--orange); }
.sc-sep {
  font-family: var(--font-head);
  font-size: clamp(16px, 2vw, 30px);
  color: var(--white-dim);
}

/* Live view header extras */
.live-badge-title {
  margin-left: auto;
  background: rgba(255,50,50,0.2); border: 1px solid rgba(255,50,50,0.5);
  color: #ff6666; border-radius: 4px;
  font-size: clamp(9px, 0.65vw, 11px); letter-spacing: 0.15em;
  padding: 2px 8px;
  animation: liveBlink 1s step-start infinite;
}
.match-count {
  font-size: clamp(9px, 0.65vw, 11px);
  color: var(--white-dim); margin-left: 0.6vw;
}

/* No live matches state */
.live-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.5vh;
}
.live-empty-ball  { font-size: clamp(48px, 7vw, 80px); animation: trophyFloat 2.2s ease-in-out infinite; }
.live-empty-title { font-family: var(--font-head); font-size: clamp(18px, 2.2vw, 32px); color: var(--orange); letter-spacing: 0.12em; }
.live-empty-sub   { font-size: clamp(11px, 0.9vw, 14px); color: var(--white-dim); }

/* ── Extra soccer flavour ────────────────────────────────────────────────── */
/* Grass-stripe inside each panel (very subtle) */
.panel::after {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px, transparent 38px,
    rgba(255,255,255,0.008) 38px, rgba(255,255,255,0.008) 76px
  );
  border-radius: inherit;
}
/* Keep content above the grass overlay */
.panel-title, .league-body, .champ-body, .chart-body, .match-grid, .live-empty, .fx-grid {
  position: relative; z-index: 1;
}

/* ── Top Performers (Top Agent sheets) ───────────────────────────────────── */
.agent-row {
  grid-template-columns: clamp(32px,3vw,52px) 1fr clamp(36px,3vw,52px);
}
.agent-flag {
  font-size: clamp(22px, 2.4vw, 38px);
  text-align: center; line-height: 1;
}
.champ-kpi {
  margin-top: clamp(4px, 0.6vh, 8px);
  font-family: var(--font-head);
  font-size: clamp(13px, 1.3vw, 20px);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange);
}

/* ── World Cup Fixtures schedule ─────────────────────────────────────────── */
.fx-grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 0.8vw, 16px) clamp(16px, 1.6vw, 32px);
  padding: clamp(10px, 1.2vh, 18px) clamp(14px, 1.4vw, 24px);
  align-content: start;
  overflow: hidden;
}
.fx-day { animation: matchIn 0.5s ease both; }
.fx-day-label {
  font-family: var(--font-head);
  font-size: clamp(14px, 1.4vw, 22px);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange);
  padding: 0 0 clamp(3px,0.5vh,6px);
  margin-bottom: clamp(4px,0.6vh,8px);
  border-bottom: 1px solid rgba(245,130,31,0.25);
}
.fx-match {
  display: grid;
  grid-template-columns: clamp(46px,4vw,64px) 1fr;
  align-items: center;
  gap: clamp(6px, 0.6vw, 12px);
  padding: clamp(4px,0.6vh,9px) clamp(4px,0.4vw,8px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.fx-time {
  font-family: var(--font-head);
  font-size: clamp(14px, 1.4vw, 22px);
  color: var(--white); letter-spacing: 0.04em;
}
.fx-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: clamp(4px,0.5vw,10px);
  min-width: 0;
}
.fx-side {
  font-family: var(--font-head);
  font-size: clamp(12px, 1.2vw, 18px);
  letter-spacing: 0.04em; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fx-home { text-align: right; }
.fx-away { text-align: left; }
.fx-v {
  font-size: clamp(9px, 0.7vw, 12px);
  color: var(--white-dim); text-transform: uppercase;
}
.fx-venue {
  grid-column: 2;
  font-size: clamp(9px, 0.7vw, 12px);
  color: var(--white-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}