.dice-container{cursor:pointer;-webkit-tap-highlight-color:transparent;background:#000;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0;overflow:hidden}.back-button{cursor:pointer;z-index:100;background:0 0;border:none;justify-content:center;align-items:center;width:40px;height:40px;padding:0;transition:opacity .2s;display:flex;position:absolute;top:16px;left:24px}.back-button:hover{opacity:.7}.back-button:active{opacity:.5}#wrapper{perspective:1200px;width:200px;height:200px;position:relative}#platform{width:200px;height:200px;transform-style:preserve-3d}#platform.settling{transition:transform .6s cubic-bezier(.2,0,.2,1)}#dice{width:200px;height:200px;transform-style:preserve-3d;position:absolute;transform:translateZ(-100px)}#dice.settling{transition:transform .6s cubic-bezier(.2,0,.2,1)}.side{background:linear-gradient(145deg,#fff 0%,#f5f5f5 100%);border-radius:40px;width:200px;height:200px;position:absolute;box-shadow:inset 0 0 40px #0000001a}#dice .inner{box-shadow:none;background:#f0f0f0;border-radius:38px}#dice .cover{box-shadow:none;background:#e8e8e8;border-radius:0;transform:translateZ(0)}#dice .cover.x{transform:rotateY(90deg)}#dice .cover.z{transform:rotateX(90deg)}#dice .front{transform:translateZ(100px)}#dice .front.inner{transform:translateZ(98px)}#dice .back{transform:rotateX(-180deg)translateZ(100px)}#dice .back.inner{transform:rotateX(-180deg)translateZ(98px)}#dice .right{transform:rotateY(90deg)translateZ(100px)}#dice .right.inner{transform:rotateY(90deg)translateZ(98px)}#dice .left{transform:rotateY(-90deg)translateZ(100px)}#dice .left.inner{transform:rotateY(-90deg)translateZ(98px)}#dice .top{transform:rotateX(90deg)translateZ(100px)}#dice .top.inner{transform:rotateX(90deg)translateZ(98px)}#dice .bottom{transform:rotateX(-90deg)translateZ(100px)}#dice .bottom.inner{transform:rotateX(-90deg)translateZ(98px)}.dot{background:radial-gradient(circle at 30% 30%,#e53935 0%,#c62828 50%,#b71c1c 100%);border-radius:20px;width:40px;height:40px;position:absolute;box-shadow:inset 0 -2px 4px #0006}.dot.center{margin:80px 0 0 80px}.dot.dtop{margin-top:25px}.dot.dleft{margin-left:135px}.dot.dright{margin-left:25px}.dot.dbottom{margin-top:135px}.dot.center.dleft{margin:80px 0 0 25px}.dot.center.dright{margin:80px 0 0 135px}@keyframes spin{0%{transform:translateZ(-100px)rotateX(0)rotateY(0)rotate(0)}20%{transform:translateZ(-100px)rotateX(135deg)rotateY(135deg)rotate(0)}40%{transform:translateZ(-100px)rotateX(270deg)rotateY(70deg)rotate(135deg)}60%{transform:translateZ(-100px)rotateX(405deg)rotateY(270deg)rotate(270deg)}80%{transform:translateZ(-100px)rotateX(135deg)rotateY(405deg)rotate(200deg)}to{transform:translateZ(-100px)rotateX(270deg)rotateY(270deg)rotate(270deg)}}@keyframes roll{0%{transform:translate3d(-75px,-15px,-150px)}12.5%{transform:translateZ(-45px)}25%{transform:translate3d(75px,-15px,-150px)}37.5%{transform:translate3d(0,-30px,-225px)}50%{transform:translate3d(-75px,-15px,-150px)}62.5%{transform:translateZ(-45px)}75%{transform:translate3d(75px,-15px,-150px)}87.5%{transform:translate3d(-45px,-8px,-75px)}95%{transform:translate3d(20px,-4px,-35px)}to{transform:translate(0,0)}}#dice.rolling{animation:1.4s ease-out forwards spin}#platform.rolling{animation:1.4s ease-out forwards roll}.hint-text{color:#fff6;text-align:center;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;position:absolute;bottom:80px;left:50%;transform:translate(-50%)}@media (max-width:768px){.back-button{top:16px;left:16px}}@media (max-height:600px){#wrapper,#platform,#dice,.side{width:150px;height:150px}.dot{border-radius:15px;width:30px;height:30px}.dot.center{margin:60px 0 0 60px}.dot.dtop{margin-top:19px}.dot.dleft{margin-left:101px}.dot.dright{margin-left:19px}.dot.dbottom{margin-top:101px}.dot.center.dleft{margin:60px 0 0 19px}.dot.center.dright{margin:60px 0 0 101px}}