/* ============================================================================
 * threat.css — tc-threat-badge
 * ----------------------------------------------------------------------------
 * SCHICHT 2 (Mordheim, Best-Practice-Quelle). Bedrohungs-Abzeichen: stuft die
 * Gefaehrlichkeit einer Warband nach ihrem Machtfaktor in vier Stufen ein
 * (niedrig -> mittel -> hoch -> extrem). Erscheint im Warband-Viewer, kann in
 * Ranglisten/Matchmaking wiederverwendet werden.
 *
 * EXTRAHIERT aus .wv-threat(.low/.medium/.high/.extreme) (warband-viewer.css).
 *
 * NUR DIE VISUELLE HUELLE. Aus welchem Machtfaktor-Wert welche Stufe folgt
 * (calculateMachtfaktor, ratings.js — RAW-Kampagnenregel), bleibt
 * VOLLSTAENDIG in der System-JS-Logik. Hier wird nur die fertige Stufe
 * dargestellt; die Klasse traegt keine Schwellen-Logik.
 *
 * FARBEN SIND DATEN, NICHT THEME: Die vier Stufen-Farben (Gruen/Gelb/Rot/Lila)
 * bedeuten etwas ueber die Daten (wie gefaehrlich) und sind deshalb bewusst
 * hart kodiert — analog Pass/Fail-Wuerfe und Medaillen. Sie folgen NICHT dem
 * aktiven Theme-Akzent. (Vgl. Theme-vs-Daten-Regel in TECHNISCHE-PATTERNS.md.)
 *
 *   .tc-threat-badge               Inline-Abzeichen (Symbol + Stufentext)
 *     __icon                       fuehrendes Symbol
 *     __label                      Stufentext
 *     --low                        gruen   — niedrige Bedrohung
 *     --medium                     gelb    — mittlere Bedrohung
 *     --high                       rot     — hohe Bedrohung
 *     --extreme                    lila    — extreme Bedrohung (Glow-Puls)
 *     --lg                         groessere Variante (Header/Hero)
 * ============================================================================ */

.tc-threat-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-1, 6px);
  padding: 4px 12px;
  border-radius: var(--tc-radius-sm, 6px);
  border: 1px solid var(--tc-border-default);
  background: rgba(0, 0, 0, 0.2);
  color: var(--tc-text-default);
  font-size: var(--tc-text-xs, 0.8rem);
  font-weight: var(--tc-weight-semibold, 600);
  line-height: 1.2;
  white-space: nowrap;
}

.tc-threat-badge__icon { font-size: 0.95em; flex-shrink: 0; line-height: 1; }
.tc-threat-badge__label { min-width: 0; }

/* === STUFEN — semantische Datenfarben (hart kodiert, kein Theme) ========== */
.tc-threat-badge--low {
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.25);
  color: #4ade80;
}
.tc-threat-badge--medium {
  background: rgba(250, 204, 21, 0.1);
  border-color: rgba(250, 204, 21, 0.25);
  color: #facc15;
}
.tc-threat-badge--high {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.25);
  color: #f87171;
}
.tc-threat-badge--extreme {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.35);
  color: #c4b5fd;
  animation: tc-threat-pulse 2.4s ease-in-out infinite;
}

/* Joy: extreme Bedrohung pulsiert dezent (Glow) */
@keyframes tc-threat-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(168, 85, 247, 0); }
  50%      { box-shadow: 0 0 12px rgba(168, 85, 247, 0.45); }
}

/* === GROESSERE VARIANTE (Header/Hero) ===================================== */
.tc-threat-badge--lg {
  padding: 6px 16px;
  font-size: var(--tc-text-sm, 0.9rem);
  border-radius: var(--tc-radius-md, 8px);
}

/* === REDUCED MOTION ======================================================= */
@media (prefers-reduced-motion: reduce) {
  .tc-threat-badge--extreme {
    animation: none;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
  }
}