.constellation-game{position:relative;overflow:hidden}.celebration-layer{position:absolute;inset:0;z-index:8;display:grid;place-items:center;pointer-events:none;opacity:0}.celebration-layer.active{opacity:1}.light-spark{--angle:0deg;--distance:120px;--delay:0s;--size:1rem;position:absolute;left:50%;top:55%;color:#fff4a8;font-size:var(--size);line-height:1;text-shadow:0 0 8px currentColor,0 0 18px currentColor;opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateX(0) rotate(calc(-1 * var(--angle))) scale(.2);animation:cuteBurst 1.25s cubic-bezier(.15,.72,.26,1) var(--delay) both}.celebration-layer.coral .light-spark{color:#ff9f91}.celebration-layer.starlight .light-spark{color:#b9d6ff}.celebration-layer.grand:before{content:"✦";position:absolute;left:50%;top:55%;color:#fff8c9;font-size:5rem;text-shadow:0 0 15px #ffd978,0 0 42px #ff786a;transform:translate(-50%,-50%);animation:grandGlow 2.5s ease-in-out both}.celebration-layer.grand .light-spark{animation-duration:2.1s}
@keyframes cuteBurst{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateX(0) rotate(calc(-1 * var(--angle))) scale(.2)}18%{opacity:1}72%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateX(var(--distance)) rotate(calc(-1 * var(--angle))) scale(1.15)}}@keyframes grandGlow{0%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(-20deg)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(8deg)}70%{opacity:1;transform:translate(-50%,-50%) scale(.92) rotate(-4deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5) rotate(12deg)}}@media(prefers-reduced-motion:reduce){.light-spark,.celebration-layer.grand:before{animation-duration:.01ms!important;animation-delay:0s!important}.celebration-layer.active{opacity:.85}}