/* Shared celebration FX — Blank Fill + Pair Flip */
.confetti-canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 9999 !important;
}

.burst-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
}

.burst-piece {
  position: absolute;
  width: 12px;
  height: 16px;
  border-radius: 3px;
  opacity: 1;
  animation: mdd-burst-fly 1400ms cubic-bezier(0.12, 0.7, 0.25, 1) forwards;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

@keyframes mdd-burst-fly {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)) scale(0.75);
    opacity: 0;
  }
}

.celebrate-banner {
  position: fixed;
  transform: translate(-50%, -50%) scale(0.6);
  z-index: 10000;
  pointer-events: none;
  padding: 0.75rem 1.35rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0a202, #ffd56a);
  color: #14352e;
  font-family: "Syne", "Trebuchet MS", sans-serif;
  font-weight: 800;
  font-size: clamp(1.25rem, 4vw, 1.8rem);
  letter-spacing: -0.03em;
  box-shadow: 0 10px 30px rgba(20, 33, 43, 0.25);
  animation: mdd-banner-pop 1300ms ease forwards;
  white-space: nowrap;
}

@keyframes mdd-banner-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -40%) scale(0.5);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -70%) scale(0.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  .burst-piece,
  .celebrate-banner {
    animation: none !important;
  }

  .confetti-canvas,
  .burst-layer,
  .celebrate-banner {
    display: none !important;
  }
}