:root {
    --cubeSize: clamp(36px, calc(65vw / 6), 80px);
    --cubeHalf: calc(var(--cubeSize) / 2);
    --cubePerspective: calc(var(--cubeSize) * 10);
}

.diceRow {display: inline-flex; width: 100%; justify-content: space-around; align-items:center; margin: auto; perspective: var(--cubePerspective);}
.gameSelect {align-items: center;}
.cube {position: relative; width: var(--cubeSize); height: var(--cubeSize); transform-style: preserve-3d; transition: transform 1.5s cubic-bezier(.18,.89,.32,1.28);}
.cube > *:not(input) {position: absolute; width: var(--cubeSize); height: var(--cubeSize); backface-visibility: hidden; border: 2px solid #e2ad00; border-radius: 10px;}

.one { transform: translateZ(var(--cubeHalf));}
.six {  transform: rotateY(180deg) translateZ(var(--cubeHalf));}
.three {  transform: rotateY(90deg) translateZ(var(--cubeHalf));}
.four {  transform: rotateY(-90deg) translateZ(var(--cubeHalf));}
.five {  transform: rotateX(90deg) translateZ(var(--cubeHalf));}
.two {  transform: rotateX(-90deg) translateZ(var(--cubeHalf));}