/* Shared interaction feedback for every vocabulary game mode. */
body.mode-game #yhStage {
  position: relative;
  isolation: isolate;
}

body.mode-game #yhStage::after {
  position: absolute;
  inset: -5px;
  z-index: 20;
  pointer-events: none;
  content: "";
  opacity: 0;
  border: 3px solid transparent;
  border-radius: 12px;
}

body.mode-game #yhStage.yh-result-correct::after {
  border-color: #58b987;
  box-shadow: 0 0 0 7px rgba(88, 185, 135, .13), inset 0 0 35px rgba(88, 185, 135, .08);
  animation: yh-feedback-ring .62s ease-out;
}

body.mode-game #yhStage.yh-result-wrong::after {
  border-color: #ec7582;
  box-shadow: 0 0 0 7px rgba(236, 117, 130, .12), inset 0 0 34px rgba(236, 117, 130, .08);
  animation: yh-feedback-ring .62s ease-out;
}

body.mode-game #yhStage.yh-result-correct { animation: yh-feedback-pop .42s ease-out; }
body.mode-game #yhStage.yh-result-wrong { animation: yh-feedback-shake .38s ease-out; }

body.mode-game .yh-game-score.is-updated { animation: yh-score-pop .5s ease-out; }
body.mode-game .yh-game-score.is-correct { color: #277b56; background: #ecfaf2; border-color: #9bd7b6; }
body.mode-game .yh-game-score.is-wrong { color: #b94f60; background: #fff0f2; border-color: #f1aeb8; }

body.mode-game button,
body.mode-game .btn,
body.mode-game [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

body.mode-game button:not(:disabled):active,
body.mode-game .btn:not(:disabled):active,
body.mode-game [role="button"]:active {
  transform: scale(.975);
}

.yhw-quiz-option--correct,
.yhw-fillin-input--correct,
.yhw-fillin-slot--correct,
.yhw-unscramble-tile--correct,
.yhw-match-top-card--correct,
.yhc-connect-item.is-correct,
.yhw-memory-card--just-matched {
  animation: yh-answer-correct .5s cubic-bezier(.2,.85,.32,1.2) both;
}

.yhw-quiz-option--wrong,
.yhw-fillin-input--wrong,
.yhw-fillin-slot--wrong,
.yhw-unscramble-tile--wrong,
.yhw-match-top-card--wrong,
.yhc-connect-item.is-wrong,
.yhw-ws-cell--wrong {
  animation: yh-answer-wrong .38s ease-out both;
}

.yhw-quiz-option--correct,
.yhw-match-top-card--correct { box-shadow: 0 0 0 4px rgba(88,185,135,.16), 0 9px 18px rgba(56,125,88,.12) !important; }
.yhw-quiz-option--wrong,
.yhw-match-top-card--wrong { box-shadow: 0 0 0 4px rgba(236,117,130,.14) !important; }

.yhw-unscramble-tile.sel,
.yhw-match-bottom-card--active,
.yhc-connect-item.is-pending {
  animation: yh-selected-pulse 1.15s ease-in-out infinite;
}

.yhw-unscramble-tile.is-swapped,
.yhw-vowel-letter.is-picked { animation: yh-choice-bounce .24s ease-out; }

.yhw-memory-card.is-flipped:not(.is-matched) {
  filter: drop-shadow(0 8px 12px rgba(104, 79, 145, .2));
}

.yhw-ws-cell--found { animation: yh-cell-found .42s ease-out both; }
.yhw-ws-cell--wrong { color: #fff !important; background: #e46a79 !important; border-color: #cf5263 !important; }

@keyframes yh-feedback-ring {
  0% { opacity: 0; transform: scale(.985); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.01); }
}

@keyframes yh-feedback-pop {
  0% { transform: scale(.993); }
  45% { transform: scale(1.007); }
  100% { transform: scale(1); }
}

@keyframes yh-feedback-shake {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-5px); }
  45% { transform: translateX(4px); }
  68% { transform: translateX(-3px); }
  84% { transform: translateX(2px); }
}

@keyframes yh-score-pop {
  0% { transform: scale(1); }
  42% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes yh-answer-correct {
  0% { transform: scale(.98); }
  52% { transform: scale(1.025); }
  100% { transform: scale(1); }
}

@keyframes yh-answer-wrong {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-5px); }
  60% { transform: translateX(4px); }
}

@keyframes yh-selected-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.06); }
}

@keyframes yh-choice-bounce {
  0% { transform: scale(.9); }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes yh-cell-found {
  0% { transform: scale(.72); }
  70% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  body.mode-game #yhStage,
  body.mode-game #yhStage::after,
  body.mode-game .yh-game-score,
  body.mode-game .yhw-quiz-option,
  body.mode-game .yhw-fillin-input,
  body.mode-game .yhw-fillin-slot,
  body.mode-game .yhw-unscramble-tile,
  body.mode-game .yhw-match-top-card,
  body.mode-game .yhw-match-bottom-card,
  body.mode-game .yhc-connect-item,
  body.mode-game .yhw-memory-card,
  body.mode-game .yhw-vowel-letter,
  body.mode-game .yhw-ws-cell { animation: none !important; transition-duration: .01ms !important; }
}