/* EarnDoros visual feedback
   - Adds a small "+X" pill when Doros are earned
   - Gives the Doros chip a subtle pulse animation
*/

.doros-chip {
  position: relative;            /* allow the badge to be positioned */
  overflow: visible;
}

/* Applied by JS while new Doros were just earned */
.doros-chip.doros-earned {
  animation: dorosPulse 0.6s ease-out 0s 3;
}

/* Little "+250" badge that appears above the chip */
.doros-chip.doros-earned::after {
  content: attr(data-earned-last);
  position: absolute;
  top: -0.4rem;
  right: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #2b2213;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

@keyframes dorosPulse {
  0% {
    transform: translateZ(0) scale(1);
    box-shadow: none;
  }
  40% {
    transform: translateZ(0) scale(1.06);
    box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.35);
  }
  100% {
    transform: translateZ(0) scale(1);
    box-shadow: none;
  }
}