/* ============================================================================
 * mordheim-extras.css — tc-macht-breakdown + tc-ooa-versus
 * ----------------------------------------------------------------------------
 * SCHICHT 2 (Mordheim). Zwei eigenstaendige Mordheim-Organismen, die beim
 * Einzel-Abgleich als ECHTE Neubauten bestaetigt wurden (nicht auf bestehende
 * Komponenten reduzierbar):
 *
 *   - tc-macht-breakdown  <- .macht-summary / .macht-total / .macht-pillars /
 *                            .macht-pillar(.pillar-rating/-exp/-gold/-injury)
 *                            (mordheim.css) — mehrteilige Saeulen-Aufschluesselung,
 *                            NICHT identisch mit der simplen macht-pill.
 *   - tc-ooa-versus       <- .ooa-versus / .ooa-side / .ooa-warrior-btn
 *                            (.selected-attacker/.selected-victim/.is-ooa)
 *                            (mordheim.css) — zweiseitiges Auswahl-Layout,
 *                            mehr als ein leeres tc-modal.
 *
 * NUR DIE VISUELLE HUELLE. Machtfaktor-Berechnung, Angreifer/Opfer-Auswahl,
 * OOA-Logik bleiben in der Mordheim-JS.
 *
 * THEME vs. DATEN:
 *   - Header/Hover/Rahmen-Glanz = --tc-highlight (Theme).
 *   - Macht-Saeulen-Farben (rating=lila, exp=gruen, gold=gelb, injury=rot)
 *     = DATEN (Saeulen-Bedeutung), hart kodiert wie in der Quelle.
 *   - OOA-Selektion (attacker=gruen, victim=blutrot) = DATEN, hart kodiert.
 *
 * ============================================================================
 *   .tc-macht-breakdown            Machtfaktor-Aufschluesselung
 *     __total (__value/__label)    Gesamt-Machtfaktor
 *     __pillars                    Reihe der Saeulen
 *     __pillar                     eine Saeule
 *       --rating / --exp / --gold / --injury   Saeulen-Typ (Datenfarbe)
 *       __val / __lbl / __sub
 *     __plus                       "+"-Trenner
 *
 *   .tc-ooa-versus                 Out-of-Action Versus-Auswahl
 *     __side (--left/--right)      Angreifer- / Opfer-Spalte
 *       __header (__title/__hint)  Spaltenkopf
 *     __vs-badge                   VS-Kreis in der Mitte
 *     __list                       Krieger-Liste
 *     __warrior                    Krieger-Knopf
 *       is-attacker / is-victim    Auswahl (Datenfarbe gruen/blutrot)
 *       is-ooa / is-disabled       ausser Gefecht / Spalte gesperrt
 *       __name / __type / __icon
 * ============================================================================ */

/* === MACHT-BREAKDOWN ======================================================
 *
 * ⚠️ AUFGEWERTET AM 22.08.2026 (#163). Bis dahin kannte diese Huelle VIER
 * Saeulentypen und keinen Detailbereich — der Eigenbau im Roster-Editor hatte
 * inzwischen SIEBEN Saeulen, ein aufklappbares Detail-Panel, Statistik-Marken
 * und einen Chevron. 14 Klassen gegen 37: Ein Ausrollen haette die Anzeige
 * VERARMT, und §3 sagt „Vorher/Nachher nie ärmer".
 *
 * ⚠️ DIE LIVE-WERTE GEWINNEN, NICHT DIE ALTEN HUELLEN-WERTE. Beim Abgleich
 * wichen sie an sieben Stellen ab — am deutlichsten beim Gesamtwert, der hier
 * LILA war und live GOLD ist. Eine Konsolidierung aendert die HERKUNFT der
 * Stile, nicht das Bild; wer die Optik aendern will, tut das als eigene
 * Entscheidung mit Abnahme. Die alten Werte stehen zum Nachlesen daneben.
 *
 * QUELLE: der <style>-Block in js/ui/roster-editor.js (~Z. 8098). Er stand
 * als Zeichenkette IM JAVASCRIPT und gewann damit gegen jede CSS-Datei
 * (§10, Falle 3) — genau der Zustand, den diese Datei aufloest.
 *
 * THEME vs. DATEN (§9): Die Saeulen- und Zeilenfarben bedeuten etwas ueber
 * die DATEN (welcher Anteil, welche Art Eintrag) und bleiben hart kodiert —
 * wie Medaillen und Pass/Fail-Wuerfe. Theme-gebunden ist nichts davon.
 * ========================================================================== */
.tc-macht-breakdown {
  text-align: center;
  padding: 8px 0 4px;
}

/* --- Gesamtwert ---------------------------------------------------------- */
.tc-macht-breakdown__total { margin-bottom: 14px; }
.tc-macht-breakdown__value {
  display: block;
  font-size: 2.4rem;              /* Huelle hatte 2.2rem */
  font-weight: 800;               /* Huelle hatte 700 */
  color: #e8b942;                 /* DATEN: Machtfaktor gesamt = Gold.
                                     Die Huelle hatte hier Rating-Lila (#afa9ec) —
                                     live ist es seit jeher Gold, und Lila
                                     gehoert der Rating-SAEULE. */
  text-shadow: 0 0 20px rgba(232, 185, 66, 0.3);
}
.tc-macht-breakdown__label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--tc-text-muted, #888);
}

/* --- Saeulenreihe -------------------------------------------------------- */
.tc-macht-breakdown__pillars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tc-macht-breakdown__pillar {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 100px;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}
.tc-macht-breakdown__pillar:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
}
/* Nur die aufklappbaren Saeulen sind anfassbar — die Klasse ersetzt das
   `[style*="cursor"]` aus dem Eigenbau, das dort leer stand und nichts tat. */
.tc-macht-breakdown__pillar--klickbar { cursor: pointer; }

.tc-macht-breakdown__val {
  font-size: 1.3rem;
  font-weight: 700;
}
.tc-macht-breakdown__lbl {
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 2px;
  color: var(--tc-text-muted, #888);
}
.tc-macht-breakdown__sub {
  font-size: 0.65rem;
  color: var(--tc-text-muted, #666);
  margin-top: 2px;
}
.tc-macht-breakdown__plus {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tc-text-muted, #666);
}
.tc-macht-breakdown__chevron {
  display: inline-block;
  font-size: 0.6rem;
  opacity: 0.5;
  margin-left: 2px;
  transition: transform 0.2s;
}
.tc-macht-breakdown__pillar.is-open .tc-macht-breakdown__chevron {
  transform: rotate(180deg);
}

/* --- Saeulen-Typen: DATENFARBEN -----------------------------------------
 * SIEBEN, nicht vier. Die drei neuen (advances/rare/graveyard) gab es im
 * Eigenbau laengst; sie hier nicht zu haben war der Grund, warum ein
 * Ausrollen die Anzeige verarmt haette.
 * ⚠️ Die Farbe sitzt NUR auf __val, nicht auch auf __lbl — die Huelle
 * faerbte beides, live ist das Label durchgehend gedaempft. */
.tc-macht-breakdown__pillar--rating    .tc-macht-breakdown__val { color: #c9a9e4; }
.tc-macht-breakdown__pillar--exp       .tc-macht-breakdown__val { color: #7dd3c0; }
.tc-macht-breakdown__pillar--gold      .tc-macht-breakdown__val { color: #e8b942; }
.tc-macht-breakdown__pillar--advances  .tc-macht-breakdown__val { color: #82b1ff; }
.tc-macht-breakdown__pillar--rare      .tc-macht-breakdown__val { color: #ce93d8; }
.tc-macht-breakdown__pillar--injury    .tc-macht-breakdown__val { color: #ef5350; }
.tc-macht-breakdown__pillar--graveyard .tc-macht-breakdown__val { color: #90a4ae; }

/* --- Detail-Panel --------------------------------------------------------
 * Klappt unter einer Saeule auf und zeigt, woraus ihr Wert entsteht. Im
 * Eigenbau der groesste Teil (15 Klassen) und in der Huelle gar nicht
 * vorhanden.
 * ⚠️ `max-height` als Aufklapp-Technik ist uebernommen, nicht erfunden:
 * `height: auto` laesst sich nicht animieren. Die 800px sind die Obergrenze
 * aus dem Eigenbau — ein laengerer Inhalt wird abgeschnitten, das war schon
 * so und ist hier nicht der Ort, es zu aendern. */
.tc-macht-breakdown__panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 12px;
  margin: 0;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  transition: max-height 0.35s ease, padding 0.35s ease, opacity 0.25s ease;
}
.tc-macht-breakdown__panel.is-open {
  max-height: 800px;
  opacity: 1;
  padding: 10px 12px;
  margin: 8px 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.tc-macht-breakdown__panel-header {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tc-text-strong, #ddd);
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
}

.tc-macht-breakdown__row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font-size: 0.78rem;
  border-radius: 3px;
}
.tc-macht-breakdown__row:nth-child(even) { background: rgba(255, 255, 255, 0.035); }
.tc-macht-breakdown__row:hover           { background: rgba(255, 255, 255, 0.06); }

.tc-macht-breakdown__row-name {
  flex: 1;
  text-align: left;
  color: var(--tc-text-default, #e0e0e0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-macht-breakdown__row-owner {
  min-width: 80px;
  text-align: right;
  font-size: 0.72rem;
  color: var(--tc-text-muted, #888);
  white-space: nowrap;
}
.tc-macht-breakdown__row-val {
  min-width: 85px;
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
  /* Zahlen untereinander gleich breit — sonst tanzt die Spalte. */
  font-variant-numeric: tabular-nums;
}
/* Zeilenfarben = DATEN, wie die Saeulen darueber */
.tc-macht-breakdown__row-val--rare      { color: #ce93d8; }
.tc-macht-breakdown__row-val--injury    { color: #ef5350; }
.tc-macht-breakdown__row-val--graveyard { color: #90a4ae; }

.tc-macht-breakdown__formula {
  margin-top: 8px;
  padding-top: 5px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  font-size: 0.68rem;
  font-style: italic;
  text-align: center;
  color: var(--tc-text-muted, #666);
}
.tc-macht-breakdown__empty {
  padding: 8px 0;
  font-size: 0.75rem;
  font-style: italic;
  text-align: center;
  color: var(--tc-text-muted, #666);
}

/* --- Statistik-Marken im Detail ------------------------------------------ */
.tc-macht-breakdown__summary {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 8px;
}
.tc-macht-breakdown__badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
}
.tc-macht-breakdown__badge--win  { background: rgba(76, 175, 80, 0.15);  color: #81c784; }
.tc-macht-breakdown__badge--loss { background: rgba(244, 67, 54, 0.15);  color: #ef5350; }
.tc-macht-breakdown__badge--draw { background: rgba(255, 193, 7, 0.15);   color: #ffd54f; }

/* --- Zeilen-Zusatzangaben ------------------------------------------------ */
.tc-macht-breakdown__date {
  min-width: 58px;
  text-align: left;
  font-size: 0.72rem;
  color: var(--tc-text-muted, #999);
  font-variant-numeric: tabular-nums;
}
.tc-macht-breakdown__result {
  min-width: 22px;
  text-align: center;
  font-size: 0.85rem;
}
.tc-macht-breakdown__scenario {
  min-width: 100px;
  text-align: right;
  font-size: 0.72rem;
  color: var(--tc-text-muted, #888);
  white-space: nowrap;
}

/* Der Hinweis unter den Saeulen. Stand als Inline-Style im JS — dort ist er
   unauffindbar und ueberstimmt jede Regel. */
.tc-macht-breakdown__hinweis {
  margin-top: 8px;
  font-size: 0.65rem;
  color: var(--tc-text-muted, #666);
}

/* --- Reduced Motion ------------------------------------------------------
 * ⚠️ NICHT `transition: none`. Das Aufklappen ist eine Zustandsaenderung,
 * deren ZIEL sichtbar bleiben muss — nur der Weg dorthin faellt weg. */
@media (prefers-reduced-motion: reduce) {
  .tc-macht-breakdown__pillar,
  .tc-macht-breakdown__panel,
  .tc-macht-breakdown__chevron {
    transition-duration: 0.01ms;
  }
}

/* === OOA-VERSUS =========================================================== */
.tc-ooa-versus {
  display: flex;
  min-height: 400px;
}
.tc-ooa-versus__side {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
/* Spalten-Hintergruende (Angreifer warm / Opfer neutral) — leichte Daten-Tönung */
.tc-ooa-versus__side--left {
  background: rgba(139, 69, 19, 0.15);
  border-right: 1px solid var(--tc-border-default);
}
.tc-ooa-versus__side--right { background: rgba(100, 100, 100, 0.15); }

.tc-ooa-versus__header {
  text-align: center;
  padding: 10px;
  margin-bottom: 15px;
  border-bottom: 2px solid var(--tc-highlight);   /* Glanz (Theme) */
}
.tc-ooa-versus__title {
  font-family: var(--tc-font-display, serif);
  color: var(--tc-highlight);
  font-size: 1.1rem;
  margin: 0;
}
.tc-ooa-versus__hint {
  font-size: 0.75rem;
  color: var(--tc-text-muted);
  margin-top: 5px;
}

.tc-ooa-versus__vs-badge {
  align-self: center;
  background: var(--tc-danger, #8b0000);          /* VS = Kampf-Rot (Daten) */
  color: #fff;
  padding: 8px 12px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
}

.tc-ooa-versus__list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tc-ooa-versus__warrior {
  padding: 10px 12px;
  background: var(--tc-bg-surface-1);
  border: 2px solid var(--tc-border-default);
  border-radius: var(--tc-radius-md, 8px);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tc-ooa-versus__warrior:hover {
  border-color: var(--tc-highlight);
  background: var(--tc-bg-surface-2);
}
/* Auswahl — DATENFARBEN (gruen = Angreifer, blutrot = Opfer) */
.tc-ooa-versus__warrior.is-attacker {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.2);
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}
.tc-ooa-versus__warrior.is-victim {
  border-color: var(--tc-danger, #8b0000);
  background: rgba(139, 0, 0, 0.3);
  box-shadow: 0 0 10px rgba(139, 0, 0, 0.4);
}
.tc-ooa-versus__warrior.is-ooa {
  opacity: 0.35;
  text-decoration: line-through;
  pointer-events: none;
}
.tc-ooa-versus__warrior.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.tc-ooa-versus__name { font-weight: 600; color: var(--tc-text-strong); }
.tc-ooa-versus__type { font-size: 0.75rem; color: var(--tc-text-muted); }
.tc-ooa-versus__icon { font-size: 0.8rem; }

/* === MOBILE / MOTION ====================================================== */
@media (max-width: 600px) {
  .tc-ooa-versus { flex-direction: column; min-height: 0; }
  .tc-ooa-versus__side--left { border-right: none; border-bottom: 1px solid var(--tc-border-default); }
}

@media (prefers-reduced-motion: reduce) {
  .tc-ooa-versus__warrior { transition: none; }
}