/* v580 based directly on v567 */
body.avatar-page.gg-v580 .rich-avatar-shell{align-items:flex-start!important;overflow:visible!important}

/* v586: iOS sticky visibility fix. The sticky unit sits immediately below the
   site header instead of sticking behind it. No internal vertical scrolling. */
body.avatar-page.gg-v580 .avatar-builder-section,
body.avatar-page.gg-v580 .rich-avatar-shell,
body.avatar-page.gg-v580 .rich-avatar-card,
body.avatar-page.gg-v580 #ggV514MainGrid{
  overflow:visible!important;
  overflow-y:visible!important;
}
body.avatar-page.gg-v580 #ggV514MainGrid{
  min-height:100%!important;
}

/* v584: the card is part of the normal document flow; it is NOT a scroll container. */
body.avatar-page.gg-v580 .avatar-preview-card.rich-avatar-card{
  position:relative!important;
  top:auto!important;
  z-index:auto!important;
  max-height:none!important;
  overflow:visible!important;
  overscroll-behavior:visible!important;
  -webkit-overflow-scrolling:auto!important;
}
/* v587: one sticky owner. JavaScript fixes the Avatar/Familiar + preview unit
   to the viewport after its normal page position reaches the header, then returns
   it to normal flow when the user scrolls back up. */
body.avatar-page.gg-v580 #ggV514Center{
  position:relative!important;
  top:auto!important;
  z-index:auto!important;
  align-self:flex-start!important;
  height:auto!important;
  overflow:visible!important;
  max-height:none!important;
  width:100%!important;
}
body.avatar-page.gg-v580 #ggV515StudioWrap{
  position:relative!important;
  top:auto!important;
  z-index:70!important;
  width:100%!important;
  max-height:none!important;
  overflow:visible!important;
  overscroll-behavior:auto!important;
}
body.avatar-page.gg-v580 #ggV515StudioWrap.gg-v587-stuck{
  position:fixed!important;
  top:var(--gg-v587-sticky-top, 8px)!important;
  left:var(--gg-v587-sticky-left, 0px)!important;
  width:var(--gg-v587-sticky-width, 100%)!important;
  z-index:2147482000!important;
  margin:0!important;
}
body.avatar-page.gg-v580 #ggV587StickyPlaceholder{
  display:none;
  width:100%;
  pointer-events:none;
}
body.avatar-page.gg-v580 #ggV587StickyPlaceholder.active{display:block}
/* Avatar/Familiar is structurally inside the same sticky studio wrapper. */
body.avatar-page.gg-v580 #ggAvatarSwitcherV339{
  position:relative!important;
  top:auto!important;
  z-index:72!important;
}

/* Only the avatar stage gets the intro. */
body.avatar-page.gg-v580 #avatarStage{position:relative!important;overflow:hidden!important}
#ggV580StageIntro{
  position:absolute;inset:0;z-index:180;overflow:hidden;border-radius:24px;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:radial-gradient(circle at center,rgba(15,16,22,.56),rgba(6,7,11,.86));
  transition:opacity .45s ease;
}
#ggV580StageIntro.out{opacity:0}
#ggV580StageIntro .gg-v580-door{position:absolute;top:0;bottom:0;width:50.5%;background:linear-gradient(180deg,#edf1f6,#bbc4d0 50%,#8c96a5);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),inset 0 0 28px rgba(255,255,255,.28)}
#ggV580StageIntro .gg-v580-door:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0 8px,rgba(0,0,0,.045) 8px 16px)}
#ggV580StageIntro .gg-v580-door.left{left:0;animation:ggV580Left 1.15s .2s forwards ease-in-out}
#ggV580StageIntro .gg-v580-door.right{right:0;animation:ggV580Right 1.15s .2s forwards ease-in-out}
#ggV580StageIntro .gg-v580-intro-logo{position:relative;z-index:2;text-align:center;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.45);font-family:Georgia,serif;letter-spacing:.08em}
#ggV580StageIntro .gg-v580-intro-logo small{display:block;font:800 11px/1.2 system-ui;letter-spacing:.28em;margin-bottom:10px;color:#f4dc91}
#ggV580StageIntro .gg-v580-intro-logo b{font-size:clamp(18px,6vw,34px)}
@keyframes ggV580Left{to{transform:translateX(-103%)}}
@keyframes ggV580Right{to{transform:translateX(103%)}}

/* Door + paw live inside the avatar studio, top-left. */
#ggV580CornerTools{position:absolute;left:12px;top:12px;z-index:150;display:flex;gap:8px;align-items:center}
#ggV580CornerTools :is(.avatar-room-dock,.gg-familiar-trigger-v339){
  position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important;margin:0!important;
  display:grid!important;place-items:center!important;border-radius:17px!important;
  background:linear-gradient(180deg,#f1d56b,#d8b247)!important;border:2px solid #9c7423!important;
  box-shadow:0 8px 18px rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.34)!important;
}
#ggV580CornerTools .gg-familiar-trigger-v339 svg{width:28px!important;height:28px!important}

/* Kill only the old shirt/body haze. */
body.avatar-page.gg-v580 #avatarSvg #bodyLayer,
body.avatar-page.gg-v580 #avatarSvg #shirtLayer{filter:none!important}
body.avatar-page.gg-v580 #avatarSvg [id*="shadow" i],body.avatar-page.gg-v580 #avatarSvg [class*="shadow" i]{display:none!important}

/* v588: randomized intros remain inside avatarStage only. */
#ggV580StageIntro[data-intro="garage"] .gg-v580-door.left{animation:ggV580Left 1.25s .28s forwards ease-in-out}
#ggV580StageIntro[data-intro="garage"] .gg-v580-door.right{animation:ggV580Right 1.25s .28s forwards ease-in-out}
#ggV580StageIntro[data-intro="gate"] .gg-v580-door{background:repeating-linear-gradient(90deg,#dfe5ec 0 12px,#8d97a5 12px 17px,#c8d0d9 17px 29px);box-shadow:inset 0 0 0 3px #eef2f6,inset 0 0 22px rgba(255,255,255,.3)}
#ggV580StageIntro[data-intro="gate"] .gg-v580-door.left{transform-origin:left center;animation:ggV588GateL 1.3s .25s forwards cubic-bezier(.2,.75,.2,1)}
#ggV580StageIntro[data-intro="gate"] .gg-v580-door.right{transform-origin:right center;animation:ggV588GateR 1.3s .25s forwards cubic-bezier(.2,.75,.2,1)}
@keyframes ggV588GateL{to{transform:perspective(420px) rotateY(-86deg)}}
@keyframes ggV588GateR{to{transform:perspective(420px) rotateY(86deg)}}
#ggV580StageIntro[data-intro="elevator"] .gg-v580-door{background:linear-gradient(90deg,#858e9b,#f4f7fa 18%,#adb6c2 48%,#f5f8fb 76%,#8a94a1);box-shadow:inset 0 0 0 2px #727b87,inset 0 0 26px rgba(255,255,255,.4)}
#ggV580StageIntro[data-intro="elevator"] .gg-v580-door.left{animation:ggV588ElevL 1.1s .42s forwards cubic-bezier(.35,.7,.25,1)}
#ggV580StageIntro[data-intro="elevator"] .gg-v580-door.right{animation:ggV588ElevR 1.1s .42s forwards cubic-bezier(.35,.7,.25,1)}
@keyframes ggV588ElevL{to{transform:translateX(-100%)}}
@keyframes ggV588ElevR{to{transform:translateX(100%)}}
#ggV580StageIntro[data-intro="rings"]{background:radial-gradient(circle,#edf2f7 0 15%,#9ca6b4 16% 30%,#dfe5eb 31% 45%,#6f7887 46% 60%,#161922 61% 100%)}
#ggV580StageIntro[data-intro="rings"] .gg-v588-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:16px solid rgba(238,243,248,.9);transform:translate(-50%,-50%) scale(1);animation:ggV588Ring 1.45s .18s forwards cubic-bezier(.2,.72,.2,1)}
#ggV580StageIntro[data-intro="rings"] .r1{width:72%;aspect-ratio:1}.r2{width:50%;aspect-ratio:1;animation-delay:.26s!important}.r3{width:28%;aspect-ratio:1;animation-delay:.34s!important}
@keyframes ggV588Ring{to{transform:translate(-50%,-50%) scale(2.9);opacity:0}}
#ggV580StageIntro[data-intro="shutter"]{background:#aab3bf}
#ggV580StageIntro[data-intro="shutter"] .gg-v588-shutter{position:absolute;inset:0;background:repeating-linear-gradient(180deg,#e8edf2 0 14px,#a4aebb 14px 18px);box-shadow:inset 0 0 0 3px rgba(255,255,255,.42);animation:ggV588Shutter 1.35s .28s forwards cubic-bezier(.25,.75,.2,1)}
@keyframes ggV588Shutter{to{transform:translateY(-102%)}}
#ggV580StageIntro[data-intro="rings"] .gg-v580-intro-logo{animation:ggV588LogoFade .9s 1.0s forwards ease}
#ggV580StageIntro[data-intro="shutter"] .gg-v580-intro-logo{animation:ggV588LogoFade .8s 1.15s forwards ease}
@keyframes ggV588LogoFade{to{opacity:0;transform:scale(.96)}}