.dice-box-container{width:auto;height:auto;margin-top:10px;border-radius:15px;box-shadow:0 8px 20px rgba(0,0,0,.3);background-color:#f5f0e1;overflow:hidden;display:inline-flex}.dice-box,.dice-box-container{position:relative;justify-content:center;align-items:center}.dice-box{height:100%;padding:15px;display:flex;flex-wrap:wrap;box-sizing:border-box;background:url(https://www.transparenttextures.com/patterns/fabric-of-squares.png),linear-gradient(145deg,#f5f0e1,#d4cbb8);border:10px solid #bfa58a;border-radius:15px;box-shadow:inset 0 0 10px rgba(0,0,0,.3)}.dice{margin:5px;display:flex;justify-content:center;align-items:center;border:1px solid #ccc;box-shadow:inset -2px -2px 5px rgba(255,255,255,.6),inset 2px 2px 5px rgba(0,0,0,.2),0 4px 10px rgba(0,0,0,.2);transition:box-shadow .3s ease;transform-style:preserve-3d;position:relative;background-color:#d9d9d9;border-radius:15%;width:2rem;height:2rem}.dice.rolling{animation:roll-dice 1s linear infinite}@keyframes roll-dice{0%{transform:translate(0) rotate(0deg)}25%{transform:translate(20px,20px) rotate(90deg)}50%{transform:translate(-20px,20px) rotate(180deg)}75%{transform:translate(-20px,-20px) rotate(270deg)}to{transform:translate(0) rotate(1turn)}}@keyframes roll1{0%{transform:translate(0) rotate(0deg)}25%{transform:translate(30px,-20px) rotate(90deg)}50%{transform:translate(-10px,30px) rotate(180deg)}75%{transform:translate(-20px,-10px) rotate(270deg)}to{transform:translate(0) rotate(1turn)}}@keyframes roll2{0%{transform:translate(0) rotate(0deg)}25%{transform:translate(-20px,25px) rotate(120deg)}50%{transform:translate(30px,-15px) rotate(240deg)}75%{transform:translate(15px,30px) rotate(300deg)}to{transform:translate(0) rotate(1turn)}}@keyframes roll3{0%{transform:translate(0) rotate(0deg)}25%{transform:translate(20px,20px) rotate(60deg)}50%{transform:translate(-30px,-20px) rotate(180deg)}75%{transform:translate(20px,10px) rotate(240deg)}to{transform:translate(0) rotate(1turn)}}.face{text-align:center;width:100%;height:100%;backface-visibility:hidden;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;perspective:1000px}.dot,.face{position:absolute}.dot{width:18%;height:18%;background-color:#000;border-radius:50%;opacity:0}.dot.show{opacity:1}.dot1{top:50%;left:50%;transform:translate(-50%,-50%)}.dot2{top:20%;left:20%}.dot3{top:20%;left:80%;transform:translate(-100%)}.dot4{top:80%;left:20%;transform:translateY(-100%)}.dot5{top:80%;left:80%;transform:translate(-100%,-100%)}.dot6{top:50%;left:20%;transform:translateY(-50%)}.dot7{top:50%;left:80%;transform:translate(-100%,-50%)}.dot8{top:20%;left:50%;transform:translate(-50%)}.dot9{top:80%;left:50%;transform:translate(-50%,-100%)}