.pinata-win-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
}

.pinata-win-overlay.is-active {
  visibility: visible;
  animation: pinata-win-show 5.8s ease both;
}

.pinata-win-overlay.is-impacting {
  animation: pinata-win-screen-shake 0.72s cubic-bezier(.14, .98, .28, 1) both, pinata-win-show 5.8s ease both;
}

.pinata-win-overlay::before {
  content: "";
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 238, 106, 0.96) 0 7%, rgba(255, 154, 22, 0.76) 8% 19%, rgba(255, 94, 0, 0.34) 25%, transparent 48%),
    radial-gradient(circle at 50% 52%, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.62) 68%);
  filter: saturate(1.25);
  animation: pinata-win-flare 1.25s ease-in-out infinite alternate;
}

.pinata-win-rays {
  position: absolute;
  width: 145vmax;
  height: 145vmax;
  background: conic-gradient(
    from 0deg,
    rgba(255, 226, 89, 0.0),
    rgba(255, 226, 89, 0.28),
    rgba(255, 146, 31, 0.02),
    rgba(255, 247, 182, 0.32),
    rgba(255, 226, 89, 0.0) 22deg
  );
  mix-blend-mode: screen;
  opacity: 0.78;
  animation: pinata-win-spin 9s linear infinite;
}

.pinata-win-impact-flash {
  position: absolute;
  inset: -10%;
  z-index: 2;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 1) 0 8%, rgba(255, 242, 80, .92) 9% 19%, rgba(255, 126, 0, .36) 28%, transparent 52%),
    radial-gradient(circle, rgba(255, 255, 255, .72), transparent 42%);
  opacity: 0;
  mix-blend-mode: screen;
  transform: scale(.35);
}

.pinata-win-overlay.is-active .pinata-win-impact-flash {
  animation: pinata-win-impact-flash 5.6s ease both;
}

.pinata-win-impact-ring {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 45%;
  width: min(72vw, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 13px solid rgba(255, 248, 145, .96);
  box-shadow:
    0 0 0 9px rgba(255, 123, 0, .45),
    0 0 46px rgba(255, 240, 84, .94),
    inset 0 0 38px rgba(255, 107, 0, .76);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.12);
}

.pinata-win-overlay.is-active .pinata-win-impact-ring {
  animation: pinata-win-impact-ring 5.6s cubic-bezier(.12, .88, .22, 1) both;
}

.pinata-win-shock-dust {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 48%;
  width: min(88vw, 520px);
  height: 90px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.45);
  background:
    radial-gradient(ellipse at 18% 55%, rgba(255, 223, 116, .82) 0 12%, transparent 32%),
    radial-gradient(ellipse at 39% 62%, rgba(255, 141, 31, .68) 0 11%, transparent 31%),
    radial-gradient(ellipse at 64% 55%, rgba(255, 237, 145, .8) 0 13%, transparent 32%),
    radial-gradient(ellipse at 84% 59%, rgba(255, 119, 0, .64) 0 10%, transparent 30%);
  filter: blur(1px) saturate(1.3);
}

.pinata-win-overlay.is-active .pinata-win-shock-dust {
  animation: pinata-win-shock-dust 5.6s ease both;
}

.pinata-win-smash-pinata {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 0;
  width: clamp(112px, 30vw, 178px);
  height: clamp(106px, 28vw, 168px);
  border-radius: 48% 52% 44% 56% / 42% 44% 56% 58%;
  opacity: 0;
  transform: translate(-50%, -145vh) rotate(-14deg) scale(.62);
  background:
    radial-gradient(circle at 37% 24%, rgba(255, 255, 255, .72) 0 6%, transparent 7%),
    repeating-linear-gradient(
      0deg,
      #ff317a 0 12%,
      #ff8b21 12% 24%,
      #ffe24b 24% 36%,
      #28d87d 36% 48%,
      #28b6ff 48% 60%,
      #9d5cff 60% 72%
    );
  border: 5px solid #6b2b08;
  box-shadow:
    inset -14px -18px 22px rgba(80, 24, 0, .34),
    inset 10px 8px 12px rgba(255, 255, 255, .42),
    0 18px 34px rgba(0, 0, 0, .36),
    0 0 28px rgba(255, 245, 139, .66);
}

.pinata-win-smash-pinata::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -18%;
  width: 44%;
  height: 35%;
  border-radius: 50% 50% 18% 18%;
  border: 5px solid #6b2b08;
  border-bottom: 0;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #21c76f, #ffe24b 52%, #ff4b8d);
  box-shadow: inset 0 8px 0 rgba(255,255,255,.2);
}

.pinata-win-smash-pinata::after {
  content: "";
  position: absolute;
  inset: 12% 10%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,.48) 9% 12%, transparent 13% 21%, rgba(255,255,255,.38) 22% 25%, transparent 26% 34%, rgba(255,255,255,.42) 35% 38%, transparent 39%),
    repeating-linear-gradient(90deg, rgba(102, 37, 0, .25) 0 3px, transparent 3px 13px);
  clip-path: polygon(0 0, 100% 0, 95% 22%, 100% 38%, 94% 55%, 100% 72%, 93% 100%, 0 100%, 7% 74%, 0 58%, 8% 38%, 0 20%);
  opacity: .86;
}

.pinata-win-smash-pinata .pinata-win-pinata-eye,
.pinata-win-smash-pinata .pinata-win-pinata-eye::after {
  position: absolute;
  z-index: 2;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2b1208;
  box-shadow: 0 2px 0 rgba(255,255,255,.28) inset;
}

.pinata-win-smash-pinata .pinata-win-pinata-eye {
  left: 35%;
  top: 37%;
}

.pinata-win-smash-pinata .pinata-win-pinata-eye::after {
  content: "";
  left: 43px;
  top: 0;
}

.pinata-win-smash-pinata .pinata-win-pinata-mouth {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 52%;
  width: 42px;
  height: 18px;
  border-bottom: 5px solid #4b1b08;
  border-radius: 50%;
  transform: translateX(-50%);
}

.pinata-win-overlay.is-active .pinata-win-smash-pinata {
  animation: pinata-win-pinata-smash 5.6s cubic-bezier(.1, .82, .12, 1) both;
}

.pinata-win-stage {
  position: relative;
  z-index: 5;
  width: min(92vw, 420px);
  min-height: 430px;
  display: grid;
  place-items: center;
  transform: translateY(-3vh);
}

.pinata-win-burst {
  position: absolute;
  width: 104%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff8a8 0 11%, #ffc92f 12% 24%, rgba(255, 106, 0, 0.88) 25% 38%, rgba(255, 80, 0, 0) 61%),
    conic-gradient(from 10deg, transparent 0 9deg, rgba(255, 253, 155, 0.95) 10deg 15deg, transparent 16deg 27deg);
  filter: blur(0.2px) drop-shadow(0 0 28px #ff9c00) drop-shadow(0 0 58px rgba(255, 220, 54, 0.9));
  transform: scale(0.35);
  animation: pinata-win-burst 5.6s cubic-bezier(.16, .9, .23, 1) both;
}

.pinata-win-title {
  position: relative;
  z-index: 3;
  margin-top: 10px;
  text-align: center;
  font-size: clamp(42px, 13vw, 78px);
  line-height: 0.72;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  color: #ffe76a;
  -webkit-text-stroke: 2px #61220d;
  text-shadow:
    0 4px 0 #ff6c25,
    0 8px 0 #8f1e20,
    0 0 18px rgba(255, 251, 140, 0.95),
    0 0 34px rgba(255, 83, 22, 0.92);
  transform: rotate(-5deg) scale(0.45);
  animation: pinata-win-title 5.6s cubic-bezier(.18, .95, .22, 1.2) both;
}

.pinata-win-title span {
  display: block;
}

.pinata-win-title .super {
  font-size: 0.68em;
  color: #34e6b1;
  -webkit-text-stroke-color: #40170b;
  text-shadow:
    0 3px 0 #ff7241,
    0 6px 0 #7b1a24,
    0 0 16px rgba(106, 255, 195, 0.86);
}

.pinata-win-amount {
  position: relative;
  z-index: 4;
  margin-top: 28px;
  font-size: clamp(56px, 18vw, 104px);
  line-height: 1;
  color: #fff57a;
  -webkit-text-stroke: 3px #37135c;
  text-shadow:
    0 5px 0 #ff4eb4,
    0 10px 0 #6a1a88,
    0 0 18px rgba(255, 248, 117, 0.9),
    0 0 44px rgba(255, 111, 0, 1);
  transform: scale(0.55);
  animation: pinata-win-amount-pop 5.6s cubic-bezier(.18, .95, .22, 1.2) both;
}

.pinata-win-coins,
.pinata-win-bills,
.pinata-win-candies {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.pinata-win-candies {
  z-index: 6;
}

.pinata-win-candy {
  position: absolute;
  left: 50%;
  top: 47%;
  width: var(--w);
  height: calc(var(--w) * .46);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c1), var(--c2));
  box-shadow: inset 0 3px 0 rgba(255,255,255,.45), 0 9px 18px rgba(75, 21, 0, .26);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--r)) scale(.2);
}

.pinata-win-candy::before,
.pinata-win-candy::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--w) * .28);
  height: calc(var(--w) * .32);
  background: inherit;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  transform: translateY(-50%);
}

.pinata-win-candy::before {
  left: calc(var(--w) * -.2);
}

.pinata-win-candy::after {
  right: calc(var(--w) * -.2);
  transform: translateY(-50%) rotate(180deg);
}

.pinata-win-overlay.is-active .pinata-win-candy {
  animation: pinata-win-candy-burst 5.6s cubic-bezier(.08,.86,.18,1) var(--delay) both;
}

.pinata-win-coin {
  position: absolute;
  top: -70px;
  left: calc(var(--x) * 1%);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fff6a3 0 13%, #ffc42e 14% 50%, #c76a00 51% 100%);
  box-shadow: inset 0 0 0 3px rgba(145, 77, 0, 0.55), 0 0 15px rgba(255, 204, 35, 0.82);
  animation: pinata-win-coin-fall var(--d) linear var(--delay) infinite;
}

.pinata-win-coin::after {
  content: "$";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(125, 61, 0, 0.72);
  font-size: calc(var(--s) * .54);
  font-weight: 900;
}

.pinata-win-bill {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: var(--w);
  height: calc(var(--w) * .42);
  border-radius: 8px;
  background: linear-gradient(135deg, #dff7bb, #63c771 48%, #217e46);
  box-shadow: inset 0 0 0 4px rgba(15, 91, 42, .32), 0 8px 18px rgba(0, 0, 0, .24);
  opacity: 0;
  transform: rotate(var(--r)) translateY(80px) scale(.5);
  animation: pinata-win-bill 5.6s ease var(--delay) both;
}

.pinata-win-total {
  position: absolute;
  z-index: 4;
  bottom: 8%;
  padding: 6px 18px 9px;
  border-radius: 20px;
  background: linear-gradient(180deg, #ff4fb5, #c80c75 62%, #8a085c);
  color: #fff264;
  font-size: 22px;
  letter-spacing: .06em;
  text-shadow: 0 3px 0 #631050;
  box-shadow: 0 0 0 3px #ffb334, 0 0 20px rgba(255, 194, 35, .9);
  opacity: 0;
  animation: pinata-win-total 5.6s ease both;
}

@keyframes pinata-win-show {
  0% { opacity: 0; }
  8%, 88% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes pinata-win-screen-shake {
  0% { transform: translate3d(0, 0, 0) scale(1); filter: none; }
  8% { transform: translate3d(-14px, 9px, 0) scale(1.018); filter: brightness(1.28) contrast(1.18); }
  16% { transform: translate3d(12px, -11px, 0) scale(1.014); }
  25% { transform: translate3d(-10px, 7px, 0) scale(1.01); }
  34% { transform: translate3d(8px, -6px, 0) scale(1.008); }
  46% { transform: translate3d(-5px, 4px, 0) scale(1.004); }
  62% { transform: translate3d(3px, -2px, 0) scale(1.002); filter: brightness(1.04) contrast(1.04); }
  100% { transform: translate3d(0, 0, 0) scale(1); filter: none; }
}

@keyframes pinata-win-pinata-smash {
  0% { opacity: 0; transform: translate(-50%, -145vh) rotate(-28deg) scale(.42); }
  5% { opacity: 1; transform: translate(-50%, -88vh) rotate(9deg) scale(.66); }
  12% { opacity: 1; transform: translate(-50%, 27vh) rotate(-18deg) scale(1.18); filter: blur(0) saturate(1.25); }
  15% { opacity: 1; transform: translate(-50%, 20vh) rotate(10deg) scale(1.08, .72); filter: brightness(1.28) saturate(1.42); }
  20% { opacity: .86; transform: translate(-50%, 15vh) rotate(-12deg) scale(.9); }
  31% { opacity: 0; transform: translate(-50%, 4vh) rotate(22deg) scale(.45); }
  100% { opacity: 0; transform: translate(-50%, 4vh) rotate(22deg) scale(.45); }
}

@keyframes pinata-win-impact-flash {
  0%, 9% { opacity: 0; transform: scale(.22); }
  12% { opacity: 1; transform: scale(1.16); }
  16% { opacity: .5; transform: scale(1.38); }
  24%, 100% { opacity: 0; transform: scale(1.65); }
}

@keyframes pinata-win-impact-ring {
  0%, 10% { opacity: 0; transform: translate(-50%, -50%) scale(.08); }
  13% { opacity: 1; transform: translate(-50%, -50%) scale(.72); }
  24% { opacity: .25; transform: translate(-50%, -50%) scale(1.82); border-width: 3px; }
  31%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.18); border-width: 1px; }
}

@keyframes pinata-win-shock-dust {
  0%, 10% { opacity: 0; transform: translate(-50%, -50%) scale(.24); }
  13% { opacity: .95; transform: translate(-50%, -50%) scale(1.04); }
  27% { opacity: .48; transform: translate(-50%, -50%) scale(1.62); filter: blur(3px) saturate(1.55); }
  38%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.05); filter: blur(6px); }
}

@keyframes pinata-win-candy-burst {
  0%, 10% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(.18); }
  13% { opacity: 1; transform: translate(calc(-50% + var(--tx) * .34), calc(-50% + var(--ty) * .34)) rotate(calc(var(--r) + 80deg)) scale(1.08); }
  42% { opacity: .98; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(calc(var(--r) + 280deg)) scale(.9); }
  74%, 100% { opacity: 0; transform: translate(calc(-50% + var(--tx) * 1.25), calc(-50% + var(--ty) * 1.35 + 90px)) rotate(calc(var(--r) + 420deg)) scale(.46); }
}

@keyframes pinata-win-flare {
  from { transform: scale(1); filter: brightness(1) saturate(1.15); }
  to { transform: scale(1.06); filter: brightness(1.25) saturate(1.35); }
}

@keyframes pinata-win-spin {
  to { transform: rotate(360deg); }
}

@keyframes pinata-win-burst {
  0% { opacity: 0; transform: scale(.18) rotate(0deg); }
  10% { opacity: 1; transform: scale(1.06) rotate(18deg); }
  70% { opacity: .98; transform: scale(1.16) rotate(80deg); }
  100% { opacity: 0; transform: scale(1.35) rotate(120deg); }
}

@keyframes pinata-win-title {
  0% { opacity: 0; transform: rotate(-12deg) translateY(36px) scale(.2); }
  12% { opacity: 1; transform: rotate(-5deg) translateY(0) scale(1.08); }
  20%, 78% { opacity: 1; transform: rotate(-4deg) scale(1); }
  100% { opacity: 0; transform: rotate(-4deg) translateY(-18px) scale(.86); }
}

@keyframes pinata-win-amount-pop {
  0%, 14% { opacity: 0; transform: translateY(24px) scale(.25); }
  24% { opacity: 1; transform: translateY(0) scale(1.14); }
  32%, 82% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: translateY(16px) scale(.92); }
}

@keyframes pinata-win-coin-fall {
  0% { transform: translate3d(0, -80px, 0) rotateY(0deg) rotateZ(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate3d(var(--drift), 112vh, 0) rotateY(720deg) rotateZ(260deg); opacity: .95; }
}

@keyframes pinata-win-bill {
  0%, 8% { opacity: 0; transform: rotate(var(--r)) translateY(80px) scale(.45); }
  18%, 78% { opacity: .96; transform: rotate(var(--r)) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(calc(var(--r) + 20deg)) translateY(46px) scale(.8); }
}

@keyframes pinata-win-total {
  0%, 72% { opacity: 0; transform: translateY(26px) scale(.86); }
  82%, 95% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(10px) scale(.94); }
}