
.halloween-page, .halloween-page * {
  box-sizing: border-box;
}

.halloween-page {
  background: #090916;
  color: white;
}

.halloween-page {
  margin: 0;
}

.halloween-page {
  position: relative;
  overflow: hidden;
  padding: 20px 0 28px;
  text-align: center;
}

.halloween-page .halloween-header {
  position: relative;
  z-index: 2;
}

.halloween-page .halloween-title {
  margin: 0;
  height: 140px;
}

.halloween-page .halloween-title .halloween-image {
  width: 460px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: -8px auto 0;
}

.halloween-page .halloween-heading {
  font-family: 'FB-Display';
  font-size: 45px;
  font-weight: 950;
  line-height: 1.15;
  margin: 0;
}

.halloween-page .halloween-header .halloween-text {
  font-family: Georgia,'Times New Roman',serif;
  font-size: 22px;
  line-height: 1.3;
  margin: 12px 0 0;
}

.halloween-page .halloween-scene {
  position: relative;
  width: 1100px;
  height: 496px;
  margin: -12px auto 0;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
}

.halloween-page .halloween-castle {
  position: absolute;
  width: 1100px;
  height: auto;
  left: 0;
  top: -26px;
}

.halloween-page .halloween-ghost {
  position: absolute;
  width: 280px;
  will-change: transform;
  animation: halloween-float 4s ease-in-out infinite alternate;
}

.halloween-page .halloween-ghost-left {
  left: 57px;
  top: 189px;
}

.halloween-page .halloween-ghost-right {
  width: 255px;
  right: 44px;
  top: 14px;
  animation-direction: alternate-reverse;
}

.halloween-page .halloween-fog {
  position: absolute;
  inset: 260px -35px -15px;
  overflow: visible;
  pointer-events: none;
}

.halloween-page .halloween-fog .halloween-image {
  position: absolute;
  width: 1170px;
  left: 0;
  top: 0;
  animation: halloween-mist 7s ease-in-out infinite alternate;
  will-change: transform;
  opacity: .72;
}

.halloween-page .halloween-fog .halloween-image+.halloween-image {
  opacity: .25;
  animation: halloween-mist 9s ease-in-out -3.5s infinite alternate-reverse;
}

.halloween-page .halloween-steps {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  margin: -14px auto 0;
}

.halloween-page .halloween-steps .halloween-image {
  width: 225px;
  height: auto;
}

.halloween-page .halloween-steps .halloween-image:last-child {
  width: 267px;
}

.halloween-page .halloween-offers {
  position: relative;
  display: block;
  width: 267px;
  margin: 70px auto 0;
  transition: filter .2s,transform .2s;
}

.halloween-page .halloween-offers .halloween-image {
  display: block;
  width: 100%;
}

.halloween-page .halloween-offers:hover {
  filter: brightness(1.14);
  transform: translateY(-2px);
}

.halloween-page .halloween-offers:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
}

.halloween-page .halloween-games {
  font-family: Georgia,'Times New Roman',serif;
  font-size: 22px;
  font-weight: 400;
  text-shadow: 0 0 3px #ff1b85,0 0 8px #ff1b85,0 0 13px #ff1b85;
  margin: 74px 10px 0;
}

@keyframes halloween-float {
  from {
    transform: translateY(-18px);
  }

  to {
    transform: translateY(18px);
  }

}

@keyframes halloween-mist {
  0% {
    transform: translate(-24px,5px) scale(1.02);
  }

  50% {
    transform: translate(12px,-8px) scale(1.06);
  }

  100% {
    transform: translate(30px,3px) scale(1.02);
  }

}

.halloween-page .halloween-dialog {
  background: #11111f;
  color: white;
  border: 1px solid #00cea2;
  border-radius: 8px;
  max-width: 440px;
  padding: 35px;
  font: 18px/1.5 Georgia;
}

.halloween-page .halloween-dialog .halloween-heading {
  font-size: 24px;
}

.halloween-page .halloween-dialog::backdrop {
  background: #000a;
}

.halloween-page .halloween-close {
  position: absolute;
  right: 8px;
  top: 3px;
  color: white;
  background: none;
  border: 0;
  font-size: 30px;
  cursor: pointer;
}

@media(min-width:1400px) {
  .halloween-page {
    padding-top: 30px;
  }

}

@media(max-width:600px) {
  .halloween-page {
    padding-top: 12px;
    padding-bottom: 28px;
  }

  

  .halloween-page .halloween-title .halloween-image {
    max-width: 110%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: -7px 0 0;
  }

  .halloween-page .halloween-heading {
    font-size: 32px;
    white-space: nowrap;
  }

  .halloween-page .halloween-header .halloween-text {
    font-size: 19px;
    line-height: 1.25;
    margin: 21px auto 0;
    max-width: 320px;
  }

  .halloween-page .halloween-header .halloween-text .halloween-break {
    display: none;
  }

  .halloween-page .halloween-scene {
    height: 470px;
    margin-top: -12px;
  }

  .halloween-page .halloween-castle {
    width: 850px;
    top: -5px;
  }

  .halloween-page .halloween-ghost-left {
    width: 208px;
    left: 27%;
    top: 45%;
  }

  .halloween-page .halloween-ghost-right {
    width: 208px;
    right: 34%;
    top: 74%;
  }



  .halloween-page .halloween-fog .halloween-image {
    width: 870px;
  }

  .halloween-page .halloween-steps {
    margin-top: -11px;
    flex-direction: column;
    align-items: center;
    gap: 46px;
  }

  .halloween-page .halloween-steps .halloween-image, .halloween-page .halloween-steps .halloween-image:last-child {
    width: 313px;
    max-width: 88%;
    height: 216px;
    object-fit: fill;
  }

  .halloween-page .halloween-steps .halloween-image:last-child {
    height: 216px;
  }

  .halloween-page .halloween-offers {
    width: 290px;
    margin-top: 54px;
  }

  .halloween-page .halloween-games {
    font-size: 21px;
    margin-top: 70px;
  }

 
  

}

@media(prefers-reduced-motion:reduce) {
  .halloween-page .halloween-ghost, .halloween-page .halloween-fog .halloween-image {
    animation: none;
  }

  .halloween-page .halloween-offers {
    transition: none;
  }

}

.halloween-page .halloween-fog {
  filter: url(#halloween-smoke-flow);
}

@media(prefers-reduced-motion:reduce) {
  .halloween-page .halloween-fog {
    filter: none;
  }

}

.halloween-page .halloween-castle-art {
  position: absolute;
  left: 0;
  top: -26px;
  width: 100%;
  aspect-ratio: 1516/851;
}

.halloween-page .halloween-castle-art .halloween-castle {
  width: 100%;
  top: 0;
  left: 0;
}

.halloween-page .halloween-sign-flicker {
  position: absolute;
  left: 44.3271768%;
  top: 41.1280846%;
  width: 10.0263852%;
  height: auto;
  opacity: 0;
  pointer-events: none;
  animation: halloween-sign-short-circuit 11s steps(1,end) infinite;
}

@keyframes halloween-sign-short-circuit {
  0%, 23%, 27.5%, 32%, 63%, 68%, 74%, 100% {
    opacity: 0;
  }

  24%, 28.8%, 64.5%, 69.5% {
    opacity: .98;
  }

  25.5%, 30.5%, 66% {
    opacity: .55;
  }

  71% {
    opacity: 1;
  }

  72.8% {
    opacity: .7;
  }

}

@media(max-width:600px) {
  .halloween-page .halloween-castle-art {
    top: -5px;
  }

}

@media(prefers-reduced-motion:reduce) {
  .halloween-page .halloween-sign-flicker {
    animation: none;
    opacity: 0;
  }

}

.halloween-page {
  margin: 0;
  background: #090916;
  color: #fff;
  isolation: isolate;
  font-family: Georgia,"Times New Roman",serif;
  line-height: normal;
}

.halloween-page .halloween-image {
  border: 0;
  max-width: none;
  vertical-align: middle;
}

.halloween-page .halloween-dialog {
  margin: auto;
}

.halloween-page .halloween-close {
  font-family: Arial,sans-serif;
}




  ._oneColumn_1gh8y_15 {
        max-width: 100% !important;
    }
    
    ._wrapper_1t08r_1 {
        background: unset !important;
    }
    
    ._wrapper_l3wwz_1 {
        background-color: unset !important;
    }
    
    ._sectionTitleWrapper_l3wwz_7 {
        display: none !important;
    }
    
    ._wrapper_l3wwz_1 {
        padding: 0 !important;
    }
    
    ._showMoreBlock_higv6_13 {
        background-color: unset !important;
    }
    
    ._base_1jh0l_90 {
        color: white !important;
    }
    
  
    ._cardItem_higv6_12, ._showMoreBlock_higv6_13 {
    
        margin-right: 10px !important;
    }

    @media (min-width: 1024px) {
    ._gamesListWrapper_l3wwz_22 {
        padding: var(--b-spacing-xl) var(--b-spacing-l) 0;
        width: 70%;
    }
}

@media screen and (max-width: 491px) {
    ._gamesList_higv6_1 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
    

      /* Scena cu imaginea furnizată */
      .halloween-page .halloween-gif-scene {
        position: relative;
        isolation: isolate;
        width: 100%;
        max-width: 1280px;
        margin: 0 auto;
        overflow: hidden;
      }

      .halloween-page .halloween-gif-scene-image {
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: contain;

        -webkit-mask-image: radial-gradient(
          ellipse at 50% 46%,
          #000 38%,
          rgba(0, 0, 0, 0.9) 52%,
          transparent 74%
        );

        mask-image: radial-gradient(
          ellipse at 50% 46%,
          #000 38%,
          rgba(0, 0, 0, 0.9) 52%,
          transparent 74%
        );
      }

      /* Fantomele roz din design */
      .halloween-page .halloween-gif-ghost-left,
      .halloween-page .halloween-gif-ghost-right {
        position: absolute;
        z-index: 1;
        display: block;
        height: auto;
        pointer-events: none;
      }

      .halloween-page .halloween-gif-ghost-left {
        width: 35%;
        left: 2%;
        top: 26%;
        animation: halloween-gif-float-left 5s ease-in-out infinite;
      }

      .halloween-page .halloween-gif-ghost-right {
        width: 35%;
        right: 4%;
        top: -6%;
        animation: halloween-gif-float-right 6s ease-in-out infinite;
      }

      @keyframes halloween-gif-float-left {
        0%,
        100% {
          transform: translateY(0) rotate(-4deg);
        }

        50% {
          transform: translateY(-12px) rotate(3deg);
        }
      }

      @keyframes halloween-gif-float-right {
        0%,
        100% {
          transform: translateY(0) rotate(4deg);
        }

        50% {
          transform: translateY(-16px) rotate(-3deg);
        }
      }

      /* Cardurile de jocuri din site */
      ._wrapper_ogiih_6,
      ._wideGameWrapper_ogiih_7,
      ._launchOnTapGameWrapper_ogiih_8 {
        border-radius: 8px !important;
      }

      @media (max-width: 600px) {
        .halloween-page .halloween-gif-scene {
          width: 100%;
          max-width: none;
        }

        .halloween-page .halloween-gif-ghost-left {
          width: 14%;
          left: 13%;
        }

        .halloween-page .halloween-gif-ghost-right {
          width: 13%;
          right: 12%;
        }

       

       
      }

      @media (prefers-reduced-motion: reduce) {
        .halloween-page .halloween-gif-ghost-left,
        .halloween-page .halloween-gif-ghost-right {
          animation: none;
        }
      }

      .halloween-page .halloween-scene-grass {
  position: absolute;
  bottom: -35px;
  left: 50%;
  z-index: 4;

  display: block;
  width: 110%;
  max-width: none;
  height: auto;

  transform: translateX(-50%);
  pointer-events: none;

  /* Îmbină baza și marginile ierbii cu fundalul. */
  -webkit-mask-image: radial-gradient(
    ellipse at 50% 35%,
    #000 35%,
    transparent 75%
  );

  mask-image: radial-gradient(
    ellipse at 50% 35%,
    #000 35%,
    transparent 75%
  );
}

@media (max-width: 600px) {
  .halloween-page .halloween-scene-grass {
    width: 120%;
  }
}
    
/* Conac estompat: zona centrală rămâne vizibilă. */
.halloween-page .halloween-gif-scene-image {
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse at 50% 43%, #000 23%, rgba(0,0,0,.88) 40%, rgba(0,0,0,.35) 57%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 43%, #000 23%, rgba(0,0,0,.88) 40%, rgba(0,0,0,.35) 57%, transparent 72%);
}
.halloween-page .halloween-gif-scene::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, #090916 0%, transparent 22%, transparent 45%, rgba(9,9,22,.64) 73%, #090916 100%),
    linear-gradient(to right, #090916 0%, rgba(9,9,22,.55) 14%, transparent 33%, transparent 67%, rgba(9,9,22,.55) 86%, #090916 100%);
}
.halloween-page .halloween-gif-ghost-left,
.halloween-page .halloween-gif-ghost-right { z-index: 2; }
.halloween-page .halloween-scene-grass { z-index: 3; }

/* Două nori de fum, ridicați peste iarbă, spre baza conacului. */
.halloween-page .halloween-scene-mist {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.halloween-page .halloween-scene-mist-layer {
  position: absolute;
  bottom: 7%;
  display: block;
  width: 57%;
  max-width: none;
  height: auto;
  opacity: 1.66;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  animation: halloween-foreground-mist 12s ease-in-out infinite alternate;
}
.halloween-page .halloween-scene-mist-left {
  left: -5%;
}
.halloween-page .halloween-scene-mist-right {
  right: -5%;
  bottom: 9%;
  animation-duration: 16s;
  animation-delay: -5s;
  animation-direction: alternate-reverse;
}
@keyframes halloween-foreground-mist {
  from { transform: translate(-2%, 1%) scale(1.02); }
  to { transform: translate(2%, -2%) scale(1.06); }
}
@media (max-width: 600px) {
  .halloween-page .halloween-scene-mist-layer {
    width: 63%;
    bottom: 9%;
    opacity: 1.6;
  }
  .halloween-page .halloween-scene-mist-left { left: -10%; }
  .halloween-page .halloween-scene-mist-right { right: -10%; bottom: 11%; }
}
@media (prefers-reduced-motion: reduce) {
  .halloween-page .halloween-scene-mist-layer { animation: none; }
}

/* Pașii 1–2–3 urcă spre marginea ierbii. */
.halloween-page .halloween-steps {
  margin-top: -7%;
  z-index: 5;
}
@media (max-width: 600px) {
  .halloween-page .halloween-steps {
    margin-top: -30px;
  }
}

/* Halouri roz din design, în spatele fantomelor și al fumului. */
.halloween-page .halloween-eclipse {
  position: absolute;
  z-index: 1;
  display: block;
  width: 38%;
  max-width: none;
  height: auto;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  opacity: .55;
}
.halloween-page .halloween-eclipse-left {
  left: 21%;
  top: 55%;
}
.halloween-page .halloween-eclipse-right {
  left: 80%;
  top: 20%;
  opacity: .65;
}
.halloween-page .halloween-eclipse-door {
  left: 50%;
  top: 61%;
  width: 45%;
  opacity: 1.65;
}
/* Ordinea: conac → umbră → halouri → fantome → iarbă → fum. */
.halloween-page .halloween-gif-scene::after { z-index: 1; }
.halloween-page .halloween-gif-ghost-left,
.halloween-page .halloween-gif-ghost-right { z-index: 6; }
.halloween-page .halloween-scene-grass { z-index: 4; }
.halloween-page .halloween-scene-mist { z-index: 5; }
@media (max-width: 600px) {
  .halloween-page .halloween-eclipse-left { width: 44%; left: 20%; }
  .halloween-page .halloween-eclipse-right { width: 42%; left: 81%; }
  .halloween-page .halloween-eclipse-door { width: 48%; }
}

/* Mobil: cadru vertical, cu intrarea conacului centrată ca în referință. */
@media (max-width: 600px) {
  .halloween-page .halloween-gif-scene {
    width: 100%;
    height: clamp(500px, 150vw, 680px);
    max-width: none;
    margin: -10px auto 0;
    overflow: hidden;
  }

  .halloween-page .halloween-gif-scene-image {
    position: absolute;
    top: 0;
    left: 50%;
    width: auto;
    min-width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 68%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 68%, transparent 100%);
  }

  .halloween-page .halloween-gif-scene::after {
    background: linear-gradient(to bottom, #090916 0%, transparent 12%, transparent 64%, rgba(9,9,22,.35) 80%, #090916 100%);
  }

  .halloween-page .halloween-gif-ghost-left {
    width: 49%;
    left: -6%;
    top: 41%;
  }

  .halloween-page .halloween-gif-ghost-right {
    width: 49%;
    right: 5%;
    top: 58%;

  }

  .halloween-page .halloween-scene-grass {
    width: 220%;
    bottom: 0;
  }

  .halloween-page .halloween-scene-mist-layer {
    width: 100%;
    bottom: 9%;
    opacity: .6;
  }

  .halloween-page .halloween-scene-mist-left { left: -38%; }
  .halloween-page .halloween-scene-mist-right { right: -38%; bottom: 10%; }

  .halloween-page .halloween-eclipse-door {
    width: 115%;
    left: 50%;
    top: 68%;
    opacity: 1.65;
  }

  .halloween-page .halloween-steps {
    margin-top: -8rem;
    z-index: 6;
  }
}

/* Lumina roz este desenată exclusiv din CSS, fără imagine eclipse. */
.halloween-page .halloween-eclipse {
  z-index: 2;
  height: auto;
  aspect-ratio: 992 / 688;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 67%,
    rgba(255, 55, 136, .82) 0%,
    rgba(255, 40, 133, .56) 20%,
    rgba(242, 22, 118, .28) 39%,
    rgba(227, 18, 111, .08) 58%,
    rgba(227, 18, 111, 0) 76%
  );
  filter: blur(16px);
  opacity: .9;
  mix-blend-mode: screen;
  pointer-events: none;
}
@media (max-width: 600px) {
  .halloween-page .halloween-eclipse-door {
    filter: blur(12px);
    opacity: .85;
  }
}
