/* Shared 2.1-second pastel answer feedback for landing demos and board games. */
.shared-card-game .game-control.is-answer-correct,
.shared-card-game .gap-drop.is-answer-correct { animation: answer-feedback-green 2.1s ease-in-out; }
.shared-card-game .game-control.is-answer-incorrect,
.shared-card-game .gap-drop.is-answer-incorrect { animation: answer-feedback-red 2.1s ease-in-out; }

@keyframes answer-feedback-green {
  0%, 100% { background-color: transparent; box-shadow: 0 0 0 0 #789a8000; filter: brightness(1); }
  18%, 42%, 68% { background-color: #dcebe080; box-shadow: 0 0 0 2px #92b49a35, 0 0 12px #9fc5a34d; filter: brightness(1.025); }
  32%, 55% { background-color: #eaf3e9a8; box-shadow: 0 0 0 3px #91b99a2b, 0 0 16px #a8c9aa5c; filter: brightness(1.04); }
}
@keyframes answer-feedback-red {
  0%, 100% { background-color: transparent; box-shadow: 0 0 0 0 #b9898900; filter: brightness(1); }
  18%, 42%, 68% { background-color: #f2e3e380; box-shadow: 0 0 0 2px #c8a0a035, 0 0 12px #d3aaa64d; filter: brightness(1.025); }
  32%, 55% { background-color: #f7ece9a8; box-shadow: 0 0 0 3px #c9a29a2b, 0 0 16px #d9b6aa5c; filter: brightness(1.04); }
}

.shared-card-game .game-control.is-answer-correct::after,
.shared-card-game .game-control.is-answer-incorrect::after,
.shared-card-game .gap-drop.is-answer-correct::after,
.shared-card-game .gap-drop.is-answer-incorrect::after,
.shared-card-game .rank-order-row.is-answer-correct::after,
.shared-card-game .rank-order-row.is-answer-incorrect::after {
  content: ""; position: absolute; z-index: -1; inset: -35% -45%; border-radius: inherit;
  pointer-events: none; opacity: 0; transform: translateX(-52%);
  animation: answer-gradient-sweep 2.1s ease-in-out;
}
.shared-card-game .game-control.is-answer-correct,
.shared-card-game .game-control.is-answer-incorrect,
.shared-card-game .gap-drop.is-answer-correct,
.shared-card-game .gap-drop.is-answer-incorrect,
.shared-card-game .rank-order-row.is-answer-correct,
.shared-card-game .rank-order-row.is-answer-incorrect { position: relative; isolation: isolate; overflow: hidden; }
.shared-card-game .game-control.is-answer-correct::after,
.shared-card-game .gap-drop.is-answer-correct::after,
.shared-card-game .rank-order-row.is-answer-correct::after {
  background: linear-gradient(108deg, transparent 8%, #b5ceb522 27%, #a5c4aa78 48%, #f2f7e866 58%, #a5c4aa72 72%, transparent 93%);
}
.shared-card-game .game-control.is-answer-incorrect::after,
.shared-card-game .gap-drop.is-answer-incorrect::after,
.shared-card-game .rank-order-row.is-answer-incorrect::after {
  background: linear-gradient(108deg, transparent 8%, #dfb8b022 27%, #d9aaa578 48%, #fbf0e866 58%, #d6aaa172 72%, transparent 93%);
}
@keyframes answer-gradient-sweep {
  0% { opacity: 0; transform: translateX(-52%); }
  18% { opacity: .38; }
  42% { opacity: .22; transform: translateX(8%); }
  68% { opacity: .34; transform: translateX(38%); }
  100% { opacity: 0; transform: translateX(65%); }
}

/* Landing demos use the same palette and timing. Removing these temporary classes
   after the pulse lets the transitions below return each control to its base style. */
.ll-landing .ll-game-feedback.is-success,
.ll-landing .ll-letter-answer.is-success,
.ll-landing .ll-letter-answer > button.is-success,
.ll-landing .ll-gap-sentence.is-success,
.ll-landing .ll-ordered-phrase.is-success,
.ll-landing .ll-match-column button.is-success,
.ll-landing .ll-word-bank button.is-success,
.ll-landing .ll-gap-answers button.is-success,
.ll-landing .ll-answer-buttons button.is-success,
.ll-landing .ll-flip-card.is-success .ll-card-face {
  position: relative; isolation: isolate; overflow: hidden; border-color: #b4cbb7; color: #55775c;
  background-color: #edf3eb; background-image: none; animation: answer-feedback-green 2.1s ease-in-out;
}
.ll-landing .ll-game-feedback.is-error,
.ll-landing .ll-letter-answer.is-error,
.ll-landing .ll-letter-answer > button.is-error,
.ll-landing .ll-gap-sentence.is-error,
.ll-landing .ll-ordered-phrase.is-error,
.ll-landing .ll-word-bank button.is-error,
.ll-landing .ll-gap-answers button.is-error,
.ll-landing .ll-answer-buttons button.is-error,
.ll-landing .ll-match-column button.is-error {
  position: relative; isolation: isolate; overflow: hidden; border-color: #d8c0bc; color: #906b68;
  background-color: #f7eeeb; background-image: none; animation: answer-feedback-red 2.1s ease-in-out;
}
.ll-landing .ll-gap-sentence.is-success,
.ll-landing .ll-gap-sentence.is-error { padding: 12px 20px; border: 1px solid; border-radius: 16px; }
.ll-landing .ll-game-feedback.is-success::after,
.ll-landing .ll-game-feedback.is-error::after,
.ll-landing .ll-letter-answer.is-success::after,
.ll-landing .ll-letter-answer.is-error::after,
.ll-landing .ll-letter-answer > button.is-success::after,
.ll-landing .ll-letter-answer > button.is-error::after,
.ll-landing .ll-gap-sentence.is-success::after,
.ll-landing .ll-gap-sentence.is-error::after,
.ll-landing .ll-ordered-phrase.is-success::after,
.ll-landing .ll-ordered-phrase.is-error::after,
.ll-landing .ll-match-column button.is-success::after,
.ll-landing .ll-match-column button.is-error::after,
.ll-landing .ll-word-bank button.is-success::after,
.ll-landing .ll-word-bank button.is-error::after,
.ll-landing .ll-gap-answers button.is-success::after,
.ll-landing .ll-gap-answers button.is-error::after,
.ll-landing .ll-answer-buttons button.is-success::after,
.ll-landing .ll-answer-buttons button.is-error::after,
.ll-landing .ll-flip-card.is-success .ll-card-face::after {
  content: ""; position: absolute; z-index: -1; inset: -35% -45%; border-radius: inherit;
  pointer-events: none; opacity: 0; transform: translateX(-52%);
  animation: answer-gradient-sweep 2.1s ease-in-out;
}
.ll-landing .ll-game-feedback.is-success::after,
.ll-landing .ll-letter-answer.is-success::after,
.ll-landing .ll-letter-answer > button.is-success::after,
.ll-landing .ll-gap-sentence.is-success::after,
.ll-landing .ll-ordered-phrase.is-success::after,
.ll-landing .ll-match-column button.is-success::after,
.ll-landing .ll-word-bank button.is-success::after,
.ll-landing .ll-gap-answers button.is-success::after,
.ll-landing .ll-answer-buttons button.is-success::after,
.ll-landing .ll-flip-card.is-success .ll-card-face::after {
  background: linear-gradient(108deg, transparent 8%, #b5ceb522 27%, #a5c4aa78 48%, #f2f7e866 58%, #a5c4aa72 72%, transparent 93%);
}
.ll-landing .ll-game-feedback.is-error::after,
.ll-landing .ll-letter-answer.is-error::after,
.ll-landing .ll-letter-answer > button.is-error::after,
.ll-landing .ll-gap-sentence.is-error::after,
.ll-landing .ll-ordered-phrase.is-error::after,
.ll-landing .ll-match-column button.is-error::after,
.ll-landing .ll-word-bank button.is-error::after,
.ll-landing .ll-gap-answers button.is-error::after,
.ll-landing .ll-answer-buttons button.is-error::after {
  background: linear-gradient(108deg, transparent 8%, #dfb8b022 27%, #d9aaa578 48%, #fbf0e866 58%, #d6aaa172 72%, transparent 93%);
}
.ll-landing .ll-game-feedback,
.ll-landing .ll-letter-answer,
.ll-landing .ll-letter-answer > button,
.ll-landing .ll-gap-sentence,
.ll-landing .ll-ordered-phrase,
.ll-landing .ll-match-column button,
.ll-landing .ll-word-bank button,
.ll-landing .ll-gap-answers button,
.ll-landing .ll-answer-buttons button,
.ll-landing .ll-card-face {
  transition: background-color .5s ease, border-color .5s ease, color .5s ease, box-shadow .5s ease, filter .5s ease;
}

.shared-card-game .rank-order-row.is-answer-correct,
.shared-card-game .rank-order-row.is-answer-incorrect { animation: answer-feedback-green 2.1s ease-in-out; }
.shared-card-game .rank-order-row.is-answer-incorrect { animation-name: answer-feedback-red; }
.shared-card-game .shared-game-feedback.is-visible[data-kind="correct"],
.shared-card-game .shared-game-feedback.is-visible[data-kind="incorrect"] { border-radius: 16px; }

@media (prefers-reduced-motion: reduce) {
  .shared-card-game .game-control.is-answer-correct,
  .shared-card-game .game-control.is-answer-incorrect,
  .shared-card-game .gap-drop.is-answer-correct,
  .shared-card-game .gap-drop.is-answer-incorrect,
  .shared-card-game .rank-order-row.is-answer-correct,
  .shared-card-game .rank-order-row.is-answer-incorrect,
  .ll-landing .ll-game-feedback.is-success,
  .ll-landing .ll-game-feedback.is-error,
  .ll-landing .ll-letter-answer.is-success,
  .ll-landing .ll-letter-answer.is-error,
  .ll-landing .ll-letter-answer > button.is-success,
  .ll-landing .ll-letter-answer > button.is-error,
  .ll-landing .ll-gap-sentence.is-success,
  .ll-landing .ll-gap-sentence.is-error,
  .ll-landing .ll-ordered-phrase.is-success,
  .ll-landing .ll-ordered-phrase.is-error,
  .ll-landing .ll-match-column button.is-success,
  .ll-landing .ll-match-column button.is-error,
  .ll-landing .ll-word-bank button.is-success,
  .ll-landing .ll-word-bank button.is-error,
  .ll-landing .ll-gap-answers button.is-success,
  .ll-landing .ll-gap-answers button.is-error,
  .ll-landing .ll-answer-buttons button.is-success,
  .ll-landing .ll-answer-buttons button.is-error,
  .ll-landing .ll-flip-card.is-success .ll-card-face { animation: none; }
}