/* Profile composition: a full-body character is a foreground layer, not an icon. */

@media (min-width: 761px) {
  #profileModal .profile-cover-card {
    min-height: 410px !important;
    border-radius: 26px !important;
  }

  #profileModal .profile-cover-card .profile-cover {
    border-radius: 26px !important;
  }

  #profileModal .profile-cover-card .avatar-picker-current {
    top: 20px !important;
    bottom: 10px !important;
    left: 8px !important;
    width: 45% !important;
    z-index: 24 !important;
  }

  #profileModal .profile-cover-card .avatar-picker-current > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    filter: drop-shadow(0 22px 18px rgba(16, 19, 28, .26)) !important;
  }

  #profileModal .profile-cover-card .avatar-edit {
    z-index: 28 !important;
  }

  #profileModal .profile-cover-card .profile-summary-card {
    position: absolute !important;
    z-index: 14 !important;
    top: 46px !important;
    right: 18px !important;
    bottom: 18px !important;
    left: 39% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 26px 22px 18px !important;
    border-radius: 23px !important;
    background: rgba(255, 255, 255, .9) !important;
  }

  #profileModal .profile-cover-card .profile-summary-card .profile-details-row {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr) !important;
  }

  #profileModal .avatar-picker-popover {
    width: 104px !important;
    height: 104px !important;
    left: 12px !important;
    bottom: 14px !important;
    z-index: 30 !important;
  }

  #profileModal .avatar-picker-options,
  #profileModal .avatar-picker-options .avatar-option {
    width: 104px !important;
    height: 104px !important;
    min-width: 104px !important;
    min-height: 104px !important;
    flex-basis: 104px !important;
  }
}

#profileModal .avatar-picker-options .avatar-option,
#profileModal .avatar-picker-options .avatar-option:hover,
#profileModal .avatar-picker-options .avatar-option.active {
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#profileModal .avatar-picker-options .avatar-option img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 760px) {
  #mobileProfileContent .m-profile-hero,
  #mobileProfileContent.is-editing .m-profile-hero {
    min-height: 350px !important;
    height: 350px !important;
    border-radius: 25px !important;
  }

  #mobileProfileContent .m-profile-cover,
  #mobileProfileContent.is-editing .m-profile-cover {
    border-radius: 25px !important;
  }

  #mobileProfileContent .m-profile-avatar-stage {
    z-index: 6 !important;
    top: 16px !important;
    bottom: 8px !important;
    left: -4px !important;
    width: 48% !important;
  }

  #mobileProfileContent .m-profile-avatar,
  #mobileProfileContent.is-editing .m-profile-avatar {
    object-fit: contain !important;
    object-position: center bottom !important;
    filter: drop-shadow(0 18px 15px rgba(16, 19, 28, .24)) !important;
  }

  #mobileProfileContent .m-profile-main,
  #mobileProfileContent.is-editing .m-profile-main {
    z-index: 4 !important;
    top: 48px !important;
    right: 12px !important;
    bottom: 14px !important;
    left: 42% !important;
    padding: 18px 13px 12px !important;
    border-radius: 21px !important;
    background: rgba(255, 255, 255, .91) !important;
  }

  #mobileProfileContent .m-profile-identity h2,
  #mobileProfileContent.is-editing .m-profile-identity h2 {
    font-size: clamp(21px, 6.1vw, 30px) !important;
  }

  #mobileProfileContent .m-profile-stats {
    grid-template-columns: .68fr .68fr 1.64fr !important;
  }

  #mobileProfileContent .m-avatar-choice-row {
    min-height: 64px;
    align-items: center;
  }

  #mobileProfileContent .m-avatar-choice {
    box-sizing: border-box;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    padding: 3px !important;
    overflow: hidden;
  }

  #mobileProfileContent .m-avatar-choice img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}