/* Lesson-complete celebration for phrase practice */

#phrase-complete:not(.hidden) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
}

#phrase-complete-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.phrase-complete-inner {
  position: relative;
  z-index: 1;
  width: min(100%, 36rem);
  margin: auto;
  padding: 1rem 0 1.5rem;
}

@media (min-width: 768px) {
  #phrase-complete:not(.hidden) {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .phrase-complete-inner {
    padding: 0;
  }
}

.phrase-celebration-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  font-size: 3rem;
  line-height: 1;
  animation: phrase-celebration-badge-pop 0.7s cubic-bezier(0.2, 1.35, 0.32, 1) both;
}

.phrase-celebration-title {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fbbf24;
  text-shadow:
    0 0 12px rgba(251, 191, 36, 0.55),
    0 0 28px rgba(245, 158, 11, 0.25);
  animation: phrase-celebration-title-in 0.65s cubic-bezier(0.2, 1.2, 0.32, 1) 0.08s both,
    phrase-celebration-glow 2.4s ease-in-out 0.7s infinite;
}

.phrase-celebration-subtitle {
  margin-top: 0.65rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fde68a;
  animation: phrase-celebration-fade-up 0.55s ease-out 0.18s both;
}

.phrase-celebration-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  width: min(100%, 28rem);
  margin: 1.5rem auto 0;
  animation: phrase-celebration-fade-up 0.55s ease-out 0.28s both;
}

.phrase-celebration-stat {
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.75rem 0.5rem;
}

.phrase-celebration-stat__label {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgb(148 163 184);
}

.phrase-celebration-stat__value {
  margin-top: 0.25rem;
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.phrase-celebration-stat--accuracy .phrase-celebration-stat__value {
  color: #34d399;
}

.phrase-celebration-stat--combo .phrase-celebration-stat__value {
  color: #fb923c;
}

.phrase-celebration-stat--time .phrase-celebration-stat__value {
  color: #38bdf8;
}

.phrase-celebration-actions {
  position: relative;
  z-index: 1;
  animation: phrase-celebration-fade-up 0.55s ease-out 0.38s both;
}

#phrase-practice-footer.is-lesson-complete {
  display: none !important;
}

@keyframes phrase-celebration-badge-pop {
  0% { transform: scale(0.2) rotate(-18deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes phrase-celebration-title-in {
  0% { transform: translateY(18px) scale(0.92); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes phrase-celebration-glow {
  0%, 100% { text-shadow: 0 0 12px rgba(251, 191, 36, 0.45), 0 0 24px rgba(251, 191, 36, 0.15); }
  50% { text-shadow: 0 0 22px rgba(251, 191, 36, 0.75), 0 0 40px rgba(251, 191, 36, 0.2); }
}

@keyframes phrase-celebration-fade-up {
  0% { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@media (max-width: 640px) {
  .phrase-celebration-stats {
    gap: 0.45rem;
  }

  .phrase-celebration-stat {
    padding: 0.6rem 0.35rem;
  }

  .phrase-celebration-stat__value {
    font-size: 1.1rem;
  }
}