.therapy-word-image {
  display: grid;
  place-items: center;
  min-height: 220px;
  border-radius: 14px;
  background: #f4f8f6;
  font-size: 7rem;
  background-image: var(--word-image);
  background-size: 400% 400%;
  background-position: var(--word-position);
  background-repeat: no-repeat;
}

.speech-light {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 12px auto 18px;
  padding: 10px 16px;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: #fffdf8;
  font-size: 1.1rem;
  position: relative;
  z-index: 2;
}

.automatic-practice-card {
  display: block;
  min-height: 0;
  padding: 22px;
  overflow: visible;
  text-align: center;
}

#automatic-practice-target {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 18px;
  transition: color .15s ease, background-color .15s ease;
}

#automatic-practice-target.auto-win {
  color: #fff;
  background: #16834f;
  animation: automatic-win .65s ease-out 1;
}

#automatic-practice-target.auto-loss {
  color: #fff;
  background: #b42318;
  animation: automatic-loss .65s ease-out 1;
}

@keyframes automatic-win {
  0% { transform: scale(1); }
  35% { transform: scale(1.16) rotate(-2deg); }
  70% { transform: scale(1.08) rotate(2deg); }
  100% { transform: scale(1); }
}

@keyframes automatic-loss {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

@media (prefers-reduced-motion: reduce) {
  #automatic-practice-target.auto-win,
  #automatic-practice-target.auto-loss { animation: none; }
}

.speech-light span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #b42318;
  box-shadow: 0 0 0 4px rgb(180 35 24 / 14%);
}

.speech-light.is-green span {
  background: #16834f;
  box-shadow: 0 0 0 4px rgb(22 131 79 / 16%);
}

.speech-light.is-green {
  border-color: #16834f;
}