.training-feedback-surface {
  position: relative;
  isolation: isolate;
}

.training-feedback-motion {
  --training-feedback-color: var(--green, #315644);
  --training-feedback-soft: color-mix(in srgb, var(--green-soft, #dce7dd) 88%, transparent);
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
  color: var(--training-feedback-color);
  pointer-events: none;
}

.training-scene__card[data-training-auto-feedback] {
  cursor: pointer;
}

.training-scene__card[data-training-auto-feedback] .training-feedback-motion {
  pointer-events: auto;
}

.training-feedback-motion--wrong {
  --training-feedback-color: var(--terracotta-dark, #843b2c);
  --training-feedback-soft: color-mix(in srgb, #f2dfd9 88%, transparent);
}

.training-feedback-motion__wash,
.training-feedback-motion__ring,
.training-feedback-motion__badge {
  position: absolute;
}

.training-feedback-motion__wash {
  inset: 0;
  background: radial-gradient(circle at center, var(--training-feedback-soft) 0, color-mix(in srgb, var(--training-feedback-soft) 60%, transparent) 34%, transparent 72%);
  opacity: 0;
}

.training-feedback-motion__ring {
  width: clamp(5.5rem, 25cqw, 9rem);
  aspect-ratio: 1;
  border: 2px solid color-mix(in srgb, var(--training-feedback-color) 46%, transparent);
  border-radius: 50%;
  opacity: 0;
}

.training-feedback-motion__badge {
  min-width: clamp(5.6rem, 21cqw, 7.25rem);
  min-height: clamp(5.6rem, 21cqw, 7.25rem);
  display: grid;
  place-content: center;
  gap: 0.1rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--training-feedback-color) 38%, transparent);
  border-radius: 50%;
  color: var(--training-feedback-color);
  background: color-mix(in srgb, var(--surface, #fffdf8) 92%, var(--training-feedback-soft));
  box-shadow: 0 14px 38px color-mix(in srgb, var(--training-feedback-color) 18%, transparent);
  text-align: center;
}

.training-feedback-motion__badge b {
  font-family: Georgia, serif;
  font-size: clamp(1.75rem, 7cqw, 2.6rem);
  line-height: 1;
}

.training-feedback-motion__badge strong {
  font-family: system-ui, sans-serif;
  font-size: clamp(0.68rem, 2.3cqw, 0.82rem);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .training-feedback-motion {
    animation: training-feedback-layer var(--training-feedback-duration, 900ms) both;
  }

  .training-feedback-motion[data-feedback-motion="stamp"] .training-feedback-motion__badge {
    animation: training-feedback-stamp 720ms cubic-bezier(.2, .88, .25, 1.2) both;
  }

  .training-feedback-motion[data-feedback-motion="stamp"] .training-feedback-motion__ring--first {
    animation: training-feedback-stamp-ring 760ms 70ms ease-out both;
  }

  .training-feedback-motion[data-feedback-motion="ripple"] .training-feedback-motion__badge {
    animation: training-feedback-symbol 760ms ease-out both;
  }

  .training-feedback-motion[data-feedback-motion="ripple"] .training-feedback-motion__ring--first {
    animation: training-feedback-ripple 820ms ease-out both;
  }

  .training-feedback-motion[data-feedback-motion="ripple"] .training-feedback-motion__ring--second {
    animation: training-feedback-ripple 820ms 140ms ease-out both;
  }

  .training-feedback-motion[data-feedback-motion="wash"] .training-feedback-motion__wash {
    animation: training-feedback-wash 820ms ease-out both;
  }

  .training-feedback-motion[data-feedback-motion="wash"] .training-feedback-motion__badge {
    animation: training-feedback-lift 780ms cubic-bezier(.2, .8, .25, 1) both;
  }

  @keyframes training-feedback-layer {
    0%, 100% { opacity: 0; }
    8%, 88% { opacity: 1; }
  }

  @keyframes training-feedback-stamp {
    0% { opacity: 0; transform: scale(.72) rotate(-5deg); }
    35% { opacity: 1; transform: scale(1.08) rotate(1deg); }
    55%, 100% { opacity: 1; transform: scale(1) rotate(0); }
  }

  @keyframes training-feedback-stamp-ring {
    0% { opacity: .5; transform: scale(.56); }
    100% { opacity: 0; transform: scale(1.45); }
  }

  @keyframes training-feedback-symbol {
    0% { opacity: 0; transform: scale(.88); }
    22%, 72% { opacity: 1; transform: scale(1); }
    100% { opacity: .75; transform: scale(.98); }
  }

  @keyframes training-feedback-ripple {
    0% { opacity: .55; transform: scale(.45); }
    100% { opacity: 0; transform: scale(1.9); }
  }

  @keyframes training-feedback-wash {
    0%, 100% { opacity: 0; transform: scale(.84); }
    28%, 68% { opacity: .9; transform: scale(1.08); }
  }

  @keyframes training-feedback-lift {
    0% { opacity: 0; transform: translateY(.9rem) scale(.94); }
    28%, 72% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: .8; transform: translateY(-.2rem) scale(.99); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .training-feedback-motion__wash,
  .training-feedback-motion__ring { display: none; }
}