.dice-stage{display:block;position:relative;width:130px;height:125px;perspective:600px}
.dice-stage::after{content:'';position:absolute;bottom:9px;left:24px;width:90px;height:45px;background:#15324733;filter:blur(9px);border-radius:50%}
.dice-camera{display:block;position:absolute;left:26px;top:20px;width:76px;height:76px;transform-style:preserve-3d;transform:rotateX(-62deg) rotateY(-24deg)}
.dice-cube{display:block;width:76px;height:76px;position:relative;transform-style:preserve-3d;transform:rotateX(var(--land-x,0deg)) rotateY(var(--land-y,0deg))}
.cube-face{display:grid;position:absolute;inset:0;grid-template-columns:repeat(3,1fr);gap:8px;box-sizing:border-box;padding:12px;width:76px;height:76px;border:1px solid #627a8c;border-radius:9px;background:linear-gradient(135deg,#fff,#dce5ec);backface-visibility:hidden;box-shadow:inset 0 0 9px #56708622}
.cube-face .dice-pip{width:11px;height:11px;box-shadow:inset 1px 2px 2px #0008}
.face-1{transform:translateZ(38px)}.face-6{transform:rotateY(180deg) translateZ(38px)}.face-2{transform:rotateY(90deg) translateZ(38px);background:#c8d5df}.face-5{transform:rotateY(-90deg) translateZ(38px);background:#d6e0e8}.face-3{transform:rotateX(90deg) translateZ(38px)}.face-4{transform:rotateX(-90deg) translateZ(38px)}
.dice-button.tumbling .dice-cube{animation:cube-tumble .95s cubic-bezier(.22,.7,.25,1) forwards}
@keyframes cube-tumble{0%{transform:translateY(0) rotateX(90deg) rotateY(0deg)}30%{transform:translateY(-22px) rotateX(300deg) rotateY(160deg)}65%{transform:translateY(-7px) rotateX(610deg) rotateY(470deg)}85%{transform:translateY(-9px) rotateX(var(--spin-x)) rotateY(var(--spin-y))}100%{transform:translateY(0) rotateX(var(--spin-x)) rotateY(var(--spin-y))}}
@media(prefers-reduced-motion:reduce){.dice-button.tumbling .dice-cube{animation:none}}