/* ============================================================================
 * mordheim-roster-card.css — tc-roster-card
 * ----------------------------------------------------------------------------
 * SCHICHT 2 (Mordheim). Beim Einzel-Abgleich als ECHTER Neubau bestaetigt:
 * die Kaempfer-Karte aus dem Roster-Editor ist der dichteste Karten-Organismus
 * der Plattform (klickbarer Header + Drag-Handle, Werte-Zeile mit Status-Farben,
 * XP-Track, Aktions-Button) und NICHT auf tc-roster-row/tc-card reduzierbar.
 *
 * EXTRAHIERT aus mordheim.css:
 *   - .unit-card(.has-upgrade/.veteran) / .card-header / .drag-handle /
 *     .card-info / .card-name / .card-type / .card-badges / .xp-badge(.pulse) /
 *     .gc-badge / .stats-row / .stat(.buffed/.nerfed/.armor) /
 *     .xp-track / .xp-dot(.filled/.lvl) / .promote-btn
 *
 * NUR DIE VISUELLE HUELLE. "Lad's Got Talent"-Limit (max. Heroes), Henchmen-
 * Mengen, Befoerderungs-Logik, Drag&Drop-Reihenfolge bleiben in der Mordheim-JS.
 *
 * THEME vs. DATEN:
 *   - Name, has-upgrade-Glow, Promote-Button = --tc-highlight (Theme-Glanz).
 *   - Stat-States buffed=gruen / nerfed=rot / armor=blau = DATEN (Bedeutung), hart.
 *   - XP-Dots: gefuellt = blutrot (Daten), Level-Schwelle = Gold (Daten).
 *   - veteran = semantisches Gruen (Status).
 *
 * ============================================================================
 *   .tc-roster-card                Kaempfer-Karte (is-upgrade / is-veteran)
 *     __header (klickbar)
 *       __drag                     Drag-Handle
 *       __info (__name / __type)   Name + Typ/Fraktion
 *       __badges (__xp / __gc)     XP- + Gold-Badge (__xp.is-pulse)
 *     __stats                      Werte-Zeile (klickbar)
 *       __stat (--buffed/--nerfed/--armor)   einzelner Wert (Datenfarbe)
 *     __body                       Lese-Felder
 *     __xp-track (__xp-dot is-filled / --lvl)   Erfahrungs-Punkte
 *     __promote                    Befoerderungs-Button
 * ============================================================================ */

.tc-roster-card {
  background: var(--tc-bg-surface-1);
  border: 2px solid var(--tc-border-default);
  border-radius: var(--tc-radius-lg, 12px);
  overflow: hidden;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tc-roster-card:hover {
  border-color: var(--tc-highlight);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
/* Aufwertung verfuegbar — Gold-Glow-Puls (Theme-Glanz) */
.tc-roster-card.is-upgrade {
  border-color: var(--tc-highlight);
  animation: tc-roster-card-glow 2s ease-in-out infinite;
}
@keyframes tc-roster-card-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(var(--tc-highlight-rgb), 0.3); }
  50%      { box-shadow: 0 0 20px rgba(var(--tc-highlight-rgb), 0.5); }
}
/* Veteran — semantisches Gruen (Status) */
.tc-roster-card.is-veteran { border-color: var(--tc-success); }

/* === HEADER =============================================================== */
.tc-roster-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--tc-bg-surface-2);
  border-bottom: 1px solid var(--tc-border-default);
  cursor: pointer;
  transition: background 0.2s ease;
}
.tc-roster-card__header:hover { background: var(--tc-bg-surface-3); }

.tc-roster-card__drag {
  flex-shrink: 0;
  cursor: grab;
  color: var(--tc-text-muted);
  font-size: 1.1em;
  padding: 4px 2px;
  letter-spacing: 2px;
  opacity: 0.4;
  transition: opacity 0.2s ease;
  user-select: none;
  border-radius: 4px;
}
.tc-roster-card__header:hover .tc-roster-card__drag { opacity: 0.7; }

.tc-roster-card__info { flex: 1; min-width: 0; }
.tc-roster-card__name {
  font-family: var(--tc-font-display, 'Cinzel', serif);
  font-size: 1.05em;
  font-weight: 700;
  color: var(--tc-highlight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-roster-card__type {
  color: var(--tc-text-muted);
  font-size: 0.8em;
  margin-top: 2px;
}

.tc-roster-card__badges {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
/* XP-Badge — Standard blutrot (Daten), Level-Up-bereit = Gold-Puls (Theme) */
.tc-roster-card__xp {
  background: var(--tc-danger, #8b0000);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.9em;
}
.tc-roster-card__xp.is-pulse {
  background: linear-gradient(135deg, var(--tc-secondary, #8a6d3b), var(--tc-highlight));
  animation: tc-roster-xp-pulse 1.5s ease-in-out infinite;
}
@keyframes tc-roster-xp-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
.tc-roster-card__gc {
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-default);
  color: var(--tc-text-default);
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85em;
}

/* === STATS-ROW ============================================================ */
.tc-roster-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--tc-border-default);
  cursor: pointer;
  transition: background 0.2s ease;
}
.tc-roster-card__stats:hover { background: rgba(var(--tc-highlight-rgb), 0.05); }
.tc-roster-card__stat {
  padding: 6px 10px;
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-default);
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--tc-text-default);
}
.tc-roster-card__stats:hover .tc-roster-card__stat { border-color: var(--tc-highlight); }
/* Stat-States — DATENFARBEN (gebufft/generft/Ruestung), hart kodiert */
.tc-roster-card__stat--buffed { background: rgba(46, 125, 50, 0.25); border-color: var(--tc-success); color: #81c784; }
.tc-roster-card__stat--nerfed { background: rgba(198, 40, 40, 0.25); border-color: var(--tc-danger);  color: #ef9a9a; }
.tc-roster-card__stat--armor  { background: rgba(41, 128, 185, 0.25); border-color: var(--tc-info);   color: #5dade2; }

/* === BODY ================================================================= */
.tc-roster-card__body { padding: 12px 16px; }

/* === XP-TRACK ============================================================= */
.tc-roster-card__xp-track {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.tc-roster-card__xp-dot {
  width: 14px;
  height: 14px;
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-default);
  border-radius: 3px;
}
/* gefuellt = blutrot (Daten), Level-Schwelle = Gold (Daten) */
.tc-roster-card__xp-dot.is-filled { background: var(--tc-danger, #8b0000); border-color: var(--tc-danger, #8b0000); }
.tc-roster-card__xp-dot--lvl { width: 16px; height: 16px; border: 2px solid #c9a959; }
.tc-roster-card__xp-dot--lvl.is-filled { background: #c9a959; border-color: #c9a959; }

/* === PROMOTE-BTN ========================================================== */
.tc-roster-card__promote {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  background: rgba(var(--tc-highlight-rgb), 0.15);
  border: 2px solid var(--tc-highlight);
  border-radius: var(--tc-radius-md, 8px);
  color: var(--tc-highlight);
  font-weight: 600;
  font-size: 0.85em;
  cursor: pointer;
  transition: background 0.2s ease;
}
.tc-roster-card__promote:hover { background: rgba(var(--tc-highlight-rgb), 0.25); }

/* === MOTION =============================================================== */

/* === ANFUEHRER ============================================================
 * ⚠️ ERGAENZT AM 22.08.2026 (#163). Der Organismus kannte `is-upgrade` und
 * `is-veteran`, aber nicht den ANFUEHRER — dabei ist das der auffaelligste
 * Zustand einer Kriegerkarte: goldener Rahmen, goldener Name, eine Krone,
 * die pulsiert. Ohne diese Regeln haette das Ausrollen die Anfuehrer-Karte
 * ununterscheidbar gemacht.
 *
 * Uebernommen aus .is-leader / .leader-crown (mordheim.css). Das
 * `!important` von dort ist NICHT mitgekommen: Es stand dort, weil die
 * Regel gegen `.unit-card` gewinnen musste — hier gewinnt sie ueber die
 * hoehere Spezifitaet von selbst.
 * ========================================================================== */
.tc-roster-card.is-leader {
  border-color: var(--tc-highlight, #c9a959);
  box-shadow: 0 0 10px rgba(201, 169, 89, 0.3);
}
.tc-roster-card.is-leader .tc-roster-card__name {
  color: var(--tc-highlight, #c9a959);
}
.tc-roster-card__crown {
  font-size: 1.1em;
  cursor: default;
  text-shadow: 0 0 8px rgba(201, 169, 89, 0.8);
  animation: tc-roster-card-crown 2s ease-in-out infinite;
}
@keyframes tc-roster-card-crown {
  0%, 100% { text-shadow: 0 0 8px rgba(201, 169, 89, 0.8); }
  50%      { text-shadow: 0 0 15px rgba(201, 169, 89, 1), 0 0 25px rgba(201, 169, 89, 0.5); }
}

/* === VERLETZT =============================================================
 * `has-injury` stand im Markup und hatte in der GESAMTEN css/ keine einzige
 * Regel — ein Zustand, den der Code setzt und den niemand sieht. Er bekommt
 * hier seinen roten Rahmen, dezent: Eine Verletzung ist eine Information,
 * kein Alarm.
 * ========================================================================== */
.tc-roster-card.is-injured {
  border-color: rgba(239, 154, 154, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .tc-roster-card,
  .tc-roster-card__header,
  .tc-roster-card__drag,
  .tc-roster-card__stats,
  .tc-roster-card__promote { transition: none; }
  .tc-roster-card.is-upgrade { animation: none; }
  .tc-roster-card__xp.is-pulse { animation: none; }
  /* ⚠️ Die Krone MUSS mit — sie kam am 22.08.2026 dazu, und eine Animation,
     die hier fehlt, laeuft bei abgeschalteter Bewegung weiter. `animation:
     none` ist hier richtig (nicht die 0.01ms-Vorlage aus §9): Der Schein
     steht in der Basisregel, es faellt also nur das Pulsieren weg, nicht
     der Endzustand. */
  .tc-roster-card__crown { animation: none; }
}