.combat-enemy {
  --enemy-accent: #ff557d;
  --enemy-bright: #ffd4de;
  --enemy-dark: #3a0e1a;
  --enemy-size: 32px;
  position: absolute;
  width: var(--enemy-size);
  height: var(--enemy-size);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  transition: filter 70ms linear;
  isolation: isolate;
}

.combat-enemy--scout {
  --enemy-accent: #ff557d;
  --enemy-bright: #ffd4de;
  --enemy-dark: #3b0a18;
  --enemy-size: 32px;
}

.combat-enemy--brute {
  --enemy-accent: #ff9a3c;
  --enemy-bright: #ffe0a6;
  --enemy-dark: #402006;
  --enemy-size: 40px;
}

.combat-enemy--elite {
  --enemy-accent: #ba66ff;
  --enemy-bright: #f1d7ff;
  --enemy-dark: #251038;
  --enemy-size: 45px;
}

.combat-enemy--boss {
  --enemy-accent: #ff355f;
  --enemy-bright: #ffd166;
  --enemy-dark: #260710;
  --enemy-size: 60px;
}

.combat-enemy--hit {
  filter: brightness(1.85);
}

.combat-enemy--slowed .enemy-visual {
  filter: drop-shadow(0 0 5px rgba(123, 231, 255, 0.95));
}

.enemy-visual,
.enemy-visual::before,
.enemy-visual::after {
  box-sizing: border-box;
}

.enemy-visual {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}

.enemy-visual::before,
.enemy-visual::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
}

/* Scout: narrow arrowhead silhouette, visually reads as fast/light. */
.enemy-visual--scout::before {
  width: 22px;
  height: 28px;
  transform: translate(-50%, -50%);
  clip-path: polygon(50% 100%, 2% 35%, 29% 30%, 29% 4%, 71% 4%, 71% 30%, 98% 35%);
  background: linear-gradient(145deg, var(--enemy-bright), var(--enemy-accent) 42%, var(--enemy-dark) 100%);
  border: 2px solid var(--enemy-bright);
  box-shadow: 0 0 10px var(--enemy-accent);
}

.enemy-visual--scout::after {
  width: 6px;
  height: 13px;
  transform: translate(-50%, -63%);
  border: 1px solid var(--enemy-bright);
  border-radius: 999px;
  background: var(--enemy-dark);
  box-shadow: 0 0 5px var(--enemy-bright);
}

/* Brute: wide armored octagon with a heavy diamond core. */
.enemy-visual--brute::before {
  width: 32px;
  height: 30px;
  transform: translate(-50%, -50%);
  clip-path: polygon(18% 0, 82% 0, 100% 27%, 88% 83%, 68% 100%, 32% 100%, 12% 83%, 0 27%);
  background:
    linear-gradient(90deg, var(--enemy-dark) 0 12%, transparent 13% 87%, var(--enemy-dark) 88% 100%),
    linear-gradient(145deg, var(--enemy-bright), var(--enemy-accent) 44%, var(--enemy-dark) 100%);
  border: 2px solid var(--enemy-bright);
  box-shadow: 0 0 12px var(--enemy-accent);
}

.enemy-visual--brute::after {
  width: 13px;
  height: 13px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 2px solid var(--enemy-bright);
  border-radius: 3px;
  background: var(--enemy-dark);
  box-shadow: 0 0 6px var(--enemy-accent);
}

/* Elite: spiked body with a rotating energy ring. */
.enemy-visual--elite::before {
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  clip-path: polygon(50% 0, 64% 25%, 100% 17%, 76% 50%, 100% 83%, 64% 75%, 50% 100%, 36% 75%, 0 83%, 24% 50%, 0 17%, 36% 25%);
  background:
    radial-gradient(circle, var(--enemy-bright) 0 12%, var(--enemy-accent) 14% 29%, var(--enemy-dark) 31% 44%, transparent 46%),
    linear-gradient(145deg, var(--enemy-bright), var(--enemy-accent) 48%, var(--enemy-dark) 100%);
  border: 2px solid var(--enemy-bright);
  box-shadow: 0 0 14px var(--enemy-accent);
}

.enemy-visual--elite::after {
  width: 39px;
  height: 39px;
  transform: translate(-50%, -50%);
  border: 2px dashed var(--enemy-bright);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--enemy-accent);
  animation: enemy-ring-spin 3.4s linear infinite;
}

/* Siege Core: large layered mechanical core with a counter-rotating ring. */
.enemy-visual--boss {
  background: radial-gradient(circle, rgba(255, 209, 102, 0.22) 0 22%, rgba(255, 53, 95, 0.16) 34%, transparent 72%);
}

.enemy-visual--boss::before {
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  clip-path: polygon(28% 0, 72% 0, 100% 28%, 100% 72%, 72% 100%, 28% 100%, 0 72%, 0 28%);
  background:
    linear-gradient(90deg, transparent 0 42%, rgba(255, 209, 102, 0.7) 43% 57%, transparent 58% 100%),
    linear-gradient(0deg, transparent 0 42%, rgba(255, 209, 102, 0.7) 43% 57%, transparent 58% 100%),
    radial-gradient(circle, #fff4c0 0 8%, var(--enemy-bright) 10% 18%, var(--enemy-accent) 20% 36%, var(--enemy-dark) 39% 58%, var(--enemy-accent) 60% 100%);
  border: 3px solid var(--enemy-bright);
  box-shadow: 0 0 16px var(--enemy-accent), inset 0 0 10px var(--enemy-dark);
  animation: enemy-boss-shell 2.4s ease-in-out infinite;
}

.enemy-visual--boss::after {
  width: 53px;
  height: 53px;
  transform: translate(-50%, -50%);
  border: 3px dashed var(--enemy-bright);
  border-radius: 50%;
  box-shadow: 0 0 9px var(--enemy-bright);
  animation: enemy-ring-spin 4.8s linear infinite reverse;
}

.combat-enemy__hp {
  position: absolute;
  left: 2px;
  right: 2px;
  top: -6px;
  height: 3px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.62);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.combat-enemy__hp span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--enemy-accent);
  box-shadow: 0 0 6px var(--enemy-accent);
}

@keyframes enemy-ring-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes enemy-boss-shell {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.06); }
}

@media (max-width: 720px) {
  .combat-enemy--scout { --enemy-size: 30px; }
  .combat-enemy--brute { --enemy-size: 37px; }
  .combat-enemy--elite { --enemy-size: 42px; }
  .combat-enemy--boss { --enemy-size: 54px; }

  .enemy-visual--boss {
    transform: translate(-50%, -50%) scale(0.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .enemy-visual--elite::after,
  .enemy-visual--boss::before,
  .enemy-visual--boss::after {
    animation: none;
  }
}