/* The frame surrounds the circular avatar. Its centre stays transparent.
   Header account button and dropdown deliberately do not opt in. */
html body .user-avatar-frame {
  position: relative !important;
  overflow: visible !important;
  border-radius: 50% !important;
  isolation: isolate;
}

html body .user-avatar-frame > .user-avatar-frame__art {
  position: absolute !important;
  inset: -24% !important;
  z-index: 3 !important;
  display: block !important;
  width: 148% !important;
  height: 148% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  user-select: none;
  /* The supplied animation has golden artwork inside the ring as well.
     Cut a circular aperture matching the avatar; keep the moving rim intact. */
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 65%, #000 67%);
  mask-image: radial-gradient(circle closest-side, transparent 65%, #000 67%);
}

html body .user-avatar-frame > .user-avatar-frame__art > img {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  pointer-events: none !important;
}

/* Existing page themes use square avatars; only framed avatars become round. */
html.site-pearl body.public-ui #sidebar .sb-user-avatar.user-avatar-frame,
html.site-pearl body.public-ui .home-dashboard .hd-avatar.user-avatar-frame,
html.site-pearl body.public-ui #homeMonthlyTopup .hmt-avatar.user-avatar-frame,
html.site-pearl body.public-ui #accountProfile .pc-avatar.user-avatar-frame {
  border-radius: 50% !important;
  overflow: visible !important;
}
html.site-pearl body.public-ui .home-dashboard .hd-avatar.user-avatar-frame > .hd-avatar-img,
html.site-pearl body.public-ui #homeMonthlyTopup .hmt-avatar.user-avatar-frame > span {
  border-radius: 50% !important;
}

/* Reserve room for the wings so the frame never touches names or badges. */
html body .sb-user-avatar.user-avatar-frame { margin: 5px 9px 5px 7px; }
html body .hd-avatar.user-avatar-frame { margin: 12px; }
html.site-pearl body.public-ui #homeMonthlyTopup .hmt-item {
  grid-template-columns: 23px 46px minmax(0,1fr);
  min-height: 66px;
}
html.site-pearl body.public-ui #homeMonthlyTopup .hmt-avatar.user-avatar-frame { justify-self: center; }
html.site-pearl body.public-ui #accountProfile .pc-avatar.user-avatar-frame { margin: 17px; }
html.site-pearl body.public-ui #accountProfile .pc-avatar.user-avatar-frame > span { z-index: 4; }
html body .hd-avatar.user-avatar-frame > .hd-online-dot { z-index: 4; }
html body .rk-pod-av.user-avatar-frame { margin-top: 19px; margin-bottom: 19px; box-shadow: none; }
html body .rk-lr-av.user-avatar-frame,
html body .rk-my-pos-av.user-avatar-frame { margin: 10px; }

/* Explicit exceptions for the two compact account controls. */
html body [data-avatar-frame="none"] > .user-avatar-frame__art { display: none !important; }

@media (max-width: 480px) {
  html.site-pearl body.public-ui #accountProfile .pc-identity { gap: 11px; }
  html.site-pearl body.public-ui #accountProfile .pc-avatar.user-avatar-frame { margin: 12px; }
}