/* Load after existing game styles; all classes and animations are independent. */
.sq-celebration,
.sq-celebration-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.sq-celebration {
  z-index: 1;
  contain: layout;
}
.sq-celebration * { pointer-events: none; }
.sq-ambient-bloom {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at var(--lamp-x) var(--lamp-y), #ffdfa83b 0%, #ffde871d 24%, #ffd97900 61%),
    radial-gradient(ellipse at 46% 73%, #fff2ad19 0%, #fff2ad00 61%);
  mix-blend-mode: screen;
  animation: sq-ambient-breathe 12s ease-in-out infinite;
}
.sq-celebration:not(.sq-celebration--lamp) .sq-ambient-bloom {
  background: radial-gradient(ellipse at 50% 45%, #fff1bb26 0%, #ffe69b10 35%, #ffe69b00 73%);
}

/* Round translucent layers create light, with no rectangular box shadow. */
.sq-lantern-halo {
  position: absolute;
  left: var(--lamp-x);
  top: var(--lamp-y);
  width: var(--lamp-width);
  min-width: 160px;
  max-width: 630px;
  aspect-ratio: 1.22;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.sq-halo-bloom, .sq-halo-warm, .sq-halo-rays, .sq-halo-core {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.sq-halo-bloom {
  inset: -18%;
  background: radial-gradient(ellipse, #ffe99e5e 0%, #ffd65b3d 29%, #ffd14e19 45%, #ffd14e00 70%);
  filter: blur(18px);
  animation: sq-lantern-breathe 10s ease-in-out infinite;
}
.sq-halo-warm {
  inset: 7%;
  background: radial-gradient(ellipse, #fffbdbaa 0%, #ffe7a183 20%, #ffd15a46 38%, #ffda7900 70%);
  filter: blur(8px);
  animation: sq-lantern-breathe 8.5s ease-in-out -3s infinite;
}
.sq-halo-rays {
  inset: -5%;
  background: repeating-conic-gradient(from 8deg, #fff2a900 0deg 14deg, #fff2a950 18deg 21deg, #fff2a900 26deg 38deg);
  -webkit-mask-image: radial-gradient(ellipse, #0000 8%, #000a 34%, #0007 49%, #0000 70%);
  mask-image: radial-gradient(ellipse, #0000 8%, #000a 34%, #0007 49%, #0000 70%);
  filter: blur(5px);
  opacity: .67;
  animation: sq-lantern-rays 24s ease-in-out infinite alternate;
}
.sq-halo-core {
  left: 50%;
  top: 50%;
  width: 27%;
  height: 33%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, #fffef5fa 0%, #fff9cfed 16%, #ffe38dc9 33%, #ffd25a5c 53%, #ffd25a00 73%);
  filter: blur(3px);
  animation: sq-lantern-core 9s ease-in-out infinite;
}

.sq-particle {
  position: absolute;
  display: block;
  left: var(--spark-x);
  top: var(--spark-y);
  width: var(--spark-size);
  height: var(--spark-size);
  transform: translate(-50%, -50%);
  opacity: 1;
  pointer-events: none;
  animation: sq-spark-drift var(--spark-duration) ease-in-out var(--spark-delay) infinite;
}
.sq-particle-mark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 3px #fffde6) drop-shadow(0 0 8px #ffd557) drop-shadow(0 0 15px #ffd15a9c);
}
.sq-star-mark { animation: sq-spark-shine 9s ease-in-out var(--spark-delay) infinite; }
.sq-flower-mark {
  animation: sq-flower-turn 13s ease-in-out var(--spark-delay) infinite alternate;
  filter: drop-shadow(0 0 3px #fffde6) drop-shadow(0 0 8px #ffe793) drop-shadow(0 0 13px #ffc87aaf);
}
.sq-firefly-light {
  position: absolute;
  inset: -60%;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle, #fffff5 0%, #fffef0 15%, #fff9b8f5 27%, #ffda6696 43%, #ffd85d36 61%, #ffd15a00 74%);
  filter: drop-shadow(0 0 6px #fff1a5) drop-shadow(0 0 12px #ffd15acd);
  animation: sq-firefly-shine 10s ease-in-out var(--spark-delay) infinite;
}
.sq-firefly-light::before, .sq-firefly-light::after {
  content: '';
  position: absolute;
  top: 25%;
  width: 27%;
  height: 13%;
  background: #fff8d7c9;
  border-radius: 50%;
  transform: rotate(-25deg);
}
.sq-firefly-light::before { left: 20%; }
.sq-firefly-light::after { right: 20%; transform: rotate(25deg); }

@keyframes sq-ambient-breathe {
  0%, 100% { opacity: .8; }
  50% { opacity: 1; }
}
@keyframes sq-lantern-breathe {
  0%, 100% { transform: scale(.98); opacity: .9; }
  50% { transform: scale(1.065); opacity: 1; }
}
@keyframes sq-lantern-rays {
  0% { transform: rotate(-7deg) scale(.99); opacity: .58; }
  100% { transform: rotate(8deg) scale(1.04); opacity: .75; }
}
@keyframes sq-lantern-core {
  0%, 100% { transform: translate(-50%, -50%) scale(.98); opacity: .93; }
  50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}
@keyframes sq-spark-drift {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0) scale(.94); opacity: .88; }
  50% { transform: translate(-50%, -50%) translate(var(--spark-drift-x), var(--spark-drift-y)) scale(1.06); opacity: 1; }
}
@keyframes sq-spark-shine {
  0%, 100% { opacity: .86; }
  50% { opacity: 1; }
}
@keyframes sq-firefly-shine {
  0%, 100% { opacity: .85; transform: scale(.97); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes sq-flower-turn {
  0% { transform: rotate(var(--spark-turn)); }
  100% { transform: rotate(calc(var(--spark-turn) + 34deg)); }
}

@media (max-width: 650px) {
  .sq-lantern-halo { min-width: 170px; }
  .sq-halo-bloom { filter: blur(12px); }
  .sq-halo-warm { filter: blur(6px); }
  .sq-halo-rays { filter: blur(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .sq-celebration, .sq-celebration * { animation: none !important; }
  .sq-particle, .sq-particle-mark, .sq-firefly-light { opacity: 1; }
}
