/* r2026-08-28 r80: Global LEVEL UP celebration
   Full-screen modal with confetti, screen flash, shake, Lila cutout.
   Triggered by window 'lilalove:levelup' event from anywhere.
*/

/* Screen flash */
.levelup-flash {
  position: fixed; inset: 0; z-index: 99998;
  background: radial-gradient(circle at center,
    rgba(252, 211, 77, 0.6) 0%,
    rgba(255, 94, 126, 0.3) 30%,
    rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
}
.levelup-flash.is-active { opacity: 1; }

/* Screen shake */
@keyframes levelup-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-4px, -2px) rotate(-0.5deg); }
  20% { transform: translate(4px, 2px) rotate(0.5deg); }
  30% { transform: translate(-3px, 2px) rotate(-0.4deg); }
  40% { transform: translate(3px, -2px) rotate(0.4deg); }
  50% { transform: translate(-2px, -1px); }
  60% { transform: translate(2px, 1px); }
  70% { transform: translate(-1px, 1px); }
  80% { transform: translate(1px, -1px); }
  90% { transform: translate(-1px, 0); }
}
.levelup-shake { animation: levelup-shake 0.8s cubic-bezier(.36, .07, .19, .97) both; }

/* Modal shell */
.levelup-modal {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.levelup-modal.is-open { pointer-events: auto; }

.levelup-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 4, 14, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .35s ease;
}
.levelup-modal.is-open .levelup-modal__backdrop { opacity: 1; }

.levelup-modal__panel {
  position: relative;
  width: min(620px, 92vw);
  max-height: 92vh;
  overflow: visible;
  border-radius: 28px;
  background: linear-gradient(165deg,
    rgba(60, 25, 40, 0.96),
    rgba(20, 8, 16, 0.99));
  border: 1px solid rgba(252, 211, 77, 0.5);
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 94, 126, 0.3),
    0 0 80px rgba(252, 211, 77, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2.2rem 1.8rem 1.8rem;
  gap: 1rem;
  transform: scale(0.6) translateY(40px) rotate(-3deg);
  opacity: 0;
  transition: transform .5s cubic-bezier(.34, 1.8, .64, 1), opacity .35s ease;
}
.levelup-modal.is-open .levelup-modal__panel {
  transform: scale(1) translateY(0) rotate(0);
  opacity: 1;
}

/* Rotating rays behind the panel */
.levelup-modal__rays {
  position: absolute; inset: -50px;
  background:
    conic-gradient(from 0deg,
      transparent 0deg, rgba(252, 211, 77, 0.15) 20deg, transparent 40deg,
      transparent 80deg, rgba(255, 94, 126, 0.15) 100deg, transparent 120deg,
      transparent 160deg, rgba(252, 211, 77, 0.15) 180deg, transparent 200deg,
      transparent 240deg, rgba(255, 94, 126, 0.15) 260deg, transparent 280deg,
      transparent 320deg, rgba(252, 211, 77, 0.15) 340deg, transparent 360deg);
  border-radius: 50%;
  pointer-events: none;
  animation: levelup-rays 14s linear infinite;
  z-index: -1;
  filter: blur(8px);
}
@keyframes levelup-rays {
  0% { transform: rotate(0deg) scale(1); opacity: 0.8; }
  50% { transform: rotate(180deg) scale(1.05); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: 0.8; }
}

.levelup-modal__header {
  text-align: center;
  z-index: 2;
}
.levelup-modal__eyebrow {
  font: 600 0.75rem 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fcd34d;
  margin-bottom: 0.4rem;
  opacity: 0.85;
}
.levelup-modal__title {
  font: 800 2.6rem 'Inter', sans-serif;
  letter-spacing: 0.04em;
  background: linear-gradient(120deg, #ff5e7e 0%, #fcd34d 50%, #ff5e7e 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: levelup-shimmer 2s ease-in-out infinite;
  text-shadow: 0 0 60px rgba(252, 211, 77, 0.4);
}
@keyframes levelup-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Lila cutout with glow */
.levelup-modal__lila-wrap {
  position: relative;
  width: 200px; height: 220px;
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 2;
  margin: 0.4rem 0 0.2rem;
}
.levelup-modal__lila-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at center,
    rgba(252, 211, 77, 0.45) 0%,
    rgba(255, 94, 126, 0.25) 30%,
    rgba(0, 0, 0, 0) 60%);
  border-radius: 50%;
  animation: levelup-pulse 2.4s ease-in-out infinite;
  z-index: -1;
}
@keyframes levelup-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
}
.levelup-modal__lila {
  max-width: 100%; max-height: 100%;
  filter: drop-shadow(0 14px 40px rgba(255, 94, 126, 0.7))
          drop-shadow(0 0 32px rgba(252, 211, 77, 0.5));
  animation: levelup-lila-bounce 1.6s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
@keyframes levelup-lila-bounce {
  0%, 100% { transform: translateY(0) scale(1) rotate(0); }
  50% { transform: translateY(-12px) scale(1.05) rotate(-2deg); }
}
.levelup-modal__lila-hearts {
  position: absolute; inset: 0;
  pointer-events: none;
}
.levelup-modal__lila-hearts span {
  position: absolute;
  font-size: 1.4rem;
  filter: drop-shadow(0 0 6px rgba(255, 94, 126, 0.7));
  animation: levelup-heart 2.4s ease-out infinite;
  opacity: 0;
}
.levelup-modal__lila-hearts span:nth-child(1) { left: 5%;  top: 15%; animation-delay: 0s; }
.levelup-modal__lila-hearts span:nth-child(2) { left: 90%; top: 10%; animation-delay: 0.3s; }
.levelup-modal__lila-hearts span:nth-child(3) { left: 15%; top: 70%; animation-delay: 0.6s; }
.levelup-modal__lila-hearts span:nth-child(4) { left: 80%; top: 75%; animation-delay: 0.9s; }
.levelup-modal__lila-hearts span:nth-child(5) { left: 50%; top: 0%;  animation-delay: 1.2s; }
@keyframes levelup-heart {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }
  15%  { opacity: 1; transform: translate(0, -8px) scale(1.2) rotate(-10deg); }
  50%  { opacity: 1; transform: translate(0, -30px) scale(1.3) rotate(10deg); }
  100% { opacity: 0; transform: translate(0, -60px) scale(1.4) rotate(20deg); }
}

/* Level number — HUGE centerpiece */
.levelup-modal__level {
  text-align: center;
  z-index: 2;
}
.levelup-modal__level-num {
  font: 800 5.5rem 'Fraunces', serif;
  font-style: italic;
  background: linear-gradient(120deg, #fcd34d 0%, #fff 50%, #ff5e7e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  text-shadow: 0 0 60px rgba(252, 211, 77, 0.5);
  animation: levelup-count 0.8s cubic-bezier(.34, 1.8, .64, 1) backwards;
}
@keyframes levelup-count {
  0% { opacity: 0; transform: scale(0.3) translateY(20px); }
  60% { opacity: 1; transform: scale(1.2) translateY(-10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.levelup-modal__level-label {
  font: 600 0.85rem 'Inter', sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.3rem;
}

.levelup-modal__title-text {
  font: 600 1.5rem 'Fraunces', serif;
  font-style: italic;
  color: #fcd34d;
  text-align: center;
  z-index: 2;
  text-shadow: 0 0 24px rgba(252, 211, 77, 0.4);
}

.levelup-modal__unlocks {
  font: 500 0.9rem 'Inter', sans-serif;
  color: #ffb3c1;
  text-align: center;
  background: rgba(255, 94, 126, 0.15);
  border: 1px solid rgba(255, 94, 126, 0.4);
  border-radius: 12px;
  padding: 0.55rem 1rem;
  z-index: 2;
  max-width: 100%;
}

.levelup-modal__multi {
  font: 700 0.9rem 'Inter', sans-serif;
  color: #fcd34d;
  text-align: center;
  z-index: 2;
}

.levelup-modal__btn {
  margin-top: 0.6rem;
  padding: 0.85rem 2.4rem;
  font: 700 0.95rem 'Inter', sans-serif;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(135deg, #ff5e7e 0%, #ff3d68 100%);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(255, 94, 126, 0.45);
  transition: all 0.18s ease;
  z-index: 2;
}
.levelup-modal__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(255, 94, 126, 0.6);
}

.levelup-confetti {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}