/* Region underlay cleanup
   Removes heavy dark backplates/shadows behind the carousel and horizontal game shelves,
   while keeping the actual cards readable and the shared body background intact. */

.app.region-page,
.app.game-detail-page,
.app.cart-page {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.region-page .region-hero,
.region-page .shelf,
.region-page .section,
.region-page .subscriptions {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

.region-page .region-hero::before,
.region-page .region-hero::after,
.region-page .shelf::before,
.region-page .shelf::after,
.region-page .section::before,
.region-page .section::after,
.region-page .subscriptions::before,
.region-page .subscriptions::after,
.region-page .hero-track::before,
.region-page .hero-track::after,
.region-page .shelf-row::before,
.region-page .shelf-row::after {
  display: none !important;
  content: none !important;
}

.region-page .hero-track,
.region-page .shelf-row,
.region-page .sub-list {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.region-page .hero-track,
.region-page .shelf-row {
  isolation: auto !important;
}

/* The visible dark rectangles were mostly card shadows, not section backgrounds.
   Keep the card borders/fills, but remove the broad dark backplate-like shadows. */
.region-page .hero-slide,
.region-page .game-cover,
.region-page .topup-image,
.region-page .topup-visual,
.region-page .game-edition-card {
  box-shadow: none !important;
  filter: none !important;
}

.region-page .hero-slide {
  /* A tiny inner highlight keeps the premium edge without creating a backplate outside. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

.region-page .game-cover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.region-page .game-card {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.region-page .game-card::before,
.region-page .game-card::after {
  display: none !important;
  content: none !important;
}

/* Keep decorative depth inside card bounds.
   The blobs/glows are allowed, but they must be clipped by the card radius. */
.hero,
.card,
.region-page .hero-slide,
.region-page .sub-card,
.region-page .sub-visual,
.region-page .single-subscription .sub-card,
.game-detail-page .game-detail-hero,
.game-detail-page .game-detail-card,
.cart-page .cart-card,
.cart-page .product-row,
.subscription-detail-page .subscription-hero-card,
.subscription-detail-page .subscription-price-card,
.subscription-detail-page .subscription-features-card {
  overflow: hidden !important;
  isolation: isolate;
  background-clip: padding-box;
}

/* Do not render hero depth as a separate pseudo-element.
   Telegram WebView can show it as a protruding rectangle even when the parent is clipped.
   The same cyan volume is part of the .hero background in theme-playful.css. */
.hero::before {
  display: none !important;
  content: none !important;
}

.card::before,
.card::after,
.region-page .sub-card::before,
.region-page .sub-card::after {
  pointer-events: none;
}

.region-page .sub-visual-glow,
.subscription-card-image-fallback .sub-visual-glow {
  display: block !important;
  position: absolute;
  left: -10px;
  bottom: -18px;
  width: 86px;
  height: 86px;
  border-radius: 999px;
  background: rgba(93, 231, 255, 0.22);
  opacity: 0.44;
  filter: blur(0.2px);
  pointer-events: none;
  z-index: 1;
}

/* Subscription cards intentionally keep a controlled shadow because they are large CTA blocks,
   but it must not look like a separate backplate behind the card. */
.region-page .sub-card {
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 10px 28px rgba(0, 0, 0, 0.16) !important;
}

@media (max-width: 768px) {
  .app.region-page,
  .app.game-detail-page,
  .app.cart-page {
    min-height: 100vh;
    min-height: 100dvh;
    background: transparent !important;
    background-image: none !important;
  }

  .hero,
  .card,
  .region-page .hero-slide,
  .region-page .sub-card,
  .region-page .sub-visual,
  .subscription-detail-page .subscription-hero-card {
    transform: translateZ(0);
  }
}