/* Correct-answer + perfect-party animations for the non-original themes (js/fx.js). */

/* ---------- bubbles (mermaid-ocean) ---------- */
.fx-bubble {
  position: absolute;
  bottom: -80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95) 0 8%, rgba(255,255,255,0.35) 15%, rgba(170,232,255,0.25) 55%, rgba(90,190,240,0.45) 100%);
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 -4px 10px rgba(60, 160, 220, 0.25), 0 4px 14px rgba(31, 157, 189, 0.2);
  animation: bubbleRise 1.8s ease-out forwards;
  opacity: 0;
  z-index: 99;
}
@keyframes bubbleRise {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
  15% { opacity: 1; }
  70% { opacity: 1; transform: translate(calc(var(--drift, 0px) * 0.6), -70vh) scale(1); }
  100% { transform: translate(var(--drift, 0px), -108vh) scale(1.1); opacity: 0; }
}
.fx-bubble.fx-bubble-halo {
  bottom: auto;
  top: calc(25% - 28px);
  left: 50%;
  width: 176px;
  height: 176px;
  margin-left: -88px;
  z-index: 100;
  animation: haloFloat 1.8s ease-out forwards;
}
@keyframes haloFloat {
  0% { opacity: 0; transform: translateY(50vh) scale(0.5); }
  35% { opacity: 1; transform: translateY(0) scale(1.1); }
  75% { opacity: 1; transform: translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(1.25); }
}
.confetti-sticker.fx-float { animation: stickerFloatUp 1.8s ease-out forwards; }
@keyframes stickerFloatUp {
  0% { opacity: 0; transform: translateX(-50%) translateY(50vh) scale(0.5); }
  35% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.1) rotate(-4deg); }
  75% { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1) rotate(4deg); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-60px) scale(0.9); }
}
.fx-wave {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 24vh;
  z-index: 91;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath d='M0 20 Q25 0 50 20 T100 20 T150 20 T200 20 V40 H0Z' fill='%235ccfe6' fill-opacity='.55'/%3E%3C/svg%3E") repeat-x 0 0 / 320px 60px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath d='M0 20 Q25 0 50 20 T100 20 T150 20 T200 20 V40 H0Z' fill='%238466d8' fill-opacity='.35'/%3E%3C/svg%3E") repeat-x 0 22px / 260px 60px,
    linear-gradient(180deg, transparent 50px, rgba(92, 207, 230, 0.45) 60px, rgba(31, 157, 189, 0.5));
  animation: waveRise 5s ease-in-out forwards, waveSlide 2.4s linear infinite;
}
@keyframes waveRise {
  0% { transform: translateY(100%); }
  20%, 80% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}
@keyframes waveSlide {
  from { background-position: 0 0, 0 22px, 0 0; }
  to { background-position: 320px 0, -260px 22px, 0 0; }
}

/* ---------- rainbow burst (unicorn-rainbow) ---------- */
.fx-rainbow-ring {
  position: absolute;
  left: 50%; top: 40%;
  width: 60vmin; height: 60vmin;
  margin: -30vmin 0 0 -30vmin;
  border-radius: 50%;
  background: conic-gradient(#ff6b8b, #ffa94d, #ffe066, #8ce99a, #74c0fc, #b197fc, #ff6b8b);
  -webkit-mask: radial-gradient(circle, transparent 50%, #000 52%, #000 68%, transparent 70%);
  mask: radial-gradient(circle, transparent 50%, #000 52%, #000 68%, transparent 70%);
  animation: ringBurst 1.3s ease-out forwards;
  z-index: 98;
  opacity: 0;
}
@keyframes ringBurst {
  0% { transform: scale(0.1) rotate(0deg); opacity: 1; }
  70% { opacity: 0.9; }
  100% { transform: scale(2.2) rotate(120deg); opacity: 0; }
}
.fx-rays {
  position: absolute;
  left: 50%; top: 40%;
  width: 150vmax; height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0) 0deg 9deg, rgba(255,224,102,0.32) 9deg 13deg, rgba(255,122,184,0.26) 13deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 60%);
  mask: radial-gradient(circle, #000 0%, transparent 60%);
  animation: raysSpin 1.4s ease-out forwards;
  z-index: 97;
}
@keyframes raysSpin {
  0% { transform: scale(0.2) rotate(0deg); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(1) rotate(60deg); opacity: 0; }
}
.fx-burst-bit {
  position: absolute;
  left: 50%; top: 40%;
  transform: translate(-50%, -50%);
  animation: burstOut 1.4s cubic-bezier(0.15, 0.8, 0.3, 1) forwards;
  opacity: 0;
  z-index: 99;
}
@keyframes burstOut {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.1) rotate(200deg); opacity: 0; }
}
.confetti-sticker.fx-spin { animation: stickerSpin 1.6s ease-out forwards; }
@keyframes stickerSpin {
  0% { opacity: 0; transform: translateX(-50%) scale(0.2) rotate(-180deg); }
  35% { opacity: 1; transform: translateX(-50%) scale(1.2) rotate(10deg); }
  60% { opacity: 1; transform: translateX(-50%) scale(1) rotate(-4deg); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(0.9); }
}
.fx-rainbow-arc {
  position: absolute;
  left: 50%; bottom: -62vmin;
  width: 130vmin; height: 130vmin;
  margin-left: -65vmin;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 44%, #b197fc 44% 48%, #74c0fc 48% 52%, #8ce99a 52% 56%, #ffe066 56% 60%, #ffa94d 60% 64%, #ff6b8b 64% 68%, transparent 68%);
  animation: arcRise 4.6s ease-out forwards;
  z-index: 91;
  opacity: 0;
}
@keyframes arcRise {
  0% { transform: translateY(40%) scale(0.8); opacity: 0; }
  22% { transform: translateY(0) scale(1); opacity: 0.9; }
  80% { opacity: 0.9; }
  100% { transform: translateY(0) scale(1.05); opacity: 0; }
}

/* ---------- shooting stars + fireworks (starry-princess) ---------- */
.fx-shooting {
  position: absolute;
  width: 170px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 224, 102, 0), #ffe066 70%, #fff);
  box-shadow: 0 0 10px rgba(255, 215, 106, 0.9);
  transform-origin: 100% 50%;
  animation: shoot 1.2s ease-in forwards;
  opacity: 0;
  z-index: 99;
}
.fx-shooting::after {
  content: "⭐";
  position: absolute;
  right: -14px; top: -13px;
  font-size: 22px;
  filter: drop-shadow(0 0 6px #fff3b0);
}
@keyframes shoot {
  0% { transform: translate(0, 0) rotate(146deg) scaleX(0.3); opacity: 0; }
  10% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translate(-620px, 420px) rotate(146deg) scaleX(1); opacity: 0; }
}
.fx-firework { position: absolute; width: 0; height: 0; z-index: 99; }
.fx-spark {
  position: absolute;
  left: 0; top: 0;
  width: 9px; height: 9px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  animation: sparkOut 1.2s ease-out forwards;
  opacity: 0;
}
.fx-spark:not(:empty) { width: auto; height: auto; background: none; box-shadow: none; }
@keyframes sparkOut {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(var(--tx), calc(var(--ty) + 30px)) scale(0.9); opacity: 0; }
}
.confetti-sticker.fx-glow {
  animation-duration: 1.7s;
  filter: drop-shadow(0 0 16px rgba(255, 215, 106, 0.95)) drop-shadow(0 8px 20px rgba(124, 77, 255, 0.4));
}
.fx-night {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(45, 27, 105, 0.5), rgba(10, 8, 30, 0.72));
  animation: burstFade 5s ease-out forwards;
  z-index: 89;
}
@media (prefers-reduced-motion: reduce) {
  .fx-rays, .fx-wave { display: none; }
}

/* Dino adventure */
.fx-footprint {
  position: absolute; z-index: 110; opacity: 0;
  animation: footprintPop 1.2s ease-out forwards;
  pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2));
}
@keyframes footprintPop {
  0% { opacity: 0; transform: scale(0.2); }
  30% { opacity: 1; transform: scale(1.15); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); }
}
.fx-lava {
  position: absolute; z-index: 108; pointer-events: none;
  animation: lavaBurst 1.5s ease-out forwards;
}
@keyframes lavaBurst {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--lx), var(--ly)) scale(1.1); }
}
.fx-lava-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 100;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 112, 67, 0.45), transparent 55%);
  animation: lavaGlow 4.5s ease-in-out forwards;
}
@keyframes lavaGlow {
  0%, 100% { opacity: 0; }
  30%, 70% { opacity: 1; }
}
.confetti-sticker.fx-stomp {
  animation: stompIn 1.6s ease-out forwards !important;
}
@keyframes stompIn {
  0% { opacity: 0; transform: translate(-50%, -80%) scale(0.2) rotate(-10deg); }
  40% { opacity: 1; transform: translate(-50%, -45%) scale(1.2) rotate(4deg); }
  60% { transform: translate(-50%, -50%) scale(0.95) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(1) rotate(0); }
}
.celeb-banner.almost {
  background: var(--banner-grad);
  font-size: clamp(1.2rem, 4vw, 1.7rem);
}