.dice { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; min-height: 100px; } .die { width: 84px; height: 84px; border-radius: 18px; background: var(--paper); box-shadow: 0 0 0 2px var(--ink) inset; display: grid; place-items: center; font: 700 44px var(--display); } .die.roll { animation: roll .45s; } @keyframes roll { 0% { transform: rotate(-30deg) scale(.7); } 60% { transform: rotate(15deg) scale(1.1); } }