.enemy-alert-indicator {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 50, 70, 0.15);
  border: 1px solid rgba(255, 50, 70, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #ff3344;
  pointer-events: none;
  z-index: 6;
  transform: translate(-50%, -100%);
  animation: alertPulse 0.8s ease-in-out infinite;
}

@keyframes alertPulse {
  0%, 100% {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translate(-50%, -100%) scale(1.1);
  }
}

.enemy-alert-indicator.suspicious {
  background: rgba(255, 200, 0, 0.15);
  border-color: rgba(255, 200, 0, 0.4);
  color: #ffcc00;
}

.enemy-alert-indicator.alert {
  background: rgba(255, 50, 70, 0.25);
  border-color: rgba(255, 50, 70, 0.6);
  color: #ff3344;
  animation: alertPulseFast 0.4s ease-in-out infinite;
}

@keyframes alertPulseFast {
  0%, 100% {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -100%) scale(1.15);
  }
}

.enemy-vision-cone {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  opacity: 0.08;
}

.enemy-label {
  position: absolute;
  font-size: 9px;
  color: rgba(255, 80, 100, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
  pointer-events: none;
  z-index: 7;
  white-space: nowrap;
  transform: translateX(-50%);
}

.enemy-detection-bar {
  position: absolute;
  width: 30px;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  pointer-events: none;
  z-index: 7;
  transform: translateX(-50%);
}

.enemy-detection-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffcc00, #ff3344);
  border-radius: 2px;
  transition: width 0.15s;
  width: 0%;
}