#scene {
	position: absolute;
	display: flex;
	top: 1vh;
	width: 50%;
	height: auto;
	margin-left: 25%;
	justify-content: center;
	perspective: max(1000vw, 1000vh);
	visibility: hidden;

	/* Padding on each side of a die, as a fraction of the --dieEdge */
	--diePad: 0.25;

	/* Side length of die edges */
	--dieEdge: calc(5.5vw);

	/* Transforms to either push or pull by half an edge length */
	--pullToSurface: translateZ(calc(var(--dieEdge) / 2));
	--pushToFloor: translateZ(calc(-1 * var(--dieEdge) / 2));
}

/*
 * Some space around the die, so that no two dice are right up against each
 * other (which would make them intersect while rotating)
 */
.diePad {
	padding: calc(var(--dieEdge) * var(--diePad));
	transform-style: preserve-3d;
	display: flex;
}

/*
 * On each successive roll, the dice are rotated a pseudo-random number of full
 * turns so it looks more like they're tumbling randomly rather than just going
 * directly to their target face
 *
 * This was generated with the script util/spins.js
 */
#scene[data-roll-count-mod5="0"] > :nth-child(6n+1) { --spin: rotateX(0turn) rotateY(0turn) rotateZ(0turn); }
#scene[data-roll-count-mod5="1"] > :nth-child(6n+1) { --spin: rotateX(2turn) rotateY(1turn) rotateZ(-2turn); }
#scene[data-roll-count-mod5="2"] > :nth-child(6n+1) { --spin: rotateX(-1turn) rotateY(2turn) rotateZ(-3turn); }
#scene[data-roll-count-mod5="3"] > :nth-child(6n+1) { --spin: rotateX(-3turn) rotateY(1turn) rotateZ(-1turn); }
#scene[data-roll-count-mod5="4"] > :nth-child(6n+1) { --spin: rotateX(-1turn) rotateY(-1turn) rotateZ(-2turn); }
#scene[data-roll-count-mod5="0"] > :nth-child(6n+2) { --spin: rotateX(0turn) rotateY(0turn) rotateZ(0turn); }
#scene[data-roll-count-mod5="1"] > :nth-child(6n+2) { --spin: rotateX(-2turn) rotateY(2turn) rotateZ(-1turn); }
#scene[data-roll-count-mod5="2"] > :nth-child(6n+2) { --spin: rotateX(0turn) rotateY(3turn) rotateZ(0turn); }
#scene[data-roll-count-mod5="3"] > :nth-child(6n+2) { --spin: rotateX(2turn) rotateY(2turn) rotateZ(1turn); }
#scene[data-roll-count-mod5="4"] > :nth-child(6n+2) { --spin: rotateX(-1turn) rotateY(1turn) rotateZ(2turn); }
#scene[data-roll-count-mod5="0"] > :nth-child(6n+3) { --spin: rotateX(0turn) rotateY(0turn) rotateZ(0turn); }
#scene[data-roll-count-mod5="1"] > :nth-child(6n+3) { --spin: rotateX(3turn) rotateY(1turn) rotateZ(-1turn); }
#scene[data-roll-count-mod5="2"] > :nth-child(6n+3) { --spin: rotateX(0turn) rotateY(2turn) rotateZ(0turn); }
#scene[data-roll-count-mod5="3"] > :nth-child(6n+3) { --spin: rotateX(2turn) rotateY(3turn) rotateZ(-2turn); }
#scene[data-roll-count-mod5="4"] > :nth-child(6n+3) { --spin: rotateX(0turn) rotateY(1turn) rotateZ(-3turn); }
#scene[data-roll-count-mod5="0"] > :nth-child(6n+4) { --spin: rotateX(0turn) rotateY(0turn) rotateZ(0turn); }
#scene[data-roll-count-mod5="1"] > :nth-child(6n+4) { --spin: rotateX(2turn) rotateY(-1turn) rotateZ(1turn); }
#scene[data-roll-count-mod5="2"] > :nth-child(6n+4) { --spin: rotateX(5turn) rotateY(0turn) rotateZ(0turn); }
#scene[data-roll-count-mod5="3"] > :nth-child(6n+4) { --spin: rotateX(2turn) rotateY(-1turn) rotateZ(1turn); }
#scene[data-roll-count-mod5="4"] > :nth-child(6n+4) { --spin: rotateX(0turn) rotateY(0turn) rotateZ(2turn); }
#scene[data-roll-count-mod5="0"] > :nth-child(6n+5) { --spin: rotateX(0turn) rotateY(0turn) rotateZ(0turn); }
#scene[data-roll-count-mod5="1"] > :nth-child(6n+5) { --spin: rotateX(2turn) rotateY(1turn) rotateZ(-2turn); }
#scene[data-roll-count-mod5="2"] > :nth-child(6n+5) { --spin: rotateX(0turn) rotateY(3turn) rotateZ(-1turn); }
#scene[data-roll-count-mod5="3"] > :nth-child(6n+5) { --spin: rotateX(-2turn) rotateY(1turn) rotateZ(0turn); }
#scene[data-roll-count-mod5="4"] > :nth-child(6n+5) { --spin: rotateX(0turn) rotateY(2turn) rotateZ(2turn); }
#scene[data-roll-count-mod5="0"] > :nth-child(6n+6) { --spin: rotateX(0turn) rotateY(0turn) rotateZ(0turn); }
#scene[data-roll-count-mod5="1"] > :nth-child(6n+6) { --spin: rotateX(-2turn) rotateY(2turn) rotateZ(1turn); }
#scene[data-roll-count-mod5="2"] > :nth-child(6n+6) { --spin: rotateX(1turn) rotateY(1turn) rotateZ(0turn); }
#scene[data-roll-count-mod5="3"] > :nth-child(6n+6) { --spin: rotateX(-1turn) rotateY(0turn) rotateZ(2turn); }
#scene[data-roll-count-mod5="4"] > :nth-child(6n+6) { --spin: rotateX(2turn) rotateY(1turn) rotateZ(1turn); }

/*
 * A cube
 */
.die {
	position: relative;
	width: var(--dieEdge);
	height: var(--dieEdge);
	transform: var(--pushToFloor);
	transform-style: preserve-3d;
	transition: transform 1s;
	pointer-events: auto;
	margin: auto;
}

/*
 * A face of a cube
 */
.face {
	position: absolute;
	width: 100%;
	height: 100%;
	color: white;
	font-size: calc(var(--dieEdge) / 2);
	display: flex;
}

/*
 * Each specific numbered face of a cube
 */
.face-1 { transform: rotateY(0turn) var(--pullToSurface); background-color: #800; }
.face-2 { transform: rotateY(0.25turn) var(--pullToSurface); background-color: #900; }
.face-3 { transform: rotateX(0.25turn) var(--pullToSurface); background-color: #a00; }
.face-4 { transform: rotateX(-0.25turn) var(--pullToSurface); background-color: #b00; }
.face-5 { transform: rotateY(-0.25turn) var(--pullToSurface); background-color: #c00; }
.face-6 { transform: rotateY(0.5turn) var(--pullToSurface); background-color: #d00; }

/*
 * Rotations to make a die show a particular face
 */
.die[data-result="1"] { transform: var(--pushToFloor) rotateY(0turn) var(--spin); }
.die[data-result="2"] { transform: var(--pushToFloor) rotateY(-0.25turn) var(--spin); }
.die[data-result="3"] { transform: var(--pushToFloor) rotateX(-0.25turn) var(--spin); }
.die[data-result="4"] { transform: var(--pushToFloor) rotateX(0.25turn) var(--spin); }
.die[data-result="5"] { transform: var(--pushToFloor) rotateY(0.25turn) var(--spin); }
.die[data-result="6"] { transform: var(--pushToFloor) rotateY(-0.5turn) var(--spin); }

/*
 * Centre the number within the die face
 */
.die span, .die svg {
	margin: auto;
}

/*
 * Set the "dots" version's size and styling
 */
.die svg {
	width: 90%;
	height: 90%;
}
circle {
	fill: white;
}