/* Kampfbühne im Pokémon-Stil (Blau/Rot): Gegner oben rechts auf einer Plattform, aktiver Kämpfer unten links von hinten,
   keine Balken/Karten, die Figuren verdecken oder die Szene trennen. Unten ein Textfeld (Frage/Menü) über der Party-Leiste.
   Alle Regeln hängen an #combatOverlay (ID schlägt die vielen älteren Mobil-/Desktop-Regeln in style.css). --bs = Figurskalierung (battle-stage.js). */
#combatOverlay:has(.combat-patient-panel) {
  position: absolute; inset: 78px 8px 8px 8px; z-index: 3;
  display: grid; flex-direction: unset;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  --bx-boxh: clamp(200px, 30dvh, 320px);   /* feste Höhe des Textfelds: Menü, Frage, Antworten und Gegnerzug teilen sich dieselbe Größe → die Bühne bleibt konstant (kein Zusammenstauchen, nichts „schwimmt“) */
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) var(--bx-boxh) auto;
  grid-template-areas: "eplate enemy" "player pplate" "box box" "party party";
  gap: 4px 10px; padding: 0; overflow: hidden; pointer-events: none;
}
@media (min-width: 701px) { #combatQuizOverlay { display: none !important; } }   /* Desktop: Frage steht im Textfeld der Bühne; Handy: Vollbild-Popup (unten) */

/* ── Gegner (oben rechts) ── */
#combatOverlay:has(.combat-patient-panel) .combat-patient-panel { display: contents !important; }
#combatOverlay .combat-patient {
  display: block !important; grid-area: enemy; position: relative; min-height: 0; min-width: 0;
  align-self: stretch; justify-self: stretch; animation: none; pointer-events: none;
}
#combatOverlay .combat-patient::before {   /* Plattform */
  content: ""; position: absolute; left: 50%; bottom: 2%; width: calc(54px * var(--bs, 1.6) * 1.5); height: calc(54px * var(--bs, 1.6) * 0.34);
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.28), rgba(0, 0, 0, 0.35) 70%); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
#combatOverlay .combat-patient .patient-pixel {
  position: absolute; left: 50%; bottom: calc(54px * var(--bs, 1.6) * 0.1); margin: 0 0 0 -27px; transform: none; scale: var(--bs, 1.6); transform-origin: 50% 100%;
}
#combatOverlay .combat-patient .prop { display: none; }
#combatOverlay .combat-patient > div[class*="-wrap"] { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%) scale(0.8); transform-origin: 50% 100%; }   /* Bosse: eigene Größe */

/* Gegner-Plakette (oben links): Name + Versorgungsbedarf */
#combatOverlay .patient-brief {
  grid-area: eplate; align-self: start; justify-self: start; max-width: 100%; pointer-events: none;
  background: rgba(255, 252, 240, 0.97); border: 3px solid var(--cs-ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--cs-ink);
  padding: 7px 12px 8px; min-width: min(240px, 100%); gap: 4px; color: var(--cs-ink);
}
#combatOverlay .patient-brief strong { font-size: 0.98rem; }
#combatOverlay .patient-brief p { display: none; }
#combatOverlay .patient-need-label { font-size: 0.7rem; font-weight: 800; display: flex; justify-content: space-between; gap: 10px; }

/* Sprechblase des Gegners: neben dem Kopf, Pfeil zeigt nach unten zum Sprecher */
#combatOverlay .enemy-bubble {
  position: absolute; right: 50%; bottom: calc(54px * var(--bs, 1.6) * 0.66); margin-right: calc(20px * var(--bs, 1.6) * 0.5);
  max-width: min(300px, 78%); width: max-content; z-index: 4; pointer-events: none;
  background: #fffdf6; border: 2.5px solid var(--cs-ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--cs-ink);
  padding: 8px 12px; font: 800 0.82rem/1.25 inherit; color: var(--cs-ink); text-align: left; animation: bxPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#combatOverlay .enemy-bubble::after {
  content: ""; position: absolute; bottom: -8px; right: 16px; width: 12px; height: 12px; background: #fffdf6;
  border-right: 2.5px solid var(--cs-ink); border-bottom: 2.5px solid var(--cs-ink); transform: rotate(45deg);
}
@keyframes bxPop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
/* Sprechen: Kopf wippt im Takt; Geste kommt über .idle-act-wave / .idle-act-shrug (avatar-idle.css) */
@keyframes bxTalk { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1px; } }
#combatOverlay .combat-patient.talking .px-hair, #combatOverlay .combat-patient.talking .px-face, #combatOverlay .combat-patient.talking .px-mouth { animation: bxTalk 0.32s steps(2, end) infinite; }
/* Angriff: Ausfallschritt zum Team */
@keyframes bxLunge { 0%, 100% { translate: 0 0; } 35%, 65% { translate: -70% 34%; } }
#combatOverlay .combat-patient.is-lunging .patient-pixel, #combatOverlay .combat-patient.is-lunging > div[class*="-wrap"] { animation: bxLunge 1.1s ease-in-out; }

/* ── Aktiver Kämpfer (unten links, von hinten) ── */
#combatOverlay .combatant { display: contents !important; }
#combatOverlay .combatant > .pixel-avatar {
  grid-area: player; align-self: end; justify-self: start; position: relative; margin: 0 0 calc(74px * var(--bs, 1.6) * 0.08) calc(27px * var(--bs, 1.6) * 0.6);
  scale: calc(var(--bs, 1.6) * 0.96); transform-origin: 0 100%; z-index: 2; pointer-events: none;
}
#combatOverlay .bx-plat { grid-area: player; align-self: end; justify-self: start; width: calc(54px * var(--bs, 1.6) * 1.9); height: calc(54px * var(--bs, 1.6) * 0.42); border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.28), rgba(0, 0, 0, 0.35) 70%); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); margin-bottom: 0; }
@keyframes bxHit { 0%, 100% { translate: 0 0; } 20% { translate: -6px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; } }
#combatOverlay .combatant.is-hit > .pixel-avatar { animation: bxHit 0.5s ease-out; }
/* Plakette des Kämpfers (unten rechts neben der Figur): Name, LP, SP */
#combatOverlay .bx-plate {
  grid-area: pplate; align-self: end; justify-self: end; width: min(260px, 100%); pointer-events: none;
  background: rgba(255, 252, 240, 0.97); border: 3px solid var(--cs-ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--cs-ink);
  padding: 7px 12px 8px; color: var(--cs-ink); display: grid; gap: 2px;
}
#combatOverlay .bx-plate .combat-label { background: none; border: 0; box-shadow: none; margin: 0; padding: 0 0 2px; width: auto; font-size: 0.95rem; font-weight: 900; text-align: left; color: var(--cs-ink); }
#combatOverlay .bx-bar-l { font-size: 0.68rem; font-weight: 800; color: rgba(36, 28, 26, 0.75); }
#combatOverlay .bx-track { height: 8px; background: rgba(0, 0, 0, 0.18); border-radius: 5px; overflow: hidden; }
#combatOverlay .bx-fill { height: 100%; background: linear-gradient(90deg, #3fb87a, #7ad96b); border-radius: 5px; transition: width 0.4s; }
#combatOverlay .bx-fill.mid { background: linear-gradient(90deg, #e0a12a, #f2c94c); }
#combatOverlay .bx-fill.low { background: linear-gradient(90deg, #d6453d, #ef6f6c); }
#combatOverlay .bx-fill.sp { background: linear-gradient(90deg, #2e86c1, #5aa9e6); }

/* ── Textfeld unten: Frage, Menü, Antworten (aufgeklappt, 2 Spalten) ── */
#combatOverlay .combat-choice-panel {
  grid-area: box; align-self: end; min-height: 0; max-height: 52dvh; overflow-y: auto; pointer-events: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, #fdf3e1 0%, #fbe7c8 100%); border: 3px solid var(--cs-ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--cs-ink);
  padding: 10px 12px; gap: 8px; display: flex; flex-direction: column;
}
#combatOverlay .combat-choice-panel h3 { margin: 0; font-size: 0.82rem; }
#combatOverlay .combat-choice-panel .combat-question { font-size: 1rem; padding: 8px 12px; }
#combatOverlay .combat-choice-panel .combat-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: 0 0 auto; overflow: visible; padding: 0; }
#combatOverlay .combat-choice-panel .combat-options .option { min-height: 44px; padding: 8px 12px; font-size: 0.9rem; }
@media (max-width: 560px) { #combatOverlay .combat-choice-panel .combat-options { grid-template-columns: 1fr; } }
#combatOverlay .enemy-action-stage.bx-note { min-height: 0; padding: 4px 6px; background: none; border: 0; display: block; overflow: visible; }
#combatOverlay .enemy-action-stage.bx-note p { margin: 0; font-size: 0.95rem; text-align: left; }

/* Party-Leiste bleibt unten (Status), ohne die Szene zu überdecken */
#combatOverlay .combat-party-bar { grid-area: party; align-self: end; pointer-events: auto; }

/* ── Schmale Bildschirme (Handy hochkant): Plakette in eigener Zeile, Gegner rechts im breiten Feld, Sprechblase links davon ── */
@media (max-width: 560px) {
  #combatOverlay:has(.combat-patient-panel) {
    --bx-boxh: clamp(172px, 22dvh, 200px);
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) var(--bx-boxh) auto;
    grid-template-areas: "eplate eplate" "enemy enemy" "player pplate" "box box" "party party";
  }
  #combatOverlay .patient-brief { justify-self: stretch; }
  #combatOverlay .combat-patient::before { left: 74%; }
  #combatOverlay .combat-patient .patient-pixel { left: 74%; }
  #combatOverlay .combat-patient > div[class*="-wrap"] { left: 74%; }
  #combatOverlay .enemy-bubble { right: calc(26% + 6px); margin-right: calc(20px * var(--bs, 1.6) * 0.5); max-width: 62%; font-size: 0.78rem; }
  #combatOverlay .combat-choice-panel { max-height: 46dvh; }
}

/* ── Sprechblase: seitlich vom Kopf, Pfeil zeigt waagerecht zum Mund des Gegners ── */
#combatOverlay .enemy-bubble {
  right: calc(50% + 21px * var(--bs, 1.6)); bottom: calc(63px * var(--bs, 1.6)); margin-right: 0; translate: 0 50%;
}
#combatOverlay .enemy-bubble::after {
  bottom: auto; right: -8px; top: 50%; margin-top: -6px; width: 12px; height: 12px;
  border: 0; border-top: 2.5px solid var(--cs-ink); border-right: 2.5px solid var(--cs-ink); transform: rotate(45deg);
}
@media (max-width: 560px) {
  #combatOverlay .enemy-bubble { right: calc(26% + 21px * var(--bs, 1.6)); margin-right: 0; }
}

/* ── Richtige Antwort: Gegner flackert, Smiley erscheint kurz, Kämpfer zeigt mit dem rechten Arm Daumen hoch ── */
@keyframes bxFlicker { 0%, 100% { opacity: 1; } 8% { opacity: 0.1; } 16% { opacity: 1; } 28% { opacity: 0.2; } 38% { opacity: 1; } 52% { opacity: 0.45; } 64% { opacity: 1; } }
#combatOverlay .combat-patient.bx-pleased .patient-pixel, #combatOverlay .combat-patient.bx-pleased > div[class*="-wrap"] { animation: bxFlicker 0.9s steps(1, end) both; animation-delay: var(--bx-age, 0s); }
@keyframes bxEmote { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.4); } 22% { opacity: 1; transform: translate(-50%, -4px) scale(1.2); } 70% { opacity: 1; transform: translate(-50%, -14px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -26px) scale(1); } }
#combatOverlay .bx-emote {
  position: absolute; left: 50%; bottom: calc(78px * var(--bs, 1.6)); font-size: calc(17px * var(--bs, 1.6)); line-height: 1; z-index: 5; pointer-events: none;
  animation: bxEmote 1.3s ease-out both; animation-delay: var(--bx-age, 0s); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}
@media (max-width: 560px) { #combatOverlay .bx-emote { left: 74%; } }
@keyframes bxThumbArm { 0% { rotate: 0deg; } 18% { rotate: -128deg; } 30% { rotate: -138deg; } 42% { rotate: -128deg; } 78% { rotate: -128deg; } 100% { rotate: 0deg; } }
#combatOverlay .combatant.bx-thumbs > .pixel-avatar .px-arm-right { animation: bxThumbArm 1.4s ease-in-out both; animation-delay: var(--bx-age, 0s); z-index: 6; }
@keyframes bxThumbPop { 0% { opacity: 0; transform: scale(0.3) translateY(8px); } 22% { opacity: 1; transform: scale(1.3) translateY(-4px); } 75% { opacity: 1; transform: scale(1) translateY(-10px); } 100% { opacity: 0; transform: scale(1) translateY(-22px); } }
#combatOverlay .bx-thumb {
  grid-area: player; align-self: end; justify-self: start; position: relative; z-index: 5; pointer-events: none; line-height: 1;
  margin: 0 0 calc(74px * var(--bs, 1.6) * 0.9) calc(54px * var(--bs, 1.6) * 1.1); font-size: calc(18px * var(--bs, 1.6));
  animation: bxThumbPop 1.4s ease-out both; animation-delay: var(--bx-age, 0s);
}
#combatOverlay .combatant.bx-thumbs > .pixel-avatar { animation: bxHop 0.5s ease-out both; animation-delay: var(--bx-age, 0s); }
@keyframes bxHop { 0%, 100% { translate: 0 0; } 40% { translate: 0 -8px; } }

/* Fortschrittszahl (+N) erscheint über dem Gegner statt in der Bildschirmmitte */
body.in-combat .progress-hit-pop { left: 74%; top: 24%; }
@media (min-width: 561px) { body.in-combat .progress-hit-pop { left: 75%; top: 22%; } }

/* ── Handy: Frage + Antworten als Vollbild-Popup ── */
@media (max-width: 700px) {
  .combat-quiz-overlay { padding: 0; align-items: stretch; background: rgba(8, 13, 24, 0.94); }
  .combat-quiz-overlay .combat-quiz-card { width: 100%; height: 100%; max-height: none; border-radius: 0; border: 0; padding: 18px 14px calc(18px + env(safe-area-inset-bottom)); box-shadow: none; }
  .combat-quiz-card .combat-options { flex: 1 1 auto; align-content: start; }
  .combat-quiz-card .combat-question { font-size: 1.12rem; }
  .combat-quiz-card .combat-options .option { min-height: 70px; font-size: 1.05rem; }
}

/* ── Migration der alten Kampfanimationen in die Bühne ── */
/* Schaden: Zahl steigt über dem getroffenen Kämpfer auf (statt Karte in der Bildschirmmitte / Handy-Pop) */
#combatOverlay .damage-toast { display: none !important; }
body.in-combat .mobile-damage-pop { display: none !important; }
@keyframes bxDmg { 0% { opacity: 0; transform: translateY(8px) scale(0.6); } 18% { opacity: 1; transform: translateY(-6px) scale(1.25); } 70% { opacity: 1; transform: translateY(-26px) scale(1); } 100% { opacity: 0; transform: translateY(-44px) scale(1); } }
#combatOverlay .bx-dmg {
  grid-area: player; align-self: end; justify-self: start; position: relative; z-index: 6; pointer-events: none;
  margin: 0 0 calc(74px * var(--bs, 1.6) * 0.95) calc(54px * var(--bs, 1.6) * 0.4);
  font: 900 calc(15px * var(--bs, 1.6)) "Arial Black", Arial, sans-serif; color: #ef4444; text-shadow: 0 2px 0 #fff, 0 0 8px rgba(0, 0, 0, 0.45);
  animation: bxDmg 1.5s ease-out both; animation-delay: var(--bx-age, 0s);
}
/* Kritischer Treffer: Gegner blitzt hell auf und wackelt */
@keyframes bxCritShake { 0%, 100% { translate: 0 0; } 15% { translate: -8px 0; } 30% { translate: 8px 0; } 45% { translate: -6px 0; } 60% { translate: 5px 0; } 80% { translate: -2px 0; } }
#combatOverlay .combat-patient.bx-crit .patient-pixel, #combatOverlay .combat-patient.bx-crit > div[class*="-wrap"] {
  animation: bxFlicker 0.9s steps(1, end) both, bxCritShake 0.55s ease-out both; animation-delay: var(--bx-age, 0s), var(--bx-age, 0s); filter: brightness(1.7) saturate(1.3);
}
/* Versorgt: Patient hüpft vor Freude, ein Herz schwebt über ihm */
@keyframes bxHopLoop { 0%, 100% { translate: 0 0; } 30% { translate: 0 -9%; } 55% { translate: 0 0; } 75% { translate: 0 -4%; } }
#combatOverlay .combat-patient.bx-cleared .patient-pixel { animation: bxHopLoop 1.2s ease-in-out 2; }
#combatOverlay .bx-cleared-emote { animation: bxEmoteLoop 2.2s ease-in-out infinite; }
@keyframes bxEmoteLoop { 0%, 100% { opacity: 0.9; transform: translate(-50%, 0) scale(1); } 50% { opacity: 1; transform: translate(-50%, -10px) scale(1.12); } }
/* Kombo-Anzeige links über dem Kämpfer (nicht mehr mitten über der Szene) */
body.in-combat .combo-burst-pop { left: 30%; top: 40%; }

/* ── Bosse in der Bühne: Größe/Position setzt battle-stage.js (individuelle `scale`-Property, damit die eigenen Boss-Animationen mit `transform` weiterlaufen) ── */
#combatOverlay .combat-patient > div[class*="-wrap"] { position: absolute; left: 50%; bottom: 4%; transform: none; transform-origin: 50% 100%; margin: 0; }
#combatOverlay .combat-patient::before { width: var(--bx-pw, calc(54px * var(--bs, 1.6) * 1.5)); }
#combatOverlay .enemy-bubble { bottom: var(--bx-head, calc(63px * var(--bs, 1.6))); right: calc(50% + var(--bx-hw, calc(21px * var(--bs, 1.6)))); }
#combatOverlay .bx-emote { bottom: var(--bx-top, calc(78px * var(--bs, 1.6))); }
@media (max-width: 560px) {
  #combatOverlay .combat-patient::before { left: 74%; }
  #combatOverlay .combat-patient > div[class*="-wrap"] { left: 74%; }
  #combatOverlay .enemy-bubble { right: calc(26% + var(--bx-hw, calc(21px * var(--bs, 1.6)))); }
}

/* ── Alte Kampf-Banner in die Bühne migriert: kleiner, über dem Gegner bzw. Kämpfer statt mitten über dem Bildschirm ──
   (individuelle `scale`-Property, damit die Keyframes mit `transform` weiterlaufen) */
body.in-combat .crit-flash, body.in-combat .overcare-flash, body.in-combat .miss-flash { left: 60%; top: 24%; scale: 0.5; }
body.in-combat .double-move-flash { left: 30%; top: 30%; scale: 0.5; }
body.in-combat .damage-screen-flash { opacity: 0.45; }
@media (max-width: 700px) {
  body.in-combat .crit-flash, body.in-combat .overcare-flash, body.in-combat .miss-flash { left: 62%; top: 20%; scale: 0.42; }
  body.in-combat .double-move-flash { left: 38%; top: 36%; scale: 0.42; }
}

/* ── Spezial-Animationen im Kampf: kein schwarzes Vollbild mehr, sondern kompakte Karte über der Bühne ── */
body.in-combat .sa-overlay { background: radial-gradient(ellipse at 50% 38%, rgba(8, 17, 31, 0.18), rgba(8, 17, 31, 0.5)); align-items: flex-start; padding-top: 12vh; backdrop-filter: blur(1.5px); }
body.in-combat .sa-card { width: min(300px, 88vw); padding: 12px 14px 12px; border-radius: 12px; box-shadow: 4px 4px 0 var(--cs-ink); animation: bxSaIn 0.28s cubic-bezier(.34, 1.56, .64, 1) both; }
body.in-combat .sa-title { font-size: 1.05rem; margin-bottom: 8px; }
body.in-combat .sa-stage { min-height: 96px; }
body.in-combat .sa-weiter { margin-top: 10px; padding: 7px 22px; font-size: 0.92rem; }
@keyframes bxSaIn { from { opacity: 0; translate: 0 -14px; scale: 0.88; } to { opacity: 1; translate: 0 0; scale: 1; } }
@media (max-width: 700px) { body.in-combat .sa-overlay { padding-top: 16vh; } }

/* ── Begleiter-/Caveman-Aktionen auf der Bühne (früher Party-Leiste): Hop/Glow/Wackeln, Symbol, Sprechblase ── */
@keyframes bxMHop { 0% { translate: 0 0; } 35% { translate: 0 -14%; rotate: -3deg; } 70% { translate: 0 2%; } 100% { translate: 0 0; rotate: 0deg; } }
@keyframes bxMShake { 0%, 100% { translate: 0 0; } 20% { translate: -5% 0; rotate: -2deg; } 40% { translate: 5% 0; rotate: 2deg; } 60% { translate: -3% 0; } 80% { translate: 3% 0; } }
@keyframes bxMGlow { 0% { filter: drop-shadow(0 0 0 rgba(120, 220, 140, 0)); } 40% { filter: drop-shadow(0 0 14px rgba(120, 220, 140, 0.95)); translate: 0 -4%; } 100% { filter: drop-shadow(0 0 0 rgba(120, 220, 140, 0)); } }
#combatOverlay .combatant.bx-m-act > .pixel-avatar, #combatOverlay .combatant.bx-m-attack > .pixel-avatar, #combatOverlay .combatant.bx-m-summon > .pixel-avatar, #combatOverlay .combatant.bx-m-dance > .pixel-avatar { animation: bxMHop 0.55s ease-out both; animation-delay: var(--bx-mage, 0s); }
#combatOverlay .combatant.bx-m-miss > .pixel-avatar { animation: bxMShake 0.5s ease both; animation-delay: var(--bx-mage, 0s); }
#combatOverlay .combatant.bx-m-glow > .pixel-avatar { animation: bxMGlow 0.7s ease-out both; animation-delay: var(--bx-mage, 0s); }
@keyframes bxMIcon { 0% { opacity: 0; translate: 0 10px; scale: 0.4; } 25% { opacity: 1; translate: 0 -8px; scale: 1.25; } 70% { opacity: 1; translate: 0 -26px; scale: 1; } 100% { opacity: 0; translate: 0 -40px; scale: 0.9; } }
@keyframes bxMSay { 0% { opacity: 0; translate: 0 6px; } 12%, 85% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }
#combatOverlay .bx-m-icon { position: absolute; left: calc(54px * var(--bs, 1.6) * 0.5); bottom: calc(76px * var(--bs, 1.6)); font-size: calc(9px * var(--bs, 1.6)); z-index: 6; pointer-events: none; animation: bxMIcon 1.4s ease-out both; }
#combatOverlay .bx-m-say { position: absolute; left: calc(54px * var(--bs, 1.6) * 0.95); bottom: calc(60px * var(--bs, 1.6)); max-width: 190px; background: #fff; color: #241c1a; border: 2px solid #241c1a; border-radius: 10px; padding: 4px 8px; font-size: 0.74rem; font-weight: 700; line-height: 1.25; z-index: 7; pointer-events: none; animation: bxMSay 2.6s ease-out both; }
#combatOverlay .bx-m-icon, #combatOverlay .bx-m-say { grid-area: player; align-self: end; justify-self: start; position: relative; left: auto; }
#combatOverlay .bx-m-icon { bottom: auto; margin: 0 0 calc(74px * var(--bs, 1.6) * 0.95) calc(54px * var(--bs, 1.6) * 0.35); }
#combatOverlay .bx-m-say { bottom: auto; width: max-content; margin: 0 0 calc(62px * var(--bs, 1.6)) calc(54px * var(--bs, 1.6) * 1.05); }

/* Meldungen (Toasts) im Kampf: nicht über Gegner-Plakette/Kopfleiste, sondern kompakt in der Szenenmitte zwischen Gegner und Kämpfer */
body.in-combat .achievement-toast.show { top: 47%; width: min(340px, 90vw); padding: 6px 10px 9px; gap: 8px; opacity: 0.96; }
body.in-combat .achievement-toast-icon { font-size: 1.3rem; }
body.in-combat .achievement-toast-text { font-size: 0.74rem; line-height: 1.25; }
body.in-combat .achievement-toast-title { font-size: 0.58rem; }
/* … besser: einzeilig über der Kopfleiste (Initiative), verdeckt weder Plakette noch Figuren noch Menü */
body.in-combat .achievement-toast.show { top: 4px; width: min(360px, 94vw); padding: 3px 10px 6px; gap: 6px; min-height: 0; }
body.in-combat .achievement-toast-title { display: none; }
body.in-combat .achievement-toast-icon { font-size: 1.05rem; }
body.in-combat .achievement-toast-text { font-size: 0.7rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Angegriffen: Kämpfer flackert kurz rot auf, ein Frownie erscheint über ihm */
@keyframes bxHurtFlash { 0%, 40%, 80% { filter: brightness(1.25) sepia(1) saturate(7) hue-rotate(-50deg); } 20%, 60%, 100% { filter: none; } }
#combatOverlay .combatant.bx-hurt > .pixel-avatar { animation: bxHit 0.5s ease-out both, bxHurtFlash 0.9s steps(1, end) both; animation-delay: var(--bx-hage, 0s), var(--bx-hage, 0s); }
@keyframes bxFrown { 0% { opacity: 0; translate: 0 8px; scale: 0.4; } 20% { opacity: 1; translate: 0 -6px; scale: 1.3; } 75% { opacity: 1; translate: 0 -16px; scale: 1; } 100% { opacity: 0; translate: 0 -26px; scale: 0.9; } }
#combatOverlay .bx-frown { grid-area: player; align-self: end; justify-self: start; position: relative; z-index: 6; pointer-events: none; font-size: calc(9px * var(--bs, 1.6)); margin: 0 0 calc(74px * var(--bs, 1.6) * 0.95) calc(54px * var(--bs, 1.6) * 0.4); animation: bxFrown 1.5s ease-out both; }
/* Gegner-Plakette ein paar Pixel tiefer (nicht von der Initiativleiste verdeckt) */
#combatOverlay .patient-brief { margin-top: 12px; }
/* Handy: Sprechblase des Bosses darf nicht links aus dem Bild ragen */
@media (max-width: 560px) { #combatOverlay .enemy-bubble { max-width: calc(74% - var(--bx-hw, 40px) - 4px); min-width: 90px; } }

/* Warnsignal: aktiver Kämpfer hat ≤ 30 % LP → roter, pulsierender Rand (nur dafür ist Rot reserviert; Boss-Stimmung ist violett) */
@keyframes bxLowHp { 0%, 100% { box-shadow: inset 0 0 28px 6px rgba(220, 30, 40, 0.55); } 50% { box-shadow: inset 0 0 46px 12px rgba(235, 40, 50, 0.85); } }
body.in-combat .scene.combat.bx-lowhp { animation: bxLowHp 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { body.in-combat .scene.combat.bx-lowhp { animation: none; box-shadow: inset 0 0 36px 8px rgba(220, 30, 40, 0.7); } }

/* Konstante Bühnengröße: das Textfeld füllt seine feste Zeile (scrollt intern, wenn der Inhalt länger ist) */
#combatOverlay .combat-choice-panel { height: 100%; max-height: none; box-sizing: border-box; }
@media (max-width: 560px) { #combatOverlay .combat-choice-panel { max-height: none; } }

/* Verabschiedung im Kampf: Herzen steigen über dem Patienten auf, der Dank steht als Sprechblase */
#combatOverlay .bx-hearts { position: absolute; left: 0; right: 0; bottom: 8%; height: 80%; pointer-events: none; z-index: 5; overflow: visible; }
#combatOverlay .bx-heart { position: absolute; bottom: 0; left: var(--x, 50%); font-size: calc(var(--s, 1.2rem) * 1.5); opacity: 0; animation: bxHeartUp 2.4s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes bxHeartUp { 0% { opacity: 0; translate: 0 0; scale: 0.6; } 15% { opacity: 1; } 100% { opacity: 0; translate: var(--dx, 0px) -150%; scale: 1.15; } }
@media (max-width: 560px) { #combatOverlay .bx-hearts { left: 40%; } }
@media (prefers-reduced-motion: reduce) { #combatOverlay .bx-heart { animation: none; opacity: 0.9; } }

/* Tablet/Fold (601–980 px): die alten Einspalten-Regeln blenden Patienten-Sprite und Deko aus — in der Bühne gehört der Gegner IMMER ins Bild */
#combatOverlay .combat-patient .patient-pixel, #combatOverlay .combat-patient > div[class*="-wrap"] { display: block; }

/* Falsche Antwort: gewählte Option rot, die richtige kurz grün (wie bei der Quiztime) */
#combatOverlay .option.is-reveal, .combat-quiz-card .option.is-reveal { background: #bbf7d0; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.45), 3px 3px 0 var(--cs-ink); animation: bxReveal 0.5s ease-in-out 2; }
#combatOverlay .option.is-picked, .combat-quiz-card .option.is-picked { background: #fecaca; border-color: #dc2626; }
@keyframes bxReveal { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* ═══ Kompakter Kampf für schmale Hochformat-Fenster (Fold unfolded im Hochformat, kleine Phones) ═══
   Mehr Platz für die Kämpfer: Gegner-Plakette liegt über der Bühne (statt eigener Zeile), Textfeld und Zugfolge kleiner, Team/Hilfe-Leiste im Kampf aus. */
@media (max-width: 560px) {
  body.in-combat .menu-popup-bar { display: none !important; }
  body.in-combat .shell { padding-bottom: 0 !important; }
  #combatOverlay:has(.combat-patient-panel) {
    inset: 68px 6px 6px 6px;
    --bx-boxh: clamp(124px, 23dvh, 176px);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) var(--bx-boxh) auto;
    grid-template-areas: "enemy enemy" "player pplate" "box box" "party party";
    gap: 3px 6px;
  }
  #combatOverlay .patient-brief { grid-area: enemy; align-self: start; justify-self: start; width: min(56%, 220px); min-width: 0; margin-top: 2px; padding: 3px 8px 5px; z-index: 6; border-width: 2px; border-radius: 9px; box-shadow: 2px 2px 0 var(--cs-ink); gap: 2px; }
  #combatOverlay .patient-brief strong { font-size: 0.8rem; }
  #combatOverlay .patient-need-label { font-size: 0.6rem; }
  #combatOverlay .bx-plate { width: min(180px, 100%); padding: 4px 7px 5px; border-width: 2px; border-radius: 9px; box-shadow: 2px 2px 0 var(--cs-ink); }
  #combatOverlay .bx-plate .combat-label { font-size: 0.74rem; }
  #combatOverlay .bx-bar-l { font-size: 0.58rem; }
  #combatOverlay .bx-track { height: 6px; }
  /* Textfeld: kleiner, Menü zweispaltig */
  #combatOverlay .combat-choice-panel { padding: 5px 8px 6px; border-width: 2px; border-radius: 10px; box-shadow: 2px 2px 0 var(--cs-ink); gap: 4px; }
  #combatOverlay .combat-choice-panel h3 { font-size: 0.68rem; }
  #combatOverlay .combat-choice-panel p { font-size: 0.74rem; margin: 0; }
  #combatOverlay .combat-choice-panel .combat-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  #combatOverlay .combat-choice-panel .combat-options .option { min-height: 34px; padding: 4px 9px; font-size: 0.82rem; border-width: 2px; }
  #combatOverlay .combat-choice-panel .next { min-height: 34px; padding: 4px 16px; font-size: 0.84rem; }
  #combatOverlay .enemy-action-stage.bx-note p { font-size: 0.8rem; }
  /* Zugfolge oben kompakt */
  body.in-combat .initiative-strip.show { padding: 3px 6px; min-height: 0; }
  body.in-combat .initiative-strip.show .initiative-entry { width: 32px; height: 32px; border-width: 2px; border-radius: 8px; }
  body.in-combat .initiative-strip.show .initiative-entry.is-preview { width: 26px; height: 26px; }
  /* Party-Leiste kleiner */
  #combatOverlay .combat-party-bar .cpm { padding: 3px 7px 3px 4px; }
  #combatOverlay .combat-party-bar .cpm-face { width: 28px; height: 32px; }
  #combatOverlay .combat-party-bar .cpm-name { font-size: 0.7rem; }
  #combatOverlay .combat-party-bar .cpm-num { font-size: 0.58rem; }
}
@media (max-width: 560px) {
  body.in-combat .scene.combat .initiative-strip.show { padding: 2px 5px !important; top: 3px !important; }
  body.in-combat .scene.combat .initiative-strip.show .initiative-entry { width: 34px !important; height: 34px !important; }
  body.in-combat .scene.combat .initiative-strip.show .initiative-entry.is-preview { width: 26px !important; height: 26px !important; }
  body.in-combat .scene.combat .initiative-strip.show .init-round-sep { height: 28px !important; }
  #combatOverlay:has(.combat-patient-panel) { inset: 52px 6px 6px 6px; }
}