/* ── Hit flash overlay (combat feedback) ── */
.game-hit-flash-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 95;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 60, 90, 0.16) 0%, rgba(255, 30, 70, 0.08) 35%, rgba(0, 0, 0, 0) 70%),
    rgba(120, 0, 20, 0.14);
  mix-blend-mode: screen;
}
@keyframes enemy-hit-flash {
  0%   { opacity: 0; }
  18%  { opacity: 0.55; }
  100% { opacity: 0; }
}
.game-hit-flash-overlay.active {
  animation: enemy-hit-flash 0.22s ease-out forwards;
}

/* ── Enemy — Ion Storm Fragment ── */
.enemy-dot {
  position: fixed;
  width: 11px;
  height: 11px;
  pointer-events: none;
  z-index: 9998;
  clip-path: polygon(20% 0%, 90% 8%, 100% 55%, 78% 100%, 5% 88%, 0% 35%);
  background:
    radial-gradient(ellipse at 32% 28%,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(220, 225, 235, 0.95) 30%,
      rgba(180, 190, 210, 0.88) 60%,
      rgba(130, 145, 175, 0.75) 85%,
      rgba(80, 95, 130, 0.55) 100%
    );
  box-shadow:
    0 0 4px 2px rgba(160, 200, 255, 0.80),
    0 0 10px 4px rgba(100, 150, 255, 0.45),
    0 0 18px 7px rgba(60, 100, 220, 0.20);
  transform: translate(-50%, -50%) scale(0);
  animation: enemy-appear 0.22s ease forwards;
  will-change: left, top, transform;
  overflow: visible;
}
.enemy-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: inherit;
  background: linear-gradient(130deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 28%, transparent 55%);
  pointer-events: none;
}
.enemy-dot::after { display: none; }

/* 5 randomised chunk silhouettes */
.enemy-dot--chunk1 { clip-path: polygon(20% 0%, 90% 8%,  100% 55%, 78% 100%, 5%  88%, 0%  35%); }
.enemy-dot--chunk2 { clip-path: polygon(40% 0%, 100% 20%, 88% 70%, 60% 100%, 0%  80%, 10% 25%); }
.enemy-dot--chunk3 { clip-path: polygon(0%  15%, 70% 0%,  100% 40%, 90% 90%, 45% 100%, 5%  70%); }
.enemy-dot--chunk4 { clip-path: polygon(30% 0%, 85% 12%, 100% 60%, 70% 100%, 15% 95%, 0%  50%, 18% 10%); }
.enemy-dot--chunk5 { clip-path: polygon(55% 0%, 100% 30%, 95% 75%, 60% 100%, 10% 88%, 0%  45%, 25% 5%); }

@keyframes enemy-appear {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ── Burning Asteroid — sprite + fire aura pseudo ──
   The host's left/top/transform are JS-driven; fire-pulse lives on ::before to avoid conflicts. */
.enemy-dot--asteroid {
  width: 24px;
  height: 24px;
  clip-path: none;
  background: none;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: none;
  filter:
    drop-shadow(0 0 4px rgba(255, 160, 50, 0.95))
    drop-shadow(0 0 9px rgba(255, 95, 25, 0.6))
    drop-shadow(0 0 17px rgba(255, 55, 12, 0.32));
}
.enemy-dot--asteroid::before {
  content: '';
  position: absolute;
  inset: -45%;
  clip-path: none;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 205, 100, 0.55) 0%,
    rgba(255, 125, 35, 0.40) 34%,
    rgba(255, 60, 12, 0.17) 62%,
    transparent 78%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: asteroid-fire-pulse 1.05s ease-in-out infinite;
}
.enemy-dot--asteroid::after { display: none; }

@keyframes asteroid-fire-pulse {
  0%, 100% { opacity: 0.5;  transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.18); }
}

/* Off-screen edge indicator pulse (fx/edge-indicator.js) */
@keyframes qw-edge-pulse {
  0%, 100% { transform: scale(0.8); }
  50%      { transform: scale(1.16); }
}

/* ── Parry / vanish states ── */
.enemy-dot.enemy-dot--parried {
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.2, 0.9, 0.25, 1), box-shadow 0.32s ease;
  opacity: 0.2;
  transform: translate(-50%, -50%) scale(0.68);
  box-shadow: 0 0 8px rgba(230, 245, 255, 0.55), 0 0 20px rgba(180, 220, 255, 0.38);
}
.enemy-dot.enemy-dot--parry-bounce {
  animation: enemy-parry-bounce 0.26s cubic-bezier(0.25, 0.85, 0.28, 1);
}
@keyframes enemy-parry-bounce {
  0%   { transform: translate(-50%, -50%) scale(1); }
  32%  { transform: translate(-50%, -50%) scale(1.16); }
  68%  { transform: translate(-50%, -50%) scale(0.92); }
  100% { transform: translate(-50%, -50%) scale(0.86); }
}
.enemy-dot.enemy-dot--vanish,
.heal-soul-dot.enemy-dot--vanish {
  transition: opacity 0.22s ease, transform 0.22s ease;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.55);
}

/* ── Heavy Fragment ── */
.enemy-dot--heavy {
  width: 18px;
  height: 18px;
  border-radius: 0;
  clip-path: polygon(22% 0%, 78% 5%, 100% 32%, 96% 70%, 72% 100%, 28% 98%, 4% 72%, 0% 38%, 10% 12%);
  background:
    radial-gradient(ellipse at 30% 25%,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(235, 215, 195, 0.95) 30%,
      rgba(200, 170, 140, 0.88) 60%,
      rgba(155, 110, 80, 0.72) 85%,
      rgba(100, 55, 35, 0.55) 100%
    );
  box-shadow:
    0 0 5px 2px rgba(255, 180, 100, 0.90),
    0 0 12px 5px rgba(255, 100, 40, 0.55),
    0 0 22px 8px rgba(200, 50, 10, 0.28);
  animation: enemy-appear 0.22s ease forwards;
}
.enemy-dot--heavy::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,0.50) 0%, rgba(255,220,180,0.18) 30%, transparent 60%);
  pointer-events: none;
}
.enemy-dot--heavy::after { display: none; }
.enemy-dot--heavy-stagger {
  box-shadow:
    0 0 14px 5px rgba(255, 120, 0, 0.9),
    0 0 28px 10px rgba(200, 60, 0, 0.7),
    0 0 48px 18px rgba(100, 20, 0, 0.4),
    inset 0 0 8px 3px rgba(255, 80, 0, 0.4) !important;
  transition: box-shadow 0.4s ease;
}

/* ── Fast Shard ── */
.enemy-dot--fast {
  width: 7px;
  height: 7px;
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  background: radial-gradient(ellipse at 40% 30%,
    rgba(255, 255, 255, 1.0) 0%,
    rgba(200, 230, 255, 0.95) 35%,
    rgba(130, 180, 255, 0.82) 65%,
    rgba(60, 110, 230, 0.60) 100%
  );
  box-shadow:
    0 0 4px 2px rgba(200, 230, 255, 0.95),
    0 0 10px 4px rgba(100, 170, 255, 0.70),
    0 0 22px 8px rgba(30, 100, 220, 0.3);
  animation: enemy-appear 0.12s ease forwards;
}
.enemy-dot--fast::before { display: none; }
.enemy-dot--fast::after {
  content: '';
  position: absolute;
  inset: 20%;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: rgba(220, 240, 255, 0.6);
  pointer-events: none;
}

/* ── Duo Fragment ── */
.enemy-dot--duo {
  width: 10px;
  height: 10px;
  border-radius: 0;
  clip-path: polygon(35% 0%, 95% 15%, 100% 62%, 68% 100%, 8% 92%, 0% 42%);
  background:
    radial-gradient(ellipse at 32% 28%,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(255, 240, 200, 0.92) 30%,
      rgba(240, 200, 130, 0.82) 60%,
      rgba(200, 145, 60, 0.65) 85%,
      rgba(140, 85, 15, 0.45) 100%
    );
  box-shadow:
    0 0 4px 2px rgba(255, 210, 100, 0.88),
    0 0 10px 4px rgba(220, 150, 30, 0.50),
    0 0 18px 7px rgba(180, 100, 0, 0.22);
  animation: enemy-appear 0.22s ease forwards;
}
.enemy-dot--duo::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: inherit;
  background: linear-gradient(110deg, rgba(255,255,255,0.50) 0%, transparent 55%);
  pointer-events: none;
}
.enemy-dot--duo::after { display: none; }
.enemy-dot--duo-enraged {
  box-shadow:
    0 0 10px 4px rgba(255, 200, 80, 0.95),
    0 0 22px 8px rgba(255, 120, 0, 0.75),
    0 0 40px 15px rgba(200, 60, 0, 0.45) !important;
  filter: brightness(1.4);
}

/* ── Mimic Fragment ── */
.enemy-dot--mimic {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  clip-path: none;
  background: radial-gradient(circle,
    rgba(255, 252, 180, 0.98) 0%,
    rgba(255, 215, 0, 0.92) 40%,
    rgba(220, 170, 0, 0.6) 70%,
    transparent 100%
  );
  box-shadow:
    0 0 6px 3px rgba(255, 230, 80, 0.85),
    0 0 14px 6px rgba(255, 200, 0, 0.55),
    0 0 28px 12px rgba(220, 160, 0, 0.25);
  animation: enemy-appear 0.22s ease forwards;
}
.enemy-dot--mimic::before,
.enemy-dot--mimic::after { display: none; }
.enemy-dot--mimic-revealed {
  width: 20px;
  height: 13px;
  border-radius: 0;
  clip-path: polygon(30% 0%, 70% 0%, 100% 45%, 85% 100%, 15% 100%, 0% 45%);
  background: radial-gradient(ellipse at 50% 30%,
    rgba(200, 240, 255, 0.95) 0%,
    rgba(68, 153, 255, 0.88) 40%,
    rgba(20, 60, 180, 0.7) 75%,
    rgba(5, 20, 80, 0.5) 100%
  );
  box-shadow:
    0 0 6px 2px rgba(100, 180, 255, 0.85),
    0 0 14px 5px rgba(60, 120, 255, 0.55),
    0 0 26px 10px rgba(30, 60, 180, 0.3);
  transition: all 0.2s ease;
}
.enemy-dot--mimic-revealed::before,
.enemy-dot--mimic-revealed::after { display: none; }

/* ── Heal-Soul (healing sphere — creature, not enemy) ── */
.heal-soul-dot {
  position: fixed;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 9998;
  border-radius: 50%;
  border: 1px solid rgba(180, 255, 220, 0.7);
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(140, 255, 200, 0.92) 25%,
    rgba(40, 220, 150, 0.8) 50%,
    rgba(0, 150, 100, 0.6) 72%,
    rgba(0, 80, 60, 0.3) 88%,
    transparent 100%
  );
  box-shadow:
    inset 0 0 4px 2px rgba(255, 255, 255, 0.6),
    0 0 6px 3px rgba(80, 255, 180, 0.85),
    0 0 14px 6px rgba(20, 200, 120, 0.6),
    0 0 28px 12px rgba(0, 140, 80, 0.3),
    0 0 50px 20px rgba(0, 100, 60, 0.12);
  transform: translate(-50%, -50%) scale(0);
  animation: enemy-appear 0.22s ease forwards;
  will-change: left, top, opacity, transform;
}
.heal-soul-dot::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
  width: 100%;
  height: 2px;
  border-radius: 50%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200, 255, 240, 0.8) 20%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(200, 255, 240, 0.8) 80%,
    transparent 100%
  );
  pointer-events: none;
}
.heal-soul-dot.enemy-dot--parried {
  opacity: 0.2;
  transform: translate(-50%, -50%) scale(0.68);
  box-shadow: 0 0 8px rgba(186, 255, 220, 0.6), 0 0 22px rgba(92, 232, 163, 0.42);
}