/* Trophy-card feedback mirrors the review treatment in the Swift app. */
.review-trophy-count {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.trophy-delta {
  position: absolute;
  top: -15px;
  right: -17px;
  color: var(--not-yet);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  transform: translateY(5px) scale(.76);
}

.trophy-delta.is-visible {
  animation: trophy-count-down .85s ease-out both;
}

@keyframes trophy-count-down {
  0% { opacity: 0; transform: translateY(7px) scale(.72); }
  20% { opacity: 1; transform: translateY(0) scale(1.1); }
  62% { opacity: 1; transform: translateY(-5px) scale(1); }
  100% { opacity: 0; transform: translateY(-11px) scale(.94); }
}

.flashcard .trophy-card-badge {
  display: none;
}

.flashcard.is-trophy .trophy-card-badge {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  position: absolute;
  left: 28px;
  bottom: 23px;
  animation: trophy-card-arrival .42s cubic-bezier(.2, .9, .25, 1.16) both;
}

.flashcard.is-trophy .trophy-card-badge svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
  filter: drop-shadow(0 3px 2px rgba(121, 78, 0, .20));
}

@media (max-width: 759px) {
  .flashcard.is-trophy .card-footer {
    grid-template-columns: 32px minmax(0, 1fr) 62px;
    column-gap: 3px;
  }

  .flashcard.is-trophy .trophy-card-badge {
    position: relative;
    top: -2px;
    bottom: auto;
    left: auto;
    margin-left: -9px;
  }

  .flashcard.is-trophy .card-english {
    margin-left: -9px;
  }
}

@media (min-width: 760px) {
  .flashcard.is-trophy:not(.shows-artwork) .card-english {
    margin-left: 37px;
  }
}

.flashcard.is-trophy .card-footer button,
.flashcard.is-trophy .card-art-fallback #hero-audio-button {
  color: var(--trophy);
  filter: none;
}

@keyframes trophy-card-arrival {
  0% { opacity: 0; transform: translateY(8px) scale(.55) rotate(-14deg); }
  68% { opacity: 1; transform: translateY(-2px) scale(1.1) rotate(4deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .trophy-delta.is-visible,
  .flashcard.is-trophy .trophy-card-badge { animation: none; opacity: 1; transform: none; }
}

.toast { display: none !important; }