/* Der laufende Erzähler – Stil */

:root {
  --figure-yellow: #f6d43c;
  --line: #111;
  /* Muss zu config.cycleSeconds in script.js passen */
  --cycle: 1.4s;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: "Comic Sans MS", "Segoe Print", system-ui, sans-serif;
  background: linear-gradient(#87ceeb 0%, #bfe3f2 60%, #7ec850 60%, #5aa63c 100%);
}

#stage {
  position: relative;
  height: 100%;
}

#controls {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
}

#controls button {
  font-family: inherit;
  font-size: 14px;
  background: var(--figure-yellow);
  border: 3px solid var(--line);
  border-radius: 12px;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
}

#controls button:hover { background: #ffe27a; }

/* ---------- Figur ---------- */
#walker {
  position: absolute;
  bottom: 18%;
  left: 0;
  width: 120px;
  will-change: left;
}

#walker.flip {
  transform: scaleX(-1);
}

/* ---------- Lauf-Zyklus: Hüfte, Knie, Schuh ---------- */
.thigh { transform-origin: 48px 122px; animation: thigh var(--cycle) infinite ease-in-out; }
.shin { transform-origin: 48px 152px; animation: knee var(--cycle) infinite ease-in-out; }
.leg.back .thigh,
.leg.back .shin { animation-delay: calc(var(--cycle) / -2); }

@keyframes thigh {
  0% { transform: rotate(30deg); }
  50% { transform: rotate(-30deg); }
  100% { transform: rotate(30deg); }
}

@keyframes knee {
  0% { transform: rotate(12deg); }
  15% { transform: rotate(55deg); }
  40% { transform: rotate(18deg); }
  50% { transform: rotate(3deg); }
  100% { transform: rotate(12deg); }
}

/* ---------- Arme mit Ellbogen, gegenläufig zu den Beinen ---------- */
.upperarm { transform-origin: 48px 82px; animation: armSwing var(--cycle) infinite ease-in-out; }
.forearm { transform-origin: 48px 104px; animation: elbow var(--cycle) infinite ease-in-out; }
.arm.back .upperarm,
.arm.back .forearm { animation-delay: calc(var(--cycle) / -2); }

@keyframes armSwing {
  0% { transform: rotate(-32deg); }
  50% { transform: rotate(34deg); }
  100% { transform: rotate(-32deg); }
}

@keyframes elbow {
  0% { transform: rotate(-10deg); }
  25% { transform: rotate(-35deg); }
  60% { transform: rotate(-8deg); }
  100% { transform: rotate(-10deg); }
}

/* Körper federt bei jedem Schritt */
.body-bob { animation: bob calc(var(--cycle) / 2) infinite alternate ease-in-out; }

@keyframes bob {
  from { transform: translateY(0); }
  to { transform: translateY(2.5px); }
}

/* ---------- Sprechender Mund ---------- */
#mouthGroup {
  transform-box: fill-box;
  transform-origin: center top;
}

body.talking #mouthGroup {
  animation: talk 0.22s infinite alternate ease-in-out;
}

@keyframes talk {
  from { transform: scaleY(0.35); }
  to { transform: scaleY(1.25); }
}

/* ---------- Rücksicht auf Bewegungs-Empfindlichkeit ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --cycle: 4s; }
}