/* Edahnien CSS — autogeneriert aus edahnien.css */

body.combat-page .info-topbar { position: relative; z-index: 60; flex-shrink: 0; }

/* ── Screens (Intro / Battle / End als fixed-fullscreen Overlays) ── */
.combat-screen {
  position: fixed; inset: 0; display: none;
  flex-direction: column; z-index: 150;
  background: var(--bg-deep, #060904);
}
.combat-screen.active { display: flex; }

/* ── Battle-Layout ─────────────────────────────────────────────────── */
.combat-wrap {
  display: flex; flex-direction: column;
  height: 100vh; overflow: hidden;
  position: relative; z-index: 1;
}
/* Subtiles Hintergrundbild — identisches Muster wie .info-page::before.
   Gibt dem backdrop-filter der Topbar etwas Warmes zum Einblenden
   und lässt die Nav-Spalte genauso "durchscheinen" wie im info-template. */
.combat-wrap::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background: url('../assets/poi/wald_normal.png') center top / cover no-repeat;
  opacity: 0.18;
}
.battle-body { display: flex; flex: 1; overflow: hidden; min-height: 0; }

/* ── Nav-Sidebar — transparent wie info nav-col ────────────────────── */
.battle-nav {
  width: 200px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: transparent;
  border-right: 1px solid var(--line, rgba(134,239,172,0.10));
  padding: 8px 0 16px; overflow-y: auto; z-index: 20;
}
/* Navhead: identisch zu info-template */
.battle-nav .navhead {
  display: block;
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 12px 4px;
  margin-top: 4px;
}
/* Standard-Links: identisch zu a.nav */
.battle-nav a.nav,
.battle-nav span.nav {
  display: block;
  color: var(--ink-dim);
  font-size: 13px;
  padding: 5px 12px;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Hover — für <a> UND aktive <span>-Buttons (Auto-Kämpfen etc.) */
.battle-nav a.nav:hover,
.battle-nav span.nav:not(.dim):hover { background: rgba(255,255,255,0.06); color: var(--ink); }
/* Aktive Span-Buttons als klickbar kenntlich machen (sonst wie Text) */
.battle-nav span.nav:not(.dim) { cursor: pointer; user-select: none; }
.battle-nav span.nav:not(.dim):focus-visible { outline: 1px dashed var(--jade-bright, #4ade80); outline-offset: 2px; }
/* Dim — Phase-2-Placeholder oder JS-busy-State */
.battle-nav span.nav.dim { opacity: .30; cursor: default; pointer-events: none; }
/* Abort — Flucht/Abbrechen (für <a> UND <span>-Buttons) */
.battle-nav a.nav.abort,
.battle-nav span.nav.abort:not(.dim) { color: rgba(248,113,113,0.65); }
.battle-nav a.nav.abort:hover,
.battle-nav span.nav.abort:not(.dim):hover { color: var(--danger); background: rgba(248,113,113,0.06); }
/* Laufende Aktion (Phase 2) */
.battle-nav a.nav.running { color: var(--jade); background: rgba(134,239,172,0.06); animation: nav-pulse 1.2s ease-in-out infinite; }
/* Trennlinie */
.battle-nav-sep { height: 1px; background: var(--line, rgba(134,239,172,0.08)); margin: 6px 12px; }
@keyframes nav-pulse { 0%,100%{opacity:1} 50%{opacity:.6} }

/* ── Combat Frame ──────────────────────────────────────────────────── */
.combat-frame { position: relative; flex: 1; overflow: hidden; }

/* Hintergrundbild-Container */
.combat-bg {
    position: absolute; inset: 0; z-index: 1;
    overflow: hidden;
}
.combat-bg__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    user-select: none; pointer-events: none;
    /* leicht abdunkeln damit Panels + Portraits gut lesbar bleiben */
    filter: brightness(0.45) saturate(1.15);
}
.combat-bg__overlay {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

/* Corner ornaments — gleicher Abstand rundum */
.combat-corner { position: absolute; width: 26px; height: 26px; z-index: 50; pointer-events: none; color: var(--gold-dim, rgba(232,201,140,0.45)); }
.combat-corner.tl { top: 12px;  left: 12px; }
.combat-corner.tr { top: 12px;  right: 12px;  transform: scaleX(-1); }
.combat-corner.bl { bottom: 12px; left: 12px;  transform: scaleY(-1); }
.combat-corner.br { bottom: 12px; right: 12px; transform: scale(-1,-1); }

/* Scene label — versteckt (jetzt im Topbar als combat-topbar-loc) */
.combat-scene-label { display: none; }

/* Scene-Subtitle im Topbar — zentriert über volle Viewport-Breite,
   sitzt direkt unter .town-banner-title, selber Mittelpunkt */
.combat-topbar-loc {
  position: absolute;
  /* Topbar = 90px; Titel sitzt ~mittig; Subtitle direkt darunter */
  top: 62px; left: 0; right: 0;
  z-index: 11; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: .28em;
  color: var(--ink-faint); text-transform: uppercase; white-space: nowrap;
}
.combat-topbar-loc::before, .combat-topbar-loc::after {
  content: ''; flex: 0 0 36px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(134,239,172,0.18));
}
.combat-topbar-loc::after { background: linear-gradient(90deg, rgba(134,239,172,0.18), transparent); }

/* ── Panel ─────────────────────────────────────────────────────────── */
.combat-panel {
  position: absolute; z-index: 10;
  background: rgba(6,9,4,0.86);
  border: 1px solid rgba(134,239,172,0.20);
  box-shadow: inset 0 1px 0 rgba(134,239,172,0.18), inset 0 0 0 1px rgba(0,0,0,0.55), 0 10px 30px rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
}
.combat-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.52  0 0 0 0 0.94  0 0 0 0 0.67  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; opacity: 0.3;
}
/* notch corners */
.cnotch { position: absolute; width: 8px; height: 8px; border: 1px solid rgba(134,239,172,0.35); background: var(--bg-deep,#060904); z-index: 2; }
.cnotch.tl { top:-1px; left:-1px;   border-right:none; border-bottom:none; }
.cnotch.tr { top:-1px; right:-1px;  border-left:none;  border-bottom:none; }
.cnotch.bl { bottom:-1px; left:-1px;  border-right:none; border-top:none; }
.cnotch.br { bottom:-1px; right:-1px; border-left:none;  border-top:none; }
/* panel head / body */
.combat-panel-head {
  font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .28em;
  color: var(--jade-dim); text-transform: uppercase;
  padding: 10px 16px 8px; display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(134,239,172,0.09); position: relative; z-index: 2;
}
.combat-panel-head .ph-lvl { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-faint); letter-spacing: .05em; text-transform: none; }
.combat-panel-body { padding: 10px 16px 13px; position: relative; z-index: 2; }

/* ── Stat Name ─────────────────────────────────────────────────────── */
.combat-stat-name { font-family: 'Cinzel', serif; font-size: 17px; font-weight: 600; letter-spacing: .08em; color: var(--jade-bright); text-shadow: 0 0 14px rgba(134,239,172,0.20), 0 1px 0 #000; margin-bottom: 3px; }
.combat-stat-name.enemy { color: #f3dba6; text-shadow: 0 0 14px rgba(232,201,140,0.20), 0 1px 0 #000; }
.combat-stat-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(134,239,172,0.18) 25%, rgba(134,239,172,0.18) 75%, transparent); margin: 8px 0 9px; opacity: 0.55; }

/* ── HP Bar ────────────────────────────────────────────────────────── */
.hp-wrap {
  position: relative; height: 13px;
  background: #020402; border: 1px solid rgba(0,0,0,0.65); border-radius: 1px;
  padding: 2px; overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.95), inset 0 0 0 1px rgba(134,239,172,0.18), 0 0 0 1px rgba(0,0,0,0.4);
  margin-bottom: 6px;
}
.hp-fill { position: relative; height: 100%; transition: width .45s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.4); }
.hp-fill::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent 5px, rgba(0,0,0,0.12) 5px, rgba(0,0,0,0.12) 6px); }
.hp-fill.pl      { background: linear-gradient(180deg, #b0f5ca 0%, #86efac 55%, #3a7854 100%); }
.hp-fill.pl.warn { background: linear-gradient(180deg, #fde68a 0%, #fbbf24 55%, #92400e 100%); }
.hp-fill.pl.crit { background: linear-gradient(180deg, #fca5a5 0%, #f87171 55%, #7f1d1d 100%); animation: hp-pulse .8s ease-in-out infinite; }
.hp-fill.en      { background: linear-gradient(180deg, #fca5a5 0%, #f87171 55%, #7f1d1d 100%); }
.hp-fill.en.warn { background: linear-gradient(180deg, #fde68a 0%, #fbbf24 55%, #78350f 100%); }
.hp-fill.en.crit { background: linear-gradient(180deg, #fca5a5 0%, #ef4444 55%, #450a0a 100%); animation: hp-pulse .7s ease-in-out infinite; }
.hp-fill.flash   { animation: hp-flash .4s ease forwards; }
@keyframes hp-pulse { 0%,100%{filter:none} 50%{filter:brightness(1.45)} }
@keyframes hp-flash { 0%,100%{filter:none} 50%{filter:brightness(2.2) saturate(2)} }
.hp-pips { position: absolute; inset: 2px; display: flex; pointer-events: none; }
.hp-pips .pip { flex: 1; border-right: 1px solid rgba(0,0,0,0.18); }
.hp-pips .pip:last-child { border-right: none; }
.hp-numbers { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-dim); display: flex; justify-content: space-between; margin-bottom: 4px; }

/* ── Portrait ──────────────────────────────────────────────────────── */
.combat-portrait { position: absolute; z-index: 15; }
.portrait-ring {
  width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid rgba(134,239,172,0.50);
  box-shadow: 0 0 0 1px #000, 0 0 0 5px rgba(6,9,4,0.75), 0 0 0 6px rgba(134,239,172,0.50), 0 18px 38px rgba(0,0,0,0.72);
  overflow: hidden; position: relative;
  background: radial-gradient(circle at 38% 32%, #0c1c0c 0%, #060904 70%);
  animation: portrait-breathe 4s ease-in-out infinite;
}
.portrait-ring::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.52  0 0 0 0 0.94  0 0 0 0 0.67  0 0 0 0.20 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; opacity: 0.3;
}
.portrait-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; animation: portrait-float 5s ease-in-out infinite; }
.portrait-inner img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; }
/* Kreatur-Portrait-Compositing je Region (Workaround gemischte Asset-Hintergründe):
   ckill-black = Almhausen (schwarzer HG → screen), ckill-white = Edahnien-Wald (weißer HG → white-remove).
   killmode wird in combat.php aus city/location bestimmt. */
.creature-portrait-img.ckill-black { mix-blend-mode: screen !important; filter: none !important; }
.creature-portrait-img.ckill-white { mix-blend-mode: normal !important; filter: url(#crt-white-remove) !important; }
.portrait-inner svg { width: 65%; height: 65%; }
.portrait-eyes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.portrait-eye { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 8px var(--jade), 0 0 18px rgba(134,239,172,0.18); animation: eye-blink 5s ease-in-out infinite; }
@keyframes portrait-breathe {
  0%,100% { box-shadow: 0 0 0 1px #000, 0 0 0 5px rgba(6,9,4,0.75), 0 0 0 6px rgba(134,239,172,0.50), 0 18px 38px rgba(0,0,0,0.72); }
  50%     { box-shadow: 0 0 0 1px #000, 0 0 0 5px rgba(6,9,4,0.75), 0 0 0 6px var(--jade), 0 18px 38px rgba(0,0,0,0.72), 0 0 24px rgba(134,239,172,0.16); }
}
@keyframes portrait-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes eye-blink { 0%,84%,100%{transform:scaleY(1);opacity:1} 87%,95%{transform:scaleY(0.1);opacity:0.4} }
/* Enemy portrait — red ring */
.portrait-enemy-ring .portrait-ring { border-color: rgba(248,113,113,0.40); animation-name: portrait-breathe-enemy; animation-delay:.7s; }
.portrait-enemy-ring .portrait-eye  { background: #f87171; box-shadow: 0 0 8px #f87171, 0 0 18px rgba(248,113,113,0.15); }
@keyframes portrait-breathe-enemy {
  0%,100% { box-shadow: 0 0 0 1px #000, 0 0 0 5px rgba(6,9,4,0.75), 0 0 0 6px rgba(248,113,113,0.38), 0 18px 38px rgba(0,0,0,0.72); }
  50%     { box-shadow: 0 0 0 1px #000, 0 0 0 5px rgba(6,9,4,0.75), 0 0 0 6px rgba(248,113,113,0.65), 0 18px 38px rgba(0,0,0,0.72), 0 0 22px rgba(248,113,113,0.12); }
}
/* Sizing */
.portrait-enemy-wrap  { width: 158px; height: 158px; top: 32px; right: calc(2.4% + 310px + 18px); }
.portrait-player-wrap { width: 148px; height: 148px; bottom: 262px; left: calc(2.4% + 320px + 18px); }
/* Shake / lunge animations */
@keyframes portrait-shake { 0%{transform:translateX(0)} 15%{transform:translateX(-8px)} 30%{transform:translateX(8px)} 45%{transform:translateX(-6px)} 60%{transform:translateX(6px)} 75%{transform:translateX(-3px)} 100%{transform:translateX(0)} }
.combat-portrait.hit .portrait-ring { animation: portrait-shake .45s ease, portrait-breathe 4s ease-in-out infinite 1s; }
.combat-portrait.portrait-enemy-ring.hit .portrait-ring { animation: portrait-shake .45s ease, portrait-breathe-enemy 4s ease-in-out infinite 1s; }
@keyframes player-lunge { 0%{transform:translate(0,0)} 30%{transform:translate(22px,-8px) scale(1.06)} 60%{transform:translate(8px,-3px)} 100%{transform:translate(0,0)} }
@keyframes enemy-lunge  { 0%{transform:translate(0,0)} 30%{transform:translate(-20px,6px) scale(1.05)} 60%{transform:translate(-6px,2px)} 100%{transform:translate(0,0)} }
.portrait-player-wrap.lunge .portrait-ring { animation: player-lunge .42s ease, portrait-breathe 4s ease-in-out infinite .5s; }
.portrait-enemy-wrap.lunge  .portrait-ring { animation: enemy-lunge  .42s ease, portrait-breathe-enemy 4s ease-in-out infinite .5s; }

/* ── Enemy / Player Info Panels ────────────────────────────────────── */
.combat-enemy-info  { top: 24px;    right: 2.4%; width: 310px; }
.combat-player-info { bottom: 258px; left: 2.4%;  width: 320px; }
/* Tags */
.combat-tag-row { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.combat-tag-row span { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: .14em; padding: 2px 7px; border: 1px solid rgba(134,239,172,0.18); color: var(--ink-faint); text-transform: uppercase; }
.combat-tag-row span.danger { border-color: rgba(248,113,113,0.25); color: rgba(248,113,113,0.65); }
.combat-tag-row span.tameable {
    border-color: rgba(251,191,36,0.45); color: #fcd34d;
    background: rgba(251,191,36,0.08); animation: tameable-pulse 1.8s ease-in-out infinite;
}
@keyframes tameable-pulse {
    0%,100% { box-shadow: 0 0 0 rgba(251,191,36,0); }
    50%     { box-shadow: 0 0 8px rgba(251,191,36,0.4); }
}
/* No-Kill (Fang-Quest): Warnton statt Gold — Gegner darf nicht getötet werden */
.combat-tag-row span.tameable.nokill {
    border-color: rgba(248,113,113,0.5); color: #fca5a5;
    background: rgba(248,113,113,0.10);
}
.combat-btn.ca-tame { color: #fcd34d; }
.combat-btn.ca-tame:hover { border-color: rgba(251,191,36,0.5); box-shadow: 0 0 10px rgba(251,191,36,0.2); }
/* Fangen erst ab Gegner-HP < 50 % — sonst ausgegraut + gesperrt */
.combat-btn.ca-tame:disabled { color: var(--ink-faint); opacity: .42; cursor: not-allowed; filter: grayscale(.55); }
.combat-btn.ca-tame:disabled:hover { border-color: var(--line); box-shadow: none; background: linear-gradient(180deg, rgba(14,28,14,0.6) 0%, rgba(8,16,8,0.8) 100%); }
.combat-btn.ca-tame.tame-ready { animation: tame-pulse 1.4s ease-in-out infinite; }
@keyframes tame-pulse { 0%,100% { box-shadow: 0 0 6px rgba(251,191,36,0.15); } 50% { box-shadow: 0 0 16px rgba(251,191,36,0.42); border-color: rgba(251,191,36,0.7); } }
/* Weapon line */
.combat-weapon-line { margin-top: 8px; font-style: italic; font-size: 13px; color: var(--ink-dim); display: flex; align-items: center; gap: 8px; }
.combat-weapon-line .sigil { font-style: normal; font-family: 'Cinzel', serif; color: var(--jade-dim); font-size: 12px; }

/* ── Bottom Dock ───────────────────────────────────────────────────── */
.combat-dock-wrap {
  position: absolute; left: 60px; right: 60px; bottom: 30px; z-index: 12;
  height: 220px;
  background: linear-gradient(180deg, transparent 0%, rgba(6,9,4,0.55) 25%, rgba(6,9,4,0.94) 100%);
}
.combat-dock {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 30% 50% 20%;
  gap: 8px; align-items: stretch; padding: 8px 0 0;
}
.combat-dock > .combat-panel { position: relative; z-index: auto; box-shadow: inset 0 1px 0 rgba(134,239,172,0.18), inset 0 0 0 1px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.55); }
#combat-action-panel { display: flex; flex-direction: column; }
#combat-action-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.combat-action-grid { flex: 1; min-height: 0; }

/* Companion panel */
#combat-companion-panel { display: flex; flex-direction: column; }
.combat-companion-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; position: relative; z-index: 2; }
.combat-companion-slot { width: 52px; height: 52px; border-radius: 50%; border: 1px dashed rgba(134,239,172,0.20); background: rgba(6,9,4,0.55); display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 20px; }
.combat-companion-label { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .12em; color: var(--ink); text-transform: uppercase; text-align: center; line-height: 1.25; }
.combat-companion-hint { font-style: italic; font-size: 10px; color: rgba(134,239,172,0.45); text-align: center; line-height: 1.25; padding: 0 6px; }
/* Kopfzeile: Avatar links, Name + Rolle rechts daneben */
.combat-companion-head { width: 100%; display: flex; align-items: center; justify-content: center; gap: 11px; }
.combat-companion-meta { min-width: 0; text-align: left; }
.combat-companion-meta .combat-companion-label { text-align: left; }
.combat-companion-meta .combat-companion-hint  { text-align: left; padding: 0; margin-top: 2px; }
/* ── Aktiver Verbündeter im Panel ─────────────────────────────────────────── */
.combat-companion-portrait { width: 58px; height: 58px; flex: 0 0 58px; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.combat-companion-portrait img { width: 100%; height: 100%; object-fit: contain; }
.combat-companion-portrait img { border-radius: 6px; }
.combat-ally-hpbar { width: 100%; height: 8px; border-radius: 4px; background: rgba(0,0,0,.5); border: 1px solid rgba(134,239,172,0.2); overflow: hidden; }
.combat-ally-hpfill { height: 100%; width: 100%; background: linear-gradient(90deg, #4ade80, #86efac); transition: width .35s ease; }
.combat-ally-hpfill.crit { background: linear-gradient(90deg, #f87171, #fca5a5); }
.combat-ally-hptxt { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--jade); }
#combat-companion-panel.ally-down { opacity: .55; filter: grayscale(.7); }
#combat-companion-panel.ally-down .combat-companion-portrait { filter: grayscale(1); }
.combat-ally-ability { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; margin-top: 4px; cursor: pointer; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.45); color: #fcd34d; border-radius: 4px; }

/* ── Combat Log ────────────────────────────────────────────────────── */
#combat-log-panel { display: flex; flex-direction: column; overflow: hidden; }
.combat-log-box { flex: 1; min-height: 0; padding: 10px 16px 10px; display: flex; flex-direction: column; overflow: hidden; }
.combat-log-head { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .28em; color: var(--jade-dim); text-transform: uppercase; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-shrink: 0; }
.combat-log-head::before, .combat-log-head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(134,239,172,0.18)); }
.combat-log-head::after { background: linear-gradient(90deg, rgba(134,239,172,0.18), transparent); }
.combat-log-head .dh-meta { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--ink-faint); text-transform: none; letter-spacing: .04em; }
.combat-log-lines { font-size: 14px; line-height: 1.5; color: var(--ink); flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; overflow-y: auto; }
.combat-log-lines::-webkit-scrollbar { width: 3px; }
.combat-log-lines::-webkit-scrollbar-track { background: transparent; }
.combat-log-lines::-webkit-scrollbar-thumb { background: rgba(134,239,172,0.18); border-radius: 2px; }
.clog-line { display: flex; gap: 9px; align-items: baseline; }
.clog-line .m { flex-shrink: 0; width: 11px; font-family: 'Cinzel', serif; font-size: 10px; color: var(--jade-dim); transform: translateY(-1px); }
.clog-line.faded  { color: rgba(134,239,172,0.28); font-size: 12px; }
.clog-line.faded .m { color: rgba(134,239,172,0.18); }
.clog-line.active { color: var(--ink); }
.combat-log-lines em        { color: #f3dba6; font-style: italic; }
.combat-log-lines em.dmg    { color: #f87171; }
.combat-log-lines em.heal   { color: #b0f5ca; }
.combat-log-prompt { margin-top: 8px; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; color: var(--jade-dim); font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; opacity: 0.65; }
.combat-caret { margin-left: 6px; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }

/* ── Admin Debug Panel ─────────────────────────────────────────────── */
.combat-debug-panel {
  position: absolute;
  top: 210px;
  right: 2.4%;
  width: 310px;
  z-index: 20;
  background: rgba(4,10,5,0.92);
  border: 1px solid rgba(134,239,172,0.18);
  border-left: 2px solid rgba(134,239,172,0.45);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 11px;
  color: var(--ink);
  max-height: calc(100% - 230px);
  overflow-y: auto;
  box-shadow: inset 0 1px 0 rgba(134,239,172,0.08), 0 8px 24px rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}
.combat-debug-panel::-webkit-scrollbar { width: 3px; }
.combat-debug-panel::-webkit-scrollbar-track { background: transparent; }
.combat-debug-panel::-webkit-scrollbar-thumb { background: rgba(134,239,172,0.2); border-radius: 2px; }
.cdbg-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(134,239,172,0.05);
  border-bottom: 1px solid rgba(134,239,172,0.10);
  cursor: pointer;
  user-select: none;
}
.cdbg-title {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--jade-dim, #4ade80);
  opacity: 0.75;
}
.cdbg-slug {
  font-size: 10px;
  color: var(--ink-faint);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cdbg-toggle {
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 9px;
  color: rgba(134,239,172,0.4);
  cursor: pointer;
  transition: color .15s, transform .2s;
  line-height: 1;
}
.cdbg-toggle:hover { color: rgba(134,239,172,0.75); }
.cdbg-toggle.open { transform: rotate(180deg); }
.cdbg-body { padding: 8px 10px 10px; }
.cdbg-section {
  display: block;
  font-size: 8px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(134,239,172,0.45);
  border-bottom: 1px solid rgba(134,239,172,0.08);
  padding-bottom: 3px;
  margin: 10px 0 6px;
}
.cdbg-body > .cdbg-grid:first-of-type { margin-top: 0; }
.cdbg-grid + .cdbg-section { margin-top: 12px; }
.cdbg-grid {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1px 8px;
}
.cdbg-grid span:nth-child(odd) {
  color: var(--ink-faint);
  font-size: 10px;
  line-height: 1.65;
}
.cdbg-grid span:nth-child(even),
.cdbg-grid code {
  color: var(--ink-dim);
  font-size: 10px;
  background: none;
  padding: 0;
  line-height: 1.65;
}
.cdbg-grid code em { color: rgba(134,239,172,0.6); font-style: normal; }
.cdbg-grid code b  { color: rgba(134,239,172,0.95); }
.cdbg-sep {
  height: 1px;
  background: rgba(134,239,172,0.06);
  margin: 6px 0;
}

/* ── Action Panel ──────────────────────────────────────────────────── */
.combat-action-head { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .28em; color: var(--jade-dim); text-transform: uppercase; padding: 9px 14px 8px; flex-shrink: 0; border-bottom: 1px solid rgba(134,239,172,0.09); display: flex; align-items: center; gap: 10px; }
.combat-action-head::before, .combat-action-head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(134,239,172,0.12)); }
.combat-action-head::after { background: linear-gradient(90deg, rgba(134,239,172,0.12), transparent); }
/* Action buttons */
.combat-action-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; padding: 10px; }
.combat-btn {
  position: relative; background: linear-gradient(180deg, rgba(8,14,8,0.90) 0%, rgba(4,8,4,0.96) 100%);
  border: 1px solid rgba(134,239,172,0.18); color: var(--ink);
  font-family: 'Cinzel', serif; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 11px 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  transition: background .15s, border-color .15s, transform .05s;
  box-shadow: inset 0 1px 0 rgba(134,239,172,0.18), inset 0 -2px 6px rgba(0,0,0,0.6), 0 4px 10px rgba(0,0,0,0.45);
  overflow: hidden;
}
.combat-btn::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(134,239,172,0.10); pointer-events: none; }
.combat-btn svg { width: 20px; height: 20px; color: var(--jade-dim); opacity: 0.85; }
.combat-btn .btn-sub { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .08em; color: var(--ink-faint); text-transform: none; font-weight: 400; }
.combat-btn:hover { background: linear-gradient(180deg, rgba(14,28,14,0.95) 0%, rgba(8,16,8,0.98) 100%); border-color: var(--jade); color: #b0f5ca; box-shadow: inset 0 1px 0 rgba(134,239,172,0.18), inset 0 -2px 6px rgba(0,0,0,0.6), 0 4px 10px rgba(0,0,0,0.5), 0 0 20px rgba(134,239,172,0.10); }
.combat-btn:hover svg { color: var(--jade); opacity: 1; }
.combat-btn:hover::before { border-color: rgba(134,239,172,0.28); }
.combat-btn:active { transform: translateY(1px); }
.combat-btn.selected { background: linear-gradient(180deg, var(--jade) 0%, #3ea86a 100%); border-color: #b0f5ca; color: var(--bg-deep,#060904); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 24px rgba(134,239,172,0.32), 0 4px 10px rgba(0,0,0,0.55); }
.combat-btn.selected svg { color: var(--bg-deep,#060904); opacity: 1; }
.combat-btn.selected .btn-sub { color: rgba(6,9,4,0.6); }
.combat-btn.danger:hover { border-color: #f87171; color: #f87171; box-shadow: inset 0 1px 0 rgba(248,113,113,0.15), 0 0 20px rgba(248,113,113,0.15), 0 4px 10px rgba(0,0,0,0.5); }
/* ── Attack Grid (Kampfkunst-basierte Angriffe) ─── */
.combat-attack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 10px 4px; flex-shrink: 0; }
.combat-attack-grid .combat-btn { padding: 8px 8px; gap: 3px; min-height: 0; }
/* Unlocked attack button */
.combat-btn.ca-attack { flex-direction: column; text-align: center; position: relative; }
.ca-ap { position: absolute; top: 5px; right: 6px; font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: .04em; color: #86efac; background: rgba(134,239,172,0.10); border: 1px solid rgba(134,239,172,0.20); padding: 1px 5px; border-radius: 2px; font-weight: 600; }
.ca-ap.free { color: rgba(134,239,172,0.45); background: transparent; border-color: transparent; }
.ca-name { font-size: 12px; letter-spacing: .10em; font-weight: 600; color: #b0f5ca; margin-top: 2px; }
.ca-mult { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: rgba(134,239,172,0.45); letter-spacing: .04em; }
/* Locked attack button */
.combat-btn.ca-locked { opacity: .38; cursor: not-allowed; flex-direction: column; gap: 2px; }
.combat-btn.ca-locked:hover { border-color: rgba(134,239,172,0.18); color: var(--ink); box-shadow: none; background: linear-gradient(180deg, rgba(8,14,8,0.90) 0%, rgba(4,8,4,0.96) 100%); }
.ca-lock { font-size: 11px; line-height: 1; }
.ca-unlock { font-family: 'JetBrains Mono', monospace; font-size: 8px; color: rgba(134,239,172,0.38); letter-spacing: .04em; text-transform: none; font-weight: 400; }
/* Bottom action row (Item / Fähigkeit / Flüchten) */
.combat-action-row2 { display: flex; gap: 6px; padding: 0 10px 8px; flex-shrink: 0; }
.combat-action-row2 .combat-btn { flex: 1; flex-direction: row; gap: 6px; padding: 6px 8px; font-size: 11px; letter-spacing: .10em; }
.combat-action-row2 .combat-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
/* AP display in panel head */
.combat-ap-display { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--jade-dim); letter-spacing: .04em; }
.combat-ap-display .ap-val { color: #86efac; font-weight: 600; }
.combat-ap-display .ap-sep { color: rgba(134,239,172,0.38); margin-left: 2px; }

/* ── Mana/Ausdauer-Anzeige + Fähigkeiten-Popup ───────────────────────────── */
.combat-mp-display { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--jade-dim); letter-spacing: .04em; }
.combat-mp-display .mp-val { color: #7dd3fc; font-weight: 600; }
.combat-mp-display .mp-sep { color: rgba(125,211,252,0.4); margin-left: 2px; }

.combat-mp-bar-wrap { margin-bottom: 14px; }
.combat-mp-bar-head { display: flex; justify-content: space-between; font-size: 11px; color: rgba(200,220,200,.65); letter-spacing: .05em; margin-bottom: 4px; text-transform: uppercase; }
.combat-mp-bar-head span:last-child { font-family: 'JetBrains Mono', monospace; color: #7dd3fc; text-transform: none; }
.combat-mp-bar { height: 8px; background: rgba(0,0,0,.4); border: 1px solid rgba(125,211,252,.25); border-radius: 4px; overflow: hidden; }
.combat-mp-fill { height: 100%; background: linear-gradient(90deg, #38bdf8 0%, #7dd3fc 100%); transition: width .35s ease; }

.combat-skill-grid { display: flex; flex-direction: column; gap: 8px; }
.combat-skill-btn { display: flex; flex-direction: column; gap: 3px; text-align: left; background: rgba(134,239,172,.05); border: 1px solid rgba(134,239,172,.2); border-radius: 6px; padding: 9px 11px; cursor: pointer; color: var(--text, #d6e0d6); transition: background .15s, border-color .15s; }
.combat-skill-btn:hover { background: rgba(134,239,172,.1); border-color: rgba(134,239,172,.45); }
.combat-skill-btn .cs-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.combat-skill-btn .cs-name { font-size: 14px; color: #c8e6c8; letter-spacing: .02em; }
.combat-skill-btn .cs-mp { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #7dd3fc; white-space: nowrap; }
.combat-skill-btn .cs-eff { font-size: 11px; color: var(--jade-dim, #86c79a); }
.combat-skill-btn .cs-desc { font-size: 11px; color: rgba(200,220,200,.45); line-height: 1.4; }
.combat-skill-btn.cs-disabled { opacity: .4; pointer-events: none; filter: grayscale(.5); }
.combat-skill-empty { text-align: center; padding: 26px 16px; color: rgba(200,220,200,.5); font-size: 13px; line-height: 1.7; }
.combat-skill-empty span { display: block; margin-top: 6px; font-size: 11px; color: rgba(200,220,200,.35); }
/* Submenu */
.combat-sub-bar { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .22em; color: var(--jade-dim); text-transform: uppercase; padding: 0 2px 5px; display: flex; justify-content: space-between; align-items: center; }
.combat-sub-back { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .14em; color: var(--ink-dim); background: none; border: none; cursor: pointer; padding: 3px 8px; text-transform: uppercase; }
.combat-sub-back:hover { color: var(--jade); }
/* Skill grid */
.combat-skill-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 7px; padding: 10px; }
.combat-skill-grid .combat-sub-bar { grid-column: 1 / -1; padding-bottom: 6px; border-bottom: 1px solid rgba(134,239,172,0.09); margin-bottom: 2px; }
.combat-skill-btn { position: relative; background: linear-gradient(180deg, rgba(8,14,8,0.90) 0%, rgba(4,8,4,0.96) 100%); border: 1px solid rgba(134,239,172,0.18); color: var(--ink); font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 9px 10px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 4px; transition: all .15s; }
.combat-skill-btn:hover { border-color: var(--jade); background: linear-gradient(180deg, rgba(14,28,14,0.95) 0%, rgba(8,16,8,0.98) 100%); }
.combat-skill-btn .sk-n { color: #b0f5ca; font-weight: 600; font-size: 13px; }
.combat-skill-btn .sk-m { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-faint); display: flex; justify-content: space-between; text-transform: none; letter-spacing: .04em; }
.combat-skill-btn .sk-m .cost { color: var(--jade-dim); }
.combat-skill-btn .sk-m .dmg  { color: rgba(248,113,113,0.7); }
.combat-skill-btn .sk-d { font-family: 'IM Fell English', serif; font-style: italic; font-size: 13px; color: var(--ink-dim); text-transform: none; letter-spacing: 0; line-height: 1.4; }
.combat-skill-btn.locked { opacity: 0.32; cursor: not-allowed; }
/* Item list */
.combat-item-list { padding: 10px; display: flex; flex-direction: column; gap: 5px; }
.combat-item-list .combat-sub-bar { padding-bottom: 6px; border-bottom: 1px solid rgba(134,239,172,0.09); margin-bottom: 2px; }
.combat-item-rows { display: flex; flex-direction: column; gap: 4px; }
.combat-item-row { display: grid; grid-template-columns: 18px 1fr auto auto; align-items: center; gap: 9px; padding: 6px 9px; background: rgba(6,9,4,0.55); cursor: pointer; font-size: 13px; color: var(--ink); border: 1px solid transparent; transition: all .12s; }
.combat-item-row:hover { border-color: rgba(134,239,172,0.18); background: rgba(14,28,14,0.65); }
.combat-item-row .glyph  { font-family: 'Cinzel', serif; font-size: 12px; color: var(--jade-dim); text-align: center; }
.combat-item-row .effect { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--jade); letter-spacing: .04em; }
.combat-item-row .qty    { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #e8c98c; }
/* Confirm panel */
.combat-confirm { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.combat-confirm-title { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .22em; color: var(--jade-dim); text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; border-bottom: 1px solid rgba(134,239,172,0.09); margin-bottom: 2px; }
.combat-confirm-body  { font-style: italic; font-size: 15px; color: var(--ink-dim); line-height: 1.6; flex: 1; }
.combat-confirm-cta   { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 10px; cursor: pointer; background: linear-gradient(180deg, var(--jade) 0%, #3ea86a 100%); border: 1px solid #b0f5ca; color: var(--bg-deep,#060904); transition: box-shadow .15s; }
.combat-confirm-cta:hover { box-shadow: 0 0 28px rgba(134,239,172,0.3); }
.combat-confirm-cta.danger { background: linear-gradient(180deg, #ef4444 0%, #7f1d1d 100%); border-color: #f87171; color: #fff; }

/* ── Combat Animations ─────────────────────────────────────────────── */
.combat-frame::after { content: ''; position: absolute; inset: 0; z-index: 50; pointer-events: none; background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(134,239,172,0.18) 42%, rgba(255,255,255,0.06) 44%, transparent 48%, transparent 100%); opacity: 0; transform: translateX(-120%); }
.combat-frame.slash::after { animation: slash-sweep .38s ease-out forwards; }
@keyframes slash-sweep { 0%{opacity:0;transform:translateX(-120%)} 20%{opacity:1} 100%{opacity:0;transform:translateX(120%)} }
.combat-frame.slash-enemy::after { background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(248,113,113,0.22) 42%, rgba(255,255,255,0.06) 44%, transparent 48%, transparent 100%); animation: slash-sweep .38s ease-out forwards; }
@keyframes shake-enemy  { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-10px) rotate(-.6deg)} 40%{transform:translateX(8px) rotate(.4deg)} 60%{transform:translateX(-6px) rotate(-.3deg)} 80%{transform:translateX(4px)} }
@keyframes shake-player { 0%,100%{transform:translateX(0)} 20%{transform:translateX(8px) rotate(.5deg)} 40%{transform:translateX(-6px) rotate(-.4deg)} 60%{transform:translateX(5px)} 80%{transform:translateX(-3px)} }
.combat-frame.shake-e { animation: shake-enemy  .42s ease; }
.combat-frame.shake-p { animation: shake-player .42s ease; }
.impact-ring  { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--jade); pointer-events: none; z-index: 20; animation: ring-burst .55s ease-out forwards; }
.impact-ring2 { position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--jade); pointer-events: none; z-index: 19; animation: ring-burst .75s .12s ease-out forwards; }
.impact-ring.enemy, .impact-ring2.enemy { border-color: #f87171; }
@keyframes ring-burst { 0%{opacity:.9;transform:scale(1)} 100%{opacity:0;transform:scale(1.9)} }
.combat-bg-flash { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; animation: bg-flash .5s ease-out forwards; }
.combat-bg-flash.hit  { background: radial-gradient(ellipse at 72% 20%, rgba(248,113,113,0.22) 0%, transparent 60%); }
.combat-bg-flash.heal { background: radial-gradient(ellipse at 28% 70%, rgba(134,239,172,0.18) 0%, transparent 60%); }
@keyframes bg-flash { 0%{opacity:1} 100%{opacity:0} }
/* Damage floats */
.dmg-float { position: fixed; font-family: 'Cinzel', serif; font-size: 22px; font-weight: 600; letter-spacing: .06em; pointer-events: none; z-index: 200; animation: dmg-rise .9s ease forwards; text-shadow: 0 2px 6px rgba(0,0,0,0.8); }
.dmg-float.enemy  { color: #f87171; }
.dmg-float.player { color: #b0f5ca; }
.dmg-float.heal   { color: var(--jade); }
@keyframes dmg-rise { 0%{opacity:1;transform:translateY(0) scale(1)} 30%{transform:translateY(-24px) scale(1.1)} 100%{opacity:0;transform:translateY(-60px) scale(0.8)} }

/* ── Intro Screen (Overlay) ────────────────────────────────────────── */
.combat-intro-frame { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
/* Im Intro etwas heller — Kreatur soll vor Waldkulisse dramatisch wirken */
.combat-intro-frame .combat-bg__img { filter: brightness(0.35) saturate(1.2); }
.combat-intro-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(6,9,4,0.6) 0%, rgba(6,9,4,0.10) 35%, rgba(6,9,4,0.10) 65%, rgba(6,9,4,0.65) 100%); }
.combat-intro-fog  { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(134,239,172,0.05) 0%, transparent 70%); animation: fog-breathe 5s ease-in-out infinite; }
@keyframes fog-breathe { 0%,100%{opacity:.5} 50%{opacity:1} }
.combat-intro-content { position: relative; z-index: 4; text-align: center; display: flex; flex-direction: column; align-items: center; width: 100%; }
/* Sprite: 55vh hoch, Breite aus 16:9-Ratio explizit berechnet */
.combat-intro-sprite { height: 55vh; width: calc(55vh * 16 / 9); max-width: 85vw; opacity: 0; animation: intro-rise .9s .4s ease both; }
.combat-intro-sprite svg { width: 100%; height: 100%; }
/* Intro-Sprite-Compositing wird per Inline-Style (killmode) in combat.php gesetzt */
.combat-intro-sprite img { width: 100%; height: 100%; object-fit: contain; }
@keyframes intro-rise { from{transform:translateY(24px);opacity:0} to{transform:translateY(0);opacity:1} }
.combat-intro-loc  { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .32em; color: var(--jade-dim); text-transform: uppercase; margin-top: 12px; opacity: 0; animation: fade-up .8s .9s ease both; }
.combat-intro-name { font-family: 'Cinzel', serif; font-size: 44px; font-weight: 600; letter-spacing: .22em; color: #b0f5ca; text-transform: uppercase; text-shadow: 0 0 30px rgba(134,239,172,0.42), 0 1px 0 #000; margin-top: 8px; opacity: 0; animation: fade-up .9s 1.1s ease both; }
.combat-intro-sub  { font-style: italic; font-size: 16px; color: var(--ink-dim); max-width: 560px; line-height: 1.5; margin-top: 10px; opacity: 0; animation: fade-up .8s 1.5s ease both; }
.combat-intro-skip { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .20em; color: var(--ink-faint); text-transform: uppercase; margin-top: 24px; opacity: 0; animation: fade-up .6s 2.2s ease both; }
@keyframes fade-up { from{transform:translateY(12px);opacity:0} to{transform:translateY(0);opacity:1} }
.combat-intro-bar-wrap { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; z-index: 5; background: rgba(134,239,172,0.08); }
.combat-intro-bar { height: 100%; background: var(--jade); transform-origin: left; animation: bar-drain 3.4s linear .8s both; }
@keyframes bar-drain { from{transform:scaleX(1)} to{transform:scaleX(0)} }

/* ── End Screen (Overlay) ──────────────────────────────────────────── */
.combat-end { background: var(--bg-deep,#060904); }
.combat-end-frame { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px; position: relative; overflow: hidden; }
.combat-end-glow { position: absolute; inset: 0; pointer-events: none; animation: end-pulse 3s ease-in-out infinite; }
.combat-end-glow.v { background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(134,239,172,0.10) 0%, transparent 70%); }
.combat-end-glow.d { background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(248,113,113,0.07) 0%, transparent 70%); }
@keyframes end-pulse { 0%,100%{opacity:.5} 50%{opacity:1} }
.combat-end-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.combat-end-glyph { font-size: 60px; animation: fade-up .8s ease both; }
.combat-end-title { font-family: 'Cinzel', serif; font-size: 42px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; animation: fade-up .9s .15s ease both; }
.combat-end-title.v { color: #b0f5ca; text-shadow: 0 0 30px rgba(134,239,172,0.38), 0 1px 0 #000; }
.combat-end-title.d { color: #f87171; text-shadow: 0 0 30px rgba(248,113,113,0.28), 0 1px 0 #000; }
.combat-end-sub { font-style: italic; font-size: 16px; color: var(--ink-dim); max-width: 520px; line-height: 1.6; animation: fade-up .8s .3s ease both; }
/* Loot box */
.combat-loot-box { border: 1px solid rgba(134,239,172,0.18); padding: 14px 18px; width: 360px; background: rgba(6,9,4,0.86); animation: fade-up .8s .5s ease both; }
.combat-loot-title { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .26em; color: var(--jade-dim); text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.combat-loot-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(134,239,172,0.18), transparent); }
.combat-loot-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(134,239,172,0.06); font-size: 13px; color: var(--ink); }
.combat-loot-row:last-child { border-bottom: none; }
.combat-loot-gl { font-family: 'Cinzel', serif; font-size: 15px; text-align: center; color: var(--jade-dim); }
.combat-loot-row em { display: block; font-style: italic; font-size: 10px; color: var(--ink-faint); font-family: 'JetBrains Mono', monospace; margin-top: 1px; }
.combat-loot-q { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--jade); }
/* ── Special-Loot-Hervorhebung (Set-/Pool-Beute) mit Seltenheitsfarbe ─────────── */
/* Tier-Farb-Variablen je Qualitätsstufe (gespiegelt aus inventory.css --rar-*) */
.combat-loot-special               { --rar-col:#e8c98c; --rar-hi:#fffbeb; --rar-glow:rgba(232,201,140,0.50); }
.combat-loot-special.iq-normal     { --rar-col:#86efac; --rar-hi:#dcfce7; --rar-glow:rgba(134,239,172,0.40); }
.combat-loot-special.iq-fine       { --rar-col:#4ade80; --rar-hi:#dcfce7; --rar-glow:rgba(74,222,128,0.50); }
.combat-loot-special.iq-superior   { --rar-col:#5aa6ff; --rar-hi:#dbeafe; --rar-glow:rgba(90,166,255,0.50); }
.combat-loot-special.iq-masterwork { --rar-col:#c084fc; --rar-hi:#f3e8ff; --rar-glow:rgba(192,132,252,0.55); }
.combat-loot-special.iq-legendary  { --rar-col:#e8c98c; --rar-hi:#fffbeb; --rar-glow:rgba(232,201,140,0.60); }

.combat-loot-row.combat-loot-special {
    background: linear-gradient(90deg, var(--rar-glow), transparent);
    border-radius: 6px;
    box-shadow: inset 0 0 12px var(--rar-glow);
    padding-left: 6px; padding-right: 6px;
}
.combat-loot-special .combat-loot-gl {
    color: var(--rar-hi);
    animation: cls-sparkle 1.4s ease-in-out infinite;
}
.combat-loot-special .combat-loot-q { color: var(--rar-col); }
.combat-loot-special .cls-shine {
    font-weight: 700;
    background: linear-gradient(100deg, var(--rar-col) 0%, var(--rar-hi) 35%, var(--rar-col) 70%, var(--rar-hi) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 0 5px var(--rar-glow));
    animation: cls-shine-sweep 2.4s linear infinite;
}
/* Seltenheits-Label unter dem Item-Namen */
.combat-loot-special .combat-loot-rarity {
    display: block; margin-top: 1px;
    font-family: 'Cinzel', serif; font-style: normal;
    font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--rar-col);
}
@keyframes cls-shine-sweep { to { background-position: 200% center; } }
@keyframes cls-sparkle {
    0%, 100% { transform: scale(1) rotate(0deg);    opacity: .85; }
    50%      { transform: scale(1.25) rotate(15deg); opacity: 1;  }
}
@media (prefers-reduced-motion: reduce) {
    .combat-loot-special .cls-shine,
    .combat-loot-special .combat-loot-gl { animation: none; }
}
/* CTA row */
.combat-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; animation: fade-up .7s .65s ease both; }
.combat-cta-btn { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; padding: 12px 28px; cursor: pointer; transition: transform .15s, box-shadow .15s; text-decoration: none; border: 1px solid; display: inline-block; }
.combat-cta-btn:hover { transform: translateY(-2px); }
.combat-cta-btn.primary { background: linear-gradient(180deg, var(--jade) 0%, #3ea86a 100%); border-color: #b0f5ca; color: var(--bg-deep,#060904); box-shadow: 0 6px 18px rgba(74,197,94,0.22); }
.combat-cta-btn.danger  { background: linear-gradient(180deg, #ef4444 0%, #7f1d1d 100%); border-color: #f87171; color: #fff; box-shadow: 0 6px 18px rgba(248,113,113,0.18); }
.combat-cta-btn.sec     { background: rgba(134,239,172,0.06); border-color: rgba(134,239,172,0.18); color: var(--ink-dim); }

/* ── Kampf-Dialog-Overlay (Dialog-System im Kampf) ─────────────────────────── */
.combat-dialogue-overlay { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; padding: 18px; }
.combat-dialogue-overlay[hidden] { display: none; }
.combat-dialogue-overlay .cdlg-backdrop { position: absolute; inset: 0; background: rgba(3,6,3,0.82); backdrop-filter: blur(3px); animation: cdlg-fade .28s ease; }
.combat-dialogue-overlay .cdlg-box { position: relative; z-index: 1; width: min(620px, 96vw); max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; animation: cdlg-rise .32s cubic-bezier(.2,.8,.3,1); }
.combat-dialogue-overlay .cdlg-inner { width: 100%; }
.combat-dialogue-overlay .cdlg-close {
  align-self: center; margin-top: 2px; padding: 9px 22px; cursor: pointer;
  font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .06em;
  border-radius: 8px; border: 1px solid #b0f5ca; color: var(--bg-deep,#060904);
  background: linear-gradient(180deg, var(--jade,#4ac55e) 0%, #3ea86a 100%);
  box-shadow: 0 6px 18px rgba(74,197,94,0.22); transition: transform .12s ease;
}
.combat-dialogue-overlay .cdlg-close:hover { transform: translateY(-2px); }
@keyframes cdlg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cdlg-rise { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }