/* Knobelbande — Reaktionen. Regeln: 03-spiele/reaktionen/CLAUDE.md
   Grundaussehen der Knöpfe steht in knobelbande.css (6.16), hier nur das Lebendige. */

.knopf--reaktion { position: relative; }
.knopf--reaktion[aria-busy="true"] { cursor: progress; }

/* Kleiner Hüpfer beim Drücken, dazu ein „+1“, das nach oben schwebt */
.knopf--reaktion.ist-neu { animation: reaktion-huepfen .45s cubic-bezier(.3, 1.6, .5, 1); }
.knopf--reaktion.ist-neu .icon { animation: reaktion-wackeln .5s ease; }
@keyframes reaktion-huepfen {
  0% { transform: scale(1); }
  35% { transform: scale(1.08) rotate(-1.5deg); }
  100% { transform: scale(1); }
}
@keyframes reaktion-wackeln {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-14deg); }
  60% { transform: rotate(10deg); }
}
.reaktion__plus {
  position: absolute;
  right: var(--abstand-3);
  top: calc(var(--abstand-2) * -1);
  padding: 0 .35em;
  border-radius: var(--radius-rund);
  background: var(--zettel-gelb);
  border: 1.5px solid var(--tinte);
  font-family: var(--schrift-hand);
  font-size: var(--groesse-text);
  line-height: 1.2;
  pointer-events: none;
  animation: reaktion-plus .9s ease-out forwards;
}
@keyframes reaktion-plus {
  0% { opacity: 0; transform: translateY(6px) scale(.8); }
  25% { opacity: 1; transform: translateY(-4px) scale(1.05); }
  100% { opacity: 0; transform: translateY(-22px) scale(1); }
}

/* Rückmeldung unter den Knöpfen */
.reaktionen__meldung {
  margin: 0;
  padding: var(--abstand-2) var(--abstand-3);
  border-radius: var(--radius-klein);
  border-left: 4px solid var(--hinweis);
  background: var(--hinweis-hell);
  font-weight: 700;
}
.reaktionen__meldung--danke { border-left-color: var(--erfolg); background: var(--erfolg-hell); }
.reaktionen__meldung--fehler { border-left-color: var(--fehler); background: var(--fehler-hell); }

@media (prefers-reduced-motion: reduce) {
  .knopf--reaktion.ist-neu, .knopf--reaktion.ist-neu .icon { animation: none; }
  .reaktion__plus { display: none; }
}