/* dice game */
.dice-game li img {
  pointer-events: none;
}
.dice-game li {
  padding: 1rem 0.5rem;
  background: #fff;
  min-width: 60px;
}
main:not(.positions-game) .dice-game li {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dice-game li.selected {
  background: rgba(201, 168, 76, 0.2);
  outline: 2px solid #c9a84c;
}

.dice-game li.confirmed {
  background-color: #12080a;
}

.dice-game-wrapper {
  display: grid;
  justify-content: center;
  align-items: center;
}
.dice-game {
  padding: 1rem
}
.score-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom:0;
  display: none;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.8); /* semi-transparent black */
  place-items: center;
}
/* dice */
.dice {
  position: relative;;
  width: 40px;
  height: 40px;
  transform-style: preserve-3d;
  transform: var(--dice);
}
.dice img {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(0.88) sepia(0.15);
}
.dice.animate {
  transform: var(--dice);
  animation: rotate 3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dice.dice2.animate {
  transform: var(--dice);
  animation: rotate2 3.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.side::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  border: 2px solid #000;
  border-radius: 3px;
}  
.side {
  width: 100%;
  height: 100%;
  background: #8b1a2d;
  border: 1px solid black;
  border-radius:5px;
  position: absolute;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.base {
  width: 100%;
  height: 100%;
  transform: translateY(73px) rotateX(90deg);
    border: 0;
    background: blue;
}
.dice:not(.rolled) > div.side.three,
.dice:not(.rolled) > div.side.two,
.dice:not(.rolled) > div.side.six{
  background: #12080a;
}
.side::before {
  content: "";
  width: 20%;
  height: 20%;
  background: black;
  border-radius: 50%;
  filter: brightness(0) invert(0.88) sepia(0.15);
} 
.two::before {
  background: transparent;
  box-shadow: 
    #000 -10px -10px 0 0, 
    #000 10px 10px 0 0;
}

.three::before {
  box-shadow: 
    #000 -10px 10px 0 0, 
    #000 10px -10px 0 0;
}

.four::before {
  background: transparent;
  box-shadow: 
    #000 -10px 10px 0 0, 
    #000 -10px -10px 0 0,
    #000 10px 10px 0 0, 
    #000 10px -10px 0 0;
}

.five::before {
  box-shadow: 
    #000 -10px -10px 0 0, 
    #000 -10px 10px 0 0,
    #000 10px -10px 0 0, 
    #000 10px 10px 0 0;
}

.six::before {
  background: transparent;
  box-shadow: 
    #000 -10px -10px 0 0, 
    #000 -10px 0 0,
    #000 -10px 10px 0 0, 
    #000 10px -10px 0 0, 
    #000 10px 0 0,
    #000 10px 10px 0 0;
}

.one {
  transform: translateZ(20px);
}
.two {
  transform: translateX(-20px) rotateY(-90deg);
}
.two {
transform: translateX(-20px) rotateY(-90deg);
}
.three {
  transform: translateY(20px) rotateX(90deg);
}

.four {
  transform: translateY(-20px) rotateX(90deg);
}

.five {
  transform: translateX(20px) rotateY(90deg);
}

.six {
  transform: translateZ(-20px);
}
.six span {
  transform: translateX(-50%) rotateY(180deg)!important;
}
.six .custom-text {
  transform: translateX(0) rotateY(180deg)!important;
}
.dice2 .custom-text {
  position: static;
}

.five span {
  transform: rotateZ(270deg)!important;
  right: -20px;
  bottom: auto!important;
  text-align: center;
}
.five .custom-text {
  right: auto!important;
}

.one i,
.four i,
.two i {
  transform: rotateX(180deg);
}

.four span,
.one span,
.two span {
  top: 20px!important;
  bottom: auto!important;
  transform: rotate(180deg) translateX(50%)!important;
}
.three span {
  transform: rotateY(180deg) translateX(50%)!important;
}

.four .custom-text,
.one .custom-text,
.two .custom-text {
  transform: rotate(180deg) translateX(0)!important;
  bottom: auto!important;
  top: auto!important;
}
.three .custom-text {
  transform: rotateY(180deg);
}
.five i,
.five img {
  transform: rotateZ(270deg);
}


@keyframes rotate {
  0%   { transform: rotateY(2160deg) rotateX(720deg)  rotateZ(360deg); }
  80%  { transform: var(--dice) rotateX(12deg)  rotateZ(-5deg); }
  90%  { transform: var(--dice) rotateX(-5deg)  rotateZ(2deg); }
  100% { transform: var(--dice); }
}

@keyframes rotate2 {
  0%   { transform: rotateX(1800deg) rotateY(360deg)  rotateZ(1440deg); }
  78%  { transform: var(--dice) rotateZ(11deg)  rotateX(-6deg); }
  88%  { transform: var(--dice) rotateZ(-4deg)  rotateX(3deg); }
  100% { transform: var(--dice); }
}

@media (min-width: 1300px) {
  main:not(.positions-game) .dice-game li {
    padding: 2rem 1rem;
  }
  .dice {
    position: relative;
    width: 80px;
    height: 80px;
    transform-style: preserve-3d;
   transform: var(--dice);
  }
  .one {
    transform: translateZ(40px);
  }
  .two {
    transform: translateX(-40px) rotateY(-90deg);
  }
  .two {
   transform: translateX(-40px) rotateY(-90deg);
  }
  .three {
    transform: translateY(40px) rotateX(90deg);
  }
  .four {
    transform: translateY(-40px) rotateX(90deg);
  }
  .five {
    transform: translateX(40px) rotateY(90deg);
  }
  .six {
    transform: translateZ(-40px);
  }
  .two::before {
    background: transparent;
    box-shadow: 
      #000 -20px -20px 0 0, 
      #000 20px 20px 0 0;
  }
  
  .three::before {
    box-shadow: 
      #000 -20px 20px 0 0, 
      #000 20px -20px 0 0;
  }
  
  .four::before {
    background: transparent;
    box-shadow: 
      #000 -20px 20px 0 0, 
      #000 -20px -20px 0 0,
      #000 20px 20px 0 0, 
      #000 20px -20px 0 0;
  }
  
  .five::before {
    box-shadow: 
      #000 -20px -20px 0 0, 
      #000 -20px 20px 0 0,
      #000 20px -20px 0 0, 
      #000 20px 20px 0 0;
  }
  
  .six::before {
    background: transparent;
    box-shadow: 
      #000 -20px -20px 0 0, 
      #000 -20px 0 0,
      #000 -20px 20px 0 0, 
      #000 20px -20px 0 0, 
      #000 20px 0 0,
      #000 20px 20px 0 0;
  }
  .dice-game-wrapper {
    min-height: 400px;
  }
}