.app-shell {
  --environment-botanical-duration: 18s;
  --environment-window-light-duration: 16s;
  --environment-warm-reflection-duration: 20s;
}

.editorial-environment {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.editorial-environment::before {
  position: absolute;
  inset: 14% 8% 10%;
  background:
    radial-gradient(
      ellipse 62% 46% at 52% 48%,
      var(--color-table-cool-accent) 0%,
      transparent 72%
    );
  content: "";
  opacity: var(--editorial-environment-ambient-opacity);
  pointer-events: none;
}

.editorial-environment__asset,
.editorial-environment__asset > img,
.editorial-environment__light,
.editorial-environment__botanical-shadow,
.editorial-environment__table-arc,
.editorial-environment__reflection {
  position: absolute;
  pointer-events: none;
}

.editorial-environment__asset {
  z-index: 0;
  inset: 0;
  display: block;
  opacity: var(--editorial-environment-asset-opacity);
}

.editorial-environment__asset > img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--editorial-environment-portrait-position);
}

.editorial-environment__light {
  z-index: 1;
  inset: -16% -20% 28% -24%;
  background:
    radial-gradient(
      ellipse 70% 68% at 22% 18%,
      var(--color-table-light) 0%,
      color-mix(
        in srgb,
        var(--color-table-light) 46%,
        transparent
      ) 42%,
      transparent 76%
    );
  opacity: var(--editorial-environment-light-opacity);
  animation: environment-window-light-breathe
    var(--environment-window-light-duration) ease-in-out infinite alternate;
}

.editorial-environment__botanical-shadow {
  z-index: 2;
  inset: 3% 48% 24% -18%;
  background:
    radial-gradient(
      ellipse 19% 38% at 18% 18%,
      var(--color-table-shadow) 0 42%,
      transparent 76%
    ),
    radial-gradient(
      ellipse 24% 15% at 45% 31%,
      var(--color-table-cool-accent) 0 38%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 17% 34% at 36% 58%,
      var(--color-table-shadow) 0 40%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 27% 16% at 70% 72%,
      var(--color-table-cool-accent) 0 38%,
      transparent 74%
    ),
    linear-gradient(
      116deg,
      transparent 0 43%,
      var(--color-table-shadow) 48% 50%,
      transparent 55% 100%
    );
  opacity: var(--editorial-environment-botanical-opacity);
  transform: rotate(-7deg);
  transform-origin: 18% 12%;
  animation: environment-botanical-drift
    var(--environment-botanical-duration) ease-in-out infinite;
}

.editorial-environment__table-arc {
  z-index: 3;
  right: -24%;
  bottom: -27%;
  left: -24%;
  height: 60%;
  border-radius: 50% 50% 0 0 / 20% 20% 0 0;
  background:
    radial-gradient(
      ellipse 72% 46% at 50% 0%,
      transparent 0 56%,
      color-mix(
        in srgb,
        var(--color-table-shadow) 64%,
        transparent
      ) 59%,
      color-mix(
        in srgb,
        var(--color-table-warm-mid) 78%,
        transparent
      ) 62% 100%
    );
  opacity: var(--editorial-environment-arc-opacity);
}

.editorial-environment__reflection {
  z-index: 4;
  right: -10%;
  bottom: 4%;
  width: 72%;
  height: 34%;
  background:
    radial-gradient(
      ellipse 70% 56% at 64% 54%,
      var(--color-gold-300) 0%,
      color-mix(
        in srgb,
        var(--color-gold-300) 38%,
        transparent
      ) 40%,
      transparent 74%
    );
  opacity: var(--editorial-environment-reflection-opacity);
  animation: environment-warm-reflection-drift
    var(--environment-warm-reflection-duration) ease-in-out infinite reverse;
}

/*
 * Environment-only micro-motion. Each layer uses a different period and
 * direction so the combined backdrop never reads as one loading loop, and
 * every stop returns to its start value so the cycle loops without a snap.
 * These decorative layers are siblings of both screens and never target a
 * card, a screen, or any gameplay surface.
 */
@keyframes environment-botanical-drift {
  0% {
    transform: translate3d(0px, 0px, 0px) rotate(-7deg);
  }

  27% {
    transform: translate3d(2.4px, -1.6px, 0px) rotate(-6.86deg);
  }

  52% {
    transform: translate3d(4px, 1.2px, 0px) rotate(-7.18deg);
  }

  73% {
    transform: translate3d(1.1px, 3px, 0px) rotate(-6.91deg);
  }

  100% {
    transform: translate3d(0px, 0px, 0px) rotate(-7deg);
  }
}

@keyframes environment-window-light-breathe {
  0% {
    opacity: 0.42;
  }

  34% {
    opacity: 0.435;
  }

  61% {
    opacity: 0.409;
  }

  100% {
    opacity: 0.42;
  }
}

@keyframes environment-warm-reflection-drift {
  0% {
    opacity: 0.14;
    transform: translate3d(0px, 0px, 0px);
  }

  38% {
    opacity: 0.158;
    transform: translate3d(-1.4px, 0px, 0px);
  }

  69% {
    opacity: 0.126;
    transform: translate3d(2px, 0px, 0px);
  }

  100% {
    opacity: 0.14;
    transform: translate3d(0px, 0px, 0px);
  }
}

.tabletop-surface > .screen {
  position: relative;
  z-index: 1;
}

/*
 * Renderer-owned screen-presence phases. "stable" keeps the default
 * interactive flow layout; "absent" is fully removed through the
 * [hidden] display rule. Transient phases only stack and become
 * pointer-safe here; Task 7 owns their animation.
 */
.tabletop-surface > .screen[data-screen-presence="stable"] {
  z-index: 1;
  pointer-events: auto;
}

.tabletop-surface > .screen[data-screen-presence="exiting"],
.tabletop-surface > .screen[data-screen-presence="entering"] {
  pointer-events: none;
}

.tabletop-surface > .screen[data-screen-presence="exiting"] {
  z-index: 3;
}

.tabletop-surface > .screen[data-screen-presence="entering"] {
  position: absolute;
  z-index: 2;
  inset: 0;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .editorial-environment__asset > img {
    object-position: var(--editorial-environment-landscape-position);
  }

  .editorial-environment::before {
    inset: 10% 18% 8%;
  }

  .editorial-environment__light {
    inset: -22% 8% 24% -20%;
  }

  .editorial-environment__botanical-shadow {
    inset: -4% 65% 16% -10%;
  }

  .editorial-environment__table-arc {
    right: -18%;
    bottom: -35%;
    left: -18%;
    height: 70%;
  }

  .editorial-environment__reflection {
    right: 2%;
    bottom: 0;
    width: 56%;
    height: 38%;
  }
}