/* d6 */

#d-6 .front {
  transform: translateZ(75px);
}

#d-6 .back {
  transform: rotateX(-180deg) translateZ(75px);
}

#d-6 .right {
  transform: rotateY(90deg) translateZ(75px);
}

#d-6 .left {
  transform: rotateY(-90deg) translateZ(75px);
}

#d-6 .top {
  transform: rotateX(90deg) translateZ(75px);
}

#d-6 .bottom {
  transform: rotateX(-90deg) translateZ(75px);
}

#d-6.show-6 {
  transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  -webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);
}

#d-6.show-5 {
  transform: rotateX(90deg) rotateY(-180deg) rotateZ(180deg);
  -webkit-transform: rotateX(90deg) rotateY(-180deg) rotateZ(180deg);
}

#d-6.show-4 {
  transform: rotateX(90deg) rotateY(90deg) rotateZ(270deg);
  -webkit-transform: rotateX(90deg) rotateY(90deg) rotateZ(270deg);
}

#d-6.show-3 {
  transform: rotateX(90deg) rotateY(-90deg) rotateZ(90deg);
  -webkit-transform: rotateX(90deg) rotateY(-90deg) rotateZ(90deg);
}

#d-6.show-2 {
  transform: rotateX(0deg) rotateY(180deg) rotateZ(180deg);
  -webkit-transform: rotateX(0deg) rotateY(180deg) rotateZ(180deg);
}

#d-6.show-1 {
  transform: rotateX(0) rotateY(0deg) rotateZ(0deg);
  -webkit-transform: rotateX(0) rotateY(0deg) rotateZ(0deg);
}

.d6-container {
  width: 150px;
  height: 150px;
  position: relative;
  margin: 0 auto 40px;
  perspective: 1000px;
  perspective-origin: 50% 100%;
}

#d-6 {
  width: 100%;
  height: 100%;
  top: 100px;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
  cursor: pointer;
  z-index: 2;
}

#d-6 div {
  background: radial-gradient(circle at center, var(--bs-secondary),var(--bs-indigo));
  opacity: 92.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid var(--bs-primary);
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 500%;
  text-align: center;
  padding: 50px 0;
}

/* d-20 */

.d20-container {
  width: 190px;
  height: 190px;
  position: relative;
  -webkit-perspective: 1000;
  perspective: 1000;
  display: block;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  z-index: 2;
}

#d-20 {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ( -60px ) rotateY( 0deg ) rotateX( 0deg ) rotateZ( 0deg );
  transform: translateZ( -60px ) rotateY( 0deg ) rotateX( 0deg ) rotateZ( 0deg );
  -webkit-transition: -webkit-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  cursor: pointer;
}

#d-20 div {
  width: 190px;
  height: 190px;
  display: block;
  position: absolute;
  background: url("../../assets/img/triangle.png");
  font-size: 300%;
  line-height: 190px;
  text-align: center;
  color: #f1f1f1;
  opacity: 95%;
  margin: 0;
}

#d-20 div {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 40px;
  margin-inline-end: 40px;
}

.figure-1 {
  -webkit-transform: rotateY( 36deg ) rotateX( 53deg ) rotateZ( 0deg ) translateZ( 120px );
  transform: rotateY( 36deg ) rotateX( 53deg ) rotateZ( 0deg ) translateZ( 120px );
}

.figure-2 {
  -webkit-transform: rotateY( 180deg ) rotateX( 11deg ) rotateZ( 300deg ) translateZ( 120px );
  transform: rotateY( 180deg ) rotateX( 11deg ) rotateZ( 300deg ) translateZ( 120px );
}

.figure-3 {
  -webkit-transform: rotateY( 144deg ) rotateX( -11deg ) rotateZ( 0deg ) translateZ( 120px );
  transform: rotateY( 144deg ) rotateX( -11deg ) rotateZ( 0deg ) translateZ( 120px );
}

.figure-4 {
  -webkit-transform: rotateY( 253deg ) rotateX( 53deg ) rotateZ( 120deg ) translateZ( 120px );
  transform: rotateY( 253deg ) rotateX( 53deg ) rotateZ( 120deg ) translateZ( 120px );
}

.figure-5 {
  -webkit-transform: rotateY( 253deg ) rotateX( 11deg ) rotateZ( 300deg ) translateZ( 120px );
  transform: rotateY( 253deg ) rotateX( 11deg ) rotateZ( 300deg ) translateZ( 120px );
}

.figure-6 {
  -webkit-transform: rotateY( 108deg ) rotateX( 53deg ) rotateZ( 240deg ) translateZ( 120px );
  transform: rotateY( 108deg ) rotateX( 53deg ) rotateZ( 240deg ) translateZ( 120px );
}

.figure-7 {
  -webkit-transform: rotateY( 216deg ) rotateX( -11deg ) rotateZ( 0deg ) translateZ( 120px );
  transform: rotateY( 216deg ) rotateX( -11deg ) rotateZ( 0deg ) translateZ( 120px );
}

.figure-8 {
  -webkit-transform: rotateY( 180deg ) rotateX( 53deg ) rotateZ( 240deg ) translateZ( 120px );
  transform: rotateY( 180deg ) rotateX( 53deg ) rotateZ( 240deg ) translateZ( 120px );
}

.figure-9 {
  -webkit-transform: rotateY( 108deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px );
  transform: rotateY( 108deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px );
}

.figure-10 {
  -webkit-transform: rotateY( 324deg ) rotateX( 53deg ) rotateZ( 0deg ) translateZ( 120px );
  transform: rotateY( 324deg ) rotateX( 53deg ) rotateZ( 0deg ) translateZ( 120px );
}

.figure-11 {
  -webkit-transform: rotateY( 144deg ) rotateX( -53deg ) rotateZ( 180deg ) translateZ( 120px );
  transform: rotateY( 144deg ) rotateX( -53deg ) rotateZ( 180deg ) translateZ( 120px );
}

.figure-12 {
  -webkit-transform: rotateY( 0deg ) rotateX( -11deg ) rotateZ( 120deg ) translateZ( 120px );
  transform: rotateY( 0deg ) rotateX( -11deg ) rotateZ( 120deg ) translateZ( 120px );
}

.figure-13 {
  -webkit-transform: rotateY( 36deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px );
  transform: rotateY( 36deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px );
}

.figure-14 {
  -webkit-transform: rotateY( 288deg ) rotateX( -53deg ) rotateZ( 60deg ) translateZ( 120px );
  transform: rotateY( 288deg ) rotateX( -53deg ) rotateZ( 60deg ) translateZ( 120px );
}

.figure-15 {
  -webkit-transform: rotateY( 288deg ) rotateX( -11deg ) rotateZ( 120deg ) translateZ( 120px );
  transform: rotateY( 288deg ) rotateX( -11deg ) rotateZ( 120deg ) translateZ( 120px );
}

.figure-16 {
  -webkit-transform: rotateY( 72deg ) rotateX( -53deg ) rotateZ( 60deg ) translateZ( 120px );
  transform: rotateY( 72deg ) rotateX( -53deg ) rotateZ( 60deg ) translateZ( 120px );
}

.figure-17 {
  -webkit-transform: rotateY( 324deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px );
  transform: rotateY( 324deg ) rotateX( 11deg ) rotateZ( 180deg ) translateZ( 120px );
}

.figure-18 {
  -webkit-transform: rotateY( 0deg ) rotateX( -53deg ) rotateZ( 60deg ) translateZ( 120px );
  transform: rotateY( 0deg ) rotateX( -53deg ) rotateZ( 60deg ) translateZ( 120px );
}

.figure-19 {
  -webkit-transform: rotateY( 72deg ) rotateX( -11deg ) rotateZ( 0deg ) translateZ( 120px );
  transform: rotateY( 72deg ) rotateX( -11deg ) rotateZ( 0deg ) translateZ( 120px );
}

.figure-20 {
  -webkit-transform: rotateY( 216deg ) rotateX( -53deg ) rotateZ( 180deg ) translateZ( 120px );
  transform: rotateY( 216deg ) rotateX( -53deg ) rotateZ( 180deg ) translateZ( 120px );
}

#d-20.show-20 {
  -webkit-transform: translateZ( -60px ) rotateY( 50deg ) rotateX( -220deg ) rotateZ( 38deg );
  transform: translateZ( -60px ) rotateY( 50deg ) rotateX( -220deg ) rotateZ( 38deg );
}

#d-20.show-19 {
  -webkit-transform: translateZ( -60px ) rotateY( -72deg ) rotateX( 4deg ) rotateZ( 352deg );
  transform: translateZ( -60px ) rotateY( -72deg ) rotateX( 4deg ) rotateZ( 352deg );
}

#d-20.show-18 {
  -webkit-transform: translateZ( -60px ) rotateY( -50deg ) rotateX( 25deg ) rotateZ( 288deg );
  transform: translateZ( -60px ) rotateY( -50deg ) rotateX( 25deg ) rotateZ( 288deg );
}

#d-20.show-17 {
  -webkit-transform: translateZ( -60px ) rotateY( -37deg ) rotateX( 8deg ) rotateZ( 175deg );
  transform: translateZ( -60px ) rotateY( -37deg ) rotateX( 8deg ) rotateZ( 175deg );
}

#d-20.show-16 {
  -webkit-transform: translateZ( -60px ) rotateY( -254deg ) rotateX( -136deg ) rotateZ( 113deg );
  transform: translateZ( -60px ) rotateY( -254deg ) rotateX( -136deg ) rotateZ( 113deg );
}

#d-20.show-15 {
  -webkit-transform: translateZ( -60px ) rotateY( -238deg ) rotateX( 129deg ) rotateZ( 40deg );
  transform: translateZ( -60px ) rotateY( -238deg ) rotateX( 129deg ) rotateZ( 40deg );
}

#d-20.show-14 {
  -webkit-transform: translateZ( -60px ) rotateY( -296deg ) rotateX( 72deg ) rotateZ( 30deg );
  transform: translateZ( -60px ) rotateY( -296deg ) rotateX( 72deg ) rotateZ( 30deg );
}

#d-20.show-13 {
  -webkit-transform: translateZ( -60px ) rotateY( 35deg ) rotateX( 4deg ) rotateZ( -177deg );
  transform: translateZ( -60px ) rotateY( 35deg ) rotateX( 4deg ) rotateZ( -177deg );
}

#d-20.show-12 {
  transform-style: preserve-3d;
  -webkit-transform: translateZ( -60px ) rotateY( 0deg ) rotateX( 0deg ) rotateZ( 260deg );
  transform: translateZ( -60px ) rotateY( 0deg ) rotateX( 0deg ) rotateZ( 260deg );
}

#d-20.show-11 {
  -webkit-transform: translateZ( -60px ) rotateY( -50deg ) rotateX( -220deg ) rotateZ( -37deg );
}

#d-20.show-10 {
  -webkit-transform: translateZ( -60px ) rotateY( 51deg ) rotateX( -42deg ) rotateZ( -41deg );
  transform: translateZ( -60px ) rotateY( 51deg ) rotateX( -42deg ) rotateZ( -41deg );
}

#d-20.show-9 {
  -webkit-transform: translateZ( -60px ) rotateY( -73deg ) rotateX( -175deg ) rotateZ( 15deg );
  transform: translateZ( -60px ) rotateY( -73deg ) rotateX( -175deg ) rotateZ( 15deg );
}

#d-20.show-8 {
  -webkit-transform: translateZ( -60px ) rotateY( -50deg ) rotateX( -153deg ) rotateZ( 75deg );
}

#d-20.show-7 {
  -webkit-transform: translateZ( -60px ) rotateY( -37deg ) rotateX( 187deg ) rotateZ( 185deg );
  transform: translateZ( -60px ) rotateY( -37deg ) rotateX( 187deg ) rotateZ( 185deg );
}

#d-20.show-6 {
  -webkit-transform: translateZ( -60px ) rotateY( -75deg ) rotateX( 135deg ) rotateZ( 65deg );
}

#d-20.show-5 {
  -webkit-transform: translateZ( -60px ) rotateY( 118deg ) rotateX( -53deg ) rotateZ( -35deg );
  transform: translateZ( -60px ) rotateY( 118deg ) rotateX( -53deg ) rotateZ( -35deg );
}

#d-20.show-4 {
  -webkit-transform: translateZ( -60px ) rotateY( 76deg ) rotateX( 135deg ) rotateZ( -62deg );
}

#d-20.show-3 {
  -webkit-transform: translateZ( -60px ) rotateY( -144deg ) rotateX( -8deg ) rotateZ( -6deg );
  transform: translateZ( -60px ) rotateY( -144deg ) rotateX( -8deg ) rotateZ( -6deg );
}

#d-20.show-2 {
  -webkit-transform: translateZ( -60px ) rotateY( 170deg ) rotateX( 5deg ) rotateZ( -60deg );
  transform: translateZ( -60px ) rotateY( 170deg ) rotateX( 5deg ) rotateZ( -60deg );
}

#d-20.show-1 {
  -webkit-transform: translateZ( -60px ) rotateY( -48deg ) rotateX( -40deg ) rotateZ( 33deg );
  transform: translateZ( -60px ) rotateY( -48deg ) rotateX( -40deg ) rotateZ( 33deg );
}

/* Animations */

.throw-1 {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  animation: throw-1 3s linear;
  -webkit-animation: throw-1 3s linear;
}

.throw-2 {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  animation: throw-2 3s linear;
  -webkit-animation: throw-2 3s linear;
}

.dice-shadow::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: var(--bs-secondary);
  opacity: 20%;
  filter: blur(50px);
  z-index: -1;
  will-change: tranform;
}

.jump-1.dice-shadow::after {
  animation: jump-1 3s linear;
  -webkit-animation: jump-1 3s linear;
}

.jump-2.dice-shadow::after {
  animation: jump-2 3s linear;
  -webkit-animation: jump-2 3s linear;
}

@keyframes throw-1 {
  0% {
    transform: scale(1) rotateY(0) rotateX(0);
    z-index: 2;
  }
  25% {
    transform: scale(1.5) rotateY(360deg) rotateX(200deg);
    z-index: 4;
  }
  50% {
    transform: scale(1) rotateY(500deg) rotateX(360deg);
    z-index: 2;
  }
  75% {
    transform: scale(1.2) rotateY(650deg) rotateX(400deg);
    z-index: 3;
  }
  90% {
    transform: scale(1) rotateY(750deg) rotateX(420deg);
    z-index: 2;
  }
  95% {
    transform: scale(1) rotateY(700deg) rotateX(340deg);
  }
  99 {
    transform: scale(1) rotateY(750deg) rotateX(370deg);
  }
  100% {
    transform: scale(1) rotateY(720deg) rotateX(360deg);
  }
}

@keyframes jump-1 {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(.5);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(.75);
  }
  90%, 100% {
    transform: scale(1);
  }
}

@keyframes throw-2 {
  0% {
    transform: scale(1) rotateY(0) rotateX(0);
    z-index: 2;
  }
  25% {
    transform: scale(1.75) rotateY(180deg) rotateX(500deg);
    z-index: 5;
  }
  45% {
    transform: scale(1) rotateY(360deg) rotateX(720deg);
  }
  65% {
    transform: scale(1.3) rotateY(450deg) rotateX(800deg);
    z-index: 3;
  }
  75% {
    transform: scale(1) rotateY(480deg) rotateX(820deg);
    z-index: 2;
  }
  90% {
    transform: scale(1) rotateY(340deg) rotateX(700deg);
  }
  95% {
    transform: scale(1) rotateY(380deg) rotateX(740deg);
  }
  100% {
    transform: scale(1) rotateY(360deg) rotateX(720deg);
  }
}

@keyframes jump-2 {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(.25);
  }
  45% {
    transform: scale(1);
  }
  65% {
    transform: scale(.75);
  }
  75%, 100% {
    transform: scale(1);
  }
}