.physical-die{--die-size:42px;display:inline-block;width:var(--die-size);height:var(--die-size);margin:7px;perspective:220px;transform:rotateX(-12deg) rotateY(-16deg) rotateZ(4deg);filter:drop-shadow(4px 8px 4px #0006);flex:none}
.die-cube{display:block;width:100%;height:100%;position:relative;transform-style:preserve-3d}
.die-face{position:absolute;inset:0;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:3px;padding:7px;background:linear-gradient(140deg,#fffef2,#d8cfb7);border:1px solid #c4b89a;border-radius:8px;backface-visibility:hidden;box-shadow:inset 0 0 4px #fff;transform:translateZ(calc(var(--die-size)/2))}
.die-face .pip{display:block;width:100%;height:100%;border-radius:50%;background:#233031;box-shadow:inset 1px 1px 2px #0008,0 1px 0 #fff}
.face-2{transform:rotateY(90deg) translateZ(calc(var(--die-size)/2))}.face-3{transform:rotateX(90deg) translateZ(calc(var(--die-size)/2))}.face-4{transform:rotateX(-90deg) translateZ(calc(var(--die-size)/2))}.face-5{transform:rotateY(-90deg) translateZ(calc(var(--die-size)/2))}.face-6{transform:rotateY(180deg) translateZ(calc(var(--die-size)/2))}
.physical-die[data-used=true]{opacity:.3;filter:grayscale(1)}