/**
 * Slot stage canvas — full main-area backgrounds, reel-only gold rim.
 * Main space = showcase-center (excludes sidebar, topbar, release footer).
 */

/* ── Full-bleed canvas (base + bonus photos) ── */
.playground--slot-active.playground--player-view .showcase-center--player {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 0.15rem 0.35rem 0.15rem;
  overflow: hidden;
  align-items: stretch;
  max-height: calc(100dvh - var(--slot-player-chrome-h, 44px));
}

.playground--slot-active.playground--player-view .game-slot-view {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  border-radius: 10px;
  overflow: hidden;
}

.playground--slot-active .game-slot-view--stage-photo::before,
.playground--slot-active .showcase-center--player--stage-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--stage-bg-photo);
  background-size: cover;
  background-position: var(--stage-bg-position, center center);
  background-repeat: no-repeat;
  transition: background-image 0.45s ease, opacity 0.35s ease;
}

.playground--slot-active .game-slot-view--stage-photo::after,
.playground--slot-active .showcase-center--player--stage-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 115% 95% at 50% 48%, transparent 52%, rgba(4, 8, 18, 0.42) 100%),
    linear-gradient(180deg, rgba(4, 8, 18, 0.12) 0%, transparent 12%, transparent 88%, rgba(4, 8, 18, 0.2) 100%);
}

.playground--slot-active .game-slot-view--stage-photo > * {
  position: relative;
  z-index: 1;
}

/* Single canvas layer — hide duplicate photo inside inner .game-stage-bg */
.playground--slot-active.playground--player-view .game-stage-bg--photo::before {
  opacity: 0 !important;
  visibility: hidden !important;
}

.playground--slot-active.playground--player-view [data-game-stage].game-stage-card--stage-photo::before {
  display: none !important;
}

/* ── Remove outer yellow frame; keep stage chrome transparent ── */
.playground--slot-active.playground--player-view .game-stage-card--v2,
.playground--slot-active.playground--player-view [data-game-stage].game-stage-card--stage-photo,
.playground--slot-active.playground--player-view .game-stage-card--photo {
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
  filter: none !important;
  background: transparent !important;
  width: 100%;
  max-width: none;
  overflow: visible;
}

.playground--slot-active.playground--player-view .game-stage-frame,
.playground--slot-active.playground--player-view .game-stage-frame--photo,
.playground--slot-active.playground--player-view .game-stage-frame:has(.game-stage-bg--photo) {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  animation: none !important;
}

.playground--slot-active.playground--player-view.slot-idle-motion-rich .game-stage-frame,
.playground--slot-active.playground--player-view.slot-idle-motion-active .game-stage-frame::before {
  animation: none !important;
}

.playground--slot-active.playground--player-view.slot-idle-motion-active .game-stage-frame::before {
  display: none !important;
}

.playground--slot-active.playground--player-view .game-stage-v2,
.playground--slot-active.playground--player-view .game-stage-aspect {
  border: none !important;
  background: transparent !important;
}

/* ── Reel frame rim (inner gold border — keep) ── */
.playground--slot-active.playground--player-view .game-stage-reels {
  box-shadow:
    inset 0 0 0 2px rgba(255, 215, 0, 0.52),
    inset 0 0 28px rgba(0, 0, 0, 0.38),
    0 4px 20px rgba(0, 0, 0, 0.42);
}

.playground--slot-active.playground--player-view .slot-hud-v2 {
  background:
    linear-gradient(180deg, rgba(8, 10, 18, 0.08), rgba(5, 8, 16, 0.78)) !important;
  backdrop-filter: blur(8px) saturate(1.05);
}

/* ── Responsive focal point (cover without awkward crop) ── */
@media (max-aspect-ratio: 10/16) {
  .playground--slot-active .game-slot-view--stage-photo::before {
    background-position: center 28%;
  }
}

@media (min-aspect-ratio: 16/10) and (max-aspect-ratio: 21/9) {
  .playground--slot-active .game-slot-view--stage-photo::before {
    background-position: center 42%;
  }
}

@media (min-aspect-ratio: 21/9) {
  .playground--slot-active .game-slot-view--stage-photo::before {
    background-position: center 46%;
  }
}

@media (max-width: 720px) {
  .playground--slot-active.playground--player-view .showcase-center--player {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }
}