:root{--dice-size: 50px;--dot-size: 10px}.scene{perspective:1000px;perspective-origin:center center}.dice-wrap{width:var(--dice-size);height:var(--dice-size);display:flex;align-items:center;justify-content:center}.cube{width:var(--dice-size);height:var(--dice-size);position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.9,.3,1)}@keyframes dice-roll-continuous{0%{transform:rotateX(0) rotateY(0) rotate(0)}25%{transform:rotateX(90deg) rotateY(180deg) rotate(90deg)}50%{transform:rotateX(180deg) rotateY(360deg) rotate(180deg)}75%{transform:rotateX(270deg) rotateY(540deg) rotate(270deg)}to{transform:rotateX(360deg) rotateY(720deg) rotate(360deg)}}.cube.rolling-continuous{animation:dice-roll-continuous .6s linear infinite;will-change:transform;backface-visibility:hidden;-webkit-font-smoothing:antialiased}@keyframes dice-roll-final{0%{transform:rotateX(var(--from-x)) rotateY(var(--from-y)) rotate(0)}to{transform:rotateX(var(--to-x)) rotateY(var(--to-y)) rotate(360deg)}}.cube.rolling-final{animation:dice-roll-final .5s cubic-bezier(.45,.05,.55,.95) forwards;will-change:transform;backface-visibility:hidden}.face{position:absolute;width:var(--dice-size);height:var(--dice-size);border-radius:8px;box-shadow:0 6px 18px #00000040,inset 0 -6px 10px #ffffff08;backface-visibility:hidden;-webkit-backface-visibility:hidden}.f1{transform:rotateY(0) translateZ(calc(var(--dice-size) / 2))}.f2{transform:rotateY(90deg) translateZ(calc(var(--dice-size) / 2))}.f3{transform:rotateY(180deg) translateZ(calc(var(--dice-size) / 2))}.f4{transform:rotateY(-90deg) translateZ(calc(var(--dice-size) / 2))}.f5{transform:rotateX(90deg) translateZ(calc(var(--dice-size) / 2))}.f6{transform:rotateX(-90deg) translateZ(calc(var(--dice-size) / 2))}.dots{width:72%;height:72%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:6%;align-items:center;justify-items:center}.dot{width:var(--dot-size);height:var(--dot-size);border-radius:50%;background:#111827;box-shadow:0 1px #ffffff0f inset}@media(max-width:768px){:root{--dice-size: 40px;--dot-size: 8px}}