/* Delt avatar-widget — bruges på login.php (profilvælger), child.php, shop.php
   og avatar.php. Størrelse styres via CSS-variablen --avatar-size på selve
   elementet (kompakt/cirkulær visning). Selve karakteren bygges af avatar.js
   som et absolut-positioneret "scene"-lag (.avatar-stage) — se avatar.js for
   koordinaterne. */
.avatar-widget {
  --avatar-size: 100px;
  position: relative;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  background: #d8f3dc;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.7), 0 2px 6px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}
.avatar-widget-full {
  position: relative;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.avatar-stage img {
  max-width: none;
  pointer-events: none;
  user-select: none;
}
.avatar-widget .avatar-pet {
  position: absolute;
  bottom: calc(var(--avatar-size) * -0.06);
  right: calc(var(--avatar-size) * -0.06);
  width: calc(var(--avatar-size) * 0.34);
  height: calc(var(--avatar-size) * 0.34);
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  z-index: 2;
}
/* Nogle få kæledyr (fx enhjørning) er emoji i stedet for et billede — samme
   cirkel/skygge som ovenfor, men centreret tekst i stedet for img-mål. */
.avatar-widget .avatar-pet-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--avatar-size) * 0.22);
  line-height: 1;
}
/* Kæledyret i "hel krop"-visningen (renderAvatarFull) sidder INDE i
   .avatar-stage med sin egen inline (x,y) — enten en fri, selvvalgt
   placering eller standard-pladsen fra avatar.js. Faste design-enheder
   (samme koordinatsystem som resten af scenen), ikke procent af elementet. */
.avatar-stage-pet {
  width: 70px;
  height: 70px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}
.avatar-stage-pet.avatar-pet-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}