Mordheim Town Cryer
/
admin.html
html
roster-editor.js
js
campaign_production.json
json
campaign_sandbox.json
json
roster_data.js
289 Zeilen
js
Check mal bitte unseren Roster Editor. Nach den letzten Spielen habe ich festgestelltzt, das Mali aus Verletzungen (bspw. Handverletzung -1 WS) nicht mehr auf das Profil des Kämpfers angewendet werden.
Kannst du das Problem anhand der angehangenen Dateien dingfest machen? Brauchst du sonst andere Dateien, um den Fehler zu finden?
Achte bei Änderungen an Dateien bitte auf eine korrekte UTF8 Enkodierung.
13:18
Identifizierte Verletzungs-Logik-Fehler und plante Debugging-Strategie.
Ich werde mir die Dateien ansehen, um das Problem mit den Verletzungs-Mali zu finden.
Roster Editor JavaScript analysieren um das Verletzungs-Mali Problem zu finden
Arbeitsdatei anzeigen
Identifizierte Datenlese-Diskrepanz zwischen Verletzungsspeicherung und Stat-Anzeige.
Ich muss mehr von der Datei sehen, insbesondere die Render-Funktionen und wie Stats verarbeitet werden:
Sehen wie Stats gerendert und berechnet werden
Arbeitsdatei anzeigen
Lokalisierte Render-Funktionen für Kämpfer-Statistiken.
Lass mich die Stats-Verarbeitung beim Rendern suchen:
Suchen nach der Stats-Rendering-Logik und Verletzungs-Anwendung
Arbeitsdatei anzeigen
Suchte nach Rendering-Funktionen für Statistik-Anzeige.
Ich suche jetzt nach der Stelle, wo die Stats tatsächlich gerendert werden:
8 Schritte
Die renderStats Funktion ansehen - hier werden die Stats für die Karten berechnet
Arbeitsdatei anzeigen
Identifizieren, dass Verletzungsmodifikatoren nur zur Anzeige verwendet werden.
13 Sek.
Jetzt sehe ich das Problem! Lass mich die Datenstruktur in der campaign-Datei überprüfen:
Prüfen wie die Stats in der echten Kampagne gespeichert sind
Arbeitsdatei anzeigen
Identifizierte Datenstuktur-Diskrepanz zwischen Dateien und Injury-Anwendungsproblem.
Ich sehe jetzt die echte Datenstruktur! Die Stats sind direkt auf dem Objekt (hero.M, hero.WS), nicht verschachtelt. Lass mich nochmal die Injury-Anwendungslogik genauer ansehen:
Nochmal die addInjuryFromModal Funktion genauer ansehen
Arbeitsdatei anzeigen
Identifizierte Datenformat-Konflikt zwischen verschachtelten und flachen Stat-Strukturen.
15 Sek.
Ich sehe das Problem jetzt! Lass mich die beiden Datenformate vergleichen:
roster_data.js (angehängt im Dokument):
javascript
"stats": {
"M": 4,
"WS": 4,
...
}
campaign_production.json:
javascript
"M": 4,
"WS": 4,
...
Es gibt zwei verschiedene Datenformate! Der Code muss beide unterstützen. Lass mich das Problem identifizieren:
Prüfen wie die Stats ausgelesen werden in renderStats
Arbeitsdatei anzeigen
Identifizierte Stat-Zugriffsfehler und konzipierte Helper-Funktionen.
Ich habe das Problem gefunden!
Das Problem liegt darin, dass der Code zwei verschiedene Datenformate nicht korrekt unterstützt:
Altes Format: unit.stats.WS (verschachteltes Objekt)
Neues Format: unit.WS (direkte Properties)
In renderStats (Zeile 2619) wird nur das neue Format geprüft:
javascript
const rawValue = unit[stat] ?? unit[stat.toLowerCase()] ?? '-';
Aber unit.stats?.WS wird nicht geprüft!
In addInjuryFromModal (Zeile 5144-5146) passiert dann:
javascript
const oldValue = parseInt(unit[stat]) || 0; // → Wenn stats im alten Format: 0!
const newValue = Math.max(0, oldValue + mod); // → 0 + (-1) = 0 (wegen Math.max)
unit[stat] = newValue; // → Schreibt 0 als neuen Stat! (oder setzt eine neue Property)
Ich werde das jetzt reparieren, indem ich Helper-Funktionen hinzufüge, die beide Formate unterstützen:
Den Anfang der Datei sehen um zu verstehen wo Helper eingefügt werden sollten
Arbeitsdatei anzeigen
Orchestrierte Refaktorierung mit Helper-Funktionen für Statistik-Verwaltung.
Ich sehe mehr von der Datei, damit ich alle relevanten Stellen finden kann:
Alle Stellen finden wo Stats gelesen/geschrieben werden
Identifizierte acht kritische Stellen und plante systematische Korrektur mit Hilfsfunktionen.
Lass mich die anderen relevanten Stellen auch ansehen:
4 Schritte
Kontext um Zeile 3591 sehen (wahrscheinlich Henchman Edit Form)
Arbeitsdatei anzeigen
Architektierte Helper-Funktionen zur Behebung von Stat-Zugriffsproblemen.
20 Sek.
Jetzt verstehe ich das Problem vollständig. Ich werde die Datei reparieren. Da sie sehr groß ist, kopiere ich sie zuerst und führe dann die Änderungen durch:
16 Schritte
Korrigiere refreshEditModal um die Stat-Helper zu verwenden
+26
-26
roster-editor.js
Durchforstete Dateien nach übersehenen Fehlerstellen.
Lass mich prüfen ob noch weitere Stellen existieren:
2 Schritte
Prüfen wo die neuen Helper verwendet werden
Verifizierte mehrere Codezeilen und plante Dateiüberprüfung.
Die Änderungen sind vollständig. Lass mich die wichtigsten Änderungen kurz verifizieren:
6 Schritte
Presented file
Prepared corrected file and formulated clear summary.
Problem gefunden und behoben! 🔧
Das Problem
Der Code hatte zwei verschiedene Datenformate, die nicht korrekt unterstützt wurden:
Altes Format (z.B. von Templates): unit.stats.WS
Neues Format (live Daten): unit.WS
Wenn eine Verletzung hinzugefügt wurde (z.B. Handverletzung -1 WS), passierte folgendes:
javascript
// In addInjuryFromModal():
const oldValue = parseInt(unit[stat]) || 0; // → 0 wenn stats in unit.stats!
const newValue = Math.max(0, oldValue + mod); // → 0 + (-1) = -1, aber Math.max(0, -1) = 0
unit[stat] = newValue; // → Schreibt 0 statt den korrekten reduzierten Wert!
Ergebnis: Bei Units mit dem alten Format (unit.stats.WS) wurde der Stat auf 0 gesetzt oder gar nicht geändert, anstatt korrekt reduziert zu werden.
Die Lösung
Ich habe drei Helper-Funktionen hinzugefügt, die beide Formate unterstützen:
getUnitStatValue(unit, stat) - Liest den Rohwert aus beiden Formaten
getUnitStat(unit, stat) - Liest den Stat als Zahl (0 wenn nicht gefunden)
setUnitStat(unit, stat, value) - Schreibt in beide Formate (synchronisiert)
Diese Helper werden jetzt an allen relevanten Stellen verwendet:
renderStats() - Stat-Anzeige in Karten
renderHeroEditForm() / renderHenchEditForm() - Edit-Formulare
saveEditModal() - Speichern von Änderungen
addInjuryFromModal() - Verletzungs-Mali anwenden
refreshEditModal() - Modal aktualisieren
Testen
Nach dem Upload solltest du:
Einen Held bearbeiten und eine Verletzung hinzufügen (z.B. "Handverletzung -1 WS")
Prüfen ob der WS-Wert korrekt reduziert wird
In der Browser-Konsole solltest du sehen: [Injury] HeldName: WS 4 → 3
Roster editor
JS
Bildschirmfoto 2026-01-27 um 13.30.59.png
Bildschirmfoto 2026-01-27 um 13.33.28.png
Bildschirmfoto 2026-01-27 um 13.33.19.png
Bildschirmfoto 2026-01-27 um 13.31.07.png
Teilweise klappt es. Die Verletzung hebt zumindest in der Übersicht den entsprechenden Profilwert rot hervor. Sie senkt aber den Stat nicht. Dem armen Ciridan habe ich direkt 2 Handverletzungen gegeben, er hat aber noch immer WS5, obwohl die Konsole das (wenn ich es richtig verstehe) richtig ausgibt.
13:44
Identifizierte Speicherungs-Bug bei Verletzungsanwendung.
21 Sek.
Ich sehe das Problem! Die Konsole zeigt [Injury] Ciridan: WS 5 → 4 - der Wert wird also geändert, aber dann wieder überschrieben!
Das Problem liegt in refreshEditModal(): Diese Funktion liest die alten Formular-Werte (die noch WS:5 zeigen) und schreibt sie zurück auf das Unit, wodurch die Verletzungs-Änderung überschrieben wird.
Lass mich das korrigieren:
Die refreshEditModal Funktion genauer ansehen
Arbeitsdatei anzeigen
Identifizierte Stat-Überschreibungs-Bug und konzipierte Flag-basierte Lösung.
Genau! Das Problem ist:
Verletzung wird hinzugefügt → WS 5 → 4 ✓
refreshEditModal() wird aufgerufen
Diese liest den alten Formular-Wert (noch 5)
Da 5 !== 4, denkt der Code "User hat das manuell geändert" und bewahrt 5
Dann wird 5 zurück auf das Unit geschrieben → überschreibt die Verletzung! ✗
Die Lösung: Ein Flag verwenden, um die Stat-Bewahrung nach Verletzungen zu überspringen:
12 Schritte
Presented file
Identifizierte Fehler bei Stat-Reduktion trotz korrekter Konsolenausgabe.
Problem behoben! 🔧
Das Problem war ein Race-Condition-Bug:
Was passiert ist:
✅ Verletzung wird hinzugefügt → WS 5 → 4 (korrekt!)
❌ refreshEditModal() wird aufgerufen
❌ Diese liest den alten Formular-Wert (noch 5)
❌ Da 5 ≠ 4, denkt der Code "User hat das manuell geändert"
❌ Schreibt 5 zurück → überschreibt die Verletzungs-Änderung!
Die Lösung:
Ich habe ein Flag-System implementiert:
javascript
// In addInjuryFromModal():
this._injuryJustApplied = true; // Flag setzen
// In refreshEditModal():
const skipStatPreservation = this._injuryJustApplied === true;
this._injuryJustApplied = false; // Flag zurücksetzen
if (!skipStatPreservation) {
// Nur dann Stats aus Formular bewahren
}
Jetzt funktioniert es so:
✅ Verletzung hinzufügen → WS 5 → 4
✅ Flag _injuryJustApplied = true wird gesetzt
✅ refreshEditModal() sieht das Flag
✅ Stats werden NICHT aus dem alten Formular gelesen
✅ Modal zeigt korrekten Wert WS: 4
Zum Testen:
Lade die neue roster-editor.js hoch
Öffne Ciridan's Edit-Modal
Füge eine Handverletzung hinzu
Der WS sollte jetzt von 5 auf 4 sinken und auch so im Profil angezeigt werden
Hinweis: Ciridan hat bereits 2 Handverletzungen aus deinen Tests - du musst eventuell die Stats manuell korrigieren (WS auf 3 setzen für -2 WS) oder die Verletzungen entfernen und neu hinzufügen.
Roster editor
JS
Das hat geklappt.
14:04
Acknowledged success and contemplated next assistance.
Perfekt! 🎉
Die Verletzungs-Mali werden jetzt korrekt auf das Profil angewendet.
Falls du die Test-Verletzungen von Ciridan (die 2 Handverletzungen) bereinigen möchtest, kannst du entweder:
Die Verletzungen über die ✕-Buttons entfernen und den WS manuell wieder auf 5 setzen
Oder eine Verletzung entfernen und den WS auf 4 setzen (falls er wirklich eine behalten soll)
Gibt es noch andere Baustellen, bei denen ich helfen kann? Aus deinem Memory weiß ich, dass noch zwei kritische Punkte offen sind:
"The Lad's Got Talent" - Henchmen-Aufstieg bei Würfelergebnis 12
PDF-Export für Warband-Backups
Soll ich mir eines davon als nächstes vornehmen?
Lad's got Talent müsste gehen. Da sind wir schon mal ran, ich teste das aber in der Sandbox noch mal:
Die Regeln Mordheims besagen:
"Apart from its leader, your warband may include up to five other Heroes, who form the core of your warband. A warband may never include more Heroes of any specific type than the number given in the Warband list. This means that some warbands can only get the maximum of six Heroes by gaining experience with their Henchmen (see the Experience section)."
Müssen wir das als Lösung einbauen? Aktuell könnte man unbegrenzt viele hochbefördern, oder?
14:06
Analysierte Hero-Limit-Regeln und Implementierungsbedarf für Beförderungen.
Gute Frage! Lass mich den aktuellen "Lad's Got Talent"-Code prüfen:
4 Schritte
Sehen wo der Promote-Button angezeigt wird
Arbeitsdatei anzeigen
Identifizierte fehlende Hero-Limit-Validierung und plante Implementierung.
Du hast recht - aktuell gibt es keine Begrenzung. Die Mordheim-Regeln sagen:
Maximum 6 Heroes pro Warband (Leader + 5 andere)
Durch "Lad's Got Talent" kann man dieses Maximum erreichen, aber nicht überschreiten
Ich werde das einbauen. Die Änderungen sind:
promoteHenchman() - Prüfung hinzufügen ob bereits 6 Heroes existieren
Button - Ausgrauen/deaktivieren wenn Limit erreicht
4 Schritte
promoteHenchman im aktuellen File ansehen
Arbeitsdatei anzeigen
Konzipierte Hero-Limit-Validierung und UI-Anpassungen für Beförderungsmechanik.
Jetzt implementiere ich die Hero-Limit-Prüfung:
16 Schritte
Presented file
Implementierte Hero-Limit-Prüfung erfolgreich abgeschlossen.
Ich habe das Hero-Limit implementiert. Die Änderungen:
1. In promoteHenchman():
Prüft ob bereits 6 Heroes existieren (nur aktive, nicht tote)
Zeigt Warnung und bricht ab wenn Limit erreicht
Toast zeigt jetzt auch den Zählerstand (3/6 Helden)
Fügt Metadaten hinzu: promotedFromHenchman: true und promotionDate
2. In renderHenchCard():
Prüft das Hero-Limit beim Rendern
Button wird ausgegraut wenn Limit erreicht:
Text ändert sich zu "🚫 Helden-Limit erreicht"
Button ist disabled
Tooltip erklärt das Limit
Zum Testen in der Sandbox:
Erstelle eine Warband mit 6 Heroes (oder befördere Henchmen bis 6)
Der nächste Veteran sollte den ausgegrauten Button zeigen
Falls man irgendwie doch klickt, kommt zusätzlich die Toast-Warnung
Hinweis zu den Regeln:
Die Implementation zählt nur lebende Heroes (status !== 'dead'). Tote Heroes im Graveyard blockieren also nicht das Limit - das entspricht den Mordheim-Regeln, wo gefallene Heroes ersetzt werden können.
Roster editor
JS
Können wir die Regeln zum Tod eines Leaders direkt mit aufnehmen, wenn wir an der Logik eh dran sind?
"If the leader of the warband is slain, the Hero with the next highest Leadership value takes command. He then gains the Leader ability (although he must continue to use his original Skill list) and can use the Equipment list available to the leader. If there is more than one Hero eligible to assume command, the warrior with the most Experience points becomes the leader. In the case of a tie roll a D6 to decide the new leader. Note that you may __not__ hire a new leader for your warband.
In the case of Undead warbands, the death of the Vampire means that the warband’s Necromancer must take over. If the warband doesn’t include one, the spells that hold the restless dead together unravel, and the warband collapses into a pile of bones. You can buy a Vampire after the next game, at which point the Necromancer will step down (whether he wants to or not) and lose the Leader skill.
If the leader of a Sisters of Sigmar, Possessed or Carnival of Chaos warband dies then their successor will be entitled to learn to use magic in their stead. The new leader may choose a prayer/spell from the appropriate list, instead of rolling on the Advance table, the first time they are eligible for an advance. After this they are considered to be a wizard/use prayers as appropriate for their warband and use the Advance table as normal."
Mehr anzeigen
14:10
Architektierte Leader-Nachfolge-Logik mit Spezialfällen für Undead-Warbands.
Das ist eine gute Idee! Die Leader-Nachfolge-Regeln sind komplex aber wichtig. Lass mich erst schauen, wie der Tod aktuell implementiert ist:
8 Schritte
Leader-Typen in den speziellen Warbands ansehen
Architektierte umfassende Leader-Nachfolge-Logik mit Spezialregeln.
Jetzt habe ich ein gutes Bild. Ich werde eine umfassende Leader-Nachfolge-Logik implementieren:
2 Schritte
Leader-Nachfolge-Logik nach den Stat-Helpern einfügen
+254
-8
roster-editor.js
Orchestrierte Leader-Nachfolge-Mechaniken für Warbands.
Jetzt muss ich die Tod-Logik in addInjuryFromModal anpassen:
4 Schritte
Tod-Logik mit Leader-Nachfolge erweitern
+84
-24
roster-editor.js
Überlegte visuelle Leader-Kennzeichnung auf Hero-Karten hinzufügen.
Jetzt füge ich noch eine visuelle Anzeige hinzu, welcher Hero der Leader ist:
6 Schritte
Verifiziere die Änderungen an renderHeroCard
Arbeitsdatei anzeigen
Integrierte Änderungen und plante CSS-Styling für Leader-Badge.
Lass mich auch CSS für das Leader-Badge hinzufügen:
16 Schritte
Presented 2 files
Bereitete Zusammenfassung der Regeländerungen vor.
Ich habe die komplette Leader-Nachfolge-Logik implementiert. Hier die Zusammenfassung:
Neue Features
1. Leader-Erkennung
Neue Funktion isLeader(hero, warband) erkennt automatisch den Leader basierend auf:
Explizites isLeader Flag
Hero-Typ (Captain, Jarl, Vampire, Magister, etc.)
Position (erster Hero als Fallback)
2. Visuelle Anzeige
👑 Krone-Badge auf der Leader-Karte
Goldener Rand und Glow-Effekt für den Leader
CSS-Animation für subtiles Pulsieren
3. Leader-Tod & Nachfolge
Wenn der Leader stirbt:
Bestätigungsdialog zeigt den Nachfolger an
Nachfolger wird automatisch nach Mordheim-Regeln gewählt:
Höchster Leadership-Wert
Bei Gleichstand: Höchste XP
Bei erneutem Gleichstand: Zufällig (simuliert Würfelwurf)
Info-Modal erscheint mit Details zur Nachfolge
4. Spezialfälle
Undead:
Wenn Vampir stirbt → Necromancer übernimmt
Ohne Necromancer → Warband löst sich auf! (dramatische Warnung)
Hinweis: Nach nächstem Spiel kann neuer Vampir angeheuert werden
Sisters of Sigmar / Possessed / Carnival of Chaos:
Neuer Leader bekommt canChooseSpellOnAdvance Flag
Beim ersten Aufstieg kann ein Zauber/Gebet gewählt werden statt zu würfeln
5. Hero-Limit (6 Max)
Beförderungs-Button wird ausgegraut bei 6 Heroes
Toast-Warnung bei Versuch über Limit
Zeigt Zählerstand an (3/6 Helden)
Zu uploadende Dateien
roster-editor.js - Komplette Logik
mordheim.css - Neue Styles für Leader-Badge und disabled Button
Zum Testen
Prüfe ob dein Leader ein 👑 anzeigt
Töte den Leader → Nachfolger-Modal sollte erscheinen
Bei Undead ohne Necromancer: Teste die Warband-Auflösung-Warnung
Prüfe das 6-Hero-Limit mit Beförderungen
Roster editor
JS
Mordheim
Code · CSS
Claude ist eine KI und kann Fehler machen. Bitte überprüfe die Antworten.
Mordheim · CSS
Kopieren
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg-dark: #1a1a1a;
--bg-card: #2d2d2d;
--bg-input: #1f1f1f;
--bg-header: #333;
--border: #444;
--border-light: #555;
--text-primary: #e0e0e0;
--text-secondary: #b0b0b0;
--text-muted: #888;
--text-label: #999;
--gold: #c9a959;
--gold-dark: #9a7b3a;
--blood: #8b0000;
--blood-light: #a52a2a;
--success: #2e7d32;
--success-light: #388e3c;
--danger: #c62828;
--danger-light: #d32f2f;
--info: #2980b9;
--radius: 8px;
--radius-lg: 12px;
--shadow: 0 4px 20px rgba(0,0,0,0.4);
--transition: all 0.2s ease;
}
body {
font-family: 'Lato', sans-serif;
background: var(--bg-dark);
color: var(--text-primary);
line-height: 1.6;
min-height: 100vh;
}
.container { max-width: 1400px; margin: 0 auto; background: #242424; min-height: 100vh; }
/* HEADER */
.site-header {
background: linear-gradient(135deg, var(--blood) 0%, #5c0000 100%);
padding: 30px 20px;
text-align: center;
border-bottom: 4px solid var(--gold);
}
.site-header .logo { max-width: 180px; margin-bottom: 10px; }
.title-gothic {
font-family: 'Cinzel', serif;
font-size: 2em;
color: var(--gold);
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
margin-bottom: 5px;
}
.subtitle { color: rgba(255,255,255,0.8); font-size: 0.95em; font-weight: 400; }
/* NAV */
.nav-tabs {
display: flex;
justify-content: center;
padding: 15px;
background: var(--bg-input);
border-bottom: 1px solid var(--border);
}
.nav-tab {
padding: 10px 25px;
background: var(--bg-header);
color: var(--text-primary);
text-decoration: none;
border-radius: var(--radius);
font-weight: 600;
transition: var(--transition);
}
.nav-tab:hover { background: var(--border); color: var(--gold); }
/* TABS */
.tabs {
display: flex;
gap: 5px;
padding: 15px 20px;
background: #2a2a2a;
border-bottom: 1px solid var(--border);
}
.tab-btn {
padding: 12px 24px;
background: transparent;
border: none;
color: var(--text-muted);
font-size: 1em;
font-weight: 600;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: var(--transition);
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }
/* SECTIONS */
.admin-section { display: none; padding: 25px; }
.admin-section.active { display: block; }
/* TOOLBAR */
.editor-toolbar {
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
margin-bottom: 25px;
padding: 18px 20px;
background: var(--bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
}
.editor-toolbar select {
flex: 1;
min-width: 280px;
padding: 12px 16px;
font-size: 1em;
font-weight: 600;
border: 2px solid var(--blood);
border-radius: var(--radius);
background: var(--bg-input);
color: var(--text-primary);
cursor: pointer;
}
.editor-toolbar select:focus { outline: none; border-color: var(--gold); }
.toolbar-btns { display: flex; gap: 10px; }
.toolbar-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border: none;
border-radius: var(--radius);
font-size: 0.95em;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.toolbar-btn.primary { background: var(--blood); color: white; }
.toolbar-btn.primary:hover { background: var(--blood-light); }
.toolbar-btn.success { background: var(--success); color: white; }
.toolbar-btn.success:hover { background: var(--success-light); }
/* WARBAND HEADER */
.wb-header {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px;
margin-bottom: 20px;
}
.wb-header-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr auto;
gap: 15px;
align-items: end;
}
.wb-field label {
display: block;
font-size: 0.7em;
color: var(--text-label);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.wb-field input {
width: 100%;
padding: 10px 12px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text-primary);
font-size: 1em;
}
.wb-field input:focus { outline: none; border-color: var(--gold); }
.wb-rating {
padding: 10px;
background: var(--bg-input);
border: 2px solid var(--gold);
border-radius: var(--radius);
color: var(--gold);
font-size: 1.3em;
font-weight: 700;
text-align: center;
}
.wb-graveyard-btn {
padding: 10px 16px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text-muted);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 6px;
font-size: 0.9em;
}
.wb-graveyard-btn:hover {
background: var(--bg-header);
border-color: var(--border-light);
color: var(--text-primary);
}
.wb-graveyard-btn .count {
background: var(--blood);
color: white;
padding: 2px 8px;
border-radius: 10px;
font-size: 0.8em;
font-weight: 700;
}
/* COLLAPSIBLE */
.collapse-section {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
margin-bottom: 15px;
overflow: hidden;
}
.collapse-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 18px;
background: var(--bg-header);
cursor: pointer;
color: var(--gold);
font-weight: 600;
font-size: 0.95em;
transition: var(--transition);
}
.collapse-header:hover { background: #3a3a3a; }
.collapse-icon { color: var(--text-muted); font-size: 0.8em; }
.collapse-content { padding: 15px 18px; border-top: 1px solid var(--border); display: none; }
.collapse-content.open { display: block; }
/* SECTION TITLE */
.section-title {
font-family: 'Cinzel', serif;
font-size: 1.5em;
color: var(--gold);
margin: 30px 0 18px;
padding-bottom: 10px;
border-bottom: 3px solid var(--blood);
}
/* CARDS GRID */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 18px;
margin-bottom: 18px;
}
@media (min-width: 1400px) {
.cards-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) and (max-width: 1399px) {
.cards-grid { grid-template-columns: repeat(2, 1fr); }
}
/* UNIT CARD */
.unit-card {
background: var(--bg-card);
border: 2px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition);
position: relative;
}
.unit-card:hover {
border-color: var(--border-light);
box-shadow: var(--shadow);
}
.unit-card.has-upgrade {
border-color: var(--gold);
animation: glow-gold 2s ease-in-out infinite;
}
.unit-card.veteran { border-color: var(--success); }
@keyframes glow-gold {
0%, 100% { box-shadow: 0 0 5px rgba(201, 169, 89, 0.3); }
50% { box-shadow: 0 0 20px rgba(201, 169, 89, 0.5); }
}
/* DRAG HANDLE - Im Card Header */
.drag-handle {
flex-shrink: 0;
cursor: grab;
color: var(--text-muted);
font-size: 1.1em;
padding: 4px 2px;
letter-spacing: 2px;
opacity: 0.4;
transition: all 0.2s ease;
user-select: none;
border-radius: 4px;
}
.drag-handle:hover {
opacity: 1;
color: var(--gold);
background: rgba(201, 169, 89, 0.1);
}
.drag-handle:active {
cursor: grabbing;
opacity: 1;
}
/* UPGRADE STRIP - Im Card Body */
.upgrade-strip {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 10px 14px;
margin: -1px -1px 0 -1px;
background: linear-gradient(135deg, rgba(201, 169, 89, 0.15), rgba(201, 169, 89, 0.08));
border: 1px solid rgba(201, 169, 89, 0.3);
border-radius: 6px;
margin: 0;
animation: strip-pulse-gold 2.5s ease-in-out infinite;
}
@keyframes strip-pulse-gold {
0%, 100% { background: linear-gradient(135deg, rgba(201, 169, 89, 0.15), rgba(201, 169, 89, 0.08)); }
50% { background: linear-gradient(135deg, rgba(201, 169, 89, 0.25), rgba(201, 169, 89, 0.15)); }
}
.upgrade-strip-text {
color: var(--gold);
font-weight: 600;
font-size: 0.85em;
white-space: nowrap;
}
.upgrade-strip-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
/* SKILL SELECTION STRIP - Im Card Body */
.skill-strip {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: linear-gradient(135deg, rgba(103, 58, 183, 0.2), rgba(63, 81, 181, 0.1));
border: 1px solid rgba(124, 77, 255, 0.3);
border-radius: 6px;
animation: strip-pulse-skill 2.5s ease-in-out infinite;
}
@keyframes strip-pulse-skill {
0%, 100% { background: linear-gradient(135deg, rgba(103, 58, 183, 0.2), rgba(63, 81, 181, 0.1)); }
50% { background: linear-gradient(135deg, rgba(103, 58, 183, 0.35), rgba(63, 81, 181, 0.25)); }
}
.skill-strip-text {
color: #b39ddb;
font-weight: 600;
font-size: 0.85em;
white-space: nowrap;
}
.skill-strip .sm-btn.skill {
background: linear-gradient(135deg, #7c4dff, #651fff);
border-color: #b39ddb;
color: white;
}
.has-pending-skill { border-color: #7c4dff !important; }
/* Legacy-Kompatibilität: alte Klassen weiterhin unterstützen */
.upgrade-banner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: linear-gradient(135deg, rgba(201, 169, 89, 0.2), rgba(201, 169, 89, 0.1));
border-bottom: 2px solid var(--gold);
color: var(--gold);
font-weight: 600;
font-size: 0.85em;
}
.upgrade-banner .btns { display: flex; gap: 6px; }
.skill-banner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: linear-gradient(135deg, rgba(103, 58, 183, 0.3), rgba(63, 81, 181, 0.2));
border-bottom: 2px solid #7c4dff;
color: #b39ddb;
font-weight: 600;
font-size: 0.85em;
}
/* VETERAN BADGE */
.vet-badge {
position: absolute;
top: 10px;
left: 10px;
background: var(--success);
color: white;
padding: 3px 8px;
border-radius: 4px;
font-size: 0.65em;
font-weight: 700;
z-index: 5;
}
/* LEADER CROWN - Inline im Card-Name */
.leader-crown {
font-size: 1.1em;
text-shadow: 0 0 8px rgba(201, 169, 89, 0.8);
animation: leader-glow 2s ease-in-out infinite;
cursor: default;
}
.is-leader {
border-color: var(--gold) !important;
box-shadow: 0 0 10px rgba(201, 169, 89, 0.3);
}
.is-leader .card-name {
color: var(--gold);
}
@keyframes leader-glow {
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); }
}
/* PROMOTE BUTTON - DISABLED STATE */
.promote-btn.disabled {
background: #444 !important;
color: #888 !important;
cursor: not-allowed !important;
opacity: 0.6;
}
.promote-btn.disabled:hover {
background: #444 !important;
transform: none !important;
}
/* CARD HEADER - CLICKABLE - Mit Drag Handle */
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px;
background: var(--bg-header);
border-bottom: 1px solid var(--border);
gap: 12px;
cursor: pointer;
transition: var(--transition);
}
/* Override admin-styles.css padding-right: 50px (war für alten externen Handle) */
.unit-card > .card-header {
padding-right: 10px;
}
.card-header:hover { background: #3a3a3a; }
.card-header:hover .drag-handle { opacity: 0.7; }
.card-info { flex: 1; min-width: 0; }
.card-name {
font-family: 'Cinzel', serif;
font-size: 1.05em;
font-weight: 700;
color: var(--gold);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-type {
color: var(--text-muted);
font-size: 0.8em;
margin-top: 2px;
}
/* BADGES */
.card-badges { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.xp-badge {
background: var(--blood);
color: white;
padding: 8px 14px;
border-radius: 6px;
font-weight: 700;
font-size: 0.9em;
}
.xp-badge.pulse {
background: linear-gradient(135deg, var(--gold-dark), var(--gold));
animation: pulse-xp 1.5s ease-in-out infinite;
}
@keyframes pulse-xp {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.gc-badge {
background: var(--bg-input);
border: 1px solid var(--border);
color: var(--text-secondary);
padding: 8px 12px;
border-radius: 6px;
font-weight: 600;
font-size: 0.85em;
}
/* HIRED SWORD / DP LABEL - Inline im Header statt absolute */
.card-badges > .hired-sword-label {
position: static;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
.card-badges > .dp-label {
position: static;
}
/* STATS ROW - CLICKABLE */
.stats-row {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 12px 16px;
background: rgba(0,0,0,0.2);
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: var(--transition);
}
.stats-row:hover { background: rgba(201, 169, 89, 0.05); }
.stat {
padding: 6px 10px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 4px;
font-size: 0.8em;
font-weight: 600;
color: var(--text-secondary);
}
.stats-row:hover .stat { border-color: var(--border-light); }
.stat.buffed { background: rgba(46, 125, 50, 0.25); border-color: var(--success); color: #81c784; }
.stat.nerfed { background: rgba(198, 40, 40, 0.25); border-color: var(--danger); color: #ef9a9a; }
.stat.armor { background: rgba(41, 128, 185, 0.25); border-color: var(--info); color: #5dade2; }
/* CARD BODY - READ ONLY */
.card-body { padding: 12px 16px; }
.field { margin-bottom: 10px; }
.field:last-child { margin-bottom: 0; }
.field label {
display: block;
font-size: 0.65em;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-label);
margin-bottom: 4px;
font-weight: 600;
}
.field-val {
padding: 8px 12px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text-secondary);
font-size: 0.85em;
min-height: 36px;
}
.field-val.skills { color: #ef9a9a; font-style: italic; }
.field-val.empty { color: var(--text-muted); font-style: italic; }
/* COUNT CONTROLS */
.count-ctrl {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 8px;
background: var(--bg-input);
border-radius: var(--radius);
}
.count-val {
font-size: 1.2em;
font-weight: 700;
color: var(--gold);
min-width: 40px;
text-align: center;
}
/* MEMBERS */
.members { display: flex; flex-direction: column; gap: 5px; }
.members input {
padding: 7px 10px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text-primary);
font-size: 0.8em;
}
.members input:focus { outline: none; border-color: var(--gold); }
/* PROMOTE BTN */
.promote-btn {
width: 100%;
padding: 10px;
margin-top: 10px;
background: rgba(201, 169, 89, 0.15);
border: 2px solid var(--gold);
border-radius: var(--radius);
color: var(--gold);
font-weight: 600;
font-size: 0.85em;
cursor: pointer;
transition: var(--transition);
}
.promote-btn:hover { background: rgba(201, 169, 89, 0.25); }
/* XP TRACK */
.xp-section {
padding: 12px 16px;
background: rgba(139, 0, 0, 0.08);
border-top: 1px solid var(--border);
}
.xp-label {
display: flex;
justify-content: space-between;
font-size: 0.75em;
color: var(--text-muted);
margin-bottom: 6px;
}
.xp-next { color: var(--gold); font-weight: 600; }
.xp-track { display: flex; flex-wrap: wrap; gap: 3px; }
.xp-dot {
width: 14px;
height: 14px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 3px;
}
.xp-dot.filled { background: var(--blood); border-color: var(--blood); }
.xp-dot.lvl { width: 16px; height: 16px; border: 2px solid var(--gold); }
.xp-dot.lvl.filled { background: var(--gold); border-color: var(--gold); }
/* ADD BTN */
.add-btn {
display: block;
width: 100%;
padding: 16px;
margin: 20px 0;
background: var(--success);
border: none;
border-radius: var(--radius-lg);
color: white;
font-size: 1em;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.add-btn:hover { background: var(--success-light); transform: translateY(-2px); }
/* SMALL BTNS */
.sm-btn {
padding: 6px 12px;
border: none;
border-radius: var(--radius);
font-size: 0.8em;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.sm-btn.success { background: var(--success); color: white; }
.sm-btn.success:hover { background: var(--success-light); }
.sm-btn.secondary { background: var(--border-light); color: white; }
.sm-btn.secondary:hover { background: #666; }
.sm-btn.danger { background: var(--danger); color: white; }
.sm-btn.danger:hover { background: var(--danger-light); }
.sm-btn.outline { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); }
.sm-btn.outline:hover { background: var(--bg-input); border-color: var(--border-light); }
/* STORED ITEMS */
.stored-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 6px;
font-size: 0.9em;
}
.stored-item .name { flex: 1; font-weight: 600; color: var(--text-primary); }
.stored-item .source { color: var(--text-muted); font-size: 0.8em; }
.add-row { display: flex; gap: 8px; margin-top: 10px; }
.add-row input {
flex: 1;
padding: 8px 12px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text-primary);
font-size: 0.9em;
}
.add-row input:focus { outline: none; border-color: var(--gold); }
/* GRAVEYARD */
.graveyard-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 8px;
}
.graveyard-item .skull { font-size: 1.5em; }
.graveyard-item .info { flex: 1; }
.graveyard-item .name { font-weight: 600; color: var(--text-primary); }
.graveyard-item .details { font-size: 0.8em; color: var(--text-muted); }
.graveyard-item .cause { font-size: 0.8em; color: #ef9a9a; font-style: italic; }
/* NOTES */
.notes-area {
width: 100%;
min-height: 100px;
padding: 10px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text-primary);
font-size: 0.9em;
line-height: 1.5;
resize: vertical;
}
.notes-area:focus { outline: none; border-color: var(--gold); }
/* MODAL */
.modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.85);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal, .modal-container {
background: var(--bg-card);
border: 2px solid var(--blood);
border-radius: var(--radius-lg);
max-width: 520px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
transform: scale(0.9);
transition: transform 0.3s;
}
.modal-overlay.active .modal, .modal-overlay.active .modal-container { transform: scale(1); }
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
background: var(--blood);
color: white;
position: sticky;
top: 0;
z-index: 10;
}
.modal-header h3, .modal-header h2 { margin: 0; font-family: 'Cinzel', serif; font-size: 1.1em; }
.modal-close {
background: none;
border: none;
color: white;
font-size: 1.5em;
cursor: pointer;
padding: 0;
line-height: 1;
opacity: 0.8;
}
.modal-close:hover { opacity: 1; }
.modal-body { padding: 18px; }
.modal-footer {
display: flex;
gap: 10px;
justify-content: flex-end;
padding: 14px 18px;
background: var(--bg-header);
border-top: 1px solid var(--border);
position: sticky;
bottom: 0;
}
/* Modal Sections */
.modal-section {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}
.modal-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.modal-section-title {
font-size: 0.7em;
text-transform: uppercase;
color: var(--text-label);
margin-bottom: 10px;
font-weight: 600;
letter-spacing: 0.5px;
}
/* Stats Grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.stat-edit {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 8px;
text-align: center;
}
.stat-edit label {
display: block;
font-size: 0.65em;
color: var(--text-muted);
margin-bottom: 4px;
text-transform: uppercase;
}
.stat-edit input {
width: 100%;
padding: 5px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 4px;
color: var(--text-primary);
font-size: 0.95em;
font-weight: 700;
text-align: center;
}
.stat-edit input:focus { outline: none; border-color: var(--gold); }
.stat-color-btns { display: flex; gap: 3px; margin-top: 5px; justify-content: center; }
.stat-color-btn {
width: 18px;
height: 18px;
border-radius: 3px;
border: 2px solid transparent;
cursor: pointer;
transition: var(--transition);
}
.stat-color-btn.normal { background: var(--text-secondary); }
.stat-color-btn.buffed { background: #81c784; }
.stat-color-btn.nerfed { background: #ef9a9a; }
.stat-color-btn:hover, .stat-color-btn.active { border-color: white; transform: scale(1.1); }
/* Modal Fields */
.modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.modal-row.triple { grid-template-columns: 1fr 1fr 1fr; }
.modal-field label {
display: block;
font-size: 0.65em;
color: var(--text-muted);
margin-bottom: 4px;
text-transform: uppercase;
}
.modal-field input, .modal-field textarea, .modal-field select {
width: 100%;
padding: 8px 10px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text-primary);
font-size: 0.9em;
}
.modal-field input:focus, .modal-field textarea:focus { outline: none; border-color: var(--gold); }
.modal-field textarea { min-height: 60px; resize: vertical; }
/* Danger Zone */
.danger-zone {
background: rgba(198, 40, 40, 0.1);
border: 1px solid rgba(198, 40, 40, 0.3);
border-radius: var(--radius);
padding: 12px;
margin-top: 16px;
}
.danger-zone-title {
font-size: 0.7em;
text-transform: uppercase;
color: #ef9a9a;
margin-bottom: 8px;
font-weight: 600;
}
.danger-btn {
width: 100%;
padding: 10px;
background: transparent;
border: 1px solid var(--danger);
border-radius: var(--radius);
color: #ef9a9a;
font-size: 0.85em;
cursor: pointer;
transition: var(--transition);
}
.danger-btn:hover { background: rgba(198, 40, 40, 0.2); color: #ff8a80; }
/* EMPTY */
.empty { text-align: center; padding: 30px 20px; color: var(--text-muted); font-style: italic; }
/* LOADING */
.loading-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.95);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
color: var(--gold);
}
.loading-overlay.hidden { display: none; }
.spinner {
width: 50px;
height: 50px;
border: 4px solid var(--border);
border-top-color: var(--gold);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* SAVE INDICATOR & TOAST */
.save-indicator {
position: fixed;
bottom: 25px;
right: 25px;
padding: 12px 20px;
background: var(--success);
color: white;
border-radius: var(--radius);
font-weight: 600;
box-shadow: var(--shadow);
transform: translateY(100px);
opacity: 0;
transition: all 0.3s;
z-index: 9999;
}
.save-indicator.show { transform: translateY(0); opacity: 1; }
.toast {
position: fixed;
top: 25px;
right: 25px;
padding: 12px 18px;
background: var(--gold);
color: #1a1a1a;
border-radius: var(--radius);
font-weight: 600;
box-shadow: var(--shadow);
transform: translateX(150%);
opacity: 0;
transition: all 0.4s;
z-index: 9999;
}
.toast.show { transform: translateX(0); opacity: 1; }
/* ===== BATTLE MANAGER ===== */
.battle-setup {
text-align: center;
padding: 60px 20px;
}
.battle-setup-icon { font-size: 4em; margin-bottom: 20px; }
.battle-setup h2 {
font-family: 'Cinzel', serif;
color: var(--gold);
margin-bottom: 15px;
}
.battle-setup p { color: var(--text-muted); margin-bottom: 30px; }
.battle-header {
background: linear-gradient(135deg, var(--blood) 0%, #5c0000 100%);
padding: 25px;
border-radius: var(--radius-lg);
margin-bottom: 20px;
text-align: center;
}
.battle-matchup {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
margin-bottom: 15px;
}
.battle-matchup .wb-name {
font-family: 'Cinzel', serif;
font-size: 1.4em;
color: var(--gold);
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.battle-matchup .vs {
color: white;
font-weight: 700;
padding: 5px 15px;
background: rgba(0,0,0,0.3);
border-radius: 20px;
}
.battle-scenario {
display: inline-block;
padding: 6px 16px;
background: rgba(201, 169, 89, 0.2);
border: 1px solid var(--gold);
border-radius: 20px;
color: var(--gold);
font-size: 0.9em;
}
.battle-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
padding: 15px 20px;
background: var(--bg-card);
border-radius: var(--radius);
margin-bottom: 20px;
flex-wrap: wrap;
}
.round-display {
display: flex;
align-items: center;
gap: 15px;
}
.round-num {
background: var(--blood);
color: white;
padding: 8px 20px;
border-radius: var(--radius);
font-weight: 700;
font-size: 1.3em;
}
.turn-info {
text-align: center;
}
.turn-label { font-size: 0.75em; color: var(--text-muted); text-transform: uppercase; }
.turn-name { font-weight: 700; color: var(--gold); font-size: 1.1em; }
.phase-track {
display: flex;
gap: 8px;
font-size: 0.8em;
}
.phase {
padding: 4px 10px;
background: var(--bg-input);
border-radius: var(--radius);
color: var(--text-muted);
}
.phase.active {
background: var(--gold);
color: #000;
font-weight: 600;
}
.control-btns { display: flex; gap: 10px; }
.battle-main {
display: grid;
grid-template-columns: 1fr 280px 1fr;
gap: 20px;
}
@media (max-width: 1100px) {
.battle-main { grid-template-columns: 1fr; }
}
.wb-panel {
background: var(--bg-card);
border-radius: var(--radius-lg);
overflow: hidden;
border: 2px solid var(--border);
}
.wb-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 18px;
background: var(--bg-header);
border-bottom: 1px solid var(--border);
}
.wb-panel-title {
font-family: 'Cinzel', serif;
font-size: 1.1em;
color: var(--text-primary);
}
.wb-stats { display: flex; gap: 12px; }
.wb-stat {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: var(--bg-input);
border-radius: var(--radius);
font-size: 0.85em;
}
.wb-stat.ok { color: var(--success); }
.wb-stat.ooa { color: var(--danger); }
.wb-leadership {
padding: 10px 18px;
background: rgba(201, 169, 89, 0.08);
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.wb-leadership-label { font-size: 0.8em; color: var(--text-muted); }
.wb-leadership-value { font-weight: 700; color: var(--gold); }
.wb-leadership-value .warning { color: var(--danger); font-size: 0.8em; }
.wb-section-header {
padding: 8px 18px;
background: rgba(0,0,0,0.2);
font-size: 0.75em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 600;
}
.warrior-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 18px;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: var(--transition);
}
.warrior-row:hover { background: rgba(201, 169, 89, 0.05); }
.warrior-row.ooa {
background: rgba(139, 0, 0, 0.15);
opacity: 0.6;
}
.warrior-row.ooa .warrior-name { text-decoration: line-through; }
.warrior-info { display: flex; align-items: center; gap: 8px; }
.warrior-status { font-size: 0.9em; }
.warrior-name { font-weight: 600; }
.warrior-type {
font-size: 0.8em;
color: var(--text-muted);
padding: 2px 8px;
background: var(--bg-input);
border-radius: var(--radius);
}
.warrior-badges { display: flex; gap: 6px; align-items: center; }
.warrior-badge {
padding: 3px 8px;
border-radius: var(--radius);
font-size: 0.75em;
font-weight: 600;
}
.badge-leader { background: rgba(201, 169, 89, 0.2); color: var(--gold); }
.badge-ld { background: var(--bg-input); color: var(--text-secondary); }
.badge-ooa { background: var(--danger); color: white; }
.action-center {
display: flex;
flex-direction: column;
gap: 15px;
}
.action-box {
background: var(--bg-card);
border-radius: var(--radius-lg);
overflow: hidden;
border: 2px solid var(--border);
}
.action-box-header {
padding: 12px 15px;
background: var(--bg-header);
text-align: center;
}
.action-box-header h3 {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 0.95em;
color: var(--text-primary);
margin: 0;
}
.action-box-body { padding: 15px; }
.action-box-body p {
text-align: center;
color: var(--text-muted);
font-size: 0.85em;
margin-bottom: 12px;
}
.ooa-box .action-box-header { background: linear-gradient(135deg, #5c0000, var(--blood)); }
.ooa-box .action-box-header h3 { color: white; }
.crit-box .action-box-header { background: linear-gradient(135deg, #654321, #8B4513); }
.crit-box .action-box-header h3 { color: #ffd700; }
.ref-box { font-size: 0.85em; }
.ref-box .ref-item {
padding: 8px 0;
border-bottom: 1px solid var(--border);
}
.ref-box .ref-item:last-child { border-bottom: none; }
.ref-box .ref-label { font-weight: 600; color: var(--gold); }
.ref-box .ref-value { color: var(--text-secondary); }
.retreat-box {
text-align: center;
padding: 15px;
background: var(--bg-card);
border-radius: var(--radius);
border: 1px solid var(--border);
}
.retreat-box p {
font-size: 0.8em;
color: var(--text-muted);
margin-top: 8px;
}
.battle-log {
margin-top: 25px;
background: var(--bg-card);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border);
}
.battle-log-header {
padding: 12px 18px;
background: var(--bg-header);
font-size: 0.9em;
font-weight: 600;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 8px;
}
.battle-log-body {
max-height: 200px;
overflow-y: auto;
}
.log-entry {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
border-bottom: 1px solid var(--border);
font-size: 0.85em;
}
.log-entry:last-child { border-bottom: none; }
.log-round {
background: var(--blood);
color: white;
padding: 2px 8px;
border-radius: var(--radius);
font-weight: 700;
font-size: 0.8em;
}
.log-attacker { color: var(--danger); font-weight: 600; }
.log-arrow { color: var(--text-muted); }
.log-victim { color: var(--text-secondary); }
.log-result { color: var(--text-muted); margin-left: auto; font-style: italic; }
/* MANAGEMENT TAB */
.player-card, .warband-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 10px;
transition: var(--transition);
}
.player-card:hover, .warband-card:hover {
border-color: var(--border-light);
background: #333;
}
.card-info h3 {
font-size: 1em;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}
.card-info .meta {
font-size: 0.8em;
color: var(--text-muted);
}
.card-info .meta span {
margin-right: 12px;
}
.card-actions { display: flex; gap: 8px; }
.form-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px;
margin-bottom: 20px;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
align-items: end;
}
.form-field label {
display: block;
font-size: 0.7em;
text-transform: uppercase;
color: var(--text-label);
margin-bottom: 6px;
font-weight: 600;
}
.form-field input, .form-field select {
width: 100%;
padding: 10px 12px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text-primary);
font-size: 0.9em;
}
.form-field input:focus, .form-field select:focus {
outline: none;
border-color: var(--gold);
}
.template-info {
margin-top: 15px;
padding: 12px;
background: rgba(201, 169, 89, 0.1);
border: 1px solid var(--gold);
border-radius: var(--radius);
font-size: 0.85em;
color: var(--gold);
}
.template-info strong { display: block; margin-bottom: 4px; }
.empty-state {
text-align: center;
padding: 30px;
color: var(--text-muted);
font-style: italic;
}
/* RESPONSIVE */
@media (max-width: 900px) {
.wb-header-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
.wb-graveyard-btn { grid-column: span 4; justify-self: start; }
.cards-grid { grid-template-columns: 1fr 1fr; }
.stats-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 700px) {
.wb-header-grid { grid-template-columns: 1fr 1fr; }
.wb-graveyard-btn { grid-column: span 2; }
.cards-grid { grid-template-columns: 1fr; }
.editor-toolbar { flex-direction: column; }
.editor-toolbar select { width: 100%; min-width: auto; }
.toolbar-btns { width: 100%; justify-content: center; }
.stats-grid { grid-template-columns: repeat(3, 1fr); }
.modal-row { grid-template-columns: 1fr; }
.modal-row.triple { grid-template-columns: 1fr 1fr; }
}
/* ===== BATTLE STYLES ===== */
.battle-setup-screen { display: flex; justify-content: center; align-items: center; min-height: 60vh; padding: 20px; }
.setup-card { background: var(--bg-card); border: 2px solid var(--blood); border-radius: var(--radius-lg); max-width: 700px; width: 100%; overflow: hidden; }
.setup-header { background: linear-gradient(135deg, var(--blood) 0%, #5a1a1a 100%); padding: 30px; text-align: center; }
.setup-icon { font-size: 3rem; margin-bottom: 10px; }
.setup-header h2 { margin: 0; font-family: 'Cinzel', serif; font-size: 1.8rem; color: var(--gold); }
.setup-header p { margin: 10px 0 0; color: rgba(255,255,255,0.8); }
.setup-form { padding: 30px; text-align: center; }
.setup-start-btn { font-size: 1.2rem; padding: 16px 40px; }
.battle-screen { padding: 15px; }
.battle-header-bar { background: linear-gradient(135deg, var(--blood) 0%, #5a1a1a 100%); border-radius: var(--radius-lg); padding: 15px 25px; margin-bottom: 15px; text-align: center; }
.battle-matchup { display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap; }
.team-name { font-family: 'Cinzel', serif; font-size: 1.3rem; font-weight: 700; color: var(--gold); }
.vs-badge { background: rgba(0,0,0,0.3); color: white; padding: 4px 12px; border-radius: var(--radius); font-weight: 700; font-size: 0.9rem; }
.battle-meta { margin-top: 10px; }
.scenario-badge { background: rgba(201, 169, 89, 0.2); color: var(--gold); padding: 4px 12px; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; }
.battle-controls-bar { display: flex; justify-content: center; gap: 10px; margin-bottom: 15px; }
.battle-main { display: grid; grid-template-columns: 1fr 300px 1fr; gap: 15px; margin-bottom: 20px; }
@media (max-width: 1000px) { .battle-main { grid-template-columns: 1fr; } }
.warband-column { min-width: 0; }
.warband-battle-card { background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.warband-battle-card.near-rout { border-color: #f9a825; box-shadow: 0 0 20px rgba(249, 168, 37, 0.3); }
.wbc-header { background: var(--bg-elevated); padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--blood); }
.wbc-header h3 { margin: 0; font-family: 'Cinzel', serif; font-size: 1.1rem; color: var(--gold); }
.wbc-counts { display: flex; gap: 8px; }
.count-active, .count-ooa { padding: 4px 10px; border-radius: var(--radius); font-weight: 700; font-size: 0.9rem; }
.count-active { background: rgba(46, 125, 50, 0.2); color: #81c784; }
.count-ooa { background: rgba(198, 40, 40, 0.2); color: #ef9a9a; }
.rout-warning { background: rgba(249, 168, 37, 0.2); color: #ffd54f; padding: 8px 15px; text-align: center; font-weight: 700; font-size: 0.85rem; animation: pulse-warning 1.5s ease-in-out infinite; }
@keyframes pulse-warning { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.wbc-leadership { padding: 8px 15px; background: rgba(0,0,0,0.2); display: flex; justify-content: space-between; font-size: 0.85rem; }
.ld-value { color: var(--gold); font-weight: 600; }
.wbc-section { padding: 10px 15px; }
.section-header { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; }
.warrior-card { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; cursor: pointer; transition: all 0.2s; }
.warrior-card:hover { border-color: var(--gold); background: var(--bg-elevated); }
.warrior-card.is-ooa { opacity: 0.5; background: rgba(198, 40, 40, 0.1); border-color: var(--danger); }
.wc-main { display: flex; align-items: center; gap: 10px; }
.wc-status { font-size: 1.2rem; }
.wc-info { display: flex; flex-direction: column; }
.wc-name { font-weight: 600; color: var(--text-primary); }
.wc-type { font-size: 0.8rem; color: var(--text-muted); }
.wc-badges { display: flex; gap: 6px; align-items: center; }
.badge-leader { font-size: 1rem; }
.badge-ld { background: var(--bg-elevated); padding: 2px 6px; border-radius: var(--radius); font-size: 0.75rem; color: var(--text-secondary); }
.badge-ooa { background: var(--danger); color: white; padding: 2px 6px; border-radius: var(--radius); font-size: 0.75rem; }
.action-center { display: flex; flex-direction: column; gap: 15px; }
.action-card { background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 20px; text-align: center; }
.action-card.ooa-card { border-color: var(--blood); background: linear-gradient(180deg, rgba(139, 0, 0, 0.15) 0%, var(--bg-card) 100%); }
.action-card.crit-card { border-color: #9c27b0; }
.action-card.ref-card { border-color: var(--gold); }
.ac-icon { font-size: 2.5rem; margin-bottom: 10px; }
.action-card h3 { margin: 0 0 8px; font-family: 'Cinzel', serif; font-size: 1.1rem; color: var(--gold); }
.action-card h3.ooa-title { color: var(--blood); }
.action-card p { margin: 0 0 15px; font-size: 0.9rem; color: var(--text-secondary); }
.btn-lg { padding: 12px 24px; font-size: 1rem; }
.btn-critical { background: linear-gradient(135deg, #7b1fa2 0%, #4a148c 100%); border: 2px solid #9c27b0; color: white; }
.btn-critical:hover { background: linear-gradient(135deg, #9c27b0 0%, #6a1b9a 100%); }
/* Größer roter OOA Button */
.btn-ooa-main { background: linear-gradient(135deg, #8B0000 0%, #5c0000 100%); color: white; border: none; padding: 15px 30px; font-size: 1.1rem; font-weight: 700; border-radius: var(--radius); cursor: pointer; transition: all 0.3s; width: 100%; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3); }
.btn-ooa-main:hover { background: linear-gradient(135deg, #a00000 0%, #700000 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139, 0, 0, 0.5); }
.ref-content { text-align: left; font-size: 0.85rem; }
.ref-row { display: flex; justify-content: space-between; padding: 4px 0; }
.ref-row span:first-child { color: var(--text-muted); }
.ref-row span:last-child { color: var(--text-primary); font-weight: 600; }
.ref-divider { height: 1px; background: var(--border); margin: 8px 0; }
.ref-title { font-weight: 700; color: var(--gold); margin-bottom: 4px; }
.retreat-card { padding: 15px; }
.retreat-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; }
.battle-log-section { background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 15px; }
.battle-log-section h4 { margin: 0 0 10px; font-family: 'Cinzel', serif; color: var(--gold); }
.battle-log-entries { max-height: 200px; overflow-y: auto; }
.log-empty { color: var(--text-muted); font-style: italic; padding: 10px; text-align: center; }
.log-entry { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-input); border-radius: var(--radius); margin-bottom: 6px; }
.log-badge { background: var(--blood); color: white; padding: 2px 8px; border-radius: var(--radius); font-size: 0.75rem; font-weight: 700; }
.log-attacker { color: var(--gold); font-weight: 600; }
.log-arrow { color: var(--text-muted); }
.log-victim { color: var(--danger); font-weight: 600; }
.log-type { color: var(--text-muted); font-size: 0.85rem; margin-left: auto; }
.ooa-warband-section { margin-bottom: 15px; }
.ooa-warband-section h4 { color: var(--gold); margin-bottom: 10px; }
/* OOA Modal - Versus Layout */
.ooa-versus { display: flex; min-height: 400px; }
.ooa-side { flex: 1; padding: 20px; display: flex; flex-direction: column; }
.ooa-side-left { background: rgba(139, 69, 19, 0.15); border-right: 1px solid var(--border); }
.ooa-side-right { background: rgba(100, 100, 100, 0.15); }
.ooa-side-header { text-align: center; padding: 10px; margin-bottom: 15px; border-bottom: 2px solid var(--gold); }
.ooa-side-header h3 { font-family: var(--font-display); color: var(--gold); font-size: 1.1rem; margin: 0; }
.ooa-side-header .ooa-side-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 5px; }
.ooa-center { width: 60px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); }
.ooa-vs-badge { background: var(--blood); color: white; padding: 8px 12px; border-radius: 50%; font-weight: 700; font-size: 0.9rem; }
.ooa-warriors-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
/* Warrior Buttons im OOA Modal */
.ooa-warrior-btn { padding: 10px 12px; background: var(--bg-input); border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all 0.2s; text-align: left; display: flex; justify-content: space-between; align-items: center; }
.ooa-warrior-btn:hover { border-color: var(--gold); background: var(--bg-elevated); }
.ooa-warrior-btn.selected-attacker { border-color: #4CAF50; background: rgba(76, 175, 80, 0.2); box-shadow: 0 0 10px rgba(76, 175, 80, 0.3); }
.ooa-warrior-btn.selected-victim { border-color: var(--blood); background: rgba(139, 0, 0, 0.3); box-shadow: 0 0 10px rgba(139, 0, 0, 0.4); }
.ooa-warrior-btn.is-ooa { opacity: 0.35; text-decoration: line-through; pointer-events: none; }
.ooa-warrior-btn.disabled-side { opacity: 0.5; pointer-events: none; }
.ooa-warrior-btn .warrior-name { font-weight: 600; color: var(--text-primary); }
.ooa-warrior-btn .warrior-type { font-size: 0.75rem; color: var(--text-muted); }
.ooa-warrior-btn .warrior-icon { font-size: 0.8rem; }
/* Selection Display */
.ooa-selection-display { padding: 15px 20px; background: var(--bg-input); border-top: 1px solid var(--border); text-align: center; min-height: 60px; display: flex; align-items: center; justify-content: center; }
.ooa-hint { color: var(--text-muted); margin: 0; }
.ooa-selection-summary { display: flex; align-items: center; justify-content: center; gap: 15px; font-size: 1rem; }
.ooa-sel-attacker { color: #4CAF50; font-weight: 700; }
.ooa-sel-arrow { color: var(--gold); font-size: 1.5rem; }
.ooa-sel-victim { color: var(--blood); font-weight: 700; }
/* Confirm Area */
.ooa-confirm-area { padding: 20px; background: var(--bg-card); border-top: 1px solid var(--border); text-align: center; }
.btn-ooa-confirm { background: linear-gradient(135deg, #8B0000, #5c0000); color: white; border: none; padding: 15px 40px; font-size: 1.1rem; font-weight: 700; border-radius: var(--radius); cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; }
.btn-ooa-confirm:hover:not(:disabled) { background: linear-gradient(135deg, #a00000, #700000); transform: scale(1.02); box-shadow: 0 5px 20px rgba(139, 0, 0, 0.4); }
.btn-ooa-confirm:disabled { opacity: 0.4; cursor: not-allowed; }
.ooa-btn { margin: 4px; }
.crit-result-card { background: var(--bg-input); border-radius: var(--radius-lg); padding: 25px; text-align: center; margin-top: 15px; }
/* Dice Buttons für manuelle Eingabe */
.crit-dice-section { margin-bottom: 20px; }
.crit-dice-section label { display: block; margin-bottom: 10px; color: var(--text-secondary); font-size: 0.9rem; }
.dice-buttons { display: flex; gap: 8px; justify-content: center; }
.dice-btn { width: 50px; height: 50px; font-size: 1.5rem; font-weight: 700; background: var(--bg-input); border: 2px solid var(--border); border-radius: var(--radius); color: var(--text-primary); cursor: pointer; transition: all 0.2s; }
.dice-btn:hover { border-color: var(--gold); background: var(--bg-elevated); transform: scale(1.05); }
.dice-btn.selected { border-color: #9c27b0; background: rgba(156, 39, 176, 0.3); color: white; box-shadow: 0 0 15px rgba(156, 39, 176, 0.4); }
/* Fix btn-outline für Dark Theme */
.btn-outline { background: transparent; border: 2px solid var(--border); color: var(--text-primary); }
.btn-outline:hover { background: var(--bg-elevated); border-color: var(--gold); color: var(--gold); }
.crit-roll { font-size: 3rem; margin-bottom: 10px; }
.crit-name { font-size: 1.3rem; font-weight: 700; color: var(--gold); margin-bottom: 8px; }
.crit-effect { color: var(--text-secondary); }
/* POST-BATTLE WIZARD */
.pbw-container { background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; max-width: 1200px; margin: 0 auto; }
.pbw-header { background: linear-gradient(135deg, var(--blood) 0%, #5a1a1a 100%); padding: 20px 25px; }
.pbw-title { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.pbw-icon { font-size: 2.5rem; }
.pbw-title h2 { margin: 0; font-family: 'Cinzel', serif; color: var(--gold); }
.pbw-title p { margin: 5px 0 0; color: rgba(255,255,255,0.8); font-size: 0.9rem; }
.progress-track { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.progress-step { display: flex; flex-direction: column; align-items: center; padding: 10px 15px; background: rgba(0,0,0,0.3); border-radius: var(--radius-lg); min-width: 80px; transition: all 0.3s; }
.progress-step.active { background: var(--gold); color: var(--bg-primary); }
.progress-step.done { background: var(--success); color: white; }
.step-num { font-size: 1.2rem; font-weight: 700; }
.step-icon { font-size: 1.5rem; margin: 5px 0; }
.step-name { font-size: 0.75rem; text-transform: uppercase; }
.pbw-content { padding: 25px; }
.step-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.step-icon-large { font-size: 2.5rem; }
.step-header h3 { margin: 0; font-family: 'Cinzel', serif; color: var(--gold); }
.step-header p { margin: 5px 0 0; color: var(--text-secondary); }
/* ========================================
POST-BATTLE WIZARD - KOMPLETT NEU
======================================== */
/* Progress Track - Bessere Lesbarkeit */
.progress-track { display: flex; justify-content: center; gap: 8px; margin-top: 15px; }
.progress-step {
display: flex; flex-direction: column; align-items: center;
padding: 12px 20px; border-radius: 10px; min-width: 100px;
background: rgba(0,0,0,0.4); border: 2px solid transparent;
transition: all 0.3s ease;
}
.progress-step.active {
background: #8b0000; border-color: #c9a959;
}
.progress-step.done {
background: #1b5e20; border-color: #4caf50;
}
.step-num { font-size: 1.1rem; font-weight: 700; color: #c9a959; }
.progress-step.active .step-num,
.progress-step.done .step-num { color: white; }
.step-icon { font-size: 1.3rem; margin: 4px 0; }
.step-name { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.7); }
.progress-step.active .step-name,
.progress-step.done .step-name { color: white; }
/* Rules Box */
.injury-rules-box, .xp-rules-box {
display: flex; flex-wrap: wrap; gap: 15px; padding: 15px 20px;
background: linear-gradient(135deg, rgba(201,169,89,0.15) 0%, rgba(139,0,0,0.1) 100%);
border: 1px solid #c9a959; border-radius: 10px; margin-bottom: 20px;
}
.xp-rule { background: rgba(0,0,0,0.3); padding: 8px 14px; border-radius: 20px; font-size: 0.9rem; color: #e0e0e0; }
/* Warband Sections Grid */
.warband-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
@media (max-width: 900px) { .warband-sections { grid-template-columns: 1fr; } }
/* Section Cards */
.wb-injury-section, .wb-xp-section, .wb-exploration-section, .wb-wyrdstone-section {
background: linear-gradient(180deg, #1f1f1f 0%, #151515 100%);
border: 2px solid #333; border-radius: 12px; padding: 20px;
}
.wb-injury-section.is-winner, .wb-xp-section.is-winner { border-color: #c9a959; }
.wb-injury-section h4, .wb-xp-section h4, .wb-exploration-section h4, .wb-wyrdstone-section h4 {
margin: 0 0 15px; font-family: 'Cinzel', serif; color: #c9a959; font-size: 1.2rem;
padding-bottom: 10px; border-bottom: 1px solid rgba(201,169,89,0.3);
}
.no-injuries { color: #81c784; font-style: italic; padding: 20px; text-align: center; }
/* Injury Cards - NEU ohne OOA Badge */
.injury-card {
background: rgba(0,0,0,0.3); border: 1px solid #444; border-radius: 10px;
padding: 15px 18px; margin-bottom: 12px;
}
.injury-card.has-result { border-color: #c9a959; }
.ic-name { font-weight: 700; color: #ef9a9a; font-size: 1.05rem; margin-bottom: 12px; }
.ic-input { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ic-input label { color: rgba(255,255,255,0.7); font-size: 0.9rem; }
.ic-input input {
width: 80px !important; padding: 10px 12px !important; text-align: center !important;
background: #2a2a2a !important; border: 2px solid #555 !important; border-radius: 8px !important;
color: white !important; font-size: 1.1rem !important; font-weight: 600 !important;
}
.ic-input input:focus { border-color: #c9a959 !important; outline: none !important; }
.ic-result { padding: 12px 15px; border-radius: 8px; font-size: 0.95rem; font-weight: 500; }
.ic-result.dead { background: rgba(198,40,40,0.25); border: 1px solid #c62828; color: #ef9a9a; }
.ic-result.recovery { background: rgba(46,125,50,0.25); border: 1px solid #2e7d32; color: #81c784; }
.ic-result.stat { background: rgba(183,149,11,0.25); border: 1px solid #b7950b; color: #f0e68c; }
.ic-result.special { background: rgba(100,100,100,0.25); border: 1px solid #666; color: #bbb; }
/* XP Cards */
.xp-heroes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 15px; }
.xp-hero-card {
background: rgba(0,0,0,0.3); border: 1px solid #444; border-radius: 10px; padding: 15px;
transition: all 0.2s ease;
}
.xp-hero-card.is-ooa { border-color: #b71c1c; }
.xp-hero-card.is-dead { opacity: 0.5; background: rgba(198,40,40,0.1); }
.xph-header { margin-bottom: 10px; }
.xph-name { font-weight: 700; color: #c9a959; display: flex; align-items: center; gap: 6px; }
.xph-type { font-size: 0.8rem; color: rgba(255,255,255,0.5); display: block; margin-top: 2px; }
.xph-stats { display: flex; gap: 20px; margin-bottom: 12px; }
.xph-stat { text-align: center; }
.stat-label { font-size: 0.7rem; color: rgba(255,255,255,0.5); text-transform: uppercase; display: block; }
.stat-value { font-weight: 700; color: white; }
.stat-value.has-ooa { color: #c9a959; font-size: 1.1rem; }
/* Injury Subsections */
.injury-subsection { margin-bottom: 20px; }
.injury-subsection h5 {
color: rgba(255,255,255,0.8); font-size: 0.9rem; margin: 0 0 12px 0;
padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.injury-card.henchman { background: rgba(100,100,100,0.2); }
.injury-card.henchman .ic-name { color: #90a4ae; }
.xph-suggestion {
background: rgba(201,169,89,0.1); padding: 8px 12px; border-radius: 8px;
font-size: 0.85rem; margin-bottom: 12px; color: rgba(255,255,255,0.8);
}
.ooa-tag {
display: inline-block; background: rgba(198,40,40,0.3); color: #ef9a9a;
padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; margin-left: 6px;
}
.xph-dead-notice {
padding: 10px; background: rgba(198,40,40,0.2); border-radius: 8px;
color: #ef9a9a; text-align: center; font-size: 0.9rem;
}
.xph-controls { display: flex; align-items: center; justify-content: center; gap: 12px; }
.xp-btn {
width: 38px !important; height: 38px !important; border-radius: 8px !important;
border: none !important; font-size: 1.4rem !important; font-weight: 700 !important;
cursor: pointer !important; transition: all 0.2s ease !important;
}
.xp-btn:first-of-type { background: #c62828 !important; color: white !important; }
.xp-btn:first-of-type:hover { background: #e53935 !important; transform: scale(1.1); }
.xp-btn:last-of-type { background: #2e7d32 !important; color: white !important; }
.xp-btn:last-of-type:hover { background: #43a047 !important; transform: scale(1.1); }
.xp-bonus { font-size: 1.3rem; font-weight: 700; color: #c9a959; min-width: 50px; text-align: center; }
/* Exploration Section */
.exploration-info, .wyrdstone-info {
padding: 15px 20px;
background: linear-gradient(135deg, rgba(201,169,89,0.15) 0%, rgba(139,0,0,0.1) 100%);
border: 1px solid #c9a959; border-radius: 10px; margin-bottom: 20px;
color: rgba(255,255,255,0.9);
}
.exp-info-text { color: rgba(255,255,255,0.7); margin-bottom: 15px; font-size: 0.95rem; }
.exploration-dice { margin-bottom: 20px; }
.exp-die-row {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 15px; margin-bottom: 8px;
background: rgba(0,0,0,0.3); border-radius: 8px; border: 1px solid #333;
}
.exp-hero-name { color: white; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.exp-die-input {
width: 60px !important; padding: 10px !important; text-align: center !important;
background: #2a2a2a !important; border: 2px solid #555 !important; border-radius: 8px !important;
color: white !important; font-size: 1.1rem !important; font-weight: 600 !important;
}
.exp-die-input:focus { border-color: #c9a959 !important; outline: none !important; }
.exploration-results {
display: flex; flex-wrap: wrap; gap: 15px; padding: 15px;
background: rgba(0,0,0,0.3); border-radius: 10px; margin-top: 15px;
}
.exp-result-box {
display: flex; flex-direction: column; align-items: center;
padding: 12px 20px; background: rgba(201,169,89,0.1); border: 1px solid #c9a959;
border-radius: 10px; min-width: 100px;
}
.exp-result-box.wyrdstone { border-color: #9c27b0; background: rgba(156,39,176,0.15); }
.exp-result-label { font-size: 0.8rem; color: rgba(255,255,255,0.6); text-transform: uppercase; }
.exp-result-value { font-size: 1.5rem; font-weight: 700; color: #c9a959; }
.exp-result-box.wyrdstone .exp-result-value { color: #ce93d8; }
.exp-special-finds {
margin-top: 15px; padding: 15px;
background: linear-gradient(135deg, rgba(212,175,55,0.15) 0%, rgba(139,0,0,0.1) 100%);
border: 1px solid #c9a959; border-radius: 10px;
}
.exp-special-title { font-weight: 700; color: #c9a959; margin-bottom: 10px; font-size: 1.05rem; }
.special-find-item { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.special-find-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.special-find-item strong { color: white; font-size: 1rem; }
.special-find-item p { margin: 5px 0 0; color: rgba(255,255,255,0.7); font-size: 0.9rem; }
.no-survivors { color: rgba(255,255,255,0.5); font-style: italic; padding: 20px; text-align: center; }
/* Wyrdstone/Income Section */
.income-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px; }
.income-stat {
text-align: center; padding: 15px;
background: rgba(0,0,0,0.3); border: 1px solid #444; border-radius: 10px;
}
.income-stat-icon { font-size: 1.5rem; margin-bottom: 5px; }
.income-stat-value { font-size: 1.4rem; font-weight: 700; color: #c9a959; }
.income-stat-label { font-size: 0.8rem; color: rgba(255,255,255,0.6); }
.sell-section {
background: rgba(0,0,0,0.2); padding: 20px; border-radius: 10px;
border: 1px solid #333; margin-top: 15px;
}
.sell-section h5 { color: #c9a959; margin: 0 0 15px; font-size: 1rem; }
.sell-row { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; flex-wrap: wrap; }
.sell-row label { color: rgba(255,255,255,0.8); min-width: 150px; }
.sell-input {
width: 80px !important; padding: 10px 12px !important; text-align: center !important;
background: #2a2a2a !important; border: 2px solid #555 !important; border-radius: 8px !important;
color: white !important; font-size: 1rem !important; font-weight: 600 !important;
}
.sell-input:focus { border-color: #c9a959 !important; outline: none !important; }
.sell-profit {
padding: 12px 20px; background: rgba(46,125,50,0.2); border: 1px solid #2e7d32;
border-radius: 8px; color: #81c784; font-weight: 600; font-size: 1.1rem;
}
.income-table-info {
margin-top: 15px; padding: 12px; background: rgba(201,169,89,0.1);
border-radius: 8px; font-size: 0.85rem; color: rgba(255,255,255,0.7);
}
/* Summary Cards */
.summary-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 20px; }
@media (max-width: 900px) { .summary-sections { grid-template-columns: 1fr; } }
.summary-card {
background: linear-gradient(180deg, #1f1f1f 0%, #151515 100%);
border: 2px solid #333; border-radius: 12px; overflow: hidden;
}
.summary-card.is-winner { border-color: #c9a959; }
.sc-header {
display: flex; justify-content: space-between; align-items: center;
padding: 15px 20px; background: rgba(139,0,0,0.3); border-bottom: 2px solid #8b0000;
}
.sc-header h4 { margin: 0; font-family: 'Cinzel', serif; color: #c9a959; }
.winner-badge {
background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%);
color: #1a1a1a; padding: 5px 12px; border-radius: 15px;
font-size: 0.8rem; font-weight: 700;
}
.sc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #333; }
.sc-stat {
display: flex; flex-direction: column; align-items: center;
padding: 15px 10px; background: #1a1a1a;
}
.sc-stat.negative .sc-value { color: #ef9a9a; }
.sc-stat.positive .sc-value { color: #81c784; }
.sc-icon { font-size: 1.3rem; margin-bottom: 4px; }
.sc-value { font-size: 1.2rem; font-weight: 700; color: white; }
.sc-label { font-size: 0.7rem; color: rgba(255,255,255,0.5); text-align: center; margin-top: 4px; }
.sc-section {
padding: 12px 15px; margin: 10px 15px;
background: rgba(0,0,0,0.3); border-radius: 8px; font-size: 0.9rem;
}
.sc-section strong { color: #c9a959; }
.sc-section span { color: rgba(255,255,255,0.8); }
.sc-section.warning { background: rgba(198,40,40,0.15); border: 1px solid rgba(198,40,40,0.3); }
/* Complete Notice */
.complete-notice {
display: flex; align-items: center; gap: 20px; padding: 25px;
background: linear-gradient(135deg, rgba(46,125,50,0.2) 0%, rgba(27,94,32,0.1) 100%);
border: 2px solid #4caf50; border-radius: 12px;
}
.complete-icon { font-size: 3rem; }
.complete-notice strong { display: block; color: #81c784; margin-bottom: 6px; font-size: 1.1rem; }
.complete-notice p { margin: 0; color: rgba(255,255,255,0.7); }
/* Navigation Buttons */
.pbw-nav {
display: flex; justify-content: space-between; align-items: center;
padding: 20px 25px;
background: linear-gradient(180deg, #1f1f1f 0%, #0f0f0f 100%);
border-top: 2px solid #8b0000;
}
.pbw-nav .btn {
padding: 14px 30px !important; font-size: 1rem !important; font-weight: 700 !important;
font-family: 'Cinzel', serif !important; border-radius: 8px !important;
cursor: pointer !important; transition: all 0.2s ease !important;
border: 2px solid !important; text-transform: uppercase !important; letter-spacing: 1px !important;
}
.pbw-nav .btn-secondary {
background: #2d2d2d !important; border-color: #555 !important; color: #e0e0e0 !important;
}
.pbw-nav .btn-secondary:hover {
background: #3d3d3d !important; border-color: #c9a959 !important; color: #c9a959 !important;
}
.pbw-nav .btn-primary {
background: linear-gradient(135deg, #8b0000 0%, #5a0000 100%) !important;
border-color: #c9a959 !important; color: #c9a959 !important;
box-shadow: 0 4px 15px rgba(139,0,0,0.4) !important;
}
.pbw-nav .btn-primary:hover {
background: linear-gradient(135deg, #a00000 0%, #8b0000 100%) !important;
transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(139,0,0,0.5) !important;
}
.pbw-nav .btn-success {
background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%) !important;
border-color: #4caf50 !important; color: white !important;
box-shadow: 0 4px 15px rgba(46,125,50,0.4) !important;
padding: 16px 40px !important; font-size: 1.1rem !important;
}
.pbw-nav .btn-success:hover {
background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%) !important;
transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(46,125,50,0.5) !important;
}
/* ===== ADVANCE MODAL ===== */
.advance-modal-content {
max-width: 500px; text-align: center;
background: linear-gradient(180deg, #1f1f1f 0%, #0f0f0f 100%);
border: 3px solid #c9a959;
}
.advance-header h2 {
font-family: 'Cinzel', serif; color: #c9a959; font-size: 1.8rem; margin: 0 0 10px 0;
}
.advance-subtitle { color: rgba(255,255,255,0.6); margin: 0; }
.advance-hero-card {
background: rgba(201,169,89,0.1); border: 2px solid #c9a959; border-radius: 12px;
padding: 20px; margin: 20px 0;
}
.ahc-name { font-size: 1.4rem; font-weight: 700; color: white; margin-bottom: 8px; }
.ahc-details { display: flex; justify-content: center; gap: 15px; margin-bottom: 12px; }
.ahc-type, .ahc-warband {
font-size: 0.85rem; color: rgba(255,255,255,0.6);
padding: 4px 10px; background: rgba(0,0,0,0.3); border-radius: 20px;
}
.ahc-xp {
display: flex; justify-content: center; align-items: center; gap: 15px;
padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1);
}
.ahc-xp-value { font-size: 1.3rem; font-weight: 700; color: #c9a959; }
.ahc-advances {
background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
color: white; padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 600;
}
.advance-roll-section { margin: 25px 0; }
.advance-roll-section h3 { color: rgba(255,255,255,0.8); font-size: 1rem; margin-bottom: 15px; }
.advance-dice-input {
display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px;
}
.advance-dice-input input {
width: 60px; padding: 12px; text-align: center; font-size: 1.3rem; font-weight: 700;
background: #2a2a2a; border: 2px solid #555; border-radius: 8px; color: white;
}
.advance-dice-input input:focus { border-color: #c9a959; outline: none; }
.advance-dice-input span { color: rgba(255,255,255,0.5); font-size: 1.2rem; }
.advance-total {
font-size: 1.5rem; font-weight: 700; color: #c9a959;
min-width: 50px; padding: 10px; background: rgba(201,169,89,0.1); border-radius: 8px;
}
.advance-result-box {
padding: 20px; border-radius: 12px; margin: 20px 0;
}
.advance-result-box.success {
background: linear-gradient(135deg, rgba(46,125,50,0.2) 0%, rgba(27,94,32,0.1) 100%);
border: 2px solid #4caf50;
}
.advance-result-box.skill {
background: linear-gradient(135deg, rgba(103,58,183,0.2) 0%, rgba(63,81,181,0.1) 100%);
border: 2px solid #7c4dff;
}
.advance-result-box.choice {
background: linear-gradient(135deg, rgba(201,169,89,0.2) 0%, rgba(139,0,0,0.1) 100%);
border: 2px solid #c9a959;
}
.result-icon { font-size: 2.5rem; margin-bottom: 10px; }
.result-text { color: rgba(255,255,255,0.9); font-size: 1rem; margin-bottom: 10px; }
.result-applied { color: #81c784; font-weight: 600; }
.result-choice { display: flex; gap: 15px; justify-content: center; margin-top: 15px; }
.btn-stat-choice {
padding: 12px 25px; background: linear-gradient(135deg, #8b0000 0%, #5a0000 100%);
border: 2px solid #c9a959; color: #c9a959; font-weight: 700; border-radius: 8px;
cursor: pointer; transition: all 0.2s;
}
.btn-stat-choice:hover {
background: linear-gradient(135deg, #a00000 0%, #8b0000 100%);
transform: translateY(-2px);
}
.advance-actions { margin-top: 20px; }
#advance-next-btn {
padding: 14px 40px; font-size: 1.1rem;
background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
border: 2px solid #4caf50; color: white; font-weight: 700; border-radius: 8px;
cursor: pointer;
}
/* ===== INJURED STATS (ROT) ===== */
.stat.injured {
background: rgba(198,40,40,0.3) !important;
border-color: #c62828 !important;
color: #ef9a9a !important;
}
.stat.injured::after {
content: '⚠️'; font-size: 0.6rem; margin-left: 3px; color: #ef9a9a;
}