body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.gradient-bg {
  background: linear-gradient(135deg, #ff9966 0%, #ff5e62 100%);
}

.card {
  border-radius: 1.5rem;
  padding-top: 3.5rem !important;
}

#dice-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1.5rem;
  justify-items: center;
  align-items: center;
  min-height: 140px;
  margin-bottom: 1rem;
}

.dice {
  width: 60px;
  height: 60px;
  transition: transform 0.4s cubic-bezier(.68,-0.55,.27,1.55), filter 0.4s;
  will-change: transform, filter;
}

.dice.rolling {
  animation: shake 0.7s cubic-bezier(.36,.07,.19,.97) both;
  filter: blur(2px) brightness(1.2);
}

.dice.spinning {
  animation: spin 5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(1800deg); }
}