.milestone-overlay {
  position: absolute;
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1000;
}

.milestone-badge {
  display: inline-block;
  padding: 14px 34px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff7e0 0%, #ffe27a 55%, #ffb84d 100%);
  border: 3px solid #fff;
  box-shadow:
    0 0 0 3px rgba(255, 180, 60, 0.55),
    0 6px 0 rgba(170, 110, 0, 0.5),
    0 10px 26px rgba(0, 0, 0, 0.35);
  color: #7a4a00;
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: 2px;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.85);
  transform-origin: center;
  animation: milestone-pop 0.5s cubic-bezier(0.17, 1.4, 0.35, 1) both;
}

.milestone-badge::before,
.milestone-badge::after {
  content: "✦";
  position: absolute;
  color: #ffd23e;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: milestone-twinkle 0.8s ease-in-out infinite alternate;
}

.milestone-badge::before {
  left: 8px;
  top: -14px;
  font-size: 20px;
}

.milestone-badge::after {
  right: 10px;
  bottom: -16px;
  font-size: 14px;
  animation-delay: 0.3s;
}

.milestone-badge.milestone-out {
  animation: none;
  transition: transform 0.45s ease-in, opacity 0.45s ease-in;
  opacity: 0;
  transform: translateY(-20px) scale(1.18);
}

.milestone-badge.tier-2 {
  font-size: 34px;
  background: linear-gradient(180deg, #fff7e0 0%, #ffcc4d 55%, #ff9d2e 100%);
  box-shadow:
    0 0 0 4px rgba(255, 200, 80, 0.6),
    0 7px 0 rgba(190, 120, 0, 0.55),
    0 12px 30px rgba(0, 0, 0, 0.4);
}

.milestone-badge.tier-3 {
  font-size: 38px;
  padding: 16px 40px;
  color: #ff0080;
  background: linear-gradient(180deg, #fff0ff 0%, #ff9de2 55%, #ff4db8 100%);
  box-shadow:
    0 0 0 4px rgba(255, 130, 210, 0.65),
    0 8px 0 rgba(180, 0, 110, 0.55),
    0 14px 34px rgba(0, 0, 0, 0.42);
}

.milestone-badge.tier-4 {
  font-size: 42px;
  padding: 18px 46px;
  color: #7a2bff;
  background: linear-gradient(180deg, #f0e8ff 0%, #c99aff 55%, #8a5bff 100%);
  box-shadow:
    0 0 0 4px rgba(170, 120, 255, 0.7),
    0 9px 0 rgba(90, 20, 200, 0.6),
    0 16px 38px rgba(0, 0, 0, 0.45);
}

.milestone-badge.tier-5 {
  font-size: 46px;
  padding: 20px 52px;
  color: #ff8a00;
  background: linear-gradient(180deg, #fff8e6 0%, #ffc21f 45%, #ff7a00 100%);
  box-shadow:
    0 0 0 5px rgba(255, 200, 60, 0.75),
    0 10px 0 rgba(200, 110, 0, 0.65),
    0 0 40px rgba(255, 150, 0, 0.55),
    0 18px 42px rgba(0, 0, 0, 0.48);
}

@keyframes milestone-pop {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-8deg);
  }
  45% {
    opacity: 1;
    transform: scale(1.12) rotate(2deg);
  }
  70% {
    transform: scale(0.98) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes milestone-twinkle {
  0% {
    transform: scale(0.6) rotate(0deg);
    opacity: 0.4;
  }
  100% {
    transform: scale(1.25) rotate(40deg);
    opacity: 1;
  }
}