/* A21: o cartão escolhido na conversa de fechamento muda de aparência, como a escolha nos desafios. */
.retro-board button.selected {
  background: var(--kid-pick-bg, #e9eeff);
  border: 3px solid var(--kid-pick, #2f4fb3);
  color: #1d2a5c;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kid-pick, #2f4fb3) 25%, transparent);
}
.retro-board button.selected::after {
  content: ' ✓';
}
/* O botão de ouvir enquanto a voz é preparada (shell/voice-button.js). */
button.voice-busy {
  position: relative;
  cursor: progress;
  opacity: 0.75;
}
button.voice-busy::after {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.45em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: voice-busy-spin 0.9s linear infinite;
}
button.voice-playing::after {
  content: 'Ⅱ';
  display: inline-block;
  margin-left: 0.45em;
  font-weight: 700;
}
.voice-preparing {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-left: 0.5em;
  font-size: 0.9em;
}
.voice-cancel {
  min-height: 36px;
}
.voice-feedback {
  position: fixed;
  inset: auto;
  width: min(280px, calc(100vw - 16px));
  margin: 0;
  padding: 18px;
  border: 1px solid var(--app-border, #cedbd1);
  border-radius: 16px;
  background: var(--app-card, #fffdf7);
  color: var(--app-ink, #213c34);
  box-shadow: 0 10px 30px rgb(0 0 0 / 16%);
  font: inherit;
}
.voice-feedback:popover-open {
  display: block;
}
.voice-feedback strong {
  display: block;
  padding-right: 30px;
}
.voice-feedback p {
  margin: 0;
  padding-right: 18px;
  line-height: 1.5;
}
.voice-feedback-choices {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.voice-feedback .voice-feedback-choices button {
  min-width: 60px;
  min-height: 48px;
  font-size: 22px;
}
.voice-feedback .voice-feedback-close {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 32px;
  min-height: 32px;
  padding: 2px;
}
@keyframes voice-busy-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  button.voice-busy::after {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.6;
  }
}
.voice-error {
  display: inline-block;
  margin-left: 0.5em;
  font-size: 0.9em;
  color: #9f1d14;
}