/* ── Wurzel-Meister · Kunterbunt-Modus ─────────────────────────────────────
   Nur aktiv unter body.kunterbunt (siehe kidsMode.js) - ZUSAETZLICH zum
   normalen, ruhigeren Layout, nicht als Ersatz. Kraeftigere Farben (per
   Wortart, siehe posUtil.js), mehr Bewegung, groessere Emojis. */

@keyframes wm-kb-bounce-in {
  0% { opacity: 0; transform: scale(.6) rotate(-8deg); }
  60% { opacity: 1; transform: scale(1.08) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes wm-kb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pos-color,var(--accent)) 55%, transparent); }
  50% { box-shadow: 0 0 0 10px transparent; }
}
@keyframes wm-kb-rainbow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes wm-kb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

body.kunterbunt .wm-card,
body.kunterbunt .hsk-word-card,
body.kunterbunt .wm-fam-card:not(.locked),
body.kunterbunt .wm-poemlist-card,
body.kunterbunt .wm-verse-card,
body.kunterbunt .wm-reveal-front,
body.kunterbunt .wm-timetravel-char {
  border-width: 3px !important;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--pos-color, var(--fam-color, var(--accent))) 55%, black 12%),
              0 8px 16px -4px color-mix(in srgb, var(--pos-color, var(--fam-color, var(--accent))) 40%, transparent);
  animation: wm-kb-bounce-in .45s cubic-bezier(.34,1.56,.64,1);
}
body.kunterbunt .wm-btn {
  border-radius: 99px !important;
  border-width: 2px !important;
  font-weight: 700;
  transform: translateY(0);
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 55%, black 15%);
}
body.kunterbunt .wm-btn:hover { transform: translateY(-2px); }
body.kunterbunt .wm-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 55%, black 15%); }
body.kunterbunt #wm-open-pack,
body.kunterbunt #hsk-open-pack,
body.kunterbunt .wm-verse-train {
  background: linear-gradient(90deg, #f97316, #ec4899, #a855f7, #3b82f6, #22c55e, #f97316);
  background-size: 200% 100%;
  animation: wm-kb-rainbow 4s linear infinite;
  color: #fff !important;
  border-color: transparent !important;
}

/* Zeichen-Glyphe in Quiz/Zeitreise groesser, mit sanftem Schweben. */
body.kunterbunt .glyph-big,
body.kunterbunt .wm-timetravel-glyph {
  animation: wm-kb-float 2.4s ease-in-out infinite;
}

body.kunterbunt .wm-opt {
  border-width: 2px !important;
  border-radius: 14px !important;
}
body.kunterbunt .wm-opt.correct { animation: wm-kb-pulse .6s ease 2; }

/* Mouseover-Wiggle bewusst NIRGENDS mehr (auf Nutzerwunsch zurueckgesetzt) -
   nur der urspruengliche Hover (attachTilt-3D-Neigung bzw. Button-Translate)
   bleibt erhalten. */

@media (prefers-reduced-motion: reduce) {
  body.kunterbunt .wm-card, body.kunterbunt .hsk-word-card, body.kunterbunt .wm-fam-card,
  body.kunterbunt .wm-poemlist-card, body.kunterbunt .wm-verse-card, body.kunterbunt .wm-reveal-front,
  body.kunterbunt .wm-timetravel-char, body.kunterbunt .glyph-big, body.kunterbunt .wm-timetravel-glyph,
  body.kunterbunt #wm-open-pack, body.kunterbunt #hsk-open-pack, body.kunterbunt .wm-verse-train,
  body.kunterbunt .wm-opt {
    animation: none !important;
  }
}