/* Lagos Life: avatar (owner 5d). Spec: site/game-patterns.html#avatar. People are circles (L8). */
.ll-avatar {
  position: relative; flex: none; display: inline-grid; place-items: end center;
  width: var(--avatar-md); height: var(--avatar-md); border-radius: 50%;
  background: var(--gradient-avatar); overflow: visible;
}
.ll-avatar__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center top; display: block; }
.ll-avatar__initial { align-self: center; font: var(--type-title-sm); color: var(--ink); }
.ll-avatar--xs { width: var(--avatar-xs); height: var(--avatar-xs); }
.ll-avatar--sm { width: var(--avatar-sm); height: var(--avatar-sm); }
.ll-avatar--lg { width: var(--avatar-lg); height: var(--avatar-lg); }
/* Mood ring: the Sim's own avatar in the place header carries the mood colour (cap/05: rose for Miserable). */
.ll-avatar[data-mood] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--_mood); }
.ll-avatar[data-mood="very-happy"] { --_mood: var(--mood-very-happy); }
.ll-avatar[data-mood="happy"] { --_mood: var(--mood-happy); }
.ll-avatar[data-mood="fine"] { --_mood: var(--mood-fine); }
.ll-avatar[data-mood="uneasy"] { --_mood: var(--mood-uneasy); }
.ll-avatar[data-mood="miserable"] { --_mood: var(--mood-miserable); }
.ll-avatar__online {
  position: absolute; right: 0; bottom: 0; width: var(--space-3); height: var(--space-3); border-radius: 50%;
  background: var(--leaf-deep); box-shadow: 0 0 0 2px var(--paper);
}