/* ZGame decorative game stage v5
   Desktop: 80vw outer stage + 60vw inner game card.
   The two widths progressively converge as the viewport gets smaller.
   Mobile: outer and inner game cards use the full viewport width. */
.zg-game-stage{
  --zg-stage-a:#7c3aed;
  --zg-stage-b:#ec4899;
  box-sizing:border-box!important;
  width:min(80vw,1440px)!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:clamp(30px,3vw,48px)!important;
  border:1px solid color-mix(in srgb,var(--zg-stage-a) 14%,#ebe7f2)!important;
  border-radius:34px!important;
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:16px!important;
  background:
    radial-gradient(circle at 8% 12%,color-mix(in srgb,var(--zg-stage-b) 18%,transparent) 0 7%,transparent 25%),
    radial-gradient(circle at 91% 16%,color-mix(in srgb,var(--zg-stage-a) 18%,transparent) 0 8%,transparent 27%),
    radial-gradient(circle at 18% 92%,rgba(255,196,225,.34) 0 8%,transparent 29%),
    radial-gradient(circle at 87% 87%,rgba(200,184,255,.34) 0 9%,transparent 31%),
    linear-gradient(135deg,
      color-mix(in srgb,var(--zg-stage-a) 8%,#fffafc),
      #fff9f2 42%,
      color-mix(in srgb,var(--zg-stage-b) 8%,#fff) 100%)!important;
  box-shadow:0 24px 70px rgba(54,36,85,.09)!important;
}
.zg-game-stage::before,
.zg-game-stage::after{
  position:absolute;
  z-index:0;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 8px 15px rgba(65,38,90,.11));
}
.zg-game-stage::before{
  content:"🌸  ✨";
  left:clamp(12px,2vw,30px);
  top:clamp(12px,2vw,26px);
  font-size:clamp(1.45rem,2.2vw,2.3rem);
  transform:rotate(-9deg);
  opacity:.62;
}
.zg-game-stage::after{
  content:"🦋  🌼";
  right:clamp(12px,2vw,30px);
  bottom:clamp(12px,2vw,26px);
  font-size:clamp(1.4rem,2.1vw,2.2rem);
  transform:rotate(7deg);
  opacity:.58;
}
.zg-game-stage > *{position:relative;z-index:1}
.zg-game-stage > .zg-game-stage-inner,
.zg-game-stage > .zg-game-stage-support{
  width:min(60vw,1080px)!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Keep helper/support cards visually aligned under the inner game card. */
.zg-game-stage > .zg-game-stage-support{box-sizing:border-box}

/* Large laptop / small desktop: reduce the 80/60 gap. */
@media (min-width:1024px) and (max-width:1279px){
  .zg-game-stage{width:84vw!important;padding:34px!important}
  .zg-game-stage > .zg-game-stage-inner,
  .zg-game-stage > .zg-game-stage-support{width:68vw!important}
}

/* Tablet / narrow desktop: margins converge further. */
@media (min-width:768px) and (max-width:1023px){
  .zg-game-stage{width:90vw!important;padding:24px!important;border-radius:29px!important}
  .zg-game-stage > .zg-game-stage-inner,
  .zg-game-stage > .zg-game-stage-support{width:80vw!important}
}

/* Small tablet: nearly full inner card while keeping a themed edge. */
@media (min-width:621px) and (max-width:767px){
  .zg-game-stage{width:92vw!important;padding:16px!important;border-radius:26px!important}
  .zg-game-stage > .zg-game-stage-inner,
  .zg-game-stage > .zg-game-stage-support{width:86vw!important}
  .zg-game-stage::before,.zg-game-stage::after{opacity:.42}
}

/* Mobile: full-bleed game stage and inner card. */
@media (max-width:620px){
  .zg-game-stage{
    width:100vw!important;
    max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    padding:0!important;
    border-radius:18px!important;
    gap:0!important;
    box-shadow:0 14px 38px rgba(54,36,85,.075)!important;
  }
  .zg-game-stage > .zg-game-stage-inner,
  .zg-game-stage > .zg-game-stage-support{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  .zg-game-stage::before{content:"🌸";font-size:1.15rem;left:7px;top:7px;opacity:.32}
  .zg-game-stage::after{content:"🦋";font-size:1.1rem;right:7px;bottom:7px;opacity:.30}
}