/* ── Player pieces ── */
.piece {
  position: absolute;
  width: 52px;
  height: 70px;
  z-index: 10;
  pointer-events: none;
  /* transition is set dynamically by animation.js per hop */
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.5));
}

.piece img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Fallback colored circle when image not loaded */
.piece-fallback {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.8);
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* Piece colors for fallback */
.piece-0 .piece-fallback { background: #f44336; }
.piece-1 .piece-fallback { background: #2196f3; }
.piece-2 .piece-fallback { background: #4caf50; }
.piece-3 .piece-fallback { background: #ffeb3b; }

/* Landing bounce when piece arrives */
@keyframes piece-land {
  0%   { transform: translateY(-10px) scale(1.1); }
  45%  { transform: translateY(3px) scale(0.95); }
  70%  { transform: translateY(-3px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

.piece.landing {
  animation: piece-land 0.35s ease-out 1 forwards;
}

/* Bop arc played on every hop */
@keyframes piece-bop {
  0%   { transform: translateY(0)     scale(1); }
  38%  { transform: translateY(-11px) scale(1.09); }
  72%  { transform: translateY(-3px)  scale(1.02); }
  100% { transform: translateY(0)     scale(1); }
}