/* ═══════════════════════════════════════════════════════════════════════
   Pixel-Avatar v2 (assets/js/pixelart-avatar.js) — gilt nur für .pixel-avatar.px2.
   Die Teile (px-hair, px-face, px-body, px-arm-*, px-legs, px-beard) bleiben DOM-Elemente mit allen
   Animationen; das alte CSS-Aussehen wird hier abgeschaltet und durch das inline-SVG im Teil ersetzt.
   Raster 18×25 Pixel, 1 Pixel = 3 CSS-px (Avatar-Box 54×75).
   ═══════════════════════════════════════════════════════════════════════ */
.pixel-avatar.px2 { height: 75px; }
.pixel-avatar.px2 .px-hair,
.pixel-avatar.px2 .px-face,
.pixel-avatar.px2 .px-body,
.pixel-avatar.px2 .px-legs,
.pixel-avatar.px2 .px-beard {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  clip-path: none !important; height: 75px !important; left: 0 !important; top: 0 !important; width: 54px !important;
}
.pixel-avatar.px2 .px-hair::before, .pixel-avatar.px2 .px-hair::after,
.pixel-avatar.px2 .px-face::before, .pixel-avatar.px2 .px-face::after { display: none !important; }
.pixel-avatar.px2 .px-hair { z-index: 3; }
.pixel-avatar.px2 .px-face { z-index: 2; }
.pixel-avatar.px2 .px-body { z-index: 2; }
.pixel-avatar.px2 .px-beard { z-index: 3; }
.pixel-avatar.px2 .px-collar, .pixel-avatar.px2 .px-badge { display: none !important; }
.pxa-svg { display: block; height: 100%; image-rendering: pixelated; overflow: visible; width: 100%; }
.pxa-arm { display: block; height: 100%; overflow: visible; width: 100%; }

.pixel-avatar.px2 .px-arm-left, .pixel-avatar.px2 .px-arm-right {
  background: none !important; border-radius: 0 !important; box-shadow: none !important; height: 21px; top: 42px; width: 6px;
}
.pixel-avatar.px2 .px-arm-left { left: 6px; }
.pixel-avatar.px2 .px-arm-right { left: auto; right: 6px; }

/* Augen und Mund bleiben CSS-Elemente (Blinzeln, Blickwechsel, Stimmungen), nur auf das Pixelraster gesetzt */
.pixel-avatar.px2 .px-eye-left, .pixel-avatar.px2 .px-eye-right { height: 3px; top: 24px; width: 3px; }
.pixel-avatar.px2 .px-eye-left { left: 18px; }
.pixel-avatar.px2 .px-eye-right { left: 33px; right: auto; }
:where(.pixel-avatar.px2) .px-mouth { height: 3px; left: 24px; top: 30px; width: 6px; }
/* Veteran: die buschigen Brauen stecken jetzt im Gesicht-SVG, die alten Pseudo-Brauen entfallen */
.pixel-avatar.px2.px-veteran .px-eye-left::before, .pixel-avatar.px2.px-veteran .px-eye-right::before { display: none !important; }
.pixel-avatar.px2 .px-beard::before, .pixel-avatar.px2 .px-beard::after { display: none !important; }
/* T-Rex-Kopf: der Unterkiefer (Schicht „jaw") klappt in Ruheschleife auf und zu */
.pixel-avatar.px2 .px-l-jaw { animation: trexJaw 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 20% 0%; }
/* Ninja: Maske verdeckt den Mund */
.pixel-avatar.px2.head-hut-ninja .px-mouth { display: none; }
/* Sonderfiguren: die alten CSS-Zusatzteile (Krawatte, Knochen, Kleiderherz) stecken jetzt in den SVGs */
.pixel-avatar.px2 .px-tie, .pixel-avatar.px2 .px-bone, .pixel-avatar.px2 .px-dress-heart { display: none !important; }

/* ═══ Folk-Figuren (Kampagnen-Bevölkerung) ═══ */
/* Roboter: Leuchtaugen als breite Pixelbalken auf dem Bildschirm */
.pixel-avatar.px2.px-roboter .px-eye-left, .pixel-avatar.px2.px-roboter .px-eye-right { height: 3px; top: 24px; width: 6px; border-radius: 0; }
.pixel-avatar.px2.px-roboter .px-eye-left { left: 15px; }
.pixel-avatar.px2.px-roboter .px-eye-right { left: 33px; right: auto; }
/* Alien: die großen Augen stecken im Gesicht-SVG; Werwolf: Schnauze + Fangzähne ebenfalls */
.pixel-avatar.px2.px-alien .px-eye-left, .pixel-avatar.px2.px-alien .px-eye-right { display: none !important; }
.pixel-avatar.px2.px-werwolf .px-mouth, .pixel-avatar.px2.px-roboter .px-mouth { display: none !important; }
.pixel-avatar.px2.px-alien .px-mouth { display: none !important; }
/* Astronautin: Glashelm bleibt über dem Gesicht, aber Augen/Mund dürfen darunter liegen */

/* ═══ Ausrüstung als Pixelgrafik (.gx): volle Avatar-Fläche, das alte CSS-Aussehen entfällt ═══ */
.px-gear.gx {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; clip-path: none !important;
  height: 75px !important; left: 0 !important; top: 0 !important; transform: none !important; width: 54px !important;
}
.px-gear.gx::before, .px-gear.gx::after { display: none !important; }

/* ═══ Legendary-Symbole als Pixelgrafik (.leg-ico.lx): das alte CSS-Aussehen entfällt, Größe/Position bleiben ═══ */
.leg-ico.lx { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; clip-path: none !important; }
.leg-ico.lx::before, .leg-ico.lx::after { display: none !important; }
.pxi-svg { display: block; height: 100%; image-rendering: pixelated; overflow: visible; width: 100%; }
.leg-ico.lx .px-l-glow { animation: pxiGlow 2.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes pxiGlow { from { opacity: 0.25; transform: scale(0.92); } to { opacity: 1; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .leg-ico.lx .px-l-glow { animation: none; } }

/* Status „Fieberverbrennung“ (status-verbrannt) im Pixel-Avatar v2: rote Haut kommt aus der Palette (--skin), dazu Stirnrunzeln, schmale Augen, Schweißperlen */
.pixel-avatar.px2.status-verbrannt .px-mouth {
  background: transparent; border: 2px solid rgba(90, 10, 10, 0.95); border-bottom: none; border-radius: 4px 4px 0 0;
  height: 3px; left: 21px; top: 31px; width: 12px; box-sizing: border-box;
}
.pixel-avatar.px2.status-verbrannt .px-eye-left, .pixel-avatar.px2.status-verbrannt .px-eye-right { height: 2px; top: 25px; }
.pixel-avatar.px2.status-verbrannt .px-face { filter: saturate(1.15) brightness(0.98); }
.pixel-avatar.px2 .px-sweat { left: 16px; top: 14px; width: 22px; z-index: 6; }