/* ---------- Zephy Space Pup game buddy ---------- */
.zephy-buddy {
  position: fixed;
  right: clamp(10px, 3vw, 30px);
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 92;
  display: grid;
  grid-template-columns: 104px minmax(156px, 260px);
  align-items: end;
  gap: 8px;
  pointer-events: none;
}

.zephy-buddy-home {
  left: clamp(12px, 3vw, 30px);
  right: auto;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 44;
}

.zephy-buddy-home.zephy-buddy-has-badges {
  bottom: max(150px, calc(env(safe-area-inset-bottom) + 150px));
}

.zephy-sprite {
  width: 104px;
  aspect-ratio: 1;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 400% 300%;
  cursor: pointer;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.38));
  pointer-events: auto;
  transform-origin: 50% 82%;
  animation: zephy-float 2.6s ease-in-out infinite;
}

.zephy-sprite:focus-visible {
  outline: 3px solid rgba(255, 214, 107, 0.95);
  outline-offset: 4px;
  border-radius: 22px;
}

.zephy-kind-celebrate,
.zephy-pose-cheer,
.zephy-pose-pawUp,
.zephy-pose-sparkle,
.zephy-pose-happyClap,
.zephy-pose-confettiHop,
.zephy-pose-tailWag {
  animation: zephy-cheer 0.72s ease-in-out 3;
}

.zephy-pose-danceLeft,
.zephy-pose-danceRight,
.zephy-pose-victoryLeft,
.zephy-pose-victoryRight,
.zephy-pose-spinDance,
.zephy-pose-moonwalk {
  animation: zephy-dance 0.58s ease-in-out infinite;
}

.zephy-kind-hint {
  animation: zephy-float 2.6s ease-in-out infinite;
}

.zephy-kind-try-again {
  animation: zephy-comfort 1.8s ease-in-out infinite;
}

.zephy-buddy-home.zephy-idle-peek .zephy-sprite {
  animation: zephy-idle-peek 2.8s ease-in-out both;
}

.zephy-bubble {
  max-width: 260px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 214, 107, 0.42);
  border-radius: 16px 16px 4px 16px;
  background: rgba(14, 17, 42, 0.86);
  color: #fff5c7;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.18;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.zephy-bubble span {
  display: block;
}

.zephy-action {
  min-height: 60px;
  margin-top: 10px;
  padding: 0 18px;
  border: 1px solid rgba(255, 214, 107, 0.48);
  border-radius: 999px;
  background: rgba(255, 214, 107, 0.18);
  color: #fff7d8;
  font-size: 15px;
  font-weight: 1000;
  cursor: pointer;
  pointer-events: auto;
}

.zephy-action:focus-visible {
  outline: 3px solid rgba(255, 214, 107, 0.95);
  outline-offset: 3px;
}

.zephy-banner {
  position: absolute;
  right: 42px;
  bottom: 118px;
  width: max-content;
  max-width: min(300px, calc(100vw - 36px));
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff3a4, #69e6ff 52%, #ff9fc9);
  color: #25114d;
  font-size: 20px;
  font-weight: 1000;
  line-height: 1;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.32);
  animation: zephy-banner-pop 1.2s ease both;
}

.zephy-confetti {
  position: absolute;
  inset: -32px 8px 44px auto;
  width: 190px;
  pointer-events: none;
}

.zephy-confetti span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 14px;
  border-radius: 3px;
  background: #ffd65e;
  transform: translate(-50%, -50%);
  animation: zephy-confetti-burst 1.1s ease-out both;
}

.zephy-confetti span:nth-child(3n) {
  background: #67e8ff;
}

.zephy-confetti span:nth-child(3n + 1) {
  background: #ff8fc0;
}

.zephy-confetti span:nth-child(1) { --x: -74px; --y: -74px; --r: -32deg; }
.zephy-confetti span:nth-child(2) { --x: -40px; --y: -96px; --r: 22deg; }
.zephy-confetti span:nth-child(3) { --x: 6px; --y: -84px; --r: 58deg; }
.zephy-confetti span:nth-child(4) { --x: 52px; --y: -92px; --r: -18deg; }
.zephy-confetti span:nth-child(5) { --x: 82px; --y: -54px; --r: 44deg; }
.zephy-confetti span:nth-child(6) { --x: -82px; --y: -24px; --r: 16deg; }
.zephy-confetti span:nth-child(7) { --x: -48px; --y: -42px; --r: 78deg; }
.zephy-confetti span:nth-child(8) { --x: 34px; --y: -34px; --r: -58deg; }
.zephy-confetti span:nth-child(9) { --x: 76px; --y: -12px; --r: 28deg; }
.zephy-confetti span:nth-child(10) { --x: -34px; --y: 12px; --r: -76deg; }
.zephy-confetti span:nth-child(11) { --x: 18px; --y: 16px; --r: 64deg; }
.zephy-confetti span:nth-child(12) { --x: 64px; --y: 22px; --r: -40deg; }

@keyframes zephy-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-8px) rotate(2deg);
  }
}

@keyframes zephy-cheer {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.08);
  }
}

@keyframes zephy-dance {
  0%,
  100% {
    transform: translateX(-4px) rotate(-7deg);
  }
  50% {
    transform: translateX(5px) rotate(8deg);
  }
}

@keyframes zephy-comfort {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.03);
  }
}

@keyframes zephy-idle-peek {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  18% {
    transform: translateY(-9px) rotate(-5deg) scale(1.04);
  }
  38% {
    transform: translateY(0) rotate(5deg) scale(1);
  }
  58% {
    transform: translateY(-6px) rotate(-4deg) scale(1.03);
  }
  78% {
    transform: translateY(0) rotate(4deg) scale(1);
  }
}

@keyframes zephy-banner-pop {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.84);
  }
  28% {
    opacity: 1;
    transform: translateY(0) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translateY(-12px) scale(1);
  }
}

@keyframes zephy-confetti-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)))
      scale(1)
      rotate(var(--r));
  }
}

@media (max-width: 700px) {
  .zephy-buddy {
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .zephy-buddy-home {
    bottom: max(74px, env(safe-area-inset-bottom));
  }

  .zephy-buddy-home.zephy-buddy-has-badges {
    bottom: max(186px, calc(env(safe-area-inset-bottom) + 186px));
  }

  .zephy-sprite {
    width: 78px;
  }

  .zephy-bubble {
    max-width: none;
    padding: 9px 10px;
    font-size: 13px;
  }

  .zephy-action {
    min-height: 60px;
    font-size: 14px;
  }

  .zephy-banner {
    left: 18px;
    right: auto;
    bottom: 96px;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zephy-sprite,
  .zephy-pose-cheer,
  .zephy-pose-pawUp,
  .zephy-pose-sparkle,
  .zephy-pose-danceLeft,
  .zephy-pose-danceRight,
  .zephy-idle-peek .zephy-sprite,
  .zephy-banner,
  .zephy-confetti span {
    animation: none;
  }
}