.player.reward {
  animation: reward-pop .8s ease-out both;
}

.player.reward-1 {
  background: #effbe7;
  border-color: var(--green);
}

.player.reward-2 {
  background: #fff0b8;
  border-color: #d99b00;
}

.player.reward-3,
.player.reward-4 {
  background: #ffd58a;
  border-color: var(--red);
  box-shadow: 0 0 0 4px #ffc83d88, 3px 3px 0 var(--ink);
}

.streak {
  display: inline-block;
  background: var(--yellow);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px;
  white-space: nowrap;
}

@keyframes reward-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.04) rotate(-1deg); }
  70% { transform: scale(.99) rotate(1deg); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .player.reward { animation: none; }
}