/* Full-screen celebration shown when a completion pushes the user past
   a level threshold. Backdrop blurs the page, card slides + scales in,
   star icon gently wiggles. */

.level-up {
  position: fixed;
  inset: 0;
  z-index: 60; /* above the FAB and toast */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: level-up-fade-in 220ms ease-out;
}

.level-up--leaving { animation: level-up-fade-out 200ms ease-out forwards; }

.level-up__card {
  background: var(--color-card);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  max-width: 28rem;
  width: 100%;
  padding: 2rem;
  text-align: center;
  animation: level-up-pop-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.level-up__star {
  font-size: 4.5rem; /* text-7xl */
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
  display: block;
  animation: level-up-wiggle 2.4s ease-in-out infinite;
  transform-origin: center;
}

.level-up__title {
  font-size: 3rem; /* text-5xl */
  color: var(--color-primary);
  margin: 0 0 0.75rem;
  line-height: 1.05;
}

.level-up__subtitle {
  font-size: 1.125rem; /* text-lg */
  color: var(--color-muted-fg);
  margin: 0 0 2rem;
}

.level-up__continue {
  appearance: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: var(--color-primary);
  color: #fff;
  transition: filter 160ms ease, transform 160ms ease;
}

.level-up__continue:hover { filter: brightness(1.05); }
.level-up__continue:active { transform: translateY(1px); }

@keyframes level-up-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes level-up-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes level-up-pop-in {
  0%   { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

/* Gentle wiggle — matches figma6's [0, 5, -5, 0] rotate over 2s. */
@keyframes level-up-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(5deg); }
  75%      { transform: rotate(-5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .level-up,
  .level-up__card,
  .level-up__star {
    animation: none;
  }
}