/* Scoreboard - persistent glass pill, top-right */
#scoreboard {
  position: fixed; top: 18px; right: 20px; z-index: 50;
  display: flex; align-items: center; gap: 9px;
  background: rgba(12,12,14,.55); border: 1px solid rgba(255,255,255,.12); border-radius: 100px;
  padding: 9px 16px; font-size: 13px; font-weight: 600; letter-spacing: .01em;
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 10px 34px rgba(0,0,0,.45);
}
.sb-cr { color: #ff7a82; } .sb-messi { color: #7cc0ff; }
.sb-side b { color: #fff; font-weight: 800; } .sb-div { opacity: .3; }

/* Side nav - sticky left rail, auto-hidden until cursor nears the left edge */
#sidenav {
  position: fixed; top: 50%; left: 18px; transform: translate(-118%, -50%);
  z-index: 40; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; pointer-events: none;
  transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .4s ease;
}
#sidenav.show { transform: translate(0, -50%); opacity: 1; pointer-events: auto; }

/* Discoverability hint: a slim gold tab at the left edge that fades when the nav opens */
#nav-hint {
  position: fixed; left: 6px; top: 50%; transform: translateY(-50%); z-index: 39;
  width: 4px; height: 54px; border-radius: 4px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(202,162,74,.85), transparent);
  transition: opacity .3s ease;
}
body:has(#sidenav.show) #nav-hint { opacity: 0; }
.nav-item {
  position: relative; color: var(--muted); text-decoration: none; font-size: 11px;
  font-weight: 500; letter-spacing: .02em; padding: 6px 11px; border-radius: 100px;
  border: 1px solid transparent; transition: color .25s, background .25s, padding .25s; white-space: nowrap;
}
.nav-item:hover { color: var(--text); }
.nav-item.active {
  color: #fff; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.nav-num { color: var(--gold); font-weight: 700; margin-right: 3px; }

/* Section panels - full-bleed, two-color duel background */
.panel {
  position: relative; min-height: 100vh; overflow: hidden;
  padding: 90px 6vw 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: background 0.6s ease;
}
.panel.lead-cr      { background: radial-gradient(120% 120% at 50% 40%, #b00d18 0%, #7d0a12 55%, #2c0407 100%); }
.panel.lead-messi   { background: radial-gradient(120% 120% at 50% 40%, #1c5a86 0%, #0e2f48 55%, #04121c 100%); }
.panel.lead-neutral { background: radial-gradient(120% 120% at 50% 40%, #211a0c 0%, #0b0905 60%, var(--bg) 100%); }

/* Split VS panels: Ronaldo red (left) vs Messi blue (right), meeting at a centre divide */
.panel.split {
  background:
    radial-gradient(95% 120% at 10% 26%, #c1121f 0%, #7d0a12 52%, #320609 100%) left / 50.3% 100% no-repeat,
    radial-gradient(95% 120% at 90% 26%, #2a83b8 0%, #145277 52%, #05131f 100%) right / 50.3% 100% no-repeat,
    #0a0a0a;
}
.panel.split::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.3) 16%, rgba(255,255,255,.3) 84%, transparent);
  z-index: 2; pointer-events: none;
}
/* Section panels (not hero) stack from the top; headline straddles the divide, smaller than hero */
.panel.split:not(.hero) { justify-content: flex-start; }
.panel.split:not(.hero) .headline { font-size: clamp(40px, 8.5vw, 100px); margin: 0 0 10px; }
.panel.split:not(.hero) .rings { opacity: .5; }

/* Hero: full-bleed recoloured poster (Ronaldo red / Messi blue) behind the GOAT word */
.panel.split.hero {
  background:
    linear-gradient(180deg, rgba(7,7,7,.52), rgba(7,7,7,.26) 42%, rgba(7,7,7,.86)),
    radial-gradient(62% 54% at 50% 44%, rgba(7,7,7,.5), transparent 72%),
    url("../assets/hero-bg.jpg") center top / cover no-repeat;
}
/* Hero O holds the World Cup ball (red/blue split), since the players are in the backdrop */
.hero .headline .circle { background-image: url("../assets/ball.jpg"); background-size: cover; background-position: center; }
.hero .rings { opacity: .22; }

/* Verdict: the two players face off (red/blue duotone) behind the verdict, like the hero.
   The centre is darkened heavily so the verdict copy reads and no poster text shows. */
.panel.verdict {
  background:
    linear-gradient(180deg, rgba(6,6,9,.6), rgba(6,6,9,.46) 26%, rgba(6,6,9,.92)),
    radial-gradient(46% 90% at 50% 50%, rgba(6,6,9,.94), rgba(6,6,9,.5) 58%, transparent 80%),
    url("../assets/verdict-bg.jpg") center / cover no-repeat;
}

.panel-num {
  position: absolute; top: 26px; left: 6vw; z-index: 4; font-family: var(--display);
  font-size: clamp(36px, 6vw, 64px); color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.4);
}

/* Rotating concentric text rings */
.rings { position: absolute; top: 50%; left: 50%; width: min(80vh, 560px); aspect-ratio: 1;
  transform: translate(-50%, -50%); z-index: 1; pointer-events: none; }
.rings svg { width: 100%; height: 100%; }
.ring-0 { animation: spin 24s linear infinite; transform-origin: 260px 260px; }
.ring-1 { animation: spin 30s linear infinite reverse; transform-origin: 260px 260px; }

/* Giant headline with a glowing circular letter */
.headline {
  position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--display); font-weight: 400; color: #fff; letter-spacing: -.005em;
  font-size: clamp(72px, 16vw, 200px); line-height: .82; text-shadow: 0 10px 50px rgba(0,0,0,.45);
}
.headline .circle {
  position: relative; width: clamp(118px, 14vw, 210px); aspect-ratio: 1; border-radius: 50%;
  margin: 0 .04em; overflow: hidden;
  background-color: var(--gold); /* fallback if the photo misses */
  background-image: url("../assets/duo.jpg"); background-size: cover; background-position: center;
  box-shadow: 0 0 0 5px rgba(255,255,255,.92), 0 0 0 7px rgba(0,0,0,.15), 0 0 70px 14px rgba(255,200,80,.5);
}
.headline .circle::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: rgba(255,255,255,.65); z-index: 3; }
.headline .circle-glow { position: absolute; inset: 0; z-index: 2; box-shadow: inset 0 0 30px rgba(0,0,0,.4); }

/* Floating gold stars - decorative, BEHIND cards/headline so they never sit over text */
.stars { position: absolute; inset: 0; z-index: 2; pointer-events: none; color: var(--gold-star, #ffd24a); }
.stars .star { position: absolute; opacity: .85; filter: drop-shadow(0 0 6px rgba(255,200,80,.5)); }
.star-0 { top: 13%; left: 11%; font-size: 18px; }
.star-1 { top: 21%; right: 13%; font-size: 12px; opacity: .6; }
.star-2 { top: 33%; left: 21%; font-size: 14px; opacity: .7; }
.star-3 { top: 11%; right: 29%; font-size: 10px; opacity: .55; }
.star-4 { top: 25%; left: 45%; font-size: 11px; opacity: .65; }

@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ring-0, .ring-1 { animation: none; } }

.card-grid {
  position: relative; z-index: 3; width: 100%; align-self: stretch;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; margin-top: auto;
}
/* Desktop: symmetric padding so headline stays centred and cards clear the side-nav */
@media (min-width: 721px) {
  .panel { padding: 90px 130px 60px; }
}

@media (max-width: 720px) {
  #sidenav { display: none; }
  .panel { padding: 80px 5vw 40px; }
  #scoreboard { top: 10px; right: 10px; font-size: 12px; padding: 6px 10px; }
  .card-grid { grid-template-columns: 1fr; }
  .headline { font-size: clamp(48px, 22vw, 120px); }
}