/* =============================================================
   LA ROJA RP v1.24 — LIVE HERO
   Same composition as v1.23, but all content is REAL HTML again.
   ============================================================= */

@media(min-width:1101px){

  .lr121-hero{
    position:relative!important;
    width:100%!important;
    height:610px!important;
    min-height:610px!important;
    max-height:610px!important;
    aspect-ratio:auto!important;

    display:grid!important;
    grid-template-columns:minmax(0,1.53fr) minmax(340px,.47fr)!important;
    gap:22px!important;
    align-items:center!important;

    padding:34px 48px 88px!important;

    background:
      linear-gradient(90deg,
        rgba(0,0,0,.48) 0%,
        rgba(0,0,0,.16) 44%,
        rgba(0,0,0,.02) 69%,
        rgba(0,0,0,.08) 100%),
      url("visuals-v124/hero-live-clean.jpg") center center / cover no-repeat!important;

    border-bottom:2px solid rgba(233,28,31,.67)!important;
    box-shadow:inset 0 -70px 96px rgba(0,0,0,.42)!important;
    overflow:hidden!important;
  }

  /* Remove the v1.23 screenshot UI behavior */
  .lr121-hero:before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background:
      radial-gradient(circle at 69% 29%,rgba(255,50,18,.07),transparent 22rem),
      linear-gradient(180deg,rgba(0,0,0,.01),rgba(0,0,0,.25))!important;
  }
  .lr121-hero:after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:2!important;
    pointer-events:none!important;
    background:
      linear-gradient(115deg,transparent 0%,rgba(255,50,22,.025) 46%,transparent 56%)!important;
    background-size:220% 100%!important;
    animation:lr124SceneShimmer 8s linear infinite!important;
  }

  /* REAL LEFT CONTENT */
  .lr114-home-copy{
    position:relative!important;
    z-index:6!important;
    left:auto!important;
    top:auto!important;
    width:auto!important;
    height:auto!important;
    max-width:680px!important;
    margin:0!important;
    opacity:1!important;
    pointer-events:auto!important;
    align-self:center!important;
  }

  .lr114-home-copy .lr19-kicker{
    display:block!important;
    opacity:1!important;
    font-size:9px!important;
    color:#ffc13a!important;
    letter-spacing:.16em!important;
    margin-bottom:4px!important;
    animation:lr124Kicker 2.8s ease-in-out infinite!important;
  }

  .lr114-home-copy h1{
    display:block!important;
    opacity:1!important;
    margin:3px 0 0!important;
    font-size:76px!important;
    line-height:.85!important;
    letter-spacing:-.065em!important;
    white-space:nowrap!important;
    color:#fff!important;
    text-shadow:0 15px 38px rgba(0,0,0,.78)!important;
    animation:lr124TitleBreathe 3.2s ease-in-out infinite!important;
  }

  .lr114-home-copy h1 strong{
    display:inline-block!important;
    color:#ef2028!important;
    animation:lr124RPNeon 1.45s ease-in-out infinite!important;
  }

  .lr114-home-copy h1:after{
    content:""!important;
    display:block!important;
    width:47%!important;
    height:2px!important;
    margin-top:9px!important;
    background:linear-gradient(90deg,#ef2028,#ffc13a,transparent)!important;
    box-shadow:0 0 12px rgba(239,32,40,.24)!important;
    animation:lr124TitleLine 2.3s ease-in-out infinite!important;
  }

  .lr114-home-copy h2{
    display:block!important;
    opacity:1!important;
    margin:12px 0 8px!important;
    font-size:19px!important;
    line-height:1.1!important;
    color:#fff!important;
    animation:lr124Subtitle 3s ease-in-out infinite!important;
  }

  .lr114-home-copy p{
    display:block!important;
    opacity:1!important;
    max-width:600px!important;
    margin:0!important;
    font-size:12px!important;
    line-height:1.62!important;
    color:#ddc9bf!important;
  }

  .lr114-home-copy .lr19-home-actions{
    position:static!important;
    display:flex!important;
    opacity:1!important;
    pointer-events:auto!important;
    gap:11px!important;
    margin-top:18px!important;
  }

  .lr114-home-copy .lr19-home-actions a{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:auto!important;
    height:auto!important;
    min-width:174px!important;
    min-height:43px!important;
    opacity:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:9px!important;
    border-radius:6px!important;
    animation:lr124CtaPulse 3s ease-in-out infinite!important;
  }
  .lr114-home-copy .lr19-home-actions a:nth-child(2){
    animation-delay:.35s!important;
  }

  .lr114-home-copy .lr19-home-meta{
    display:flex!important;
    opacity:1!important;
    margin-top:15px!important;
    gap:15px!important;
    font-size:8px!important;
    color:#dfcbc0!important;
  }

  .lr114-home-copy .lr19-home-meta span{
    display:inline-flex!important;
    opacity:1!important;
    animation:lr124MetaFloat 3.2s ease-in-out infinite!important;
  }
  .lr114-home-copy .lr19-home-meta span:nth-child(2){animation-delay:.35s!important}
  .lr114-home-copy .lr19-home-meta span:nth-child(3){animation-delay:.7s!important}


  /* REAL RIGHT LIVE CONTENT */
  .lr116-hero-side{
    position:relative!important;
    z-index:7!important;
    right:auto!important;
    top:auto!important;
    width:340px!important;
    height:auto!important;
    max-width:none!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:9px!important;
    opacity:1!important;
    justify-self:end!important;
    align-self:center!important;
  }

  .lr116-hero-side:before{
    display:none!important;
  }

  .lr116-promo-card{
    flex:none!important;
    width:100%!important;
    height:auto!important;
    min-height:300px!important;
    max-height:none!important;
    padding:14px 15px 13px!important;
    opacity:1!important;
    display:block!important;
    background:linear-gradient(160deg,rgba(24,4,5,.96),rgba(6,2,2,.97))!important;
    border:1px solid rgba(239,39,35,.55)!important;
    border-radius:8px!important;
    box-shadow:0 18px 46px rgba(0,0,0,.46)!important;
    animation:lr124PromoFloat 2.5s ease-in-out infinite!important;
  }

  .lr116-promo-kicker{
    font-size:8px!important;
    animation:lr124GoldBlink 2s ease-in-out infinite!important;
  }

  .lr116-promo-value{
    font-size:42px!important;
    line-height:.92!important;
    margin:5px 0 0!important;
    animation:lr124DiscountPunch 1.8s ease-in-out infinite!important;
  }

  .lr116-promo-sub{
    font-size:9px!important;
  }

  .lr116-promo-code{
    min-height:38px!important;
    height:auto!important;
    margin:9px 0 7px!important;
    padding:0 11px!important;
    font-size:8px!important;
    opacity:1!important;
    animation:lr124CodeGlow 2s ease-in-out infinite!important;
  }

  .lr116-promo-code b{
    font-size:11px!important;
  }

  .lr116-promo-timer-wrap{
    padding-top:6px!important;
  }

  .lr116-promo-timer{
    gap:4px!important;
    margin-top:5px!important;
  }

  .lr116-promo-timer>span{
    min-width:0!important;
    width:24%!important;
    height:40px!important;
    min-height:40px!important;
    aspect-ratio:auto!important;
    padding:4px!important;
    font-size:12px!important;
    animation:lr124TimerPulse 2.2s ease-in-out infinite!important;
  }
  .lr116-promo-timer>span:nth-child(2){animation-delay:.18s!important}
  .lr116-promo-timer>span:nth-child(3){animation-delay:.36s!important}
  .lr116-promo-timer>span:nth-child(4){animation-delay:.54s!important}

  .lr116-promo-cta{
    min-height:38px!important;
    height:38px!important;
    margin-top:8px!important;
    font-size:8px!important;
  }


  /* REAL DISCORD PANEL */
  .lr116-discord-panel{
    flex:none!important;
    width:100%!important;
    height:108px!important;
    min-height:108px!important;
    max-height:108px!important;
    padding:11px 12px!important;
    opacity:1!important;

    display:grid!important;
    grid-template-columns:1fr 58px!important;
    grid-template-areas:
      "title icon"
      "copy icon"
      "button button"!important;
    row-gap:3px!important;
    column-gap:10px!important;
    align-items:center!important;

    background:linear-gradient(160deg,rgba(13,4,4,.96),rgba(5,2,2,.97))!important;
    border:1px solid rgba(255,137,28,.28)!important;
    border-radius:8px!important;
    animation:lr124DiscordGlow 3s ease-in-out infinite!important;
  }

  .lr116-discord-panel>span{
    grid-area:title!important;
    opacity:1!important;
    font-size:8px!important;
  }

  .lr116-discord-panel>p{
    grid-area:copy!important;
    opacity:1!important;
    margin:0!important;
    font-size:7px!important;
    line-height:1.35!important;
  }

  .lr116-discord-panel>.lr19-discord-big{
    grid-area:icon!important;
    width:58px!important;
    height:58px!important;
    margin:0!important;
    opacity:1!important;
  }

  .lr116-discord-panel>.lr19-discord-big svg{
    width:54px!important;
    height:42px!important;
  }

  .lr116-discord-panel>.lr19-discord-login-main{
    grid-area:button!important;
    min-height:34px!important;
    height:34px!important;
    margin:3px 0 0!important;
    opacity:1!important;
    font-size:8px!important;
  }


  /* REAL BOTTOM 4 LIVE BLOCKS */
  .lr115-roleplay-stats{
    display:grid!important;
    position:absolute!important;
    z-index:7!important;
    left:48px!important;
    bottom:14px!important;
    width:806px!important;
    height:66px!important;
    grid-template-columns:repeat(4,1fr)!important;
    opacity:1!important;
    background:rgba(3,2,2,.84)!important;
    border:1px solid rgba(255,137,28,.28)!important;
    backdrop-filter:blur(5px)!important;
  }

  .lr115-roleplay-stats>div{
    min-height:64px!important;
    padding:9px 10px!important;
    opacity:1!important;
    animation:lr124StatFloat 3.8s ease-in-out infinite!important;
  }
  .lr115-roleplay-stats>div:nth-child(2){animation-delay:.3s!important}
  .lr115-roleplay-stats>div:nth-child(3){animation-delay:.6s!important}
  .lr115-roleplay-stats>div:nth-child(4){animation-delay:.9s!important}

  .lr115-roleplay-stats b{
    font-size:11px!important;
    opacity:1!important;
  }
  .lr115-roleplay-stats span{
    font-size:7px!important;
    opacity:1!important;
  }


  /* If NO coupon exists: no promo card at all, Discord stays in the right column */
  .lr121-hero:not(.lr124-has-promo) .lr116-promo-card{
    display:none!important;
  }
  .lr121-hero:not(.lr124-has-promo) .lr116-hero-side{
    justify-content:flex-end!important;
  }


  /* Buttons / interactions */
  .lr19-home-actions a:hover,
  .lr116-promo-cta:hover,
  .lr116-discord-panel>.lr19-discord-login-main:hover{
    transform:translateY(-3px) scale(1.025)!important;
    filter:brightness(1.14)!important;
    box-shadow:0 14px 35px rgba(0,0,0,.44),0 0 24px rgba(239,32,40,.22)!important;
  }
}


/* KEYFRAMES */
@keyframes lr124SceneShimmer{
  from{background-position:180% 0}
  to{background-position:-40% 0}
}
@keyframes lr124Kicker{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.35)}
}
@keyframes lr124TitleBreathe{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.08)}
}
@keyframes lr124RPNeon{
  0%,100%{filter:brightness(1);text-shadow:0 0 8px rgba(239,32,40,.22)}
  50%{filter:brightness(1.36);text-shadow:0 0 17px rgba(239,32,40,.58),0 0 31px rgba(239,32,40,.28)}
}
@keyframes lr124TitleLine{
  0%,100%{transform:scaleX(.38);opacity:.42}
  50%{transform:scaleX(1);opacity:1}
}
@keyframes lr124Subtitle{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.12)}
}
@keyframes lr124CtaPulse{
  0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.30)}
  50%{box-shadow:0 12px 33px rgba(0,0,0,.42),0 0 18px rgba(239,32,40,.18)}
}
@keyframes lr124MetaFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@keyframes lr124PromoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
@keyframes lr124GoldBlink{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.35)}
}
@keyframes lr124DiscountPunch{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.045);filter:brightness(1.27)}
}
@keyframes lr124CodeGlow{
  0%,100%{box-shadow:0 0 0 rgba(255,193,58,0)}
  50%{box-shadow:0 0 17px rgba(255,193,58,.13)}
}
@keyframes lr124TimerPulse{
  0%,100%{transform:translateY(0);filter:brightness(1)}
  50%{transform:translateY(-2px);filter:brightness(1.18)}
}
@keyframes lr124DiscordGlow{
  0%,100%{box-shadow:0 14px 34px rgba(0,0,0,.35)}
  50%{box-shadow:0 17px 40px rgba(0,0,0,.44),0 0 18px rgba(88,101,242,.10)}
}
@keyframes lr124StatFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}


/* Keep existing responsive v1.22/v1.21 below desktop */
@media(max-width:1100px){
  .lr121-hero{
    background:
      linear-gradient(90deg,rgba(0,0,0,.68),rgba(0,0,0,.18)),
      url("visuals-v124/hero-live-clean.jpg") center center/cover no-repeat!important;
  }
}