.confetti-container {
  position: fixed;
  bottom: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 9999;
}

.confetti-container.left {
  left: 0;
}

.confetti-container.right {
  right: 0;
}

.confetti {
  position: absolute;
  width: 8px;
  height: 12px;
  opacity: 0.9;
  animation: confettiFly 2s ease-out forwards;
}

@keyframes confettiFly {
  0% {
    transform: translate(0,0) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translate(var(--x), var(--y)) rotate(720deg);
    opacity: 0;
  }
}

.achievement-toast {
    background: #B0E0E2;
    padding: 15px 20px;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    max-width: 600px;
    font-family: sans-serif;
    text-align: center;
}

.achievement-toast.show {
    opacity: 1;
    transform: translateY(0);
}