/* Happy Dance. The button sits on the partner's plate. The wiggle stays inside that
   plate so the hand, the bid box, and the other seats do not move. */
#happyDanceBtn {
  flex: none;
  width: 36px;
  height: 36px;
  margin-left: 4px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 220, 140, 0.7);
  background: rgba(40, 28, 8, 0.72);
  font-size: 18px;
  line-height: 34px;
  cursor: pointer;
  touch-action: manipulation;
}
#happyDanceBtn:disabled { opacity: 0.45; cursor: default; }
#happyDanceBtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

#felt .seat .plate { position: relative; }
#felt .seat.hd-on .plate {
  animation: hd-wiggle 0.42s ease-in-out 5;
  transform-origin: 50% 80%;
}
@keyframes hd-wiggle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-6px) rotate(-7deg); }
  65% { transform: translateY(-2px) rotate(7deg); }
}

.hd-sparks {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 2;
}
.hd-sparks i {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #ffe36b;
  box-shadow: 0 0 4px #fff3b0;
  animation: hd-spark 0.95s ease-out 2;
  transform: rotate(var(--a)) translateY(0);
}
@keyframes hd-spark {
  to { transform: rotate(var(--a)) translateY(-18px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #felt .seat.hd-on .plate { animation: hd-glow 2.1s ease; }
  .hd-sparks { display: none; }
}
@keyframes hd-glow {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 3px rgba(255, 214, 90, 0.9); }
}