/* fun-ui.css — YugFun, the confetti-only celebration layer.
   Owned by fun-ui.js. Every selector is namespaced .yug-fun-.
   There are no cards, labels or opaque surfaces here: only tiny sparkles,
   stars and petals near the scene edges. The layer is pointer-transparent so
   the child's controls stay usable underneath. */

.yug-fun-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  pointer-events: none;
  contain: layout style paint;
}

.yug-fun-layer[data-inline="true"] {
  position: absolute;
  inset: 0;
}

/* Belt and braces: no descendant may ever eat a tap. */
.yug-fun-layer,
.yug-fun-layer * {
  pointer-events: none !important;
}

.yug-fun-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.yug-fun-particle {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--size, 8px);
  height: var(--size, 8px);
  background: var(--tint, #ffd166);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(.35);
  animation: yug-fun-drift var(--dur, 620ms) cubic-bezier(.16, .72, .3, 1) var(--delay, 0ms) both;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .55));
}

.yug-fun-particle[data-shape="star"] {
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
}

.yug-fun-particle[data-shape="petal"] {
  border-radius: 60% 40% 55% 45% / 55% 45% 60% 40%;
}

.yug-fun-particle[data-shape="spark"] {
  clip-path: polygon(
    50% 0%, 61% 39%, 100% 50%, 61% 61%,
    50% 100%, 39% 61%, 0% 50%, 39% 39%
  );
}

.yug-fun-particle[data-shape="dot"] {
  border-radius: 50%;
  box-shadow: 0 0 5px var(--tint, #ffd166);
}

.yug-fun-sr {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

@keyframes yug-fun-drift {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(.35);
  }
  14% {
    opacity: 1;
  }
  68% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(
      calc(-50% + var(--dx, 0px)),
      calc(-50% + var(--dy, 0px))
    ) rotate(calc(var(--rot, 0deg) + var(--spin, 180deg))) scale(.72);
  }
}

/* Reduced motion: no travel, no spin, no scale pop. A few tiny static
   sparkles at the edges fade out gently, then the layer is removed. */
@media (prefers-reduced-motion: reduce) {
  .yug-fun-particle {
    animation: none !important;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1);
  }

  .yug-fun-layer.is-leaving .yug-fun-particle {
    opacity: 0;
    transition: opacity 120ms linear;
  }
}

@media (forced-colors: active) {
  .yug-fun-particle {
    background: CanvasText;
    forced-color-adjust: none;
  }
}