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

.celebration-confetti {
  position: absolute;
  top: -34px;
  width: 13px;
  height: 24px;
  border-radius: 4px;
  opacity: 0.95;
  animation: celebrationFall var(--fall-duration, 3.8s) linear forwards;
  transform: translate3d(0, 0, 0) rotate(var(--start-rotate, 0deg));
}

.celebration-new-game {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 101;
  min-width: 178px;
  min-height: 68px;
  padding: 16px 24px;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, #2fa95d, #1f7e43);
  color: #ffffff;
  font: 800 1.2rem "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
  box-shadow: 0 18px 34px rgba(31, 126, 67, 0.3);
  cursor: pointer;
  pointer-events: auto;
  animation: celebrationButtonIn 0.32s ease forwards;
}

.celebration-new-game:hover,
.celebration-new-game:focus-visible {
  filter: brightness(1.04);
  transform: translateY(-1px);
  outline: none;
}

@keyframes celebrationFall {
  0% {
    transform: translate3d(0, -34px, 0) rotate(var(--start-rotate, 0deg));
  }
  100% {
    transform: translate3d(var(--drift, 0px), 112vh, 0) rotate(var(--end-rotate, 720deg));
  }
}

@keyframes celebrationButtonIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}