/* style.css — dunkles Roguelike-Theme. Bewusst einfach gehalten (kein
   CSS-Framework), damit man als Einsteiger jede Regel nachvollziehen kann. */

* {
  box-sizing: border-box;
}

:root {
  /* Wie stark der dunkle Schleier über dem Hintergrundbild liegt (0 = Bild
     voll sichtbar, 1 = komplett schwarz). 0.9 ist bewusst so gewählt, dass
     selbst die HELLSTE Stelle des Bildes den Text nicht schlechter lesbar
     macht - wer mehr vom Bild sehen will, dreht hier vorsichtig runter. */
  --hintergrund-abdunklung: 0.9;
}

body {
  margin: 0;
  background: #0a0a0e;
  color: #e0e0e6;
  font-family: "Segoe UI", system-ui, sans-serif;
}

/* Das Bild vom Startbildschirm liegt auch während des Spiels als Kulisse
   hinter allem - als eigenes, festes Element (statt als body-Hintergrund mit
   background-attachment: fixed, das auf iPhones ruckelt bzw. gar nicht geht).
   Das Bild ist vom Intro her schon im Cache, kostet also keinen neuen Download. */
body::before {
  content: "";
  position: fixed;
  /* etwas größer als der Bildschirm, damit der Weichzeichner keine hellen
     Ränder ins Bild zieht */
  inset: -40px;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(
      rgba(10, 10, 14, var(--hintergrund-abdunklung)),
      rgba(10, 10, 14, var(--hintergrund-abdunklung))
    ),
    url("assets/introscreen.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* leichter Weichzeichner: nimmt dem Bild die Details, damit es Kulisse
     bleibt und nicht mit der Karte um Aufmerksamkeit kämpft */
  filter: blur(3px);
}

.verborgen {
  display: none !important;
}

#spiel-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Alles, worauf Text steht, bekommt eine eigene (fast deckende) Fläche - so
   bleibt der Text genauso gut lesbar wie vorher, egal wie hell die Stelle im
   Hintergrundbild gerade ist. Das Bild wirkt dafür in den Zwischenräumen
   und schimmert nur dezent durch. */
#kopfzeile {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-bottom: 2px solid #33333d;
  padding: 8px 12px;
  background: rgba(16, 16, 22, 0.86);
  backdrop-filter: blur(6px);
  border-radius: 6px 6px 0 0;
}

#kopfzeile h1 {
  margin: 0;
  font-size: 1.4rem;
  color: #ffd23f;
}

#etagen-anzeige {
  color: #9f9fad; /* eine Spur heller als früher (#9a9aa8) - gleicht die leicht
                     durchscheinende Kopfzeile aus, siehe README */
  font-weight: bold;
}

#stumm-knopf {
  margin-left: auto;
  background: #16161d;
  border: 1px solid #2c2c36;
  border-radius: 6px;
  font-size: 1.1rem;
  padding: 4px 10px;
  cursor: pointer;
  color: #e0e0e6;
}

#stumm-knopf:hover {
  border-color: #ffd23f;
}

#hauptbereich {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

#karten-bereich {
  flex: 1 1 640px;
  min-width: 0;
}

#display {
  border: 2px solid #2c2c36;
  border-radius: 4px;
  overflow: auto;
  background: #0d0d12;
  line-height: 0; /* verhindert Extra-Abstand unter dem rot.js-Canvas */
}

#display canvas {
  max-width: 100%;
  height: auto;
}

#steuerung-hinweis {
  color: #828291; /* leicht heller als früher (#7d7d8c), siehe Kopfzeile */
  font-size: 0.85rem;
  margin: 8px 0 0;
  padding: 6px 10px;
  background: rgba(16, 16, 20, 0.86);
  backdrop-filter: blur(6px);
  border-radius: 6px;
}

#seitenpanel {
  flex: 0 1 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 220px;
}

#seitenpanel section {
  background: rgba(22, 22, 29, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid #2c2c36;
  border-radius: 6px;
  padding: 10px 12px;
}

#seitenpanel h2 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9090a4;
}

.hp-balken {
  width: 100%;
  height: 10px;
  background: #2a2a33;
  border-radius: 5px;
  overflow: hidden;
  margin: 4px 0 8px;
}

.hp-balken-fuellung {
  height: 100%;
  background: linear-gradient(90deg, #d64545, #ff8a5c);
  transition: width 0.2s ease;
}

.item-zeile {
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.item-zeile:hover {
  background: #22222c;
}

.item-zeile.angelegt {
  border-left: 3px solid #4da6ff;
  padding-left: 4px;
}

.hinweis {
  color: #707081;
  font-size: 0.85rem;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Latein-Fortschritt: ein zweifarbiger Balken (geübt = blau, gemeistert = gold)
   plus ein paar Zahlen darunter. Siehe aktualisiereFortschritt() in ui.js.
   --------------------------------------------------------------------------- */

.fortschritt-balken {
  position: relative;
  width: 100%;
  height: 10px;
  background: #2a2a33;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 8px;
}

/* Beide Füllungen starten links übereinander: der blaue "geübt"-Balken ist
   immer der längere, der goldene "gemeistert"-Balken liegt darüber. */
.fortschritt-geuebt,
.fortschritt-gemeistert {
  position: absolute;
  inset: 0 auto 0 0;
  transition: width 0.3s ease;
}

.fortschritt-geuebt {
  background: linear-gradient(90deg, #2f6ea8, #4da6ff);
}

.fortschritt-gemeistert {
  background: linear-gradient(90deg, #d99b1c, #ffd23f);
}

.fortschritt-zeile {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.85rem;
  color: #9b9ba9;
  padding: 1px 0;
}

.fortschritt-zeile strong {
  color: #e0e0e6;
  font-variant-numeric: tabular-nums;
}

#fortschritt-panel .hinweis {
  margin-top: 8px;
  font-size: 0.78rem;
}

/* ---------------------------------------------------------------------------
   Run-Panel: neuen Durchlauf starten (der alte geht dabei verloren).
   --------------------------------------------------------------------------- */

#neuer-run-knopf {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.85rem;
  line-height: 1.3;
  border-radius: 6px;
  border: 1px solid #4a4a58;
  background: #20202a;
  color: #e0e0e6;
  cursor: pointer;
  text-align: left;
}

#neuer-run-knopf:hover {
  background: #331f22;
  border-color: #d64545;
  color: #ffb3b3;
}

#nachrichten-log {
  /* Das Log sitzt IN der Kartenspalte, direkt unter dem Steuerungs-Hinweis
     (siehe Kommentar in index.html) - den Abstand nach oben muss es sich
     deshalb selbst geben. */
  margin-top: 10px;
  background: rgba(16, 16, 20, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid #2c2c36;
  border-radius: 6px;
  padding: 8px 12px;
  height: 130px;
  overflow-y: auto;
  font-size: 0.85rem;
  color: #b8b8c5;
}

#nachrichten-log div {
  padding: 1px 0;
}

/* --- Latein-Fragefenster (Modal) --- */
#quiz-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 8, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

#quiz-box {
  background: #16161d;
  border: 2px solid #ffd23f;
  border-radius: 10px;
  padding: 24px 28px;
  max-width: 90vw;
  width: 420px;
  text-align: center;
}

#quiz-frage {
  font-size: 1.1rem;
  margin: 0 0 16px;
  color: #f0f0f5;
}

#quiz-eingabe {
  width: 100%;
  padding: 8px 10px;
  font-size: 1rem;
  border-radius: 5px;
  border: 1px solid #4a4a58;
  background: #0d0d12;
  color: #f0f0f5;
  margin-bottom: 10px;
}

#quiz-absenden {
  padding: 8px 20px;
  font-size: 0.95rem;
  border: none;
  border-radius: 5px;
  background: #ffd23f;
  color: #1a1a1a;
  font-weight: bold;
  cursor: pointer;
}

#quiz-absenden:hover {
  background: #ffdd6b;
}

/* --- Achievement-Popup --- */
#achievement-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #1f1f28;
  border: 2px solid #ff9f1c;
  color: #ffd9a0;
  padding: 12px 18px;
  border-radius: 8px;
  max-width: 320px;
  font-size: 0.9rem;
  z-index: 30;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

@media (max-width: 720px) {
  #hauptbereich {
    flex-direction: column;
  }
  #seitenpanel {
    flex: 1 1 auto;
  }
}

/* ===========================================================================
   Rundenbasierter Kampfbildschirm (Final-Fantasy-artig), siehe kampf.js/ui.js
   =========================================================================== */

#kampf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 7, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  padding: 12px;
}

#kampf-panel {
  background: #14141b;
  border: 2px solid #ffd23f;
  border-radius: 12px;
  padding: 18px 20px;
  width: 480px;
  max-width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

#kampf-buehne {
  position: relative; /* damit #kampf-flieger absolut darin positioniert werden kann */
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kampf-teilnehmer {
  background: #1c1c25;
  border: 1px solid #2c2c36;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}

#kampf-gegner-emoji {
  font-size: 3rem;
  line-height: 1;
}

#kampf-spieler-emoji {
  font-size: 2.2rem;
  line-height: 1;
}

#kampf-gegner-name,
.kampf-teilnehmer-name {
  font-weight: bold;
  color: #f0f0f5;
  margin: 4px 0;
}

.kampf-balken-rahmen {
  width: 100%;
  height: 12px;
  background: #2a2a33;
  border-radius: 6px;
  overflow: hidden;
  margin: 4px 0;
}

.kampf-balken-fuellung {
  height: 100%;
  transition: width 0.4s ease;
}

.kampf-balken-fuellung.kampf-hp {
  background: linear-gradient(90deg, #d64545, #ff8a5c);
}

.kampf-balken-fuellung.kampf-mp {
  background: linear-gradient(90deg, #3a6fd6, #6bb8ff);
}

.kampf-balken-text {
  font-size: 0.8rem;
  color: #9a9aa8;
}

/* Bildschirm-Wackeln bei einem Treffer */
@keyframes kampf-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.kampf-wackeln {
  animation: kampf-shake 0.3s ease-in-out;
}

/* Kurzer weißer Blitz auf dem getroffenen Teilnehmer */
@keyframes kampf-treffer-flash {
  0% { filter: brightness(2.2) saturate(0); border-color: #fff; }
  100% { filter: brightness(1); }
}
.kampf-treffer-animation {
  animation: kampf-treffer-flash 0.25s ease-out;
}

/* Der Gegner "hüpft" leicht nach vorne, wenn ER angreift */
@keyframes kampf-lunge {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(14px) scale(1.08); }
}
.kampf-lunge-animation {
  animation: kampf-lunge 0.35s ease-in-out;
}

/* Fliegende Schadens-/Heilzahlen */
#kampf-flieger {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

@keyframes kampf-float-up {
  0% { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, -46px); opacity: 0; }
}
.kampf-flug-text {
  position: absolute;
  font-weight: bold;
  font-size: 1.3rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  animation: kampf-float-up 0.9s ease-out forwards;
  transform: translate(-50%, 0);
}
.kampf-schaden { color: #ff6b6b; }
.kampf-heilung { color: #6bffb0; }

#kampf-nachricht {
  min-height: 1.4em;
  margin: 12px 0 4px;
  color: #d8d8e2;
  font-size: 0.95rem;
  text-align: center;
  transition: color 0.15s ease;
}
#kampf-nachricht.kampf-nachricht-richtig { color: #6bffb0; }
#kampf-nachricht.kampf-nachricht-falsch { color: #ff8a8a; }

/* --- Countdown-Balken (Entscheidungs- und Antwort-Timer) --- */
.kampf-timer-rahmen {
  width: 100%;
  height: 8px;
  background: #2a2a33;
  border-radius: 4px;
  overflow: hidden;
  margin: 6px 0 2px;
}
.kampf-timer-balken {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #4da6ff, #6bb8ff);
  /* Breite ändert sich sehr oft (alle 100ms) - eine CSS-Transition würde hier
     eher ruckeln als glätten, deshalb bewusst OHNE transition. */
}
.kampf-timer-balken.kampf-timer-warnung {
  background: linear-gradient(90deg, #d64545, #ff8a5c);
  animation: kampf-timer-pulsieren 0.5s ease-in-out infinite;
}
@keyframes kampf-timer-pulsieren {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.kampf-timer-text {
  font-size: 0.75rem;
  color: #8f8fa3;
  text-align: right;
  margin: 0 0 8px;
}

#kampf-entscheidung-timer-wrapper {
  margin-bottom: 4px;
}

/* --- Mehrfach-Fragen-Fenster (1-3 Fragen auf einmal, je mit eigenem Feld) --- */
#kampf-fragen-box {
  background: #1c1c25;
  border: 1px solid #ffd23f;
  border-radius: 8px;
  padding: 14px;
  margin: 8px 0;
}

#kampf-fragen-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.kampf-frage-eintrag label {
  display: block;
  color: #f0f0f5;
  font-size: 0.92rem;
  margin-bottom: 4px;
}

.kampf-frage-eintrag-eingabe {
  width: 100%;
  padding: 8px 10px;
  font-size: 1rem;
  border-radius: 5px;
  border: 1px solid #4a4a58;
  background: #0d0d12;
  color: #f0f0f5;
}

#kampf-fragen-absenden {
  display: block;
  width: 100%;
  padding: 9px 20px;
  font-size: 0.95rem;
  border: none;
  border-radius: 5px;
  background: #ffd23f;
  color: #1a1a1a;
  font-weight: bold;
  cursor: pointer;
}
#kampf-fragen-absenden:hover {
  background: #ffdd6b;
}

/* --- Feedback-Liste (kurz nach dem Absenden: was war richtig/falsch) --- */
#kampf-feedback-box {
  background: #1c1c25;
  border: 1px solid #4a4a58;
  border-radius: 8px;
  padding: 14px;
  margin: 8px 0;
  text-align: center;
}
#kampf-feedback-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
}
.kampf-feedback-zeile {
  padding: 4px 8px;
  border-radius: 5px;
  text-align: left;
}
.kampf-feedback-zeile.richtig {
  background: rgba(107, 255, 176, 0.1);
  color: #6bffb0;
}
.kampf-feedback-zeile.falsch {
  background: rgba(255, 107, 107, 0.1);
  color: #ff8a8a;
}
/* Die richtige Lösung soll auf den ersten Blick auffallen - deutlich heller
   und fett, damit man sie sich beim Weiterlesen merken kann. */
.kampf-feedback-loesung {
  color: #ffd23f;
  font-weight: bold;
}

#kampf-feedback-weiter-knopf {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 9px;
  font-size: 0.95rem;
  border: none;
  border-radius: 5px;
  background: #ffd23f;
  color: #1a1a1a;
  font-weight: bold;
  cursor: pointer;
}
#kampf-feedback-weiter-knopf:hover:not(:disabled) {
  background: #ffdd6b;
}
#kampf-feedback-weiter-knopf:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.kampf-feedback-hinweis {
  margin: 8px 0 0;
  color: #6f6f80;
  font-size: 0.78rem;
}

#kampf-menue {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.kampf-aktion-btn {
  padding: 10px 8px;
  border-radius: 6px;
  border: 1px solid #3a3a46;
  background: #20202a;
  color: #e0e0e6;
  cursor: pointer;
  font-size: 0.85rem;
}
.kampf-aktion-btn:hover:not(:disabled) {
  background: #2a2a38;
  border-color: #ffd23f;
}
.kampf-aktion-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (max-width: 520px) {
  #kampf-panel {
    padding: 14px;
  }
  #kampf-gegner-emoji {
    font-size: 2.4rem;
  }
  #kampf-menue {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===========================================================================
   Schmiede: Runen einsetzen + Wortbildungs-Crafting (Meilenstein 7)
   =========================================================================== */

#schmiede-knopf {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.9rem;
  border-radius: 6px;
  border: 1px solid #4a4a58;
  background: #20202a;
  color: #e0e0e6;
  cursor: pointer;
}
#schmiede-knopf:hover {
  background: #2a2a38;
  border-color: #ffd23f;
}

#schmiede-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 7, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 12px;
}

#schmiede-box {
  background: #14141b;
  border: 2px solid #ffd23f;
  border-radius: 12px;
  padding: 18px 20px;
  width: 460px;
  max-width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

#schmiede-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

#schmiede-tabs {
  display: flex;
  gap: 6px;
}

.schmiede-tab-btn {
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid #3a3a46;
  background: #20202a;
  color: #9a9aa8;
  cursor: pointer;
  font-size: 0.85rem;
}
.schmiede-tab-btn.aktiv {
  background: #2a2a38;
  border-color: #ffd23f;
  color: #f0f0f5;
}

#schmiede-schliessen-knopf {
  background: transparent;
  border: none;
  color: #9a9aa8;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 2px 8px;
}
#schmiede-schliessen-knopf:hover {
  color: #ff8a8a;
}

.schmiede-tab-inhalt label {
  display: block;
  margin-bottom: 10px;
  color: #d8d8e2;
  font-size: 0.85rem;
}

.schmiede-tab-inhalt select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 7px 8px;
  border-radius: 5px;
  border: 1px solid #4a4a58;
  background: #0d0d12;
  color: #f0f0f5;
  font-size: 0.9rem;
}

.schmiede-tab-inhalt button {
  width: 100%;
  padding: 9px;
  margin-top: 4px;
  font-size: 0.95rem;
  border: none;
  border-radius: 5px;
  background: #ffd23f;
  color: #1a1a1a;
  font-weight: bold;
  cursor: pointer;
}
.schmiede-tab-inhalt button:hover {
  background: #ffdd6b;
}

.schmiede-status {
  min-height: 1.3em;
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: #d8d8e2;
}
.schmiede-status.erfolg {
  color: #6bffb0;
}
.schmiede-status.fehler {
  color: #ff8a8a;
}

@media (max-width: 520px) {
  #schmiede-box {
    padding: 14px;
  }
}

/* ===========================================================================
   Startbildschirm (Intro): großes Titelbild + INTRA-Knopf
   =========================================================================== */

/* Solange der Startbildschirm zu sehen ist, darf die Seite nicht scrollen -
   sonst könnte man das Bild "wegscrollen". Wird per JS entfernt, sobald
   INTRA gedrückt wird (siehe ui.js initIntro). */
body.intro-aktiv {
  overflow: hidden;
  height: 100vh;
}

#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 200; /* über ALLEM anderen, auch über Kampf-/Schmiede-Overlays */
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#intro-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* füllt den ganzen Bildschirm, egal welches Seitenverhältnis */
  object-position: center;
}

#intro-inhalt {
  position: relative;
  z-index: 1;
  margin-top: 30vh; /* schiebt Knopf+Hinweis in den unteren Bereich des Bildes */
  text-align: center;
}

#intro-knopf {
  font-family: inherit;
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  padding: 14px 46px;
  border-radius: 8px;
  border: 2px solid #ffd23f;
  background: linear-gradient(180deg, #ffe37a, #d9a520);
  color: #2a1a00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 20px rgba(255, 210, 63, 0.55), 0 4px 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  animation: intro-knopf-pulsieren 2.2s ease-in-out infinite;
}
#intro-knopf:hover {
  background: linear-gradient(180deg, #fff0b0, #ffd23f);
}
@keyframes intro-knopf-pulsieren {
  0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 210, 63, 0.55), 0 4px 10px rgba(0, 0, 0, 0.5); }
  50% { transform: scale(1.04); box-shadow: 0 0 32px rgba(255, 210, 63, 0.85), 0 4px 14px rgba(0, 0, 0, 0.6); }
}

#intro-hinweis {
  margin: 10px 0 0;
  color: #f0e6c8;
  font-size: 0.9rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

@media (max-width: 520px) {
  #intro-knopf {
    font-size: 1.25rem;
    padding: 10px 30px;
  }
  #intro-inhalt {
    margin-top: 22vh;
  }
}

/* ===========================================================================
   Erfolgs-Animation: "OPTIME!"-Burst bei einem KOMPLETT richtig
   beantworteten Angriff (siehe kampf.js fuehreAngriffAus + ui.js kampfSuccessAnimation)
   =========================================================================== */

.kampf-erfolg-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #ffd23f;
  text-shadow: 0 0 12px rgba(255, 210, 63, 0.9), 0 0 32px rgba(255, 210, 63, 0.6), 2px 2px 0 #7a4a00;
  z-index: 70; /* über der normalen Kampf-Bühne */
  pointer-events: none;
  white-space: nowrap;
  animation: kampf-erfolg-text 1.3s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}

@keyframes kampf-erfolg-text {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  15% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  25% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  75% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
}

.kampf-erfolg-funke {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.1rem;
  animation: kampf-erfolg-funke 0.9s ease-out forwards;
  pointer-events: none;
}
@keyframes kampf-erfolg-funke {
  0% { transform: rotate(var(--winkel)) translateX(0) scale(0.4); opacity: 1; }
  100% { transform: rotate(var(--winkel)) translateX(var(--entfernung)) scale(1); opacity: 0; }
}

/* Goldener Screen-Flash über die ganze Kampf-Bühne bei einem perfekten Angriff. */
@keyframes kampf-erfolg-flash {
  0% { filter: brightness(1); }
  15% { filter: brightness(2.3) saturate(1.3); }
  100% { filter: brightness(1); }
}
.kampf-erfolg-flash {
  animation: kampf-erfolg-flash 0.5s ease-out;
}

/* Größere, goldene Schadenszahl bei einem perfekten (alles-richtig) Treffer. */
.kampf-schaden-perfekt {
  color: #ffd23f !important;
  font-size: 1.8rem;
  text-shadow: 0 0 10px rgba(255, 210, 63, 0.85);
}