/* =============================================================
   LA ROJA RP v1.23 — DESKTOP PIXEL MATCH
   Desktop hero is based on the exact approved screenshot.
   Mobile/tablet retain the real responsive v1.22 structure.
   ============================================================= */

@media(min-width:1101px){
  .lr121-hero{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:1304 / 553!important;
    padding:0!important;
    display:block!important;
    overflow:hidden!important;
    background:
      url("visuals-v123/home-approved-exact.jpg") center center / 100% 100% no-repeat!important;
    border-bottom:2px solid rgba(230,28,30,.66)!important;
    box-shadow:none!important;
  }
  .lr121-hero:before,
  .lr121-hero:after,
  .lr121-hero .lr118-particles,
  .lr121-hero .lr119-embers,
  .lr121-hero .lr121-embers,
  .lr121-hero .lr120-pointer-glow{
    display:none!important;
  }

  /* Real left content remains interactive but visually hidden,
     because the approved screenshot already contains it pixel-perfect. */
  .lr114-home-copy{
    position:absolute!important;
    z-index:20!important;
    left:3.8%!important;
    top:26%!important;
    width:48%!important;
    height:48%!important;
    max-width:none!important;
    margin:0!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  .lr114-home-copy .lr19-home-actions{
    pointer-events:auto!important;
  }
  .lr114-home-copy .lr19-home-actions a{
    opacity:0!important;
    position:absolute!important;
    top:61%!important;
    height:15%!important;
    min-height:0!important;
  }
  .lr114-home-copy .lr19-home-actions a:first-child{
    left:0!important;
    width:28%!important;
  }
  .lr114-home-copy .lr19-home-actions a:nth-child(2){
    left:30%!important;
    width:24%!important;
  }

  /* Hide baked promo/discord area using a precisely aligned overlay, then render live cards. */
  .lr116-hero-side{
    position:absolute!important;
    z-index:25!important;
    right:3.0%!important;
    top:5.0%!important;
    width:26.0%!important;
    height:83%!important;
    max-width:none!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    gap:2.2%!important;
    opacity:1!important;
  }
  .lr116-hero-side:before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-1.2% -1.2% -1.0% -1.2%;
    background:
      linear-gradient(180deg,rgba(5,1,2,.995),rgba(7,2,2,.99));
    border-radius:8px;
  }

  /* Live promotion */
  .lr116-promo-card{
    flex:0 0 66%!important;
    width:100%!important;
    min-height:0!important;
    max-height:none!important;
    padding:5.4% 5.2% 4.5%!important;
    border-radius:8px!important;
    background:linear-gradient(160deg,rgba(26,5,6,.99),rgba(7,2,2,.99))!important;
    border:1px solid rgba(233,35,34,.55)!important;
    box-shadow:0 18px 46px rgba(0,0,0,.46)!important;
  }
  .lr116-promo-kicker{
    font-size:clamp(7px,.54vw,10px)!important;
  }
  .lr116-promo-value{
    font-size:clamp(31px,3.15vw,54px)!important;
    line-height:.94!important;
    margin:3% 0 1%!important;
  }
  .lr116-promo-sub{
    font-size:clamp(7px,.52vw,9px)!important;
  }
  .lr116-promo-code{
    min-height:0!important;
    height:15%!important;
    margin:5.0% 0 4%!important;
    padding:0 4%!important;
    font-size:clamp(7px,.48vw,9px)!important;
  }
  .lr116-promo-code b{
    font-size:clamp(9px,.68vw,12px)!important;
  }
  .lr116-promo-timer-wrap{
    padding-top:2%!important;
  }
  .lr116-promo-timer-label{
    font-size:clamp(7px,.46vw,9px)!important;
  }
  .lr116-promo-timer{
    gap:2%!important;
    margin-top:3%!important;
  }
  .lr116-promo-timer>span{
    min-width:0!important;
    width:24%!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:1.35 / 1!important;
    padding:4%!important;
    font-size:clamp(10px,.9vw,15px)!important;
  }
  .lr116-promo-cta{
    min-height:0!important;
    height:15%!important;
    margin-top:4%!important;
    font-size:clamp(7px,.48vw,9px)!important;
  }

  /* Live Discord card */
  .lr116-discord-panel{
    flex:1 1 auto!important;
    width:100%!important;
    min-height:0!important;
    max-height:none!important;
    padding:4.5% 5%!important;
    border-radius:8px!important;
    display:grid!important;
    grid-template-columns:1fr 18%!important;
    grid-template-areas:
      "title icon"
      "copy icon"
      "button button"!important;
    row-gap:4%!important;
    column-gap:4%!important;
    background:linear-gradient(160deg,rgba(14,4,4,.99),rgba(5,2,2,.99))!important;
    border:1px solid rgba(255,137,28,.28)!important;
  }
  .lr116-discord-panel>span{
    grid-area:title!important;
    font-size:clamp(7px,.50vw,9px)!important;
  }
  .lr116-discord-panel>p{
    grid-area:copy!important;
    font-size:clamp(6px,.44vw,8px)!important;
    line-height:1.35!important;
  }
  .lr116-discord-panel>.lr19-discord-big{
    grid-area:icon!important;
    width:100%!important;
    height:auto!important;
    margin:0!important;
  }
  .lr116-discord-panel>.lr19-discord-big svg{
    width:100%!important;
    height:auto!important;
  }
  .lr116-discord-panel>.lr19-discord-login-main{
    grid-area:button!important;
    height:30%!important;
    min-height:0!important;
    margin:0!important;
    font-size:clamp(7px,.48vw,9px)!important;
  }

  /* Hide real bottom stats; screenshot already contains exact tiles.
     Keep them non-interactive since they are informational only. */
  .lr115-roleplay-stats{
    display:none!important;
  }

  /* Preserve live animations only where they do not alter screenshot geometry */
  .lr116-promo-card{
    animation:lr123PromoGlow 2.4s ease-in-out infinite!important;
  }
  .lr116-promo-value{
    animation:lr123Discount 1.8s ease-in-out infinite!important;
  }
  .lr116-promo-code{
    animation:lr123Code 2.0s ease-in-out infinite!important;
  }
  .lr116-discord-panel{
    animation:lr123Discord 3s ease-in-out infinite!important;
  }
  .lr116-promo-cta:hover,
  .lr116-discord-panel>.lr19-discord-login-main:hover{
    transform:translateY(-2px) scale(1.015)!important;
    filter:brightness(1.12)!important;
  }

  /* If no coupon is active, conceal the baked promo with a clean empty dark panel
     while keeping the Discord live card in place. */
  .lr121-hero:not(.lr123-has-promo) .lr116-hero-side:before{
    background:linear-gradient(180deg,rgba(4,1,1,.995),rgba(5,2,2,.995))!important;
  }
  .lr121-hero:not(.lr123-has-promo) .lr116-hero-side{
    justify-content:flex-end!important;
  }
  .lr121-hero:not(.lr123-has-promo) .lr116-discord-panel{
    flex:0 0 31%!important;
  }
}

@keyframes lr123PromoGlow{
  0%,100%{box-shadow:0 18px 46px rgba(0,0,0,.45),0 0 0 rgba(232,34,33,0)}
  50%{box-shadow:0 20px 50px rgba(0,0,0,.52),0 0 20px rgba(232,34,33,.15)}
}
@keyframes lr123Discount{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.24)}
}
@keyframes lr123Code{
  0%,100%{border-color:rgba(232,54,43,.58)}
  50%{border-color:#ffc13a;box-shadow:0 0 15px rgba(255,193,58,.11)}
}
@keyframes lr123Discord{
  0%,100%{box-shadow:0 14px 34px rgba(0,0,0,.34)}
  50%{box-shadow:0 17px 40px rgba(0,0,0,.44),0 0 16px rgba(88,101,242,.08)}
}