/* src/hud-combat-chips.css
 * HUD-CORE-09 (#2797) — Combat chip styles.
 * Attaches to #hud-top-row. Three chips: aggro tier, hunter-engaged,
 * danger-room warning.
 * Structural only — visual tokens deferred to Sprint 3B.
 */

/* ── Chip base ────────────────────────────────────────────────────────────── */

.hud-combat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: rgba(10, 10, 20, 0.80);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  pointer-events: none;
}

/* HUD-AGGRO-VISIBILITY-FIX-05: explicit [hidden] override.
 * The JS init (hud-combat-chips.js: aggro.hidden = true) sets the
 * `hidden` HTML attribute, which is supposed to apply `display: none`
 * via the user-agent stylesheet. But author styles beat user-agent in
 * the cascade — `.hud-combat-chip { display: inline-flex }` above
 * silently overrode it, so the chips have been visible since
 * HUD-CORE-09 shipped, even out of combat. Sibling `hud-target-frame.css`
 * has the same pattern (see `#hud-target-frame-inner[hidden]`).
 *
 * !important is used to defend against any future hover/transition
 * rules that might re-introduce the override. */
.hud-combat-chip[hidden] {
  display: none !important;
}

/* ── Label ────────────────────────────────────────────────────────────────── */

.hud-combat-chip__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #e2e8f0;
}

/* ── Hunter chip — warning orange ────────────────────────────────────────── */

.hud-combat-chip--hunter {
  border-color: rgba(249, 115, 22, 0.30);
}

.hud-combat-chip--hunter .hud-combat-chip__label {
  color: #f97316;
}

/* ── Flash animation (new hunter engaged) ────────────────────────────────── */

@keyframes hud-chip-flash {
  0%   { opacity: 1; }
  25%  { opacity: 0.3; }
  50%  { opacity: 1; }
  75%  { opacity: 0.3; }
  100% { opacity: 1; }
}

.hud-combat-chip--flash {
  animation: hud-chip-flash 0.6s ease;
}

/* ── Danger-room chip — critical red ─────────────────────────────────────── */

.hud-combat-chip--danger {
  border-color: rgba(239, 68, 68, 0.40);
  background: rgba(30, 5, 5, 0.88);
}

.hud-combat-chip--danger .hud-combat-chip__label {
  color: #ef4444;
}