/* Peripheral Light: two quiet edge canvases, never a moving layer behind copy. */
.games-directory-page { --page-canvas: url("assets/backgrounds/games-edges-v1.webp"); }
.guide-page--vip { --page-canvas: url("assets/backgrounds/vip-edges-v1.webp"); }
.guide-page--payments { --page-canvas: url("assets/backgrounds/payments-edges-v1.webp"); }
.guide-page--safety { --page-canvas: url("assets/backgrounds/safety-edges-v1.webp"); }
.guide-page--help { --page-canvas: url("assets/backgrounds/help-edges-v1.webp"); }

:is(.games-directory-page, .guide-page) :is(.games-page-hero, .guide-hero) {
  background: #171a1b;
}

/* Each side shows its own edge of the same artwork, without mirroring or
   stretching it. This also keeps both edges visible on narrow screens. */
:is(.games-directory-page, .guide-page) :is(.games-page-hero, .guide-hero)::before,
:is(.games-directory-page, .guide-page) :is(.games-page-hero, .guide-hero)::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: clamp(100px, calc((100vw - 1240px) / 2 + 130px), 420px);
  pointer-events: none;
  background-image:
    linear-gradient(#171a1b, transparent 24%, transparent 76%, #171a1b),
    var(--page-canvas);
  background-position: center, left center;
  background-size: 100% 100%, auto clamp(600px, 51vw, 940px);
  background-repeat: no-repeat;
  opacity: .6;
  -webkit-mask-image: linear-gradient(to right, #000, transparent 100%);
  mask-image: linear-gradient(to right, #000, transparent 100%);
}

:is(.games-directory-page, .guide-page) :is(.games-page-hero, .guide-hero)::after {
  inset: 0 0 0 auto;
  background-position: center, right center;
  -webkit-mask-image: linear-gradient(to left, #000, transparent 100%);
  mask-image: linear-gradient(to left, #000, transparent 100%);
}

/* Keep the content hierarchy and existing yellow CTAs unchanged. */
:is(.games-page-hero__layout, .guide-hero__layout) {
  position: relative;
  z-index: 1;
}

.guide-page--help .guide-hero::before,
.guide-page--help .guide-hero::after { opacity: .54; }

@media (max-width: 900px) {
  :is(.games-directory-page, .guide-page) :is(.games-page-hero, .guide-hero)::before,
  :is(.games-directory-page, .guide-page) :is(.games-page-hero, .guide-hero)::after {
    width: 22vw;
    background-size: 100% 100%, auto 620px;
    background-position-y: 0, 100px;
    opacity: .4;
  }
}

@media (max-width: 600px) {
  :is(.games-directory-page, .guide-page) :is(.games-page-hero, .guide-hero)::before,
  :is(.games-directory-page, .guide-page) :is(.games-page-hero, .guide-hero)::after {
    width: 23vw;
    background-size: 100% 100%, auto 500px;
    background-position-y: 0, 90px;
    opacity: .28;
  }
}

@media (forced-colors: active) {
  :is(.games-directory-page, .guide-page) :is(.games-page-hero, .guide-hero)::before,
  :is(.games-directory-page, .guide-page) :is(.games-page-hero, .guide-hero)::after {
    display: none;
  }
}