:root {
  --ucl-midnight: #020514;
  --ucl-ink: #04091e;
  --ucl-panel: #081338;
  --ucl-panel-2: #0c1d52;
  --ucl-royal-deep: #07143a;
  --ucl-royal-mid: #0e2970;
  --ucl-blue-bright: #1e6bff;
  --ucl-cyan-ice: #60b5ff;
  --ucl-silver-bright: #f8fbff;
  --ucl-silver-chrome: #bfd4f2;
  --ucl-gold: #f5c451;
  --ucl-gold-hot: #ffd15c;
  --ucl-turf-green: #10b981;
  --ucl-red-elim: #f43f5e;
  --ucl-border: rgba(120, 175, 255, 0.28);
  --font-serif-crest: 'Cinzel', Georgia, serif;
  --font-broadcast: 'Montserrat', sans-serif;
  --font-scoreboard: 'Teko', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: var(--ucl-midnight);
  color: var(--ucl-silver-bright);
  font-family: var(--font-broadcast);
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   FULL-SCREEN CHAMPIONS LEAGUE STADIUM INTRO GATE
   ========================================================= */
.intro-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background:
    radial-gradient(ellipse 90% 60% at 50% 35%, #102a72 0%, #071336 48%, #020616 82%, #01030b 100%);
  perspective: 1400px;
  z-index: 100;
  user-select: none;
  transition:
    opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.95s ease;
}

.intro-screen.warp-exit {
  opacity: 0;
  transform: scale(2.25);
  filter: brightness(2.4) blur(12px);
  pointer-events: none;
}

.stadium-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* =========================================================
   STADIUM FLOODLIGHT BEAMS
   ========================================================= */
.floodlights {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.floodlight-beam {
  position: absolute;
  top: -18%;
  width: 42vw;
  height: 130vh;
  transform-origin: top center;
  filter: blur(26px);
  mix-blend-mode: screen;
  opacity: 0.55;
}

.beam-left-outer {
  left: -8%;
  background: conic-gradient(
    from 135deg at 50% 0%,
    transparent 0deg,
    rgba(130, 195, 255, 0.26) 18deg,
    rgba(255, 255, 255, 0.12) 28deg,
    transparent 48deg
  );
  animation: swayLeftOuter 9s ease-in-out infinite alternate;
}

.beam-left-inner {
  left: 12%;
  background: conic-gradient(
    from 148deg at 50% 0%,
    transparent 0deg,
    rgba(30, 107, 255, 0.28) 15deg,
    rgba(180, 220, 255, 0.16) 24deg,
    transparent 42deg
  );
  animation: swayLeftInner 7.5s ease-in-out infinite alternate;
}

.beam-right-inner {
  right: 12%;
  background: conic-gradient(
    from 170deg at 50% 0%,
    transparent 0deg,
    rgba(180, 220, 255, 0.16) 16deg,
    rgba(30, 107, 255, 0.28) 26deg,
    transparent 44deg
  );
  animation: swayRightInner 8s ease-in-out infinite alternate;
}

.beam-right-outer {
  right: -8%;
  background: conic-gradient(
    from 180deg at 50% 0%,
    transparent 0deg,
    rgba(255, 255, 255, 0.12) 18deg,
    rgba(130, 195, 255, 0.26) 28deg,
    transparent 48deg
  );
  animation: swayRightOuter 10s ease-in-out infinite alternate;
}

@keyframes swayLeftOuter {
  0% { transform: rotate(-8deg); opacity: 0.45; }
  100% { transform: rotate(6deg); opacity: 0.72; }
}

@keyframes swayLeftInner {
  0% { transform: rotate(4deg); opacity: 0.4; }
  100% { transform: rotate(-7deg); opacity: 0.65; }
}

@keyframes swayRightInner {
  0% { transform: rotate(-4deg); opacity: 0.4; }
  100% { transform: rotate(7deg); opacity: 0.65; }
}

@keyframes swayRightOuter {
  0% { transform: rotate(8deg); opacity: 0.45; }
  100% { transform: rotate(-6deg); opacity: 0.72; }
}

/* =========================================================
   3D CHAMPIONS LEAGUE FOOTBALL PITCH FLOOR & CHALK LINES
   ========================================================= */
.stadium-pitch-floor {
  position: absolute;
  bottom: -28%;
  left: -40%;
  width: 180%;
  height: 74%;
  transform: perspective(650px) rotateX(74deg);
  mask-image: radial-gradient(ellipse 62% 55% at 50% 35%, rgba(0, 0, 0, 0.92) 15%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 62% 55% at 50% 35%, rgba(0, 0, 0, 0.92) 15%, transparent 78%);
  z-index: 2;
  pointer-events: none;
}

.pitch-turf-stripes {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 25%, rgba(16, 185, 129, 0.22) 0%, rgba(10, 55, 90, 0.18) 45%, transparent 75%),
    repeating-linear-gradient(
      90deg,
      rgba(16, 185, 129, 0.09) 0px,
      rgba(16, 185, 129, 0.09) 70px,
      rgba(6, 78, 59, 0.14) 70px,
      rgba(6, 78, 59, 0.14) 140px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(140, 200, 255, 0.06) 0px,
      rgba(140, 200, 255, 0.06) 1px,
      transparent 1px,
      transparent 55px
    );
  animation: turfGlide 14s linear infinite;
}

@keyframes turfGlide {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 0 0, 0 55px; }
}

.pitch-lines {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pitch-halfway-line {
  position: absolute;
  top: 38%;
  width: 75%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(220, 240, 255, 0.42) 20%,
    rgba(255, 255, 255, 0.78) 50%,
    rgba(220, 240, 255, 0.42) 80%,
    transparent 100%
  );
  box-shadow: 0 0 14px rgba(140, 205, 255, 0.55);
}

.pitch-center-circle {
  position: absolute;
  top: 38%;
  width: 340px;
  height: 340px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 2px solid rgba(235, 246, 255, 0.52);
  box-shadow:
    0 0 22px rgba(96, 181, 255, 0.45),
    inset 0 0 22px rgba(96, 181, 255, 0.25);
}

.pitch-center-spot {
  position: absolute;
  top: 38%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 16px #ffffff, 0 0 28px var(--ucl-cyan-ice);
}

.pitch-penalty-arc {
  position: absolute;
  top: 72%;
  width: 680px;
  height: 240px;
  border-top: 2px solid rgba(220, 240, 255, 0.32);
  border-left: 2px solid rgba(220, 240, 255, 0.22);
  border-right: 2px solid rgba(220, 240, 255, 0.22);
  box-shadow: 0 -6px 20px rgba(96, 181, 255, 0.22);
}

.stadium-mist {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 38%;
  background: linear-gradient(
    to top,
    rgba(2, 6, 23, 0.92) 0%,
    rgba(12, 38, 98, 0.28) 45%,
    transparent 100%
  );
  z-index: 3;
  pointer-events: none;
}

.radial-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 48%, transparent 42%, rgba(1, 3, 12, 0.88) 100%);
  z-index: 4;
  pointer-events: none;
}

/* =========================================================
   MATCHDAY BROADCAST SCOREBOARD BARS (TOP & BOTTOM)
   ========================================================= */
.broadcast-top,
.broadcast-bottom {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 20px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: rgba(215, 234, 255, 0.85);
}

.broadcast-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--ucl-border);
  background: linear-gradient(135deg, rgba(6, 20, 58, 0.82) 0%, rgba(2, 8, 28, 0.88) 100%);
  backdrop-filter: blur(10px);
  position: relative;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), inset 0 0 15px rgba(96, 181, 255, 0.1);
}

.broadcast-pill strong {
  color: #ffffff;
  font-weight: 800;
}

.live-kickoff-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ucl-turf-green);
  box-shadow: 0 0 10px var(--ucl-turf-green), 0 0 18px rgba(16, 185, 129, 0.8);
  animation: pulseKickoff 1.8s ease-in-out infinite;
}

@keyframes pulseKickoff {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.82); }
}

.broadcast-center-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 20px;
  border-top: 1px solid rgba(245, 196, 81, 0.38);
  border-bottom: 1px solid rgba(245, 196, 81, 0.38);
  background: linear-gradient(90deg, transparent, rgba(14, 41, 112, 0.55), transparent);
  color: var(--ucl-silver-bright);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-shadow: 0 0 14px rgba(96, 181, 255, 0.65);
}

.banner-star {
  color: var(--ucl-gold);
  font-size: 0.85rem;
  filter: drop-shadow(0 0 8px rgba(245, 196, 81, 0.8));
}

.spin-controls {
  display: flex;
  gap: 8px;
  background: rgba(3, 10, 32, 0.78);
  padding: 5px;
  border: 1px solid var(--ucl-border);
  border-radius: 6px;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.broadcast-chip {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: rgba(191, 212, 242, 0.68);
  font-family: var(--font-broadcast);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.broadcast-chip:hover {
  color: #ffffff;
  border-color: rgba(140, 195, 255, 0.45);
}

.broadcast-chip.active {
  background: linear-gradient(135deg, rgba(30, 107, 255, 0.42), rgba(14, 41, 112, 0.75));
  border-color: var(--ucl-silver-chrome);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(30, 107, 255, 0.45);
}

/* =========================================================
   CENTERPIECE: 3D SPINNING CHAMPIONS LEAGUE CREST & ORBITS
   ========================================================= */
.intro-centerpiece {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  max-width: 980px;
  padding: 0 20px;
  gap: clamp(14px, 2.5vh, 30px);
}

.logo-stage {
  position: relative;
  width: clamp(250px, 40vh, 430px);
  height: clamp(230px, 37vh, 400px);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
  cursor: grab;
  transform-style: preserve-3d;
}

.trophy-glow-core {
  position: absolute;
  width: 88%;
  height: 88%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(65, 145, 255, 0.52) 0%,
    rgba(16, 52, 145, 0.34) 44%,
    transparent 74%
  );
  filter: blur(28px);
  animation: trophyBreathe 4.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes trophyBreathe {
  0%, 100% { transform: scale(0.94); opacity: 0.82; }
  50% { transform: scale(1.12); opacity: 1; }
}

.ucl-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.ring-outer {
  width: 114%;
  height: 114%;
  border: 1.5px dashed rgba(215, 232, 255, 0.32);
  box-shadow:
    0 0 30px rgba(30, 107, 255, 0.2),
    inset 0 0 30px rgba(30, 107, 255, 0.16);
  animation: uclOrbitOuter 24s linear infinite;
}

.ring-middle {
  width: 98%;
  height: 98%;
  border: 2px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.78);
  border-bottom-color: rgba(96, 181, 255, 0.65);
  filter: drop-shadow(0 0 12px rgba(96, 181, 255, 0.8));
  animation: uclOrbitMiddle 11.5s linear infinite;
}

.ring-inner {
  width: 80%;
  height: 80%;
  border: 1px solid rgba(191, 212, 242, 0.22);
  border-left: 2.5px solid var(--ucl-gold);
  border-right: 2.5px solid var(--ucl-silver-bright);
  filter: drop-shadow(0 0 10px rgba(245, 196, 81, 0.45));
  animation: uclOrbitInner 8.5s linear infinite reverse;
}

@keyframes uclOrbitOuter {
  0% { transform: rotateX(68deg) rotateY(-12deg) rotateZ(0deg); }
  100% { transform: rotateX(68deg) rotateY(-12deg) rotateZ(360deg); }
}

@keyframes uclOrbitMiddle {
  0% { transform: rotateX(72deg) rotateY(16deg) rotateZ(360deg); }
  100% { transform: rotateX(72deg) rotateY(16deg) rotateZ(0deg); }
}

@keyframes uclOrbitInner {
  0% { transform: rotateX(62deg) rotateY(0deg) rotateZ(0deg); }
  100% { transform: rotateX(62deg) rotateY(0deg) rotateZ(360deg); }
}

.logo-spinner {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: spinCrest3D 9.5s linear infinite;
  will-change: transform;
}

.logo-spinner.mode-orbit {
  animation: starballOrbit3D 7s ease-in-out infinite;
}

.logo-spinner.mode-pulse {
  animation: trophyFloat 4.2s ease-in-out infinite;
}

.logo-stage:hover .logo-spinner:not(.mode-pulse) {
  animation-duration: 5.5s;
}

@keyframes spinCrest3D {
  0% { transform: translateY(0px) rotateX(4deg) rotateY(0deg); }
  25% { transform: translateY(-10px) rotateX(-3deg) rotateY(90deg); }
  50% { transform: translateY(0px) rotateX(4deg) rotateY(180deg); }
  75% { transform: translateY(10px) rotateX(-3deg) rotateY(270deg); }
  100% { transform: translateY(0px) rotateX(4deg) rotateY(360deg); }
}

@keyframes starballOrbit3D {
  0% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1); }
  33% { transform: rotateY(120deg) rotateX(16deg) rotateZ(-5deg) scale(1.04); }
  66% { transform: rotateY(240deg) rotateX(-16deg) rotateZ(5deg) scale(1.04); }
  100% { transform: rotateY(360deg) rotateX(0deg) rotateZ(0deg) scale(1); }
}

@keyframes trophyFloat {
  0%, 100% { transform: translateY(0px) rotateY(-12deg) rotateX(5deg) scale(1); }
  50% { transform: translateY(-14px) rotateY(12deg) rotateX(-5deg) scale(1.05); }
}

.logo-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.logo-front {
  transform: rotateY(0deg) translateZ(2px);
}

.logo-back {
  transform: rotateY(180deg) translateZ(2px);
}

.ucl-logo-img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 14px rgba(130, 195, 255, 0.75))
    drop-shadow(0 0 38px rgba(30, 107, 255, 0.6))
    drop-shadow(0 8px 24px rgba(0, 0, 0, 0.75));
  transition: filter 0.35s ease, transform 0.35s ease;
}

.logo-stage:hover .ucl-logo-img {
  filter:
    drop-shadow(0 0 22px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 55px rgba(60, 145, 255, 0.85))
    drop-shadow(0 0 85px rgba(245, 196, 81, 0.35));
}

/* =========================================================
   CHAMPIONS LEAGUE ENTER STADIUM CTA BUTTON & INTRO CA BAR
   ========================================================= */
.enter-cta-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 15;
}

.tagline-pill {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tagline-line {
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ucl-silver-chrome), transparent);
}

.tagline-stars {
  color: var(--ucl-gold);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  filter: drop-shadow(0 0 6px rgba(245, 196, 81, 0.7));
}

.tagline-text {
  font-family: var(--font-serif-crest);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--ucl-silver-bright);
  text-shadow: 0 0 14px rgba(96, 181, 255, 0.65);
}

.enter-btn {
  position: relative;
  min-width: 310px;
  padding: 16px 48px;
  background: linear-gradient(
    135deg,
    rgba(18, 52, 138, 0.88) 0%,
    rgba(7, 22, 68, 0.96) 55%,
    rgba(14, 42, 118, 0.9) 100%
  );
  border: 1px solid rgba(205, 228, 255, 0.65);
  color: #ffffff;
  font-family: var(--font-broadcast);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  clip-path: polygon(
    16px 0%,
    100% 0%,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    0% 100%,
    0% 16px
  );
  box-shadow:
    0 0 28px rgba(30, 107, 255, 0.45),
    0 10px 30px rgba(0, 0, 0, 0.6),
    inset 0 0 22px rgba(160, 210, 255, 0.22);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.38),
    rgba(245, 196, 81, 0.25),
    transparent
  );
  transform: translateX(-100%);
  transition: transform 0.65s ease;
  pointer-events: none;
}

.enter-btn:hover .btn-sheen {
  transform: translateX(100%);
}

.enter-btn:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: #ffffff;
  background: linear-gradient(
    135deg,
    rgba(30, 96, 235, 0.92) 0%,
    rgba(12, 38, 110, 0.98) 60%,
    rgba(25, 82, 210, 0.92) 100%
  );
  box-shadow:
    0 0 38px rgba(96, 181, 255, 0.85),
    0 0 80px rgba(30, 107, 255, 0.55),
    inset 0 0 30px rgba(255, 255, 255, 0.35);
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.9);
}

.btn-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.btn-starball {
  width: 20px;
  height: 20px;
  color: var(--ucl-gold);
  filter: drop-shadow(0 0 8px rgba(245, 196, 81, 0.85));
  transition: transform 0.45s ease;
}

.enter-btn:hover .btn-starball {
  transform: rotate(72deg) scale(1.15);
}

.btn-arrow {
  width: 20px;
  height: 20px;
  stroke: var(--ucl-silver-bright);
  transition: transform 0.3s ease;
  filter: drop-shadow(0 0 6px var(--ucl-cyan-ice));
}

.enter-btn:hover .btn-arrow {
  transform: translateX(6px);
}

.btn-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--ucl-gold);
  border-style: solid;
  pointer-events: none;
}

.btn-corner.tl { top: 4px; left: 4px; border-width: 2px 0 0 2px; }
.btn-corner.tr { top: 4px; right: 4px; border-width: 2px 2px 0 0; }
.btn-corner.bl { bottom: 4px; left: 4px; border-width: 0 0 2px 2px; }
.btn-corner.br { bottom: 4px; right: 4px; border-width: 0 2px 2px 0; }

/* Intro CA Box */
.intro-ca-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(3, 12, 36, 0.88);
  border: 1px solid rgba(160, 205, 255, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  padding: 5px 8px 5px 10px;
  backdrop-filter: blur(8px);
  max-width: 92vw;
}

.intro-ca-badge {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--ucl-midnight);
  background: var(--ucl-gold);
  padding: 4px 8px;
}

.intro-ca-code {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: #e6f4ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.intro-copy-btn {
  background: rgba(30, 107, 255, 0.25);
  border: 1px solid var(--ucl-cyan-ice);
  color: #ffffff;
  font-family: var(--font-broadcast);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.intro-copy-btn:hover {
  background: var(--ucl-gold);
  border-color: var(--ucl-gold);
  color: var(--ucl-midnight);
}

.intro-pump-link {
  text-decoration: none;
  background: linear-gradient(90deg, var(--ucl-blue-bright), var(--ucl-cyan-ice));
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 6px 10px;
  white-space: nowrap;
}

.enter-subtext {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(191, 212, 242, 0.78);
  text-align: center;
}

.enter-subtext strong {
  color: var(--ucl-gold);
}

/* =========================================================
   MAIN CHAMPIONS LEAGUE HUB (WORLDCUPONPUMP × UCL BROADCAST)
   ========================================================= */
.main-site {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, #112d7c 0%, #061133 45%, #020514 100%);
  display: flex;
  flex-direction: column;
  z-index: 50;
  opacity: 1;
  transition: opacity 0.7s ease;
}

.main-site.hidden {
  opacity: 0;
  pointer-events: none;
}

.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Top Live Ticker Bar */
.live-ticker-bar {
  display: flex;
  align-items: center;
  background: #020618;
  border-bottom: 2px solid rgba(245, 196, 81, 0.45);
  height: 34px;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.ticker-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ucl-gold);
  color: var(--ucl-midnight);
  font-weight: 900;
  padding: 0 16px;
  height: 100%;
  white-space: nowrap;
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #047857;
  animation: pulseKickoff 1.4s infinite;
}

.ticker-marquee {
  flex: 1;
  overflow: hidden;
}

.ticker-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  animation: tickerSlide 32s linear infinite;
  color: var(--ucl-silver-chrome);
}

.ticker-track strong {
  color: #ffffff;
}

@keyframes tickerSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Sticky Broadcast Header (WorldCupOnPump Diagonal Wedge Style) */
.ucl-header {
  background: var(--ucl-ink);
  border-bottom: 4px solid var(--ucl-gold);
  flex-shrink: 0;
  z-index: 40;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.header-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 68px;
  max-width: 1480px;
  margin: 0 auto;
}

.brand-wedge {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #0d276b 0%, #1945b8 100%);
  padding: 8px 38px 8px 22px;
  text-decoration: none;
  color: #ffffff;
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
  border-right: 3px solid var(--ucl-gold);
}

.brand-crest {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
}

.brand-titles {
  display: flex;
  flex-direction: column;
}

.brand-main {
  font-family: var(--font-scoreboard);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.06em;
  color: #ffffff;
}

.gold-accent {
  color: var(--ucl-gold);
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--ucl-silver-chrome);
  margin-top: 2px;
}

.primary-nav {
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.nav-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--ucl-silver-chrome);
  font-family: var(--font-broadcast);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 0 22px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-tab:hover {
  color: #ffffff;
  background: rgba(30, 107, 255, 0.15);
}

.nav-tab.active {
  background: var(--ucl-gold);
  color: var(--ucl-midnight);
}

.tab-pill {
  background: var(--ucl-midnight);
  color: var(--ucl-gold);
  font-size: 0.64rem;
  padding: 2px 7px;
  font-weight: 900;
}

.nav-tab:not(.active) .tab-pill {
  background: rgba(30, 107, 255, 0.35);
  color: #ffffff;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 22px;
}

.sync-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.45);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  color: #6ee7b7;
}

.sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ucl-turf-green);
  box-shadow: 0 0 8px var(--ucl-turf-green);
}

.header-pump-cta {
  text-decoration: none;
  background: var(--ucl-gold);
  color: var(--ucl-midnight);
  font-weight: 900;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  padding: 10px 18px;
  border: 2px solid #ffffff;
  box-shadow: 4px 4px 0 #000000;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.header-pump-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000000;
}

.header-intro-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--ucl-border);
  color: #ffffff;
  font-family: var(--font-broadcast);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 9px 14px;
  cursor: pointer;
}

.header-intro-btn:hover {
  border-color: var(--ucl-gold);
  color: var(--ucl-gold);
}

/* Main Scrollable Area & Tab Panels */
.site-scroll-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* =========================================================
   JUMBOTRON HERO & ECOSYSTEM SCOREBOARD (WORLDCUPONPUMP STYLE)
   ========================================================= */
.jumbotron-section {
  padding: 36px 0 26px;
  position: relative;
}

.jumbotron-grid {
  display: grid;
  grid-template-columns: 1fr 390px;
  gap: 24px;
  align-items: stretch;
}

.jumbotron-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(145deg, #091945 0%, #040b24 100%);
  border: 4px solid #ffffff;
  box-shadow: 10px 10px 0 #01030b;
  overflow: hidden;
}

.jumbo-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ucl-ink);
  border-bottom: 3px solid var(--ucl-gold);
  padding: 12px 20px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.jumbo-live-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ucl-gold);
}

.live-red-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px #ef4444;
  animation: pulseKickoff 1.2s infinite;
}

.jumbo-stage-tag {
  color: var(--ucl-silver-chrome);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.jumbo-match-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 34px 28px;
  background:
    radial-gradient(circle at 50% 50%, rgba(30, 107, 255, 0.24) 0%, transparent 70%);
}

.jumbo-team {
  display: flex;
  align-items: center;
  gap: 16px;
}

.jumbo-team.away {
  justify-content: flex-end;
}

.jumbo-crest-badge {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--club-bg, #1e6bff);
  color: var(--club-fg, #ffffff);
  border: 3px solid #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-scoreboard);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.jumbo-team-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jumbo-team-info.right {
  text-align: right;
  align-items: flex-end;
}

.jumbo-club-name {
  font-family: var(--font-scoreboard);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 0.95;
  text-transform: uppercase;
  color: #ffffff;
}

.jumbo-token-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid var(--ucl-turf-green);
  color: #6ee7b7;
}

.jumbo-score-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.jumbo-score-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ucl-ink);
  border: 3px solid var(--ucl-gold);
  padding: 6px 24px;
  font-family: var(--font-scoreboard);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 0.9;
  color: #ffffff;
  box-shadow: 6px 6px 0 #000000;
}

.score-divider {
  color: var(--ucl-gold);
}

.jumbo-match-clock {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ucl-gold);
  letter-spacing: 0.15em;
}

.jumbo-deployment-footer {
  background: rgba(2, 6, 22, 0.9);
  border-top: 2px solid rgba(191, 212, 242, 0.2);
  padding: 14px 20px;
}

.deploy-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-bottom: 8px;
}

.gold-text {
  color: var(--ucl-gold);
}

.deploy-progress-track {
  width: 100%;
  height: 10px;
  background: #020514;
  border: 1px solid rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.deploy-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ucl-blue-bright), var(--ucl-gold));
}

/* Right Column Stat Posters */
.jumbo-stats-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stat-poster {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 24px;
  border: 4px solid #ffffff;
  box-shadow: 8px 8px 0 #01030b;
}

.stat-poster.royal {
  background: linear-gradient(135deg, #123596 0%, #081b54 100%);
  color: #ffffff;
}

.stat-poster.gold {
  background: var(--ucl-gold);
  color: var(--ucl-midnight);
  border-color: var(--ucl-midnight);
}

.poster-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-top: 20px solid #ffffff;
}

.stat-poster.gold .poster-corner {
  border-top-color: var(--ucl-midnight);
}

.poster-label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.9;
}

.poster-big-value {
  font-family: var(--font-scoreboard);
  font-size: 3.3rem;
  font-weight: 700;
  line-height: 0.95;
  margin-top: 4px;
}

.poster-sub {
  font-size: 0.74rem;
  font-weight: 700;
  margin-top: 6px;
  opacity: 0.9;
}

/* =========================================================
   GIANT PUMP.FUN CTA STRIP & CA TERMINAL
   ========================================================= */
.pump-cta-strip {
  padding: 12px 0 28px;
}

.pump-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--ucl-ink);
  border: 3px solid var(--ucl-silver-chrome);
  padding: 18px 24px;
  box-shadow: 8px 8px 0 #000000;
}

.pump-ca-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.ca-pill-label {
  background: var(--ucl-blue-bright);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  padding: 6px 12px;
}

.ca-mono-text {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  padding: 8px 14px;
  border: 1px solid var(--ucl-border);
}

.ca-copy-button {
  background: transparent;
  border: 2px solid var(--ucl-gold);
  color: var(--ucl-gold);
  font-family: var(--font-broadcast);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ca-copy-button:hover {
  background: var(--ucl-gold);
  color: var(--ucl-midnight);
}

.giant-pump-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  background: var(--ucl-gold);
  color: var(--ucl-midnight);
  border: 3px solid #ffffff;
  padding: 14px 28px;
  font-family: var(--font-scoreboard);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  box-shadow: 6px 6px 0 #000000;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.giant-pump-btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 #000000;
  background: var(--ucl-gold-hot);
}

/* =========================================================
   8-MATCH TOKEN DEPLOYMENT MECHANICS BANNER
   ========================================================= */
.mechanics-banner-section {
  padding: 8px 0 36px;
}

.mechanics-banner {
  background: linear-gradient(135deg, #102a75 0%, #071540 100%);
  border: 4px solid var(--ucl-gold);
  box-shadow: 10px 10px 0 #01030b;
  padding: 28px 30px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
  align-items: center;
}

.mechanics-badge {
  display: inline-block;
  background: var(--ucl-gold);
  color: var(--ucl-midnight);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  padding: 5px 12px;
  margin-bottom: 12px;
}

.mechanics-title {
  font-family: var(--font-scoreboard);
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  line-height: 0.95;
  color: #ffffff;
  margin-bottom: 10px;
}

.mechanics-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ucl-silver-chrome);
}

.mechanics-desc strong {
  color: #ffffff;
}

.mechanics-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mech-step {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(2, 6, 23, 0.72);
  border: 2px solid rgba(191, 212, 242, 0.3);
  padding: 12px 16px;
}

.mech-step.highlight {
  border-color: var(--ucl-gold);
  background: rgba(245, 196, 81, 0.12);
}

.step-num {
  font-family: var(--font-scoreboard);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ucl-gold);
}

.mech-step h4 {
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
}

.mech-step p {
  font-size: 0.78rem;
  color: var(--ucl-silver-chrome);
  margin-top: 2px;
}

/* =========================================================
   SECTION HEADERS & FILTER PILLS
   ========================================================= */
.live-matches-section,
.standings-section,
.spotlight-and-boot-section,
.token-terminal-section,
.clubs-directory-section,
.tournament-center-section {
  padding: 24px 0 42px;
}

.section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.section-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--ucl-gold);
  margin-bottom: 4px;
}

.section-heading {
  font-family: var(--font-scoreboard);
  font-size: clamp(2.1rem, 3.8vw, 3.2rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: #ffffff;
  text-transform: uppercase;
}

.section-heading-sm {
  font-family: var(--font-scoreboard);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 0.95;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.section-subcopy {
  max-width: 680px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ucl-silver-chrome);
  margin-top: 6px;
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-pill {
  background: var(--ucl-ink);
  border: 2px solid rgba(191, 212, 242, 0.35);
  color: var(--ucl-silver-chrome);
  font-family: var(--font-broadcast);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-pill:hover {
  border-color: #ffffff;
  color: #ffffff;
}

.filter-pill.active {
  background: var(--ucl-gold);
  border-color: var(--ucl-gold);
  color: var(--ucl-midnight);
}

.filter-pill.simulate-btn {
  background: rgba(16, 185, 129, 0.18);
  border-color: var(--ucl-turf-green);
  color: #6ee7b7;
}

.filter-pill.simulate-btn:hover {
  background: var(--ucl-turf-green);
  color: var(--ucl-midnight);
}

/* =========================================================
   LIVE GAMES & MATCHDAY RESULTS CARDS
   ========================================================= */
.matches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.match-card {
  background: linear-gradient(145deg, #08163f 0%, #040b22 100%);
  border: 3px solid rgba(191, 212, 242, 0.45);
  box-shadow: 6px 6px 0 #01030b;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.match-card:hover {
  transform: translate(-2px, -2px);
  border-color: var(--ucl-gold);
}

.match-card.is-live {
  border-color: var(--ucl-turf-green);
}

.match-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ucl-silver-chrome);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}

.match-status-pill {
  padding: 2px 8px;
  font-weight: 800;
  font-size: 0.65rem;
}

.match-status-pill.live {
  background: rgba(16, 185, 129, 0.22);
  color: #6ee7b7;
  border: 1px solid var(--ucl-turf-green);
}

.match-status-pill.ft {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.match-status-pill.upcoming {
  background: rgba(245, 196, 81, 0.18);
  color: var(--ucl-gold);
}

.match-teams-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.match-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.match-team-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mini-club-crest {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--club-bg, #1e6bff);
  color: var(--club-fg, #ffffff);
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-scoreboard);
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

.match-team-name {
  font-weight: 800;
  font-size: 0.88rem;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-team-ticker {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--ucl-gold);
}

.match-team-score {
  font-family: var(--font-scoreboard);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

.match-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.66rem;
  color: rgba(191, 212, 242, 0.7);
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

/* =========================================================
   36-CLUB CHAMPIONS LEAGUE STANDINGS TABLE
   ========================================================= */
.table-zone-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  background: var(--ucl-ink);
  border: 1px solid var(--ucl-border);
}

.legend-chip .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.zone-top8 .dot { background: var(--ucl-turf-green); }
.zone-playoff .dot { background: var(--ucl-cyan-ice); }
.zone-elim .dot { background: var(--ucl-red-elim); }

.table-card {
  background: var(--ucl-ink);
  border: 3px solid #ffffff;
  box-shadow: 10px 10px 0 #01030b;
  overflow: hidden;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
}

.ucl-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.84rem;
}

.ucl-table thead tr {
  background: #091a4d;
  border-bottom: 3px solid var(--ucl-gold);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--ucl-silver-chrome);
}

.ucl-table th,
.ucl-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(191, 212, 242, 0.12);
}

.ucl-table tbody tr {
  transition: background 0.15s ease;
}

.ucl-table tbody tr:hover {
  background: rgba(30, 107, 255, 0.18);
}

/* Zone Left Accent Bars & Cutoff Dividers */
.ucl-table tbody tr.row-top8 {
  border-left: 5px solid var(--ucl-turf-green);
}

.ucl-table tbody tr.row-playoff {
  border-left: 5px solid var(--ucl-cyan-ice);
}

.ucl-table tbody tr.row-elim {
  border-left: 5px solid var(--ucl-red-elim);
  opacity: 0.82;
}

.ucl-table tbody tr.cutoff-row-8,
.ucl-table tbody tr.cutoff-row-24 {
  border-bottom: 3px dashed var(--ucl-gold);
}

.col-pos {
  width: 44px;
  font-family: var(--font-scoreboard);
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
}

.club-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: #ffffff;
}

.ticker-badge-cell {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 7px;
  background: rgba(30, 107, 255, 0.2);
  border: 1px solid rgba(96, 181, 255, 0.45);
  color: var(--ucl-gold);
}

.col-stat {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.col-pts {
  text-align: center;
  font-family: var(--font-scoreboard);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--ucl-gold);
}

.form-pills {
  display: flex;
  gap: 4px;
}

.form-dot {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 800;
  color: #020514;
}

.form-dot.W { background: var(--ucl-turf-green); color: #020514; }
.form-dot.D { background: var(--ucl-silver-chrome); color: #020514; }
.form-dot.L { background: var(--ucl-red-elim); color: #ffffff; }

.status-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  white-space: nowrap;
}

.status-tag.top8 {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid var(--ucl-turf-green);
  color: #6ee7b7;
}

.status-tag.playoff {
  background: rgba(96, 181, 255, 0.18);
  border: 1px solid var(--ucl-cyan-ice);
  color: #bae6fd;
}

.status-tag.elim {
  background: rgba(244, 63, 94, 0.18);
  border: 1px solid var(--ucl-red-elim);
  color: #fda4af;
}

/* =========================================================
   SPOTLIGHT CARDS & GOLDEN BOOT RACE (WORLDCUPONPUMP STYLE)
   ========================================================= */
.dual-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.club-spotlight-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.spotlight-poster-card {
  position: relative;
  border: 3px solid #ffffff;
  box-shadow: 7px 7px 0 #01030b;
  padding: 20px 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 175px;
}

.spotlight-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.spotlight-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 3px 8px;
  background: #020514;
  border: 1px solid var(--ucl-gold);
  color: var(--ucl-gold);
}

.spotlight-club-title {
  font-family: var(--font-scoreboard);
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 0.95;
  color: #ffffff;
  margin-top: 6px;
  text-transform: uppercase;
}

.spotlight-bottom-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--font-mono);
}

.sp-stat-k {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
}

.sp-stat-v {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  margin-top: 2px;
}

.see-all-clubs-btn {
  margin-top: 16px;
  width: 100%;
  padding: 13px 20px;
  background: var(--ucl-ink);
  border: 3px solid var(--ucl-gold);
  color: var(--ucl-gold);
  font-family: var(--font-broadcast);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: all 0.15s ease;
}

.see-all-clubs-btn:hover {
  background: var(--ucl-gold);
  color: var(--ucl-midnight);
}

/* Golden Boot Leaderboard */
.boot-board {
  background: var(--ucl-ink);
  border: 3px solid #ffffff;
  box-shadow: 7px 7px 0 #01030b;
}

.boot-row {
  display: grid;
  grid-template-columns: 36px 1fr 70px 70px;
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(191, 212, 242, 0.14);
}

.boot-row.header {
  background: #091a4d;
  border-bottom: 3px solid var(--ucl-gold);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--ucl-silver-chrome);
}

.boot-rank {
  font-family: var(--font-scoreboard);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ucl-gold);
}

.boot-player-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.boot-player-name {
  font-weight: 800;
  font-size: 0.88rem;
  color: #ffffff;
}

.boot-player-club {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ucl-silver-chrome);
}

.boot-goals {
  text-align: right;
  font-family: var(--font-scoreboard);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--ucl-gold);
}

.boot-assists {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ucl-silver-chrome);
}

/* =========================================================
   TAB 2: $UCL TOKEN TERMINAL
   ========================================================= */
.token-hero-card {
  background: linear-gradient(145deg, #0b1f56 0%, #040b24 100%);
  border: 4px solid var(--ucl-gold);
  box-shadow: 12px 12px 0 #01030b;
  padding: 36px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
}

.token-big-title {
  font-family: var(--font-scoreboard);
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  line-height: 0.92;
  color: #ffffff;
  margin-bottom: 14px;
}

.token-lead {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ucl-silver-chrome);
  margin-bottom: 22px;
}

.token-ca-box {
  background: #020514;
  border: 2px solid var(--ucl-border);
  padding: 16px;
  margin-bottom: 22px;
}

.token-ca-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ucl-gold);
  letter-spacing: 0.16em;
  margin-bottom: 8px;
}

.token-ca-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.token-ca-row code {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: #ffffff;
}

.token-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.secondary-action-btn {
  padding: 15px 24px;
  background: transparent;
  border: 3px solid #ffffff;
  color: #ffffff;
  font-family: var(--font-broadcast);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  cursor: pointer;
}

.secondary-action-btn:hover {
  border-color: var(--ucl-gold);
  color: var(--ucl-gold);
}

.token-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.metric-tile {
  background: var(--ucl-ink);
  border: 3px solid #ffffff;
  padding: 20px;
  box-shadow: 6px 6px 0 #01030b;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.metric-name {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ucl-silver-chrome);
}

.metric-val {
  font-family: var(--font-scoreboard);
  font-size: 2.2rem;
  line-height: 0.95;
  color: #ffffff;
}

.metric-val.gold { color: var(--ucl-gold); }
.metric-val.green { color: var(--ucl-turf-green); }
.metric-val.red { color: var(--ucl-red-elim); }

.metric-note {
  font-size: 0.74rem;
  color: var(--ucl-silver-chrome);
}

/* =========================================================
   TAB 3: 36 CLUBS → 24 TOKENS DIRECTORY
   ========================================================= */
.clubs-header-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 24px;
}

.clubs-summary-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mini-stat-box {
  background: var(--ucl-ink);
  border: 2px solid var(--ucl-border);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
}

.mini-stat-box span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--ucl-silver-chrome);
}

.mini-stat-box strong {
  font-family: var(--font-scoreboard);
  font-size: 1.6rem;
  line-height: 1;
  margin-top: 2px;
}

.mini-stat-box strong.green { color: var(--ucl-turf-green); }
.mini-stat-box strong.gold { color: var(--ucl-gold); }
.mini-stat-box strong.cyan { color: var(--ucl-cyan-ice); }
.mini-stat-box strong.red { color: var(--ucl-red-elim); }

.clubs-Filter-bar {
  margin-bottom: 22px;
}

.clubs-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}

.club-token-card {
  position: relative;
  border: 3px solid rgba(255, 255, 255, 0.75);
  box-shadow: 7px 7px 0 #01030b;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 190px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.club-token-card:hover {
  transform: translate(-3px, -3px);
  border-color: var(--ucl-gold);
}

.club-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.club-rank-pill {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  background: rgba(2, 5, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.club-card-title {
  font-family: var(--font-scoreboard);
  font-size: 2rem;
  line-height: 0.95;
  color: #ffffff;
  margin-top: 8px;
  text-transform: uppercase;
}

.club-card-ticker {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  background: #020514;
  color: var(--ucl-gold);
  border: 1px solid var(--ucl-gold);
  padding: 2px 8px;
}

.club-card-foot {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

/* =========================================================
   TAB 4: KNOCKOUT BRACKET & TOURNAMENT FIXTURES
   ========================================================= */
.knockout-stage-banner {
  background: var(--ucl-ink);
  border: 3px solid var(--ucl-gold);
  box-shadow: 9px 9px 0 #01030b;
  padding: 24px;
  margin-bottom: 36px;
}

.bracket-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.bracket-col {
  background: rgba(12, 29, 82, 0.45);
  border: 2px solid var(--ucl-border);
  padding: 16px;
}

.bracket-col-title {
  font-family: var(--font-scoreboard);
  font-size: 1.5rem;
  color: var(--ucl-gold);
  letter-spacing: 0.06em;
  border-bottom: 2px solid rgba(245, 196, 81, 0.35);
  padding-bottom: 6px;
  margin-bottom: 12px;
}

.bracket-tie {
  background: #020618;
  border: 1px solid rgba(191, 212, 242, 0.28);
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 0.76rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bracket-tie strong {
  color: var(--ucl-gold);
  font-family: var(--font-mono);
}

/* =========================================================
   SITE FOOTER & FLOATING STADIUM ANTHEM PLAYER
   ========================================================= */
.ucl-footer {
  background: #01030c;
  border-top: 4px solid var(--ucl-gold);
  padding: 28px 0;
  margin-top: 40px;
}

.footer-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.footer-brand-col {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-crest {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.footer-title {
  font-family: var(--font-scoreboard);
  font-size: 1.4rem;
  color: #ffffff;
  letter-spacing: 0.08em;
}

.footer-disclaimer {
  font-size: 0.72rem;
  color: var(--ucl-silver-chrome);
  max-width: 540px;
}

.footer-links-col {
  display: flex;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ucl-gold);
}

/* Floating Anthem Synth Player */
.floating-anthem-widget {
  position: fixed;
  bottom: 20px;
  right: 22px;
  z-index: 90;
}

.anthem-toggle-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ucl-ink);
  border: 3px solid var(--ucl-gold);
  box-shadow: 6px 6px 0 #000000;
  color: #ffffff;
  padding: 10px 16px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.anthem-toggle-btn:hover {
  transform: translate(-2px, -2px);
}

.anthem-ball-icon {
  font-size: 1.35rem;
}

.anthem-meta {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.anthem-title {
  font-family: var(--font-scoreboard);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ucl-gold);
  letter-spacing: 0.08em;
}

.anthem-status {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--ucl-silver-chrome);
}

.anthem-play-glyph {
  width: 28px;
  height: 28px;
  background: var(--ucl-gold);
  color: var(--ucl-midnight);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.8rem;
}

.intro-anthem-toggle {
  background: transparent;
  border: none;
  color: var(--ucl-gold);
  font-family: var(--font-broadcast);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.intro-anthem-toggle:hover {
  color: #ffffff;
  text-shadow: 0 0 12px var(--ucl-gold);
}

.club-logo-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.jumbo-logo-img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.65));
}

/* =========================================================
   4-PILLAR CREATOR FEE, BURN & 24-TOKEN DEPLOY FLYWHEEL
   ========================================================= */
.flywheel-container {
  background: linear-gradient(145deg, #0c2263 0%, #051133 100%);
  border: 4px solid var(--ucl-gold);
  box-shadow: 10px 10px 0 #01030b;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.flywheel-top-header {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
  align-items: center;
}

.flywheel-stage-box {
  background: rgba(2, 6, 22, 0.88);
  border: 3px solid #ffffff;
  padding: 18px;
  box-shadow: 6px 6px 0 #000000;
}

.stage-box-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--ucl-gold);
  margin-bottom: 10px;
}

.stage-selector-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.stage-btn {
  background: var(--ucl-ink);
  border: 2px solid rgba(191, 212, 242, 0.35);
  color: var(--ucl-silver-chrome);
  font-family: var(--font-broadcast);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.stage-btn:hover {
  border-color: #ffffff;
  color: #ffffff;
}

.stage-btn.active {
  background: var(--ucl-gold);
  border-color: var(--ucl-gold);
  color: var(--ucl-midnight);
}

.stage-live-readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
}

.readout-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.readout-item span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--ucl-silver-chrome);
}

.readout-item strong {
  font-family: var(--font-scoreboard);
  font-size: 1.45rem;
  line-height: 1;
  color: #ffffff;
}

.readout-item strong.gold { color: var(--ucl-gold); }
.readout-item strong.green { color: var(--ucl-turf-green); }
.readout-item strong.red { color: var(--ucl-red-elim); }

.flywheel-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.flywheel-pillar {
  background: rgba(3, 9, 28, 0.85);
  border: 3px solid rgba(191, 212, 242, 0.45);
  box-shadow: 6px 6px 0 #01030b;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.flywheel-pillar:hover {
  transform: translate(-3px, -3px);
  border-color: var(--ucl-gold);
}

.flywheel-pillar.featured {
  border-color: var(--ucl-gold);
  background: linear-gradient(155deg, rgba(245, 196, 81, 0.14) 0%, rgba(3, 9, 28, 0.92) 100%);
}

.pillar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pillar-num {
  font-family: var(--font-scoreboard);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 0.9;
  color: var(--ucl-gold);
}

.pillar-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 8px;
  background: rgba(30, 107, 255, 0.25);
  border: 1px solid var(--ucl-cyan-ice);
  color: #ffffff;
}

.pillar-tag.gold {
  background: var(--ucl-gold);
  border-color: var(--ucl-gold);
  color: var(--ucl-midnight);
}

.pillar-tag.green {
  background: rgba(16, 185, 129, 0.22);
  border-color: var(--ucl-turf-green);
  color: #6ee7b7;
}

.flywheel-pillar h3 {
  font-family: var(--font-scoreboard);
  font-size: 1.65rem;
  line-height: 0.95;
  color: #ffffff;
  text-transform: uppercase;
}

.flywheel-pillar p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ucl-silver-chrome);
}

.flywheel-pillar p strong {
  color: #ffffff;
}

.pillar-foot {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 800;
  color: var(--ucl-gold);
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.fee-schedule-block {
  margin-top: 36px;
}

/* Native-Style Mobile Bottom Tab Bar (Hidden on Desktop) */
.mobile-bottom-nav {
  display: none;
}

/* Support 100dvh on modern mobile browsers */
@supports (height: 100dvh) {
  html,
  body,
  .intro-screen,
  .main-site {
    height: 100dvh;
  }
}

/* Disable tap flash & improve touch responsiveness */
button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* =========================================================
   RESPONSIVE BREAKPOINTS (TABLET & MOBILE PERFECTION)
   ========================================================= */
@media (max-width: 1080px) {
  .jumbotron-grid,
  .mechanics-banner,
  .flywheel-top-header,
  .dual-feature-grid,
  .token-hero-card {
    grid-template-columns: 1fr;
  }

  .jumbo-stats-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .flywheel-pillars-grid,
  .bracket-columns {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 820px) {
  .container {
    padding: 0 14px;
  }

  /* ---- INTRO GATE MOBILE LAYOUT ---- */
  .broadcast-top {
    padding: max(10px, env(safe-area-inset-top)) 12px 6px;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .broadcast-center-banner {
    order: -1;
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    padding: 5px 10px;
  }

  .broadcast-top-right,
  .broadcast-bottom-left,
  .hide-md {
    display: none;
  }

  .broadcast-pill {
    padding: 5px 12px;
    font-size: 0.64rem;
  }

  .intro-centerpiece {
    gap: clamp(8px, 1.8dvh, 18px);
    padding: 0 12px;
  }

  .logo-stage {
    width: clamp(165px, 29dvh, 250px);
    height: clamp(155px, 27dvh, 235px);
  }

  .tagline-line {
    width: 24px;
  }

  .tagline-text {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
  }

  .enter-btn {
    min-width: 0;
    width: min(88vw, 310px);
    padding: 14px 22px;
    font-size: 0.9rem;
    letter-spacing: 0.18em;
  }

  .intro-ca-box {
    width: min(92vw, 360px);
    justify-content: space-between;
    gap: 6px;
    padding: 5px 6px;
  }

  .intro-ca-badge {
    font-size: 0.58rem;
    padding: 3px 6px;
    flex-shrink: 0;
  }

  .intro-ca-code {
    font-size: 0.65rem;
    max-width: 135px;
  }

  .intro-copy-btn,
  .intro-pump-link {
    font-size: 0.6rem;
    padding: 5px 8px;
    flex-shrink: 0;
  }

  .enter-subtext {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    line-height: 1.35;
    max-width: 90vw;
  }

  .broadcast-bottom {
    padding: 6px 12px max(10px, env(safe-area-inset-bottom));
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .broadcast-chip {
    font-size: 0.6rem;
    padding: 5px 9px;
    letter-spacing: 0.1em;
  }

  .intro-anthem-toggle {
    font-size: 0.64rem;
  }

  /* ---- MAIN SITE HEADER & BOTTOM APP BAR ON MOBILE ---- */
  .live-ticker-bar {
    height: 28px;
    font-size: 0.64rem;
  }

  .ticker-badge {
    padding: 0 10px;
    font-size: 0.6rem;
  }

  .ucl-header {
    border-bottom: 3px solid var(--ucl-gold);
  }

  .header-inner {
    min-height: 54px;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .brand-wedge {
    padding: 6px 22px 6px 12px;
    gap: 9px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  }

  .brand-crest {
    width: 34px;
    height: 34px;
  }

  .brand-main {
    font-size: 1.35rem;
  }

  .brand-sub {
    font-size: 0.52rem;
    letter-spacing: 0.1em;
  }

  /* Hide desktop top nav & sync badge; use bottom native tab bar instead */
  .primary-nav,
  .sync-badge {
    display: none;
  }

  .header-actions {
    gap: 8px;
    padding-right: 10px;
  }

  .header-pump-cta {
    font-size: 0.66rem;
    padding: 8px 11px;
    box-shadow: 3px 3px 0 #000000;
    white-space: nowrap;
  }

  .header-intro-btn {
    font-size: 0.64rem;
    padding: 7px 9px;
    white-space: nowrap;
  }

  /* Scroll area bottom space for fixed bottom nav + floating audio pill */
  .site-scroll-area {
    padding-bottom: calc(126px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  /* Native-style Bottom App Bar */
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(3, 8, 26, 0.96);
    backdrop-filter: blur(14px);
    border-top: 3px solid var(--ucl-gold);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    z-index: 95;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.75);
  }

  .mob-nav-btn {
    position: relative;
    background: transparent;
    border: none;
    color: var(--ucl-silver-chrome);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: var(--font-broadcast);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .mob-nav-icon {
    width: 20px;
    height: 20px;
  }

  .mob-nav-btn.active {
    background: var(--ucl-gold);
    color: var(--ucl-midnight);
  }

  /* ---- JUMBOTRON SCOREBOARD ON MOBILE (HORIZONTAL BROADCAST LAYOUT) ---- */
  .jumbotron-section {
    padding: 16px 0 14px;
  }

  .jumbotron-grid {
    gap: 14px;
  }

  .jumbotron-card {
    border-width: 3px;
    box-shadow: 6px 6px 0 #01030b;
  }

  .jumbo-topbar {
    padding: 8px 12px;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    flex-wrap: wrap;
    gap: 4px;
  }

  .jumbo-stage-tag {
    font-size: 0.58rem;
  }

  .jumbo-match-body {
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    padding: 18px 10px;
    text-align: center;
  }

  .jumbo-team,
  .jumbo-team.away {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }

  .jumbo-team.away .jumbo-team-info.right {
    order: 2;
    text-align: center;
    align-items: center;
  }

  .jumbo-team-info {
    align-items: center;
    text-align: center;
  }

  .jumbo-logo-img,
  .jumbo-crest-badge {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }

  .jumbo-club-name {
    font-size: 1.25rem;
    line-height: 1;
  }

  .jumbo-token-tag {
    font-size: 0.56rem;
    padding: 2px 6px;
  }

  .jumbo-score-pill {
    font-size: 2.2rem;
    padding: 4px 14px;
    gap: 8px;
    border-width: 2px;
    box-shadow: 4px 4px 0 #000000;
  }

  .jumbo-match-clock {
    font-size: 0.62rem;
  }

  .jumbo-deployment-footer {
    padding: 10px 12px;
  }

  .deploy-progress-head {
    font-size: 0.58rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .stat-poster {
    padding: 14px 12px;
    border-width: 3px;
    box-shadow: 5px 5px 0 #01030b;
  }

  .poster-label {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
  }

  .poster-big-value {
    font-size: 2.1rem;
  }

  .poster-sub {
    font-size: 0.64rem;
    line-height: 1.3;
  }

  /* ---- PUMP.FUN CTA STRIP ON MOBILE ---- */
  .pump-cta-strip {
    padding: 6px 0 18px;
  }

  .pump-strip-inner {
    padding: 14px;
    gap: 12px;
    box-shadow: 5px 5px 0 #000000;
  }

  .pump-ca-card {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .ca-mono-text {
    font-size: 0.72rem;
    padding: 6px 10px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .giant-pump-btn {
    width: 100%;
    justify-content: center;
    font-size: 1.4rem;
    padding: 12px 18px;
  }

  /* ---- FLYWHEEL SECTION ON MOBILE ---- */
  .flywheel-container {
    padding: 18px 14px;
    border-width: 3px;
    box-shadow: 6px 6px 0 #01030b;
    gap: 18px;
  }

  .mechanics-title {
    font-size: 1.85rem;
  }

  .mechanics-desc {
    font-size: 0.82rem;
  }

  .flywheel-stage-box {
    padding: 12px;
  }

  .stage-btn {
    font-size: 0.62rem;
    padding: 8px 6px;
  }

  .readout-item strong {
    font-size: 1.2rem;
  }

  .flywheel-pillars-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .flywheel-pillar {
    padding: 16px 14px;
  }

  /* ---- SWIPEABLE FILTER PILLS & MATCHES GRID ---- */
  .live-matches-section,
  .standings-section,
  .spotlight-and-boot-section,
  .token-terminal-section,
  .clubs-directory-section,
  .tournament-center-section {
    padding: 16px 0 28px;
  }

  .section-heading {
    font-size: 1.9rem;
  }

  .section-heading-sm {
    font-size: 1.7rem;
  }

  .filter-pills,
  .table-zone-legend {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .filter-pills::-webkit-scrollbar,
  .table-zone-legend::-webkit-scrollbar {
    display: none;
  }

  .filter-pill,
  .legend-chip {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.65rem;
    padding: 7px 12px;
  }

  .matches-grid,
  .clubs-cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* ---- 36-CLUB TABLE ON MOBILE ---- */
  .hide-sm {
    display: none;
  }

  .table-card {
    border-width: 2px;
    box-shadow: 5px 5px 0 #01030b;
  }

  .ucl-table {
    font-size: 0.74rem;
  }

  .ucl-table th,
  .ucl-table td {
    padding: 8px 6px;
  }

  .col-pos {
    width: 30px;
    font-size: 1.1rem;
  }

  .club-cell {
    gap: 6px;
    max-width: 130px;
  }

  .club-cell span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .club-logo-img,
  .mini-club-crest {
    width: 22px;
    height: 22px;
    font-size: 0.68rem;
  }

  .ticker-badge-cell {
    font-size: 0.62rem;
    padding: 2px 5px;
  }

  .status-tag {
    font-size: 0.56rem;
    padding: 3px 5px;
  }

  /* ---- SPOTLIGHT, GOLDEN BOOT & TOKEN TAB ON MOBILE ---- */
  .spotlight-poster-card {
    padding: 16px 14px;
    min-height: 150px;
  }

  .spotlight-club-title {
    font-size: 1.75rem;
  }

  .spotlight-bottom-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .boot-row {
    grid-template-columns: 28px 1fr 54px 54px;
    padding: 9px 10px;
  }

  .boot-player-name {
    font-size: 0.78rem;
  }

  .token-hero-card {
    padding: 20px 16px;
    border-width: 3px;
    gap: 20px;
  }

  .token-metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .metric-tile {
    padding: 14px 12px;
  }

  .metric-val {
    font-size: 1.75rem;
  }

  .bracket-columns {
    grid-template-columns: 1fr;
  }

  /* ---- FLOATING ANTHEM WIDGET DOCKED ABOVE MOBILE TAB BAR ---- */
  .floating-anthem-widget {
    bottom: calc(68px + env(safe-area-inset-bottom));
    right: 12px;
  }

  .anthem-toggle-btn {
    padding: 7px 11px;
    gap: 8px;
    border-width: 2px;
    box-shadow: 4px 4px 0 #000000;
  }

  .anthem-ball-icon {
    font-size: 1.05rem;
  }

  .anthem-title {
    font-size: 0.9rem;
  }

  .anthem-status {
    font-size: 0.54rem;
  }

  .anthem-play-glyph {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
  }
}

/* Extra compact adjustments for small phones (iPhone SE / 360px wide) */
@media (max-width: 390px) {
  .jumbo-stats-column {
    grid-template-columns: 1fr;
  }

  .logo-stage {
    width: clamp(145px, 25dvh, 200px);
    height: clamp(140px, 24dvh, 190px);
  }

  .jumbo-club-name {
    font-size: 1.05rem;
  }

  .jumbo-score-pill {
    font-size: 1.85rem;
    padding: 4px 10px;
  }
}