.moo-dance {
  position: absolute;
  z-index: 30;
  display: grid;
  place-items: center;
  gap: 1px;
  width: 116px;
  color: #fff9df;
  font-family: "Chakra Petch", "Noto Sans Thai", sans-serif;
  pointer-events: none;
  filter: drop-shadow(0 4px 5px #020814cc);
}

.moo-dance.seat-0 { left: 50%; bottom: 2%; transform: translateX(-50%); }
.moo-dance.seat-1 { left: 3%; top: 52%; transform: translateY(-50%); }
.moo-dance.seat-2 { left: 50%; top: 1%; transform: translateX(-50%); }
.moo-dance.seat-3 { right: 3%; top: 52%; transform: translateY(-50%); }

.moo-dance b {
  z-index: 1;
  padding: 3px 6px;
  border: 1px solid #fff0a2;
  border-radius: 8px;
  background: #e65c59;
  color: #fff8d3;
  font-size: 10px;
  letter-spacing: .7px;
  line-height: 1;
  box-shadow: 0 2px 0 #78273f;
  animation: moo-label-pop .58s ease-in-out infinite alternate;
}

.moo-dance.final-moo b { background: #9c4bce; box-shadow: 0 2px 0 #48206a, 0 0 14px #efb8ff; }
.moo-dance small { padding: 2px 5px; border-radius: 6px; background: #112640d9; font-size: 9px; white-space: nowrap; }

.moo-dancer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 82px;
  animation: moo-dance .48s cubic-bezier(.35, .05, .65, 1) infinite alternate;
  transform-origin: 50% 100%;
}

.moo-dancer img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 0 10px #ff92be); }
.moo-dancer i { position: absolute; color: #ffe36e; font-size: 21px; font-style: normal; font-weight: 700; text-shadow: 1px 1px #b64a5d; animation: moo-spark .48s ease-in-out infinite alternate; }
.moo-dancer i:first-child { left: 2px; top: 12px; }
.moo-dancer i:last-child { right: 1px; top: 28px; animation-delay: .16s; }

@keyframes moo-dance {
  from { transform: translateY(2px) rotate(-8deg) scale(.96); }
  to { transform: translateY(-12px) rotate(8deg) scale(1.06); }
}

@keyframes moo-label-pop { to { transform: scale(1.1); } }
@keyframes moo-spark { to { transform: translateY(-8px) rotate(20deg) scale(1.25); opacity: .65; } }

@media (max-width: 540px) {
  .moo-dance { width: 76px; }
  .moo-dancer { width: 66px; height: 57px; }
  .moo-dancer img { width: 56px; height: 56px; }
  .moo-dance b { padding: 2px 3px; font-size: 7px; }
  .moo-dance small { font-size: 7px; }
  .moo-dancer i { font-size: 14px; }
  .moo-dance.seat-1 { left: 0; }
  .moo-dance.seat-3 { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .moo-dance b, .moo-dancer, .moo-dancer i { animation: none; }
}