.dice-faces { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dice-faces .die { min-width: 48px; height: 48px; padding: 0 6px; display: grid; place-items: center; border: 2px solid var(--fg); border-radius: 10px; background: var(--bg); font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.dice-faces:empty { display: none; }
.shake { animation: shake .3s ease-out; }
@keyframes shake { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) {
  .shake { animation: none; }
}