.avatar-figure {
  width: min(100%, 300px);
  margin: 0;
  /* Shrinks in a row of figures on a narrow phone, never overflows it. */
  flex: 0 1 auto;
  min-width: 0;
}

.avatar-figure svg {
  display: block;
  width: 100%;
  height: auto;
}

.avatar-body { transform-origin: 152px 212px; }
.avatar-head { transform-origin: 151px 119px; }
.avatar-left-arm { transform-origin: 128px 144px; }
.avatar-right-arm { transform-origin: 173px 144px; }

[data-reaction='waiting'] .avatar-body { animation: avatar-breathe 2.8s ease-in-out infinite; }
[data-reaction='waiting'] .avatar-head {
  animation: avatar-look 5.6s ease-in-out infinite;
}

[data-reaction='complete'] .avatar-body { animation: avatar-jump 1s ease-out both; }
[data-reaction='complete'] .avatar-left-arm {
  --arm-rest: -42deg;
  --arm-up: 41deg;
}
[data-reaction='complete'] .avatar-right-arm {
  --arm-rest: 42deg;
  --arm-up: -41deg;
}
[data-reaction='complete'] :is(.avatar-left-arm, .avatar-right-arm) {
  transform: rotate(var(--arm-up));
  animation: avatar-cheer 1s ease-out both;
}
.avatar-celebration {
  opacity: 0;
  animation: avatar-celebration 1s ease-out both;
}

[data-reaction='stopped'] .avatar-body {
  transform: rotate(4deg) scaleY(.94);
  animation: avatar-exhale 1.4s ease-out both;
}
[data-reaction='stopped'] .avatar-head {
  transform: translateY(3px) rotate(10deg);
  animation: avatar-head-drop 1.4s ease-out both;
}
[data-reaction='stopped'] .avatar-left-arm { --arm-before-drop: 12deg; }
[data-reaction='stopped'] .avatar-right-arm { --arm-before-drop: -12deg; }
[data-reaction='stopped'] :is(.avatar-left-arm, .avatar-right-arm) {
  animation: avatar-arm-drop 1.4s ease-out both;
}

[data-reaction='catch'] .avatar-body { animation: avatar-body-settle 980ms ease-out both; }
[data-reaction='catch'] .avatar-head { animation: avatar-head-nod 980ms ease-out both; }
[data-reaction='catch'] .avatar-left-arm { animation: avatar-arm-catch 980ms ease-out both; }

.avatar-catch-baton {
  transform-origin: 93px 137px;
  animation: avatar-baton-fly 980ms ease-out both;
}

.avatar-catch-spark {
  opacity: 0;
  animation: avatar-catch-spark 980ms linear both;
}

@keyframes avatar-breathe {
  0%, 100% { transform: none; }
  50% { transform: scaleY(1.018) rotate(-1deg); }
}

@keyframes avatar-look {
  0%, 55%, 100% { transform: none; }
  23%, 34% { transform: rotate(-6deg); }
}

@keyframes avatar-jump {
  0%, 100% { transform: none; }
  18% { transform: scaleY(.93); }
  44% { transform: translateY(-19px); }
  69% { transform: scaleY(.95); }
  84% { transform: translateY(-4px); }
}

@keyframes avatar-cheer {
  0%, 18% { transform: rotate(var(--arm-rest)); }
  44%, 100% { transform: rotate(var(--arm-up)); }
}

@keyframes avatar-celebration {
  0%, 24%, 100% { opacity: 0; }
  44%, 62% { opacity: 1; }
}

@keyframes avatar-exhale {
  0% { transform: none; }
  23% { transform: scaleY(1.025); }
  63% { transform: rotate(5deg) scaleY(.91); }
}

@keyframes avatar-head-drop {
  0%, 24% { transform: none; }
  65% { transform: translateY(5px) rotate(13deg); }
}

@keyframes avatar-arm-drop {
  0%, 22% { transform: rotate(var(--arm-before-drop)); }
  64%, 100% { transform: none; }
}

@keyframes avatar-body-settle {
  0% { transform: rotate(-2deg); }
  48% { transform: rotate(-4deg); }
  65% { transform: rotate(3deg) scaleY(.98); }
  83% { transform: rotate(-1deg); }
  100% { transform: none; }
}

@keyframes avatar-head-nod {
  0% { transform: rotate(-5deg); }
  48% { transform: rotate(-3deg); }
  69% { transform: translateY(3px) rotate(5deg); }
  100% { transform: none; }
}

@keyframes avatar-arm-catch {
  0% { transform: rotate(-38deg); }
  35%, 48% { transform: none; }
  64% { transform: rotate(-20deg); }
  100% { transform: none; }
}

@keyframes avatar-baton-fly {
  0% { transform: translate(-132px, -80px) rotate(-210deg); }
  27% { transform: translate(-50px, -43px) rotate(-85deg); }
  48%, 100% { transform: none; }
}

@keyframes avatar-catch-spark {
  0%, 47%, 71%, 100% { opacity: 0; }
  50%, 56% { opacity: 1; }
}

/* A one-shot reaction already played (or joined mid-turn): its end pose, still. */
.avatar-figure[data-settled] svg * { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .avatar-figure[data-reaction] svg * { animation: none; }
}