@keyframes badgePop {
  0% { transform: scale(0.9); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.badge-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: 0.85rem;
  border-width: 1px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.badge-unlocked {
  background-color: #ecfdf5 !important;
  color: #065f46 !important;
  border-color: #a7f3d0 !important;
  animation: badgePop 0.4s ease-out forwards;
}