/* Compact the profile hero and keep the character visually dominant. */

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

  #profileModal .profile-cover-card .avatar-picker-current {
    top: 3px !important;
    bottom: 3px !important;
    width: 54% !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #profileModal .profile-cover-card .avatar-picker-current > img {
    transform: scale(1.1) !important;
    transform-origin: center bottom !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  #profileModal .profile-cover-card .avatar-picker-current::before,
  #profileModal .profile-cover-card .avatar-picker-current::after {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #profileModal .profile-cover-card .profile-summary-card {
    top: 48px !important;
    bottom: 16px !important;
    padding: 24px 22px 16px !important;
  }

  #profileModal .profile-cover-card .profile-details-row {
    margin-top: 14px !important;
  }

  #profileModal .profile-cover-card .profile-usage {
    min-height: 67px !important;
    padding: 7px 0 !important;
  }

  #profileModal .profile-cover-card .profile-email {
    min-height: 57px !important;
    padding: 10px 10px !important;
  }

  #profileModal .profile-cover-card .achievement-rail {
    gap: 7px !important;
    padding-top: 11px !important;
  }

  #profileModal .profile-cover-card .achievement {
    height: 36px !important;
  }
}

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

  #mobileProfileContent .m-profile-avatar-stage {
    top: -4px !important;
    bottom: -2px !important;
    left: -15px !important;
    width: 62% !important;
  }

  #mobileProfileContent .m-profile-avatar,
  #mobileProfileContent.is-editing .m-profile-avatar {
    transform: scale(1.12) !important;
    transform-origin: center bottom !important;
  }

  #mobileProfileContent .m-profile-main,
  #mobileProfileContent.is-editing .m-profile-main {
    top: 50px !important;
    right: 12px !important;
    bottom: auto !important;
    left: 43% !important;
    height: 304px !important;
    min-height: 304px !important;
    padding: 14px 11px 11px !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto !important;
    align-content: start !important;
  }

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

  #mobileProfileContent .m-profile-identity p {
    margin-top: 3px !important;
  }

  #mobileProfileContent .m-profile-stats {
    margin: 10px 0 0 !important;
  }

  #mobileProfileContent .m-profile-stats span {
    padding: 7px 5px !important;
  }

  #mobileProfileContent .m-profile-email-stat {
    min-height: 45px !important;
    margin: 0 !important;
    padding: 6px 7px !important;
    border-bottom: 0 !important;
  }

  #mobileProfileContent .m-mobile-achievements {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 5px !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  #mobileProfileContent .m-mobile-achievements::before,
  #mobileProfileContent .m-mobile-achievements::after,
  #mobileProfileContent .m-mobile-achievements button::before,
  #mobileProfileContent .m-mobile-achievements button::after {
    display: none !important;
    content: none !important;
  }

  #mobileProfileContent .m-mobile-achievements button {
    height: 31px !important;
  }

  #mobileProfileContent .m-mobile-achievements i {
    font-size: 17px !important;
  }
}