/* -----------------------------------------------------------
   UNIFIED HOME PAGE BACKGROUND — One Continuous Esports Arena
   ----------------------------------------------------------- */

/* Canvas color safety (overscroll / rubber-band) */
html {
  background: #050508 !important;
}

/* ONE unified arena background for the entire page below the hero */
body:not(.admin-body) {
  isolation: isolate !important;
  background-color: #050508 !important;
  background-image:
    /* ── Edge atmospheric glow: top-left ── */
    radial-gradient(ellipse 45% 40% at 8% 12%,
      rgba(255, 18, 48, .055), transparent 70%),
    /* ── Edge atmospheric glow: bottom-right ── */
    radial-gradient(ellipse 40% 35% at 92% 88%,
      rgba(255, 18, 48, .045), transparent 65%),
    /* ── Edge glow: left side ── */
    radial-gradient(ellipse 18% 60% at 0% 50%,
      rgba(220, 20, 50, .05), transparent 70%),
    /* ── Edge glow: right side ── */
    radial-gradient(ellipse 18% 60% at 100% 50%,
      rgba(220, 20, 50, .04), transparent 70%),
    /* ── Red smoke/fog: top ── */
    radial-gradient(ellipse 130% 22% at 30% 0%,
      rgba(180, 12, 38, .06), transparent 80%),
    /* ── Red smoke/fog: bottom ── */
    radial-gradient(ellipse 110% 18% at 70% 100%,
      rgba(180, 12, 38, .05), transparent 75%),
    /* ── Center reading area darkening ── */
    radial-gradient(ellipse 60% 50% at 50% 45%,
      transparent 20%, rgba(5, 5, 8, .40) 100%),
    /* ── Cinematic vignette ── */
    radial-gradient(ellipse 140% 120% at 50% 50%,
      transparent 30%, rgba(2, 2, 5, .70) 100%) !important;
  background-attachment: scroll !important;
}

/* Desktop: pin atmosphere to viewport so lines flow continuously while scrolling */
@media (hover:hover) and (min-width:1025px) {
  body:not(.admin-body) {
    background-attachment: fixed !important;
  }
}

/* Make ALL home page sections transparent so the unified body background shows through */
body:not(.admin-body) .section,
body:not(.admin-body) section.section,
body:not(.admin-body) .section.white,
body:not(.admin-body) .section.soft,
body:not(.admin-body) .section.tight,
body:not(.admin-body) section.countdown-section,
body:not(.admin-body) section.prize-showcase-section,
body:not(.admin-body) section.sponsors-section,
body:not(.admin-body) section.leadership-section,
body:not(.admin-body) section.memories,
body:not(.admin-body) section.highlights-showcase,
body:not(.admin-body) section.phases,
body:not(.admin-body) #games.section,
/* High-specificity beats for previously-styled sections */
body:not(.admin-body) section.section.white.memories,
body:not(.admin-body) section.section.soft.phases,
body:not(.admin-body) section.section.soft.features.highlights-showcase,
body:not(.admin-body) section.section.tight.countdown-section,
body:not(.admin-body) section.section.sponsors-section[data-sponsors],
body:not(.admin-body) section.section.leadership-section[data-leadership],
body:not(.admin-body) section#games.section.white,
body:not(.admin-body) section.prize-showcase-section#prize-pool {
  background: transparent !important;
  background-image: none !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* No visible rectangular boundaries anywhere between sections */
body:not(.admin-body) main > section {
  border: 0 !important;
  outline: 0 !important;
}

/* Remove individual section ::before/::after diagonal lines — the body handles them */
body:not(.admin-body) .sponsors-section[data-sponsors]::before,
body:not(.admin-body) .sponsors-section[data-sponsors]::after,
body:not(.admin-body) .leadership-section[data-leadership]::before,
body:not(.admin-body) .leadership-section[data-leadership]::after {
  display: none !important;
}

/* One global background only — per-section decorative layers removed
   so nothing visually resets at section boundaries */
body:not(.admin-body) .prize-showcase-section::before,
body:not(.admin-body) .prize-showcase-section::after,
body:not(.admin-body) #games.section.white::before,
body:not(.admin-body) #games.section.white::after {
  display: none !important;
}

/* -----------------------------------------------------------
   CINEMATIC ESPORTS ARENA -- Premium Static Background Layers
   ----------------------------------------------------------- */

main:not(.admin-main) {
  isolation: isolate !important;
}

/* -- Layer 1: INTENSE corner energy beams + diagonal neon lines -- */
body:not(.admin-body)::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  background-image:
    /* INTENSE BEAM: top-left corner */
    linear-gradient(142deg,
      rgba(255, 12, 42, .28) 0%,
      rgba(255, 12, 42, .12) 3%,
      rgba(200, 8, 30, .04) 8%,
      transparent 20%),
    /* INTENSE BEAM: bottom-right corner */
    linear-gradient(-38deg,
      rgba(255, 12, 42, .22) 0%,
      rgba(255, 12, 42, .09) 4%,
      rgba(180, 6, 25, .03) 10%,
      transparent 22%),
    /* BEAM: top-right accent */
    linear-gradient(215deg,
      rgba(255, 22, 52, .16) 0%,
      rgba(220, 10, 38, .05) 5%,
      transparent 16%),
    /* BEAM: bottom-left accent */
    linear-gradient(32deg,
      rgba(255, 22, 52, .12) 0%,
      rgba(200, 8, 32, .04) 4%,
      transparent 14%),
    /* Sharp diagonal neon line 1 */
    linear-gradient(148deg,
      transparent 36%,
      rgba(255, 18, 48, .035) 41%,
      rgba(255, 28, 62, .055) 50%,
      rgba(255, 18, 48, .035) 59%,
      transparent 64%),
    /* Sharp diagonal neon line 2 */
    linear-gradient(-32deg,
      transparent 38%,
      rgba(255, 15, 42, .025) 44%,
      rgba(255, 22, 52, .04) 50%,
      rgba(255, 15, 42, .025) 56%,
      transparent 62%),
    /* Thin repeating diagonal lines */
    repeating-linear-gradient(145deg,
      transparent 0 110px,
      rgba(255, 20, 48, .018) 110px 111px,
      transparent 111px 220px),
    repeating-linear-gradient(-35deg,
      transparent 0 150px,
      rgba(255, 18, 44, .014) 150px 151px,
      transparent 151px 300px) !important;
  background-size: auto !important;
}

/* -- Layer 2: Ember particles + N-shapes + geometric lines -- */
main:not(.admin-main)::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  background-image:
    radial-gradient(320px 260px at 8% 25%, rgba(255,18,48,.04), transparent 70%),
    radial-gradient(280px 240px at 90% 70%, rgba(255,18,48,.035), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cpath d='M100 650L100 150L700 650L700 150' fill='none' stroke='rgba(255,25,45,.025)' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M130 620L130 180L670 620' fill='none' stroke='rgba(255,30,50,.015)' stroke-width='.9'/%3E%3Cline x1='0' y1='300' x2='300' y2='0' stroke='rgba(255,25,45,.03)' stroke-width='.6'/%3E%3Cline x1='800' y1='300' x2='500' y2='0' stroke='rgba(255,25,45,.03)' stroke-width='.6'/%3E%3Cline x1='0' y1='500' x2='500' y2='800' stroke='rgba(255,25,45,.02)' stroke-width='.5'/%3E%3Cline x1='800' y1='500' x2='300' y2='800' stroke='rgba(255,25,45,.02)' stroke-width='.5'/%3E%3Ccircle cx='95' cy='48' r='5' fill='rgba(255,35,55,.10)'/%3E%3Ccircle cx='95' cy='48' r='1.5' fill='rgba(255,55,75,.55)'/%3E%3Ccircle cx='380' cy='135' r='4' fill='rgba(255,35,55,.08)'/%3E%3Ccircle cx='380' cy='135' r='1.2' fill='rgba(255,50,70,.50)'/%3E%3Ccircle cx='620' cy='75' r='3.5' fill='rgba(255,40,60,.09)'/%3E%3Ccircle cx='620' cy='75' r='1' fill='rgba(255,60,80,.52)'/%3E%3Ccircle cx='210' cy='310' r='4.5' fill='rgba(255,35,55,.07)'/%3E%3Ccircle cx='210' cy='310' r='1.3' fill='rgba(255,50,70,.48)'/%3E%3Ccircle cx='530' cy='380' r='3' fill='rgba(255,40,60,.09)'/%3E%3Ccircle cx='530' cy='380' r='1' fill='rgba(255,55,75,.50)'/%3E%3Ccircle cx='70' cy='520' r='4' fill='rgba(255,40,60,.08)'/%3E%3Ccircle cx='70' cy='520' r='1.2' fill='rgba(255,55,75,.48)'/%3E%3Ccircle cx='360' cy='580' r='3.5' fill='rgba(255,35,55,.07)'/%3E%3Ccircle cx='360' cy='580' r='1' fill='rgba(255,50,70,.45)'/%3E%3Ccircle cx='680' cy='470' r='5' fill='rgba(255,35,55,.09)'/%3E%3Ccircle cx='680' cy='470' r='1.5' fill='rgba(255,50,70,.48)'/%3E%3Ccircle cx='170' cy='180' r='2.5' fill='rgba(255,45,65,.08)'/%3E%3Ccircle cx='170' cy='180' r='.8' fill='rgba(255,65,85,.50)'/%3E%3Ccircle cx='500' cy='220' r='3' fill='rgba(255,40,60,.07)'/%3E%3Ccircle cx='500' cy='220' r='1' fill='rgba(255,55,75,.47)'/%3E%3Ccircle cx='290' cy='450' r='4' fill='rgba(255,35,55,.09)'/%3E%3Ccircle cx='290' cy='450' r='1.3' fill='rgba(255,50,70,.50)'/%3E%3Ccircle cx='710' cy='600' r='3' fill='rgba(255,40,60,.07)'/%3E%3Ccircle cx='710' cy='600' r='.9' fill='rgba(255,55,75,.45)'/%3E%3Ccircle cx='45' cy='350' r='2' fill='rgba(255,45,65,.07)'/%3E%3Ccircle cx='45' cy='350' r='.7' fill='rgba(255,65,85,.48)'/%3E%3Ccircle cx='640' cy='280' r='3.5' fill='rgba(255,35,55,.08)'/%3E%3Ccircle cx='640' cy='280' r='1.1' fill='rgba(255,50,70,.50)'/%3E%3Ccircle cx='120' cy='620' r='2.5' fill='rgba(255,40,60,.08)'/%3E%3Ccircle cx='120' cy='620' r='.8' fill='rgba(255,55,75,.50)'/%3E%3Ccircle cx='440' cy='500' r='4' fill='rgba(255,35,55,.07)'/%3E%3Ccircle cx='440' cy='500' r='1.2' fill='rgba(255,50,70,.48)'/%3E%3Ccircle cx='250' cy='70' r='3' fill='rgba(255,45,65,.08)'/%3E%3Ccircle cx='250' cy='70' r='1' fill='rgba(255,60,80,.50)'/%3E%3Ccircle cx='580' cy='160' r='2' fill='rgba(255,40,60,.07)'/%3E%3Ccircle cx='580' cy='160' r='.7' fill='rgba(255,55,75,.45)'/%3E%3Ccircle cx='750' cy='350' r='3' fill='rgba(255,35,55,.08)'/%3E%3Ccircle cx='750' cy='350' r='1' fill='rgba(255,50,70,.48)'/%3E%3Ccircle cx='480' cy='700' r='4' fill='rgba(255,40,60,.07)'/%3E%3Ccircle cx='480' cy='700' r='1.2' fill='rgba(255,55,75,.45)'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-position: 8% 25%, 90% 70%, 0 0 !important;
}

/* -- Layer 3: Corner accents + atmospheric depth -- */
main:not(.admin-main)::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  background-image:
    /* Top-left corner accent glow */
    radial-gradient(ellipse 30% 25% at 3% 5%,
      rgba(255, 15, 42, .06), transparent 70%),
    /* Bottom-right corner accent glow */
    radial-gradient(ellipse 28% 22% at 97% 95%,
      rgba(255, 15, 42, .05), transparent 65%),
    /* Top-right subtle glow */
    radial-gradient(ellipse 20% 18% at 95% 8%,
      rgba(255, 20, 48, .03), transparent 60%),
    /* Bottom-left subtle glow */
    radial-gradient(ellipse 20% 18% at 5% 92%,
      rgba(255, 20, 48, .025), transparent 60%),
    /* Horizontal ambient line */
    linear-gradient(0deg,
      transparent 44%,
      rgba(255, 15, 40, .012) 49%,
      rgba(255, 20, 48, .018) 50%,
      rgba(255, 15, 40, .012) 51%,
      transparent 56%) !important;
}

@media (max-width: 768px) {
  main:not(.admin-main)::before { background-size: auto !important; }
  main:not(.admin-main)::after  { background-size: auto !important; }
}
/* -----------------------------------------------------------
   COUNTDOWN SECTION — fully merged into the global arena.
   Panel: transparent, no border, no shadow → zero division line.
   Local electric layers removed; the single global fixed system
   (body cables + main bolts) carries the effect across every
   section boundary without resetting.
   ----------------------------------------------------------- */

body:not(.admin-body) .countdown-section .countdown-panel {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Remove cut-corner pseudo-elements on homepage */
body:not(.admin-body) .countdown-section .countdown-panel::before,
body:not(.admin-body) .countdown-section .countdown-panel::after {
  display: none !important;
}

/* Countdown text stays crisp over the shared background */
body:not(.admin-body) .countdown-section .countdown-copy,
body:not(.admin-body) .countdown-section .countdown-date {
  position: relative !important;
  z-index: 2 !important;
  text-shadow: 0 2px 14px rgba(4, 6, 10, .9) !important;
}

/* -----------------------------------------------------------
   PRIZE SHOWCASE — synchronized pair carousel
   ----------------------------------------------------------- */

.prize-showcase-section {
  position: relative !important;
  padding: 80px 0 88px !important;
  background: #080A12 !important;
  overflow: hidden !important;
}

/* -- Animated neon background -- */
.prize-showcase-section::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    repeating-linear-gradient(
      -55deg,
      transparent,
      transparent 80px,
      rgba(255, 23, 68, 0.025) 80px,
      rgba(255, 23, 68, 0.025) 82px
    ),
    repeating-linear-gradient(
      -55deg,
      transparent,
      transparent 120px,
      rgba(255, 193, 7, 0.02) 120px,
      rgba(255, 193, 7, 0.02) 122px
    ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* -- Ambient glow orbs -- */
.prize-showcase-section::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 600px 500px at 8% 30%, rgba(255, 23, 68, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 92% 60%, rgba(255, 193, 7, 0.05) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.prize-showcase-section .wrap {
  position: relative !important;
  z-index: 1 !important;
}

/* -- Heading -- */
.prize-section-heading {
  text-align: center !important;
  color: #fff !important;
  margin-bottom: 44px !important;
}