/* =========================================================
   DSX0 LEADERBOARD 3.0 — HERO PREMIUM V2
   ========================================================= */

.event-shell{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;

  min-height:760px !important;

  border:1px solid rgba(43,203,255,.34) !important;
  border-radius:22px !important;

  background:
    radial-gradient(900px 520px at 68% 20%,rgba(0,157,255,.14),transparent 68%),
    radial-gradient(760px 560px at 88% 58%,rgba(218,22,255,.17),transparent 70%),
    radial-gradient(520px 420px at 20% 58%,rgba(0,218,255,.07),transparent 72%),
    linear-gradient(118deg,#020714 0%,#031226 48%,#09091e 100%) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 26px 80px rgba(0,0,0,.40),
    0 0 55px rgba(0,180,255,.05) !important;
}

/* cenário neon abstrato */
.event-shell::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;

  background:
    linear-gradient(90deg,
      rgba(1,7,18,.99) 0%,
      rgba(1,12,25,.95) 34%,
      rgba(3,15,34,.67) 56%,
      rgba(7,4,24,.16) 100%
    ),
    radial-gradient(500px 260px at 63% 30%,rgba(26,108,255,.10),transparent 70%),
    radial-gradient(420px 260px at 88% 42%,rgba(244,25,255,.08),transparent 72%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 124px,
      rgba(31,183,255,.017) 125px,
      transparent 126px
    ) !important;
}

/* glow magenta lateral */
.event-shell::after{
  content:'' !important;
  position:absolute !important;
  z-index:1 !important;
  pointer-events:none !important;

  width:760px !important;
  height:760px !important;
  right:-240px !important;
  top:-160px !important;

  border-radius:50% !important;

  background:
    radial-gradient(circle,
      rgba(223,20,255,.15) 0%,
      rgba(55,92,255,.09) 36%,
      transparent 69%
    ) !important;

  filter:blur(16px) !important;
}

.event-grid{
  position:relative !important;
  z-index:5 !important;

  display:grid !important;
  grid-template-columns:minmax(520px,1.08fr) minmax(350px,.74fr) minmax(430px,.92fr) !important;
  grid-template-rows:430px 1fr !important;

  min-height:760px !important;
}

/* INTRO */
.event-intro{
  grid-column:1 !important;
  grid-row:1 !important;

  z-index:10 !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;

  min-height:430px !important;
  padding:48px 30px 30px 58px !important;
}

.event-intro .live{
  margin-bottom:18px !important;
}

#lb3PreviewTag{
  width:max-content !important;
  max-width:max-content !important;

  margin:0 0 12px 0 !important;
  padding:5px 10px !important;

  border:1px solid rgba(54,222,255,.34) !important;
  border-radius:999px !important;

  background:rgba(6,31,49,.80) !important;
  color:#56eaff !important;

  font-size:9px !important;
  font-weight:900 !important;
  letter-spacing:.16em !important;
}

.event-intro .event-title{
  width:auto !important;
  max-width:560px !important;

  margin:0 !important;

  font-size:64px !important;
  line-height:.90 !important;
  letter-spacing:-.045em !important;
  font-weight:800 !important;

  color:#f7f9ff !important;

  text-shadow:
    0 4px 28px rgba(0,0,0,.50),
    0 0 24px rgba(32,166,255,.04) !important;
}

.event-intro .event-sub{
  max-width:430px !important;
  margin-top:18px !important;

  color:#8fa4c4 !important;
  font-size:14px !important;
  line-height:1.45 !important;
}

/* PRÊMIO — MENOR E MAIS INTEGRADO */
.pool-box{
  grid-column:2 !important;
  grid-row:1 !important;

  z-index:12 !important;
  align-self:center !important;

  width:100% !important;
  max-width:360px !important;
  min-height:210px !important;

  margin:44px auto 24px !important;
  padding:28px 22px !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  border:1px solid rgba(39,209,255,.53) !important;
  border-radius:20px !important;

  background:
    linear-gradient(145deg,
      rgba(5,50,72,.84),
      rgba(2,18,36,.96)
    ) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 18px 40px rgba(0,0,0,.30),
    0 0 32px rgba(20,200,255,.06) !important;

  backdrop-filter:blur(8px) !important;
}

.pool-box::before{
  content:'' !important;
  position:absolute !important;
  inset:12px !important;

  border:1px solid rgba(67,210,246,.17) !important;
  border-radius:15px !important;

  pointer-events:none !important;
}

.pool-label{
  position:relative !important;
  z-index:3 !important;

  margin-bottom:10px !important;

  color:#70eaff !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.18em !important;
}

.pool-value{
  position:relative !important;
  z-index:3 !important;

  font-size:66px !important;
  line-height:.95 !important;
  letter-spacing:-.045em !important;

  color:#27d9f6 !important;

  text-shadow:
    0 0 18px rgba(19,210,249,.18),
    0 0 42px rgba(19,210,249,.07) !important;
}

/* PERSONAGEM */
#dsxHeroCharacter{
  position:absolute !important;
  z-index:8 !important;

  right:-8px !important;
  top:4px !important;

  width:500px !important;
  max-height:520px !important;
  height:auto !important;

  object-fit:contain !important;
  object-position:right top !important;

  opacity:1 !important;
  pointer-events:none !important;

  filter:
    drop-shadow(-18px 0 40px rgba(0,152,255,.18))
    drop-shadow(14px 0 34px rgba(226,23,255,.16)) !important;
}

/* FAIXA DE PROGRESSO */
.race-zone{
  grid-column:1 / -1 !important;
  grid-row:2 !important;

  z-index:11 !important;

  min-height:300px !important;

  padding:42px 58px 34px !important;

  background:
    linear-gradient(90deg,
      rgba(1,13,26,.97) 0%,
      rgba(4,18,41,.96) 47%,
      rgba(33,6,64,.80) 100%
    ) !important;

  border-top:1px solid rgba(59,115,181,.23) !important;
}

/* progresso */
.progress-track{
  height:11px !important;
  border-radius:999px !important;

  background:rgba(0,9,20,.88) !important;
  border:1px solid rgba(53,173,219,.25) !important;
}

.progress-fill{
  border-radius:999px !important;

  background:
    linear-gradient(
      90deg,
      #12dced 0%,
      #37d7f5 41%,
      #727aff 74%,
      #c144ff 100%
    ) !important;

  box-shadow:0 0 18px rgba(32,214,246,.16) !important;
}

/* contador */
.countdown{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
}

.countdown .cd{
  min-width:76px !important;
  min-height:68px !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  border:1px solid rgba(39,202,246,.32) !important;
  border-radius:13px !important;

  background:
    linear-gradient(
      180deg,
      rgba(7,43,63,.87),
      rgba(3,19,36,.96)
    ) !important;

  box-shadow:
    inset 0 1px rgba(255,255,255,.04),
    0 8px 25px rgba(0,0,0,.20) !important;
}

.countdown .cd strong{
  color:#52ebff !important;
  font-size:28px !important;
  line-height:1 !important;
}

.countdown .cd span{
  margin-top:6px !important;

  color:#7184a5 !important;
  font-size:7px !important;
  font-weight:800 !important;
  letter-spacing:.13em !important;
}

/* telas largas */
@media(min-width:1600px){
  .event-grid{
    grid-template-columns:minmax(570px,1.08fr) minmax(390px,.74fr) minmax(470px,.94fr) !important;
  }

  .event-intro .event-title{
    font-size:68px !important;
    max-width:590px !important;
  }

  .pool-box{
    max-width:380px !important;
  }

  #dsxHeroCharacter{
    width:530px !important;
  }
}

/* MOBILE */
@media(max-width:800px){
  .event-shell{
    min-height:auto !important;
  }

  .event-grid{
    display:block !important;
    min-height:auto !important;
  }

  .event-intro{
    min-height:300px !important;
    padding:30px 24px 24px !important;
  }

  .event-intro .event-title{
    max-width:66% !important;
    font-size:30px !important;
    line-height:.94 !important;
  }

  .event-intro .event-sub{
    max-width:64% !important;
    font-size:11px !important;
  }

  #dsxHeroCharacter{
    width:300px !important;
    max-height:300px !important;
    right:-78px !important;
    top:22px !important;
    opacity:.50 !important;
  }

  .pool-box{
    min-height:166px !important;
    max-width:none !important;

    margin:0 16px !important;
    padding:22px 16px !important;

    border-radius:17px !important;
  }

  .pool-value{
    font-size:47px !important;
  }

  .race-zone{
    min-height:auto !important;
    padding:28px 22px 30px !important;
  }

  .countdown .cd{
    min-width:53px !important;
    min-height:56px !important;
  }

  .countdown .cd strong{
    font-size:21px !important;
  }
}

/* =========================================================
   LB3 HERO V2 — ALIGNMENT PATCH
   ========================================================= */

@media(min-width:1200px){

  .event-grid{
    grid-template-columns:
      minmax(590px,1.15fr)
      minmax(320px,.62fr)
      minmax(430px,.88fr) !important;
  }

  .event-intro{
    padding-left:58px !important;
    padding-right:18px !important;
  }

  .event-intro .event-title{
    max-width:590px !important;
    font-size:60px !important;
    line-height:.91 !important;
  }

  .pool-box{
    max-width:325px !important;
    min-height:195px !important;

    margin-left:auto !important;
    margin-right:8px !important;

    transform:translateX(28px) !important;
  }

  .pool-value{
    font-size:60px !important;
  }

  #dsxHeroCharacter{
    width:485px !important;
    right:-8px !important;
    top:6px !important;
  }
}

@media(min-width:1600px){

  .event-grid{
    grid-template-columns:
      minmax(620px,1.16fr)
      minmax(340px,.62fr)
      minmax(470px,.90fr) !important;
  }

  .event-intro .event-title{
    max-width:620px !important;
    font-size:64px !important;
  }

  .pool-box{
    max-width:340px !important;
    transform:translateX(18px) !important;
  }

  .pool-value{
    font-size:64px !important;
  }

  #dsxHeroCharacter{
    width:515px !important;
  }
}

/* =========================================================
   LB3 HERO — FINAL COMPOSITION TUNE
   ========================================================= */

@media(min-width:1200px){

  .event-shell{
    min-height:830px !important;
  }

  .event-grid{
    grid-template-rows:500px 1fr !important;
    min-height:830px !important;
  }

  .event-intro{
    min-height:500px !important;
  }

  .pool-box{
    max-width:310px !important;
    min-height:180px !important;
    padding:24px 20px !important;
    transform:translateX(24px) !important;
  }

  .pool-value{
    font-size:56px !important;
  }

  #dsxHeroCharacter{
    width:520px !important;
    max-height:495px !important;
    top:4px !important;
    right:-10px !important;
  }

  .race-zone{
    min-height:300px !important;
  }
}

@media(min-width:1600px){

  .event-grid{
    grid-template-rows:520px 1fr !important;
  }

  .pool-box{
    max-width:330px !important;
  }

  .pool-value{
    font-size:60px !important;
  }

  #dsxHeroCharacter{
    width:550px !important;
    max-height:515px !important;
  }
}