/* CC2 Owner Home: environmental integration only; all layout and media geometry stay intact. */
body.home-experience-active.home-experience-ready:not(.view-only):not(.trial-mode):not(.play-mode)[data-theme="dark"] {
  --home-atmosphere-y: 260px;
  --home-atmosphere-height: clamp(340px, 40vw, 560px);
  background:
    radial-gradient(ellipse 34% var(--home-atmosphere-height) at 20% calc(var(--home-atmosphere-y) + 100px), #099ca01a, transparent 78%),
    radial-gradient(ellipse 32% var(--home-atmosphere-height) at 85% calc(var(--home-atmosphere-y) + 90px), #804d9b14, transparent 78%),
    radial-gradient(ellipse 76% var(--home-atmosphere-height) at 50% var(--home-atmosphere-y), #02080fc7, transparent 86%),
    linear-gradient(90deg, #008ac31c, transparent 45%),
    linear-gradient(270deg, #9715df18, transparent 50%),
    linear-gradient(90deg, #041425, #071b30 52%, #071326) !important;
}

body.home-experience-active.home-experience-ready:not(.view-only):not(.trial-mode):not(.play-mode) #homeExperience .experience-showcase {
  --hero-feather-x: clamp(22px, 3.5vw, 76px);
  --hero-feather-top: clamp(16px, 2vw, 36px);
  --hero-feather-bottom: clamp(18px, 1.6vw, 28px);
  /* Retain the existing border width and clipping box so neither cards nor rows move. */
  border-color: transparent;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

body.home-experience-active.home-experience-ready:not(.view-only):not(.trial-mode):not(.play-mode) #homeExperience .experience-showcase::after {
  content: none;
}

body.home-experience-active.home-experience-ready:not(.view-only):not(.trial-mode):not(.play-mode) #homeExperience .experience-stage {
  /* Mask the photographic environment and inset fascia only, never the card buffers or controls. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 var(--hero-feather-x), #000 calc(100% - var(--hero-feather-x)), transparent),
    linear-gradient(180deg, transparent, #000 var(--hero-feather-top), #000 calc(100% - var(--hero-feather-bottom)), transparent);
  mask-image:
    linear-gradient(90deg, transparent, #000 var(--hero-feather-x), #000 calc(100% - var(--hero-feather-x)), transparent),
    linear-gradient(180deg, transparent, #000 var(--hero-feather-top), #000 calc(100% - var(--hero-feather-bottom)), transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Continue the actual reflective floor under the stats, beyond the hero's clip.
   Sample the floor below the foreground rim so no extra stage edge is copied.
   This paint layer joins the stage's fade without moving or unclipping any card. */
body.home-experience-active.home-experience-ready:not(.view-only):not(.trial-mode):not(.play-mode) #homeExperience .experience-summary {
  position: relative;
  isolation: isolate;
  --home-floor-depth: clamp(64px, 5vw, 96px);
  --home-floor-join: clamp(18px, 1.6vw, 28px);
  --home-floor-gap: 30px;
  --home-floor-side: clamp(22px, 3.5vw, 76px);
}

body.home-experience-active.home-experience-ready:not(.view-only):not(.trial-mode):not(.play-mode) #homeExperience .experience-summary::before {
  content: "" !important;
  position: absolute;
  top: calc(0px - var(--home-floor-gap) - var(--home-floor-join));
  left: 1px;
  right: 1px;
  height: calc(var(--home-floor-join) + var(--home-floor-depth));
  z-index: -1;
  pointer-events: none;
  background: url(./stikdex-collector-grand-stage.webp) center bottom / 100% 2000% no-repeat;
  opacity: .74;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 var(--home-floor-side), #000 calc(100% - var(--home-floor-side)), transparent),
    linear-gradient(180deg, transparent, #000 var(--home-floor-join), #000c calc(var(--home-floor-join) + var(--home-floor-depth) * .18), #0004 calc(var(--home-floor-join) + var(--home-floor-depth) * .58), transparent);
  mask-image:
    linear-gradient(90deg, transparent, #000 var(--home-floor-side), #000 calc(100% - var(--home-floor-side)), transparent),
    linear-gradient(180deg, transparent, #000 var(--home-floor-join), #000c calc(var(--home-floor-join) + var(--home-floor-depth) * .18), #0004 calc(var(--home-floor-join) + var(--home-floor-depth) * .58), transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

body.home-experience-active.home-experience-ready:not(.view-only):not(.trial-mode):not(.play-mode)[data-theme="dark"] #homeExperience .experience-summary::before {
  opacity: .85;
}

@media (max-width: 760px) {
  body.home-experience-active.home-experience-ready:not(.view-only):not(.trial-mode):not(.play-mode)[data-theme="dark"] {
    --home-atmosphere-y: clamp(180px, calc(100dvh - 550px), 310px);
    --home-atmosphere-height: clamp(260px, 42dvh, 360px);
  }

  body.home-experience-active.home-experience-ready:not(.view-only):not(.trial-mode):not(.play-mode) #homeExperience .experience-showcase {
    /* Short mobile fades protect the approved card separation and STIKDEX fascia. */
    --hero-feather-x: 14px;
    --hero-feather-top: 10px;
    --hero-feather-bottom: 12px;
  }

  body.home-experience-active.home-experience-ready:not(.view-only):not(.trial-mode):not(.play-mode) #homeExperience .experience-summary {
    --home-floor-depth: clamp(36px, 6.5dvh, 60px);
    --home-floor-join: 12px;
    --home-floor-gap: 14px;
    --home-floor-side: 14px;
  }

  /* Let the same room lighting reach the page margins. The first grid row
     tracks the approved hero height without changing its clipping or artwork. */
  body.home-experience-active.home-experience-ready:not(.view-only):not(.trial-mode):not(.play-mode) #homeExperience .experience-mobile {
    position: relative;
    isolation: isolate;
  }

  body.home-experience-active.home-experience-ready:not(.view-only):not(.trial-mode):not(.play-mode) #homeExperience .experience-mobile::before {
    content: "";
    position: absolute;
    grid-area: 1 / 1 / 2 / -1;
    inset-block: 0;
    inset-inline: -14px;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(ellipse 64px 70% at 0 54%, #16748259, transparent 82%),
      radial-gradient(ellipse 64px 70% at 100% 54%, #65518459, transparent 82%);
    opacity: .6;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    mask-image: linear-gradient(180deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  }

  body.home-experience-active.home-experience-ready:not(.view-only):not(.trial-mode):not(.play-mode)[data-theme="dark"] #homeExperience .experience-mobile::before {
    opacity: 1;
  }
}

@media (max-width: 760px) and (max-height: 840px) {
  body.home-experience-active.home-experience-ready:not(.view-only):not(.trial-mode):not(.play-mode) #homeExperience .experience-summary {
    --home-floor-gap: 11px;
  }
}