:root {
  --gg-safe-top: max(8px, env(safe-area-inset-top));
  --gg-safe-bottom: max(10px, env(safe-area-inset-bottom));
  --gg-silver-1: #f4f6f8;
  --gg-silver-2: #c7cbd1;
  --gg-silver-3: #838a94;
  --gg-ink: #17151a;
  --gg-gold: #d7b05b;
}

html[data-gg-stage="preflight"] body.avatar-page { visibility: hidden; }
html[data-gg-stage="shell"] body.avatar-page,
html[data-gg-stage="ready"] body.avatar-page,
html[data-gg-stage="safe"] body.avatar-page { visibility: visible; }

body.avatar-page #ggV580StageIntro,
body.avatar-page [id^="ggAvatarIntroV"],
body.avatar-page #ggAvatarLoadSplashV518,
body.avatar-page .gg-avatar-load-overlay,
body.avatar-page .gg-avatar-intro-overlay,
body.avatar-page #ggV566FeetLayer,
body.avatar-page #ggFloatingHandsV515 { display: none !important; }

body.gg-studio-v1100 { overflow-x: clip; }
body.gg-studio-v1100 #avatarSvg :is(#avatarBg, #avatarStageGlowV782) { display: none !important; }
body.gg-studio-v1100 :is(#ggBuildBadgeV1100, #ggV1043Build) { display: none !important; }
body.gg-studio-v1100 #avatarSvg {
  transform: var(--gg-camera-transform-v1100, translate3d(0, 0, 0) scale(.94));
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 180ms ease-out;
  will-change: transform;
}
body.gg-studio-v1100.gg-camera-unlocked-v1100 #avatarSvg { transition: none; }
body.gg-studio-v1100 #ggGlobalHandsV536:not([data-gg-rig-v1100="ready"]) { visibility: hidden; }
body.gg-studio-v1100 #ggGlobalHandsV536[data-gg-rig-v1100="ready"] { visibility: visible; }

/* The switcher and preview are one layout unit. This removes the empty mobile
   gap and keeps every preview control together while the unit is sticky. */
body.gg-studio-v1100 #ggV515StudioWrap > #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 6px !important;
  padding: 0 8px !important;
  box-sizing: border-box !important;
}
body.gg-studio-v1100 #ggV515StudioWrap > #ggAvatarSwitcherRowV622 #ggAvatarSwitcherV339 {
  width: min(430px, 100%) !important;
  margin: 0 !important;
}

/* Door, active Familiar, and name stay at the top of the preview. */
body.gg-studio-v1100 #avatarStage #ggV580CornerTools {
  position: absolute !important;
  inset: 8px 70px auto 8px !important;
  z-index: 1006 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  pointer-events: auto !important;
}
body.gg-studio-v1100 #avatarStage #ggV580CornerTools > :is(.avatar-room-dock, .gg-familiar-trigger-v339) {
  position: static !important;
  inset: auto !important;
  flex: 0 0 46px !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
}
body.gg-studio-v1100 #avatarStage #ggV580CornerTools > #ggAvatarNameBtnV802 {
  position: static !important;
  inset: auto !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 170px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Lift the Gremlin torso and wearable art without moving the neck-fur layer. */
body.gg-studio-v1100 #avatarSvg:not([data-gg-unicorn-v177]) :is(
  #bodyLayer, #pantsLayer, #shoesLayer, #shirtLayer, #wizardBodyLayerV159,
  #wizardFrontLayerV159, #capeBackLayerV141, #capeFrontLayerV141,
  #wardrobeExtraLayer, #ggGremlinConnectedArmsV171,
  #ggGremlinConnectedArmsFrontV988, #ggGlobalHandsV536
) { translate: 0 -12px; }

#ggPreviewToolsV1100 {
  position: absolute;
  z-index: 1004;
  left: 50%;
  bottom: var(--gg-safe-bottom);
  translate: -50% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: min(96%, 470px);
  padding: 6px;
  border: 1px solid rgb(255 255 255 / .18);
  border-radius: 15px;
  background: rgb(16 14 19 / .86);
  backdrop-filter: blur(10px);
}
#ggPreviewToolsV1100 button,
#ggPreviewEyeV1100,
#ggBuildBadgeV1100 {
  min-height: 42px;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: 11px;
  background: linear-gradient(145deg, var(--gg-silver-1), var(--gg-silver-2));
  color: var(--gg-ink);
  font: 800 10px/1.1 system-ui, sans-serif;
  touch-action: manipulation;
}
#ggPreviewToolsV1100 button { flex: 1 1 0; padding: 7px 4px; }
#ggPreviewToolsV1100 button[aria-pressed="true"] { outline: 2px solid var(--gg-gold); outline-offset: -2px; }
#ggPreviewEyeV1100 {
  position: fixed;
  z-index: 2147482501;
  top: calc(var(--gg-safe-top) + 48px);
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
}
#ggBuildBadgeV1100 { display: none !important; }
#ggStudioStatusV1100 {
  position: absolute;
  z-index: 1005;
  top: 8px;
  right: 8px;
  display: none;
  max-width: 66%;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 3px;
}
#ggStudioStatusV1100 span { padding: 3px 5px; border-radius: 999px; background: #141218d9; color: #eee; font: 700 7px/1 system-ui; }
#ggStudioStatusV1100 [data-state="fail"] { color: #ff9e9e; }
html.gg-debug-rig-v1100 #ggStudioStatusV1100,
body:has(#ggDiagnosticsV1100:not([hidden])) #ggStudioStatusV1100 { display: flex; }

#ggDiagnosticsV1100 {
  position: fixed;
  z-index: 2147483647;
  inset: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  margin-left: auto;
  width: min(560px, calc(100vw - 16px));
  overflow: auto;
  padding: 12px;
  border: 1px solid #d7b05b80;
  border-radius: 16px;
  background: #0d0b10f5;
  color: #e8e5ec;
  box-shadow: 0 22px 70px #000b;
}
#ggDiagnosticsV1100[hidden] { display: none; }
#ggDiagnosticsV1100 header { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; padding: 5px; background: #0d0b10; }
#ggDiagnosticsV1100 header span { margin-left: auto; color: #9ee7ac; }
#ggDiagnosticsV1100 button { width: 38px; height: 38px; border: 0; border-radius: 10px; font-size: 24px; }
#ggDiagnosticsV1100 .gg-diagnostic-actions-v1100 { display: flex; align-items: center; gap: 10px; padding: 8px 5px; }
#ggDiagnosticsV1100 .gg-diagnostic-actions-v1100 button { width: auto; min-width: 130px; padding: 0 12px; font: 800 12px/1 system-ui; }
#ggDiagnosticsV1100 .gg-diagnostic-actions-v1100 output { color: #d8c37a; font: 700 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
#ggDiagnosticsV1100 pre { white-space: pre-wrap; font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }

body.gg-clean-preview-v1100 #ggPreviewToolsV1100,
body.gg-clean-preview-v1100 #randomizeBtn,
body.gg-clean-preview-v1100 .avatar-account-name,
body.gg-clean-preview-v1100 #ggBuildBadgeV1100,
body.gg-clean-preview-v1100 #ggStudioStatusV1100,
body.gg-clean-preview-v1100 .avatar-polish-controls,
body.gg-clean-preview-v1100 .mood-popup { display: none !important; }

body.gg-randomizing-v1100 #avatarSvg { opacity: 0; }
body.gg-randomizing-v1100 #avatarStage::after {
  content: 'Building your look…';
  position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
  color: #f4e5b5; font: 800 13px system-ui;
}

#ggBuildMismatchV1100 {
  position: fixed; z-index: 2147483647; inset: 0; display: grid; place-content: center; gap: 12px;
  padding: 24px; background: #0a080cf2; color: #fff; text-align: center;
}
#ggBuildMismatchV1100 button { min-height: 48px; border: 0; border-radius: 12px; background: #d7b05b; font-weight: 900; }

#ggFeetPanelV1100 { display: flex; gap: 7px; overflow-x: auto; padding: 6px 2px; scroll-snap-type: x proximity; }
#ggFeetPanelV1100 button { flex: 0 0 auto; min-height: 44px; padding: 8px 12px; border: 1px solid #ffffff24; border-radius: 11px; scroll-snap-align: start; }
#ggFeetPanelV1100 button[aria-pressed="true"] { border-color: var(--gg-gold); box-shadow: inset 0 0 0 1px var(--gg-gold); }

@media (max-width: 820px) {
  body.gg-studio-v1100 .avatar-builder-section,
  body.gg-studio-v1100 .rich-avatar-shell,
  body.gg-studio-v1100 .rich-avatar-card,
  body.gg-studio-v1100 #ggV514MainGrid,
  body.gg-studio-v1100 #ggV514Center { overflow: visible !important; }
  body.gg-studio-v1100 #ggV515StudioWrap {
    position: sticky !important;
    inset: auto !important;
    top: calc(var(--gg-safe-top) + 54px) !important;
    z-index: 900 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    contain: layout paint !important;
  }
  body.gg-studio-v1100 #ggV515StudioWrap > #ggAvatarSwitcherRowV622 {
    margin-bottom: 5px !important;
    padding-inline: 4px !important;
  }
  body.gg-studio-v1100 #avatarStage {
    height: clamp(330px, 52dvh, 500px) !important;
    min-height: 330px !important;
    max-height: 500px !important;
    overflow: hidden !important;
  }
  body.gg-studio-v1100 .rich-avatar-shell,
  body.gg-studio-v1100 #ggV514MainGrid { max-width: 100%; min-width: 0; }
  #ggPreviewEyeV1100 { top: calc(var(--gg-safe-top) + 46px); right: 8px; }
}

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

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

@media (prefers-reduced-motion: reduce) {
  body.gg-studio-v1100 #avatarSvg,
  body.gg-studio-v1100 #avatarSvg * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}