/* Skiliograph shared celebration */
.skm-party { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 99999; transition: opacity .7s ease; }
.skm-party.is-leaving { opacity: 0; }
.skm-confetti { position: absolute; inset: 0; }
.skm-banner {
  position: absolute; top: 36%; left: 50%; transform: translate(-50%, -50%);
  background: #fff; color: #2b2d42; padding: 14px 28px; border-radius: 999px;
  font: 800 clamp(22px, 6vw, 34px)/1.2 "Baloo 2", "Comic Sans MS", system-ui, sans-serif;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .15); white-space: nowrap;
  animation: skm-banner-in .8s cubic-bezier(.2, .9, .3, 1.2) .15s both;
}
.skm-balloon {
  position: absolute; bottom: -150px;
  animation-name: skm-rise; animation-timing-function: cubic-bezier(.35, .1, .6, 1); animation-fill-mode: both;
}
.skm-balloon-body {
  position: relative; width: 56px; height: 70px;
  background: var(--c); border-radius: 50% 50% 46% 46%;
  box-shadow: inset -8px -10px 0 rgba(0, 0, 0, .1);
  animation: skm-sway 2s ease-in-out infinite alternate;
  transform-origin: 50% 140%;
}
.skm-balloon-body::before { content: ""; position: absolute; top: 12px; left: 13px; width: 10px; height: 16px; background: rgba(255, 255, 255, .6); border-radius: 50%; }
.skm-balloon-body::after { content: ""; position: absolute; top: 70px; left: 27px; width: 2px; height: 60px; background: rgba(0, 0, 0, .25); }

@keyframes skm-rise { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 100% { transform: translateY(calc(-100vh - 260px)); opacity: 1; } }
@keyframes skm-sway { from { transform: rotate(-7deg) translateX(-6px); } to { transform: rotate(7deg) translateX(6px); } }
@keyframes skm-banner-in { from { transform: translate(-50%, -40%) scale(.85); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .skm-banner { animation-duration: .01s; } }