/* Grim & Goldie Avatar Studio v1101 — narrow repair layer.
   This keeps the v1100 renderer and interactions intact while restoring the
   owner's requested preview layout. */

:root { --gg-studio-sticky-top-v1101: 68px; }

body.avatar-page.gg-studio-v1101 { overflow-x: clip; }

/* No build/diagnostic badges or the retired ownership-filter rail in the
   customer-facing Studio. */
body.avatar-page.gg-studio-v1101 :is(
  #ggBuildBadgeV1100,
  #ggBuildMarkerV1037,
  #ggV1043Build,
  #ggScrollFilterTabsV664
) { display: none !important; }

/* The artwork should sit directly on the gothic preview scene. */
body.avatar-page.gg-studio-v1101 #avatarSvg :is(
  #avatarBg,
  #avatarStageGlowV782,
  #ggAvatarGlassFinishV164,
  .gg-avatar-glass-v164
) { display: none !important; }

/* Avatar / Familiar / More is part of the preview unit, immediately above
   the camera instead of floating above a large empty gap. */
body.avatar-page.gg-studio-v1101 #ggAvatarSwitcherRowV622 {
  position: relative !important;
  inset: auto !important;
  z-index: 905 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 0 5px !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
  transform: none !important;
}
body.avatar-page.gg-studio-v1101 #ggAvatarSwitcherRowV622 #ggAvatarSwitcherV339 {
  width: min(430px, 100%) !important;
  margin: 0 !important;
}

/* Door, selected Familiar, and avatar name stay together at the preview top.
   These selectors deliberately outrank the older fixed/floating rules. */
body.avatar-page.gg-studio-v1101 #avatarStage #ggV580CornerTools {
  position: absolute !important;
  inset: 8px 64px auto 8px !important;
  z-index: 1006 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: auto !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}
body.avatar-page.gg-studio-v1101 #avatarStage #ggV580CornerTools > :is(
  a.avatar-room-dock,
  button.gg-familiar-trigger-v339
) {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 46px !important;
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  margin: 0 !important;
  padding: 3px !important;
  transform: none !important;
  overflow: hidden !important;
  contain: layout paint !important;
  pointer-events: auto !important;
}
body.avatar-page.gg-studio-v1101 #avatarStage #ggV580CornerTools > #ggAvatarNameBtnV802 {
  position: relative !important;
  inset: auto !important;
  flex: 1 1 auto !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 175px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding-inline: 9px !important;
  transform: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
}

/* Contain the real selected-pet artwork inside its 46px button. Older pet
   CSS positioned these descendants against the whole preview, which produced
   the large white silhouettes. */
body.avatar-page.gg-studio-v1101 #ggV580CornerTools .gg-familiar-trigger-v339 > *,
body.avatar-page.gg-studio-v1101 #ggV580CornerTools .gg-familiar-trigger-v339 :is(
  .gg-active-familiar-icon-v675,
  .gg-familiar-avatar-v339,
  .pet-hover,
  .gg-v1027-pet-sprite-stack
) {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: hidden !important;
}
body.avatar-page.gg-studio-v1101 #ggV580CornerTools .gg-familiar-trigger-v339 svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
body.avatar-page.gg-studio-v1101 #ggV580CornerTools .gg-familiar-trigger-v339 img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
body.avatar-page.gg-studio-v1101 #ggV580CornerTools .gg-familiar-trigger-v339 .gg-v1027-pet-pose {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

body.avatar-page.gg-studio-v1101 #avatarStage > .gg-dice-anchor-v339 {
  position: absolute !important;
  inset: 8px 8px auto auto !important;
  z-index: 1007 !important;
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  transform: none !important;
}

/* The pet's actual name is already rendered with its artwork. This legacy
   generic "Familiar" button sat behind the restored top name control. */
body.avatar-page.gg-studio-v1101 #ggFamiliarPreviewV339 > #ggFamiliarNameBtnV341 {
  display: none !important;
}

/* Older mode code can leave the compact Avatar category shell carrying the
   hidden attribute after returning from Familiar. Restore only Avatar's own
   controls; the Familiar builder remains isolated to Familiar mode. */
body.avatar-page.gg-studio-v1101[data-gg-builder-mode="avatar"] #ggV515CategoryShell {
  display: block !important;
}
body.avatar-page.gg-studio-v1101[data-gg-builder-mode="avatar"] #ggV515PrimaryNav {
  display: grid !important;
}

/* Raise the Gremlin torso/wearables only. The neck-fur layer is intentionally
   excluded so the fur remains seated beneath the face. */
body.avatar-page.gg-studio-v1101 #avatarSvg:not([data-gg-unicorn-v177]) :is(
  #bodyLayer, #pantsLayer, #shoesLayer, #shirtLayer, #wizardBodyLayerV159,
  #wizardFrontLayerV159, #capeBackLayerV141, #capeFrontLayerV141,
  #wardrobeExtraLayer, #ggGremlinConnectedLegsV171,
  #ggGremlinConnectedArmsV171, #ggGremlinConnectedArmsFrontV988,
  #ggGlobalHandsV536
) { translate: 0 -12px !important; }

body.avatar-page.gg-studio-v1101 #ggV515StudioWrap,
body.avatar-page.gg-studio-v1101 #avatarStage,
body.avatar-page.gg-studio-v1101 #ggPreviewCameraV1005 {
  transition: none !important;
  overflow-anchor: none !important;
}

@media (max-width: 820px) {
  body.avatar-page.gg-studio-v1101 :is(
    .avatar-builder-section,
    .rich-avatar-shell,
    .rich-avatar-card,
    #ggV514MainGrid,
    #ggV514Center
  ) { overflow: visible !important; }

  /* The existing center grid item is the sticky camera. Its main-grid parent
     also contains the controls, so the browser gets a stable scroll boundary
     without reparenting or display:contents layout churn. */
  body.avatar-page.gg-studio-v1101 #ggV514MainGrid {
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 0 !important;
  }
  body.avatar-page.gg-studio-v1101 #ggV514Center {
    align-self: start !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    inset: auto !important;
    top: var(--gg-studio-sticky-top-v1101, 68px) !important;
    z-index: 900 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    translate: none !important;
    contain: none !important;
    isolation: isolate !important;
  }
  body.avatar-page.gg-studio-v1101 #ggV515StudioWrap {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    contain: none !important;
  }
  body.avatar-page.gg-studio-v1101 #avatarStage {
    height: clamp(330px, 52svh, 500px) !important;
    min-height: 330px !important;
    max-height: 500px !important;
    overflow: hidden !important;
  }
}

@media (max-width: 380px) {
  body.avatar-page.gg-studio-v1101 #avatarStage #ggV580CornerTools {
    right: 58px !important;
    gap: 4px !important;
  }
  body.avatar-page.gg-studio-v1101 #avatarStage #ggV580CornerTools > :is(
    a.avatar-room-dock,
    button.gg-familiar-trigger-v339
  ) {
    flex-basis: 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }
  body.avatar-page.gg-studio-v1101 #avatarStage #ggV580CornerTools > #ggAvatarNameBtnV802 {
    font-size: 11px !important;
    padding-inline: 6px !important;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  body.avatar-page.gg-studio-v1101 #ggV514Center {
    position: relative !important;
    top: auto !important;
  }
  body.avatar-page.gg-studio-v1101 #avatarStage {
    height: min(72svh, 410px) !important;
    min-height: 270px !important;
  }
}