/* Keep the new full-body Mappi visible anywhere the mascot is rendered. */
html body img[src$="mymappi-mascot-wave-v3.png"] {
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
}

html body .empty-state::before,
html body .notification-heading::before,
html body .pin-search-heading::before {
  background-image:
    url("./mymappi-mascot-wave-v3.png"),
    var(--mappi-mascot-surface) !important;
  background-position: center center, center center !important;
  background-size: contain, auto !important;
  background-repeat: no-repeat, no-repeat !important;
}

html body .account-menu::before {
  background-image:
    url("./mymappi-mascot-wave-v3.png"),
    linear-gradient(135deg, rgba(13, 63, 72, 0.3), rgba(255, 255, 255, 0.07)) !important;
  background-position: 10px center, center center !important;
  background-size: 42px 42px, auto !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* Welcome back: Mappi should feel part of the scene, not trapped in a tile. */
html body .auth-card:not(.signup-mode):not(.verify-mode) .auth-mappi {
  width: clamp(220px, 24vw, 284px) !important;
  height: clamp(220px, 24vw, 284px) !important;
  margin: 0 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 24px 30px rgba(1, 28, 37, 0.24)) !important;
}

@media (max-width: 720px) {
  html body .auth-card:not(.signup-mode):not(.verify-mode) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "mascot"
      "brand"
      "form"
      "message"
      "legal" !important;
    column-gap: 0 !important;
    row-gap: 14px !important;
  }

  html body .auth-card:not(.signup-mode):not(.verify-mode)::before {
    height: 292px !important;
  }

  html body .auth-card:not(.signup-mode):not(.verify-mode) .auth-mappi {
    width: clamp(136px, 38vw, 176px) !important;
    height: clamp(136px, 38vw, 176px) !important;
    margin: 0 auto 6px !important;
    filter: drop-shadow(0 16px 22px rgba(1, 28, 37, 0.2)) !important;
  }

  html body .auth-card:not(.signup-mode):not(.verify-mode) .auth-brand {
    justify-items: center !important;
    text-align: center !important;
  }
}

@media (max-width: 390px), (max-width: 720px) and (max-height: 680px) {
  html body .auth-card:not(.signup-mode):not(.verify-mode)::before {
    height: 236px !important;
  }

  html body .auth-card:not(.signup-mode):not(.verify-mode) .auth-mappi {
    width: 126px !important;
    height: 126px !important;
    margin-bottom: 2px !important;
  }
}