/* Enhanced powerup design */
.powerup {
  background: var(--powerup-bg);
  color: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  border: 2px solid rgba(255, 255, 255, 0.5);
  margin: auto;
  box-shadow: var(--powerup-glow);
  font-family: 'Audiowide', 'Orbitron', 'Segoe UI', Arial, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  position: relative;
  z-index: 3;
  text-shadow: 0 0 12px #00f7ff, 0 0 5px #fff;
  transition: transform .13s;
  animation: powerupFloat 2s infinite ease-in-out, powerupPulse 3s infinite alternate;
}

.powerup::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.25);
  z-index: -1;
  animation: powerupRingPulse 2s infinite ease-in-out;
}

.powerup.new {
  animation: powerupFloat 2s infinite ease-in-out, powerupPulse 3s infinite alternate;
}

.powerup.collecting {
  animation: powerupCollect 0.3s ease-out forwards;
}

.powerup:active {
  transform: scale(1.08);
}

.powerup.plus { 
  background: radial-gradient(circle, #7fffff 0%, #00a2ff 70%, #0079ff 100%);
  border-color: rgba(0, 247, 255, 0.7);
  box-shadow: 0 0 15px rgba(0, 247, 255, 0.8), 0 0 25px rgba(0, 247, 255, 0.5);
}

.powerup.plus::after {
  border-color: rgba(0, 247, 255, 0.4);
}

.powerup.minus { 
  background: radial-gradient(circle, #ffdb89 0%, #ff9d13 70%, #ff7b00 100%);
  border-color: rgba(255, 179, 0, 0.7);
  text-shadow: 0 0 12px #ff9d13, 0 0 5px #fff;
  box-shadow: 0 0 15px rgba(255, 179, 0, 0.8), 0 0 25px rgba(255, 179, 0, 0.5);
}

.powerup.minus::after {
  border-color: rgba(255, 179, 0, 0.4);
}

.powerup.debuff {
  border-color: rgba(255, 206, 0, 0.7);
}

/* Redesigned countdown badge */
.powerup .countdown {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 0.7em;
  font-family: 'Audiowide', 'Orbitron', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  pointer-events: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  z-index: 4;
}

.powerup.plus .countdown {
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
  background: linear-gradient(to bottom, #00e2ff, #0079ff);
  border: 1px solid #ffffff80;
}

.powerup.minus .countdown {
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
  background: linear-gradient(to bottom, #ffce00, #ff9d13);
  border: 1px solid #ffffff80;
}

/* Powerup value styling */
.powerup-value {
  font-size: 1.05em;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 255, 255, 0.7);
  letter-spacing: -0.02em;
}