/* Dice */
.dice-display {
  font-size: clamp(3rem, 8vw, 6rem);
  text-align: center;
  padding: 1.5rem;
  font-weight: 800;
  background: var(--grad);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.dice-display.rolling {
  animation: diceRoll 0.08s infinite;
  filter: saturate(1.4);
}

@keyframes diceRoll {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(6deg) scale(1.04); }
  50% { transform: rotate(0deg) scale(1); }
  75% { transform: rotate(-6deg) scale(1.04); }
  100% { transform: rotate(0deg) scale(1); }
}