.dice-face{width:120px;height:120px;margin:10px}.dice-container{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}.dice-face.rolling .dice-container{animation-name:fluidRoll;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-duration:inherit}@keyframes fluidRoll{0%{transform:rotateX(0deg) rotateY(0deg) rotate(0deg)}to{transform:rotateX(2turn) rotateY(2turn) rotate(1turn)}}@keyframes smoothRoll{0%{transform:rotateX(0deg) rotateY(0deg) rotate(0deg) scale(1)}20%{transform:rotateX(72deg) rotateY(144deg) rotate(36deg) scale(1.1)}40%{transform:rotateX(144deg) rotateY(288deg) rotate(72deg) scale(1.05)}60%{transform:rotateX(216deg) rotateY(432deg) rotate(108deg) scale(1.1)}80%{transform:rotateX(288deg) rotateY(576deg) rotate(144deg) scale(1.05)}to{transform:rotateX(1turn) rotateY(2turn) rotate(180deg) scale(1)}}.dice-side{position:absolute;width:120px;height:120px;background:linear-gradient(135deg,#FFFFFF,#F8F9FA);border:3px solid #dee2e6;border-radius:16px;box-shadow:0 8px 16px rgba(0,0,0,.15),inset 0 2px 4px rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center}.dice-front{transform:rotateY(0deg) translateZ(60px)}.dice-back{transform:rotateY(180deg) translateZ(60px)}.dice-right{transform:rotateY(90deg) translateZ(60px)}.dice-left{transform:rotateY(-90deg) translateZ(60px)}.dice-top{transform:rotateX(90deg) translateZ(60px)}.dice-bottom{transform:rotateX(-90deg) translateZ(60px)}.dice-grid{width:80px;height:80px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:6px;padding:8px}.dot{width:14px;height:14px;background:transparent;border-radius:50%;transition:none}.dot.show{background:#000;box-shadow:0 2px 4px rgba(0,0,0,.3),inset 0 1px 2px rgba(255,255,255,.3)}@media (max-width:768px){.dice-face,.dice-side{width:100px;height:100px}.dice-side{border-radius:12px}.dice-front{transform:rotateY(0deg) translateZ(50px)}.dice-back{transform:rotateY(180deg) translateZ(50px)}.dice-right{transform:rotateY(90deg) translateZ(50px)}.dice-left{transform:rotateY(-90deg) translateZ(50px)}.dice-top{transform:rotateX(90deg) translateZ(50px)}.dice-bottom{transform:rotateX(-90deg) translateZ(50px)}.dice-grid{width:60px;height:60px;gap:4px}.dot{width:10px;height:10px}}