/* Chat-Maskottchen „Zwei“ (14.10.2026)
   Der Chat-Knopf #chatBubble bekommt Arme und Beine; die Figur ist das Logo
   (orange Form + Würfelfläche mit zwei Augen) und hat bewusst KEIN Gesicht.
   Ablauf und Regeln: static/js/pn-zwei.js · Doku: docs/CHAT-MASKOTTCHEN.md
   Der Knopf behält Größe und Platz (64 × 64); die Figur ragt nur optisch
   heraus (pointer-events:none), die Klickfläche bleibt der Knopf. */

.chat-bubble.pn-zwei { overflow: visible; transform-origin: 50% 90%; }
body.pn-feed .chat-bubble.pn-zwei { transition: opacity 0.2s ease; }
body.pn-feed .chat-bubble.pn-zwei:hover,
body.pn-feed .chat-bubble.pn-zwei:active { transform: none; }
.chat-bubble.pn-zwei > img { display: none !important; }
.chat-bubble.pn-zwei:focus-visible { outline: 2px solid var(--accent-strong, #c24e00); outline-offset: 4px; border-radius: 50%; }

.pn-zwei .z-svg {
  position: absolute; left: -20px; top: -22.5px; width: 104px; height: 109px;
  overflow: visible; display: block; pointer-events: none;
}
.pn-zwei .z-svg * { transform-box: view-box; }
.pn-zwei .z-all { transform-origin: 50px 130px; }
.pn-zwei .z-spin, .pn-zwei .z-breathe, .pn-zwei .z-body, .pn-zwei .z-face { transform-origin: 50px 52px; }
.pn-zwei .z-gaze { transition: transform 0.25s ease-out; }
.pn-zwei .z-arm-l { transform-origin: 10px 56px; }
.pn-zwei .z-arm-r { transform-origin: 90px 56px; }
.pn-zwei .z-leg-l { transform-origin: 40px 86px; }
.pn-zwei .z-leg-r { transform-origin: 60px 86px; }
.pn-zwei .z-shadow { transform-origin: 50px 134px; }
.pn-zwei .z-pips circle { transform-box: fill-box; transform-origin: center; transition: opacity 0.07s; }
.pn-zwei .z-ball { opacity: 0; }

/* Ruhe-Atmen; beim Gehen wippt er stattdessen */
.pn-zwei .z-breathe { animation: pn-zwei-atmen 3.4s ease-in-out infinite; }
.pn-zwei.is-asleep .z-breathe { animation-duration: 5.5s; }
@keyframes pn-zwei-atmen { 50% { transform: translateY(1.5px) scale(1.025, 0.975); } }

.pn-zwei.is-walking .z-leg-l { animation: pn-zwei-bein 0.42s ease-in-out infinite alternate; }
.pn-zwei.is-walking .z-leg-r { animation: pn-zwei-bein 0.42s ease-in-out infinite alternate-reverse; }
.pn-zwei.is-walking .z-arm-l { animation: pn-zwei-arm-l 0.42s ease-in-out infinite alternate-reverse; }
.pn-zwei.is-walking .z-arm-r { animation: pn-zwei-arm-r 0.42s ease-in-out infinite alternate-reverse; }
.pn-zwei.is-walking .z-breathe { animation: pn-zwei-wippen 0.21s ease-in-out infinite alternate; }
@keyframes pn-zwei-bein { from { transform: rotate(24deg); } to { transform: rotate(-24deg); } }
@keyframes pn-zwei-arm-l { from { transform: rotate(30deg); } to { transform: rotate(-22deg); } }
@keyframes pn-zwei-arm-r { from { transform: rotate(22deg); } to { transform: rotate(-30deg); } }
@keyframes pn-zwei-wippen { from { transform: translateY(0); } to { transform: translateY(-4px); } }

/* Sprechblase (einmal pro Sitzung) */
.pn-zwei .z-say {
  position: absolute; right: 2px; bottom: 82px; z-index: 1;
  background: var(--pn-sf-0, #fff); color: #a74300; font: 800 0.9rem/1.25 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: 0.45rem 0.8rem; border-radius: 14px; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  opacity: 0; transform-origin: 85% 120%; pointer-events: none;
}
.pn-zwei .z-say::after {
  content: ""; position: absolute; right: 18px; bottom: -7px;
  border: 8px solid transparent; border-bottom: 0; border-top-color: var(--pn-sf-0, #fff);
}
html[data-theme="dunkel"] .pn-zwei .z-say { color: #ffb27a; }

/* Schlafen */
.pn-zwei .z-zzz { position: absolute; left: 44px; top: -24px; pointer-events: none; }
.pn-zwei .z-zzz span {
  position: absolute; font: 900 1rem/1 ui-rounded, system-ui, sans-serif; color: #a74300; opacity: 0;
}
html[data-theme="dunkel"] .pn-zwei .z-zzz span { color: #ffb27a; }
.pn-zwei.is-asleep .z-zzz span { animation: pn-zwei-z 2.7s ease-out infinite; }
.pn-zwei.is-asleep .z-zzz span:nth-child(2) { animation-delay: 0.9s; font-size: 1.15rem; }
.pn-zwei.is-asleep .z-zzz span:nth-child(3) { animation-delay: 1.8s; font-size: 1.35rem; }
@keyframes pn-zwei-z {
  0% { opacity: 0; transform: translate(0, 10px) scale(0.6); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(22px, -38px) scale(1); }
}

/* Besuch und Würfel außerhalb des Knopfs */
.pn-zwei-prop { position: fixed; left: 0; bottom: 10px; z-index: 9998; pointer-events: none; }
.pn-zwei-prop svg { width: 100%; height: 100%; display: block; }
.pn-zwei-prop--meeple { width: 44px; height: 48px; }
.pn-zwei-prop--meeple svg { transform-origin: 50% 100%; animation: pn-zwei-watscheln 0.3s ease-in-out infinite alternate; }
@keyframes pn-zwei-watscheln { from { transform: rotate(-9deg); } to { transform: rotate(9deg) translateY(-2px); } }
.pn-zwei-prop--die { width: 28px; height: 28px; }

/* Fenster offen: Figur samt Requisiten weg (Knopf blendet theme.v2.css aus) */
body.pn-sheet-open .pn-zwei-prop { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pn-zwei .z-breathe, .pn-zwei.is-walking .z-leg-l, .pn-zwei.is-walking .z-leg-r,
  .pn-zwei.is-walking .z-arm-l, .pn-zwei.is-walking .z-arm-r, .pn-zwei-prop svg { animation: none; }
}