.mascot-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(390px, 92%);
  height: 235px;
  margin: 24px 0 4px;
  overflow: hidden;
  border: 1px solid #dde8df;
  border-radius: 34px 34px 34px 12px;
  background: linear-gradient(145deg, #f7fbf6 0%, #eaf3e9 68%, #f7efe2 100%);
  isolation: isolate;
}

.mascot-stage::before,
.mascot-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  filter: blur(2px);
}

.mascot-stage::before {
  width: 190px;
  height: 190px;
  right: -42px;
  top: -82px;
  background: #d9eadc;
}

.mascot-stage::after {
  width: 125px;
  height: 125px;
  left: -38px;
  bottom: -56px;
  background: #f3e3c9;
}

.mascot-stage[data-mascot="welcome"] {
  background: linear-gradient(145deg, #fff9fb 0%, #f4e8f0 46%, #eaf2f6 100%);
}

.mascot-stage[data-mascot="success"] {
  background: linear-gradient(145deg, #f7fbf6 0%, #e5f2e4 100%);
}

.mascot-stage img {
  width: 82%;
  height: 91%;
  object-fit: contain;
  filter: drop-shadow(0 13px 15px rgba(40, 61, 48, .13));
  animation: mascot-float 5.8s ease-in-out infinite;
}

.mascot-stage figcaption {
  position: absolute;
  right: 14px;
  bottom: 13px;
  padding: 6px 12px;
  border: 1px solid rgba(223, 232, 224, .9);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: var(--md-primary, #3f6653);
  box-shadow: 0 5px 16px rgba(36, 76, 53, .08);
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .6px;
}

.alert-with-mascot {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 7px 15px 7px 9px;
}

.alert-with-mascot img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 4px 7px rgba(36, 76, 53, .09));
}

.alert-with-mascot span {
  min-width: 0;
  line-height: 1.7;
}

@keyframes mascot-float {
  0%, 100% { transform: translateY(2px) rotate(-.4deg); }
  50% { transform: translateY(-5px) rotate(.5deg); }
}

@media (max-width: 900px) {
  .mascot-stage {
    width: 100%;
    height: 205px;
  }
}

@media (max-width: 700px) {
  .mascot-stage {
    height: 148px;
    margin: 15px 0 1px;
    border-radius: 25px 25px 25px 10px;
  }

  .mascot-stage img {
    width: 74%;
  }

  .mascot-stage figcaption {
    display: none;
  }

  .alert-with-mascot {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 56px;
  }

  .alert-with-mascot img {
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mascot-stage img {
    animation: none;
  }
}