.avatar-component {
  align-items: center;
  background: linear-gradient(135deg, #ffb84a, #ff8a3d);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  color: #211507;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  position: relative;
  /* Intrinsic image pixels must not expand flex ancestors after save */
  contain: layout size;
}
.avatar-component--small { height: 2rem; width: 2rem; flex-basis: 2rem; }
.avatar-component--medium { height: 2.5rem; width: 2.5rem; flex-basis: 2.5rem; }
.avatar-component--large { height: 5rem; width: 5rem; flex-basis: 5rem; }
.avatar-component--profile { height: 6rem; width: 6rem; flex-basis: 6rem; }
.avatar-component__image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
}
.avatar-component__initials { font-size: .75em; font-weight: 800; line-height: 1; }
.avatar-component--large .avatar-component__initials { font-size: 1.5rem; }
.avatar-component--profile .avatar-component__initials { font-size: 2rem; }
.panel-dark.player-avatar-panel--compact { margin-bottom: 1rem; padding: .75rem 1rem; }