.worm-confetti-layer {
  position: fixed; z-index: 120; inset: 0; overflow: hidden;
  pointer-events: none; contain: layout style;
}
.worm-completion-flash {
  position: absolute; z-index: 2; top: var(--celebration-y); left: var(--celebration-x);
  display: grid; place-items: center; width: min(310px, 72vw); aspect-ratio: 1.26;
  animation: worm-completion-flash 2.3s cubic-bezier(.18,.75,.25,1) both;
}
.worm-completion-flash::before {
  content: ''; position: absolute; inset: 7% 4% 2%; border: 1px solid rgba(211,167,109,.4);
  border-radius: 50%; background: rgba(255,250,230,.88);
  box-shadow: 0 12px 30px rgba(26,71,79,.16);
}
.worm-completion-flash-emblem { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.worm-completion-flash-count {
  position: absolute; z-index: 2; left: 50%; bottom: 15%; min-width: 84px;
  color: var(--ink); font-size: .92rem; font-weight: 950; letter-spacing: .1em;
  line-height: 1; text-align: center; transform: translateX(-50%) rotate(-2deg);
}
.worm-confetti-piece {
  position: absolute; top: var(--celebration-y); left: var(--celebration-x);
  width: var(--piece-size); height: auto; overflow: visible; opacity: 0;
  animation: worm-confetti-flight var(--flight-duration) cubic-bezier(.12,.58,.34,1) var(--flight-delay) both;
  will-change: transform, opacity;
}
.confetti-worm-body { fill: var(--worm-colour); stroke: #20313d; stroke-width: 1.25; stroke-linejoin: round; }
.confetti-worm-shade, .confetti-worm-highlight { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.confetti-worm-shade { stroke: #20313d; stroke-width: 2.7; opacity: .18; }
.confetti-worm-highlight { stroke: #fff1d2; stroke-width: 1.8; opacity: .62; }
.worm-confetti-piece .confetti-worm-art {
  transform-origin: 50% 50%; animation: confetti-worm-flex .42s ease-in-out var(--wriggle-delay) infinite alternate;
}
.confetti-ribbon-art { transform-origin: 50% 50%; animation: confetti-ribbon-turn .85s ease-in-out infinite alternate; }
.worm-confetti-crawler-shell {
  position: absolute; z-index: 3; bottom: var(--crawler-lane); left: -100px;
  width: var(--crawler-size); opacity: 0;
  animation: worm-confetti-crawl var(--crawler-duration) linear var(--crawler-delay) both;
  will-change: transform, opacity;
}
.worm-confetti-crawler-shell.is-reversed { left: auto; right: -100px; animation-name: worm-confetti-crawl-reverse; }
.worm-confetti-crawler-shell.is-reversed > svg { transform: scaleX(-1); }
.worm-confetti-crawler-shell > svg { display: block; width: 100%; height: auto; }
@keyframes worm-completion-flash {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.72) rotate(-6deg); }
  18% { opacity: 1; transform: translate(-50%,-50%) scale(1.04) rotate(1deg); }
  32%, 74% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-54%) scale(.97); }
}
@keyframes worm-confetti-flight {
  0% { opacity: 0; transform: translate(calc(-50% + var(--flight-startX)),calc(-50% + var(--flight-startY))) scale(.45); }
  10% { opacity: 1; }
  45% { opacity: 1; transform: translate(calc(-50% + var(--flight-midX)),calc(-50% + var(--flight-midY))) rotate(calc(var(--flight-spin) * .4)) scale(1); }
  78% { opacity: .95; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--flight-x)),calc(-50% + var(--flight-y))) rotate(var(--flight-spin)) scale(.9); }
}
@keyframes confetti-worm-flex { from { transform: skewY(-5deg) scaleY(.9); } to { transform: skewY(5deg) scaleY(1.08); } }
@keyframes confetti-ribbon-turn { from { transform: rotateY(-28deg) rotate(-10deg); } to { transform: rotateY(48deg) rotate(12deg); } }
@keyframes worm-confetti-crawl {
  0% { opacity: 0; transform: translateX(0); }
  7%, 88% { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(100vw + 200px)); }
}
@keyframes worm-confetti-crawl-reverse {
  0% { opacity: 0; transform: translateX(0); }
  7%, 88% { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(-100vw - 200px)); }
}
@media (prefers-reduced-motion: reduce) { .worm-confetti-layer { display: none; } }