/* ============================================================================
 * btn-compat.css
 * Phase 7A — Token Bridge: Game-Screen Buttons → Design System Tokens
 *
 * Diese Datei macht alle game-spezifischen Button-Klassen visuell konsistent
 * mit dem Design System, OHNE JS oder bestehende HTML-Klassen zu ändern.
 *
 * Laden NACH allen anderen Game-CSS-Dateien, damit diese Regeln gewinnen.
 * Lade-Reihenfolge: mordheim.css → ... → btn-compat.css (zuletzt)
 *
 * Mapping-Logik:
 *   .btn             → tc-button (Basis)
 *   .btn-primary     → tc-button--primary
 *   .btn-secondary   → tc-button--ghost
 *   .btn-outline     → tc-button--ghost
 *   .btn-success     → tc-button--success (mit --tc-success Token)
 *   .btn-danger      → tc-button--danger
 *   .gold-btn        → tc-button--primary (Gold-CTA)
 *   .sm-btn          → tc-button (klein)
 *   .btn-sm          → tc-button (klein)
 *   .btn-lg          → tc-button (groß)
 *   .al-btn          → tc-button (AoS Listen)
 *   .al-btn-gold     → tc-button--primary (AoS Listen)
 *   .aos-btn         → tc-button (AoS Battle)
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * Basis-Reset: alle .btn-* nutzen jetzt DS-Tokens für Farben
 * Layout (padding, border-radius) bleibt in den Game-CSS-Files
 * ---------------------------------------------------------------------------- */

.btn {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--tc-text-default, var(--text-secondary, #ccc));
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  font-family: var(--tc-font-body, 'Lato', sans-serif);
}

.btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ----------------------------------------------------------------------------
 * Primär — Gold/Akzent CTA
 * ---------------------------------------------------------------------------- */

.btn-primary,
.gold-btn,
.btn-gold {
  background: var(--tc-accent, #c9a959);
  border-color: var(--tc-accent, #c9a959);
  color: var(--tc-bg-canvas, #0d0b0a);
  font-weight: 600;
}

.btn-primary:hover:not(:disabled),
.gold-btn:hover:not(:disabled),
.btn-gold:hover:not(:disabled) {
  background: color-mix(in srgb, var(--tc-accent, #c9a959) 85%, white);
  border-color: color-mix(in srgb, var(--tc-accent, #c9a959) 85%, white);
}

/* ----------------------------------------------------------------------------
 * Sekundär / Ghost
 * ---------------------------------------------------------------------------- */

.btn-secondary,
.btn-outline,
.wb-btn,
.btn-cancel {
  background: transparent;
  border-color: rgba(201, 169, 89, 0.3);
  color: var(--tc-highlight, #c9a959);
}

.btn-secondary:hover:not(:disabled),
.btn-outline:hover:not(:disabled),
.wb-btn:hover:not(:disabled) {
  background: rgba(201, 169, 89, 0.08);
  border-color: rgba(201, 169, 89, 0.5);
}

/* ----------------------------------------------------------------------------
 * Erfolg / Positiv
 * ---------------------------------------------------------------------------- */

.btn-success {
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.4);
  color: var(--tc-success, #4ade80);
}

.btn-success:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.6);
}

/* ----------------------------------------------------------------------------
 * Danger / Zerstörerisch
 * ---------------------------------------------------------------------------- */

.btn-danger,
.btn-delete,
.al-btn-danger,
.aos-btn-danger {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.35);
  color: var(--tc-danger, #f87171);
}

.btn-danger:hover:not(:disabled),
.al-btn-danger:hover:not(:disabled),
.aos-btn-danger:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.18);
  border-color: rgba(248, 113, 113, 0.55);
}

/* ----------------------------------------------------------------------------
 * Größen-Varianten
 * ---------------------------------------------------------------------------- */

.btn-sm {
  font-size: 0.78rem;
  padding: 4px 10px;
}

.btn-lg,
.btn-large {
  font-size: 1rem;
  padding: 10px 24px;
}

.btn-xl {
  font-size: 1.1rem;
  padding: 12px 28px;
}

.btn-xs {
  font-size: 0.68rem;
  padding: 2px 8px;
}

/* ----------------------------------------------------------------------------
 * Action Buttons (Mordheim Battle)
 * ---------------------------------------------------------------------------- */

.btn-action {
  background: rgba(201, 169, 89, 0.08);
  border-color: rgba(201, 169, 89, 0.25);
  color: var(--tc-highlight, #c9a959);
  font-family: var(--tc-font-display, 'Cinzel', serif);
  font-size: 0.82rem;
}

.btn-action:hover:not(:disabled) {
  background: rgba(201, 169, 89, 0.15);
  border-color: rgba(201, 169, 89, 0.45);
}

.btn-action.primary {
  background: var(--tc-accent, #c9a959);
  color: var(--tc-bg-canvas, #0d0b0a);
}

.btn-action.danger {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.35);
  color: var(--tc-danger, #f87171);
}

.btn-action.outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--tc-text-default, #ccc);
}

.btn-action.success {
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.4);
  color: var(--tc-success, #4ade80);
}

.btn-action.small {
  font-size: 0.72rem;
  padding: 3px 8px;
}

/* ----------------------------------------------------------------------------
 * AoS Listen-Tool Buttons (.al-*)
 * ---------------------------------------------------------------------------- */

.al-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--tc-text-default, #ccc);
  cursor: pointer;
  transition: all 120ms ease;
}

.al-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}

.al-btn-gold {
  background: var(--tc-accent, #c9a959);
  border-color: var(--tc-accent, #c9a959);
  color: var(--tc-bg-canvas, #0d0b0a);
  font-weight: 600;
}

.al-btn-gold:hover:not(:disabled) {
  background: color-mix(in srgb, var(--tc-accent, #c9a959) 85%, white);
}

.al-intensity-btn {
  background: rgba(201, 169, 89, 0.06);
  border-color: rgba(201, 169, 89, 0.2);
  color: var(--tc-text-muted, #888);
  transition: all 120ms ease;
}

.al-intensity-btn.active,
.al-intensity-btn:hover {
  background: rgba(201, 169, 89, 0.15);
  border-color: rgba(201, 169, 89, 0.4);
  color: var(--tc-highlight, #c9a959);
}

/* ----------------------------------------------------------------------------
 * AoS Battle Buttons (.aos-*)
 * ---------------------------------------------------------------------------- */

.aos-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--tc-text-default, #ccc);
  cursor: pointer;
  transition: all 120ms ease;
}

.aos-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}

.aos-btn-primary {
  background: var(--tc-accent, #c9a959);
  border-color: var(--tc-accent, #c9a959);
  color: var(--tc-bg-canvas, #0d0b0a);
  font-weight: 600;
}

.aos-btn-secondary {
  background: transparent;
  border-color: rgba(201, 169, 89, 0.3);
  color: var(--tc-highlight, #c9a959);
}

.aos-btn-gold {
  background: var(--tc-accent, #c9a959);
  border-color: var(--tc-accent, #c9a959);
  color: var(--tc-bg-canvas, #0d0b0a);
}

/* ----------------------------------------------------------------------------
 * Mordheim-spezifische Buttons
 * ---------------------------------------------------------------------------- */

.wb-btn-count {
  min-width: 28px;
  text-align: center;
  font-weight: 700;
}

/* ⚠️ KEINE width/height MEHR — sie kommen aus `tc-button--icon` (button.css,
   21.08.2026). Sie standen hier unter 36px und verletzten damit Heuristik 5;
   ergänzen reichte nicht, sie mussten WEG: Diese Datei lädt nach button.css,
   und bei gleicher Spezifität gewinnt die spätere Regel. Wer sie zurückholt,
   überstimmt die Komponente stumm. */
.tooltip-btn {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--tc-text-muted, #888);
  border-radius: 50%;
  
  
  padding: 0;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tooltip-btn:hover {
  border-color: var(--tc-accent, #c9a959);
  color: var(--tc-highlight, #c9a959);
}

/* ----------------------------------------------------------------------------
 * Dice Buttons (Battle)
 * ---------------------------------------------------------------------------- */

.dice-btn,
.dice-btn-lg,
.dice-btn-large,
.dice-btn-small,
.dice-btn-ft,
.d3-dice-btn,
.obw-die-btn {
  background: rgba(201, 169, 89, 0.08);
  border-color: rgba(201, 169, 89, 0.25);
  color: var(--tc-highlight, #c9a959);
  font-family: var(--tc-font-display, 'Cinzel', serif);
  font-weight: 700;
  cursor: pointer;
  transition: all 120ms ease;
}

.dice-btn:hover:not(:disabled),
.dice-btn-lg:hover:not(:disabled) {
  background: rgba(201, 169, 89, 0.15);
  border-color: rgba(201, 169, 89, 0.5);
  transform: scale(1.05);
}

.dice-btn:active,
.dice-btn-lg:active {
  transform: scale(0.97);
}

/* ----------------------------------------------------------------------------
 * Stepper Buttons (AoS Battle)
 * ---------------------------------------------------------------------------- */

/* ⚠️ KEINE width/height MEHR — sie kommen aus `tc-button--icon` (button.css,
   21.08.2026). Sie standen hier unter 36px und verletzten damit Heuristik 5;
   ergänzen reichte nicht, sie mussten WEG: Diese Datei lädt nach button.css,
   und bei gleicher Spezifität gewinnt die spätere Regel. Wer sie zurückholt,
   überstimmt die Komponente stumm. */
.stepper-btn {
  background: rgba(201, 169, 89, 0.08);
  border-color: rgba(201, 169, 89, 0.2);
  color: var(--tc-highlight, #c9a959);
  
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  transition: all 100ms ease;
}

.stepper-btn:hover:not(:disabled) {
  background: rgba(201, 169, 89, 0.18);
}

/* ----------------------------------------------------------------------------
 * Spell/Special Buttons (Advancement)
 * ---------------------------------------------------------------------------- */

.btn-spell,
.btn-choice,
.btn-option {
  background: rgba(163, 119, 255, 0.1);
  border-color: rgba(163, 119, 255, 0.3);
  color: #c4b5fd;
  transition: all 120ms ease;
}

.btn-spell:hover:not(:disabled),
.btn-choice:hover:not(:disabled),
.btn-option:hover:not(:disabled) {
  background: rgba(163, 119, 255, 0.18);
  border-color: rgba(163, 119, 255, 0.5);
}

.btn-spell.selected,
.btn-choice.selected,
.btn-option.selected {
  background: rgba(163, 119, 255, 0.25);
  border-color: rgba(163, 119, 255, 0.7);
}