/* Der Kobold: Größe über --kobold-size (Breite), Bewegung in Einheiten der Zeichnung. */
.kobold {
  --kobold-size: 220px;
  position: relative;
  display: inline-block;
  width: var(--kobold-size);
  line-height: 0;
  pointer-events: none;
}

.kobold-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.kobold-figure {
  transform-origin: 110px 262px;
  animation: kobold-bob 1.7s ease-in-out infinite alternate;
}

.kobold-head {
  transform-origin: 110px 150px;
  animation: kobold-nod 3.4s ease-in-out infinite alternate;
}

.kobold-eyes {
  transform-origin: 110px 98px;
  animation: kobold-blink 4.6s infinite;
}

/* Alle fünf Sekunden hebt er den Krug zum Anstoßen. */
.kobold-arm {
  transform-origin: 146px 162px;
  animation: kobold-toast 5s cubic-bezier(0.3, 1.3, 0.5, 1) infinite;
}

.kobold-drop {
  opacity: 0;
  animation: kobold-splash 5s ease-out infinite;
}

.kobold-drop-2 {
  animation-delay: 0.06s;
}

.kobold-drop-3 {
  animation-delay: 0.12s;
}

.kobold-shadow {
  transform-origin: 110px 270px;
  animation: kobold-shadow 1.7s ease-in-out infinite alternate;
}

/* Beim laufenden Lied wippt er im Takt mit. */
.kobold.is-dancing .kobold-figure {
  animation: kobold-dance 0.9s ease-in-out infinite alternate;
}

@keyframes kobold-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-5px); }
}

@keyframes kobold-shadow {
  from { transform: scaleX(1); }
  to { transform: scaleX(0.92); }
}

@keyframes kobold-nod {
  from { transform: rotate(-2.5deg); }
  to { transform: rotate(3deg); }
}

@keyframes kobold-blink {
  0%, 93%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.08); }
}

@keyframes kobold-toast {
  0%, 52%, 100% { transform: rotate(0deg); }
  60% { transform: rotate(-24deg); }
  68% { transform: rotate(-15deg); }
  76% { transform: rotate(-24deg); }
  90% { transform: rotate(0deg); }
}

@keyframes kobold-splash {
  0%, 58% { opacity: 0; transform: translate(0, 10px) scale(0.4); }
  62% { opacity: 1; transform: translate(0, 0) scale(1); }
  78% { opacity: 1; transform: translate(4px, -26px) scale(1); }
  88%, 100% { opacity: 0; transform: translate(6px, -34px) scale(0.6); }
}

@keyframes kobold-dance {
  from { transform: rotate(-5deg) translateY(0); }
  50% { transform: rotate(0deg) translateY(-7px); }
  to { transform: rotate(5deg) translateY(0); }
}

/* Sprechblase */
.kobold-says {
  position: absolute;
  left: 78%;
  top: 4%;
  padding: 0.3em 0.62em 0.36em;
  border: 0.1em solid var(--green-dark);
  border-radius: 0.9em 0.9em 0.9em 0.2em;
  background: var(--cream-soft);
  color: var(--green-deep);
  font-family: var(--font-display);
  font-size: calc(var(--kobold-size) * 0.15);
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 0.18em 0.4em rgba(0, 0, 0, 0.28);
  transform-origin: 0 100%;
}

.kobold-says.pop {
  animation: kobold-pop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1);
}

/* Blase links vom Kobold statt rechts. */
.kobold.says-left .kobold-says {
  left: auto;
  right: 82%;
  border-radius: 0.9em 0.9em 0.2em 0.9em;
  transform-origin: 100% 100%;
}

/* Blase über dem Kopf, wenn rechts kein Platz ist. */
.kobold.says-top .kobold-says {
  left: 18%;
  top: auto;
  bottom: 96%;
}

@keyframes kobold-pop {
  from { transform: scale(0.6) rotate(-4deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .kobold-figure,
  .kobold-head,
  .kobold-eyes,
  .kobold-arm,
  .kobold-shadow,
  .kobold-says.pop,
  .kobold.is-dancing .kobold-figure {
    animation: none;
  }

  .kobold-drop {
    animation: none;
    opacity: 0;
  }

  .kobold-arm {
    transform: rotate(-18deg);
  }
}