:root {
  --bg: #001C25;
  --accent: #43D9FB;
  --glow: 67, 217, 251;
  --text-main:  #D9F8FF;
  --text-muted: #6EAAC8;
  --ff: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --dice-size: 90px;
  --dot-size: 15px;
}

.roll-the-dice {
  width: 100%; 
  height: 100%; 
  background-color: #0000007d; 
  overflow: hidden; 
  position: fixed; 
  z-index: 100000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-container {
  position: relative;
  display: inline-block;
  width: var(--dice-size);
  height: var(--dice-size);
  margin: 50px;
  perspective: 900px;
}

.dice {
  position: relative;
  width: calc(var(--dice-size) - 12px);
  height: calc(var(--dice-size) - 12px);
  transform-style: preserve-3d;
  transition: transform 1s;
  transform-origin: center center;
}

.one-dot,
.dot {
  position: absolute;
  width: var(--dot-size);
  height: var(--dot-size);
  margin: -6px 0 0 -6px;

  border-radius: 9999px;

  /* градиент точки */
  background: linear-gradient(180deg, #072636 0%, #135166 100%);
  box-shadow: 0 1px 5px #15617C inset;
  outline: 1px #F8FDFF solid;
}

/* маленький «блик» снизу */
.one-dot::after,
.dot::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 7px;
  height: 7px;
  border-radius: inherit;
  background: #0E5A76;
  opacity: 0.5;
  filter: blur(0.5px);
}

.dice-one {
  position: relative;
  left: 0px; 
}

.dice-two {
  position: relative;
  left: 0px;
}

.side {
  position: absolute;
  width: var(--dice-size);
  height: var(--dice-size);

  background: linear-gradient(180deg, #EFFCFF 0%, #C4E3EE 100%);
  border-radius: 10px;

  box-shadow: 0 0 20px #FFFFFF inset;

  border: none;
}


.side:nth-child(1) { transform: translateZ(calc(var(--dice-size) / 2 - 6px)); }
.side:nth-child(6) { transform: rotateY(90deg)  translateZ(calc(var(--dice-size) / 2 - 6px)); }
.side:nth-child(3) { transform: rotateY(-90deg) translateZ(calc(var(--dice-size) / 2 - 6px)); }
.side:nth-child(4) { transform: rotateX(90deg)  translateZ(calc(var(--dice-size) / 2 - 6px)); }
.side:nth-child(5) { transform: rotateX(-90deg) translateZ(calc(var(--dice-size) / 2 - 6px)); }
.side:nth-child(2) { transform: rotateY(-180deg) translateZ(calc(var(--dice-size) / 2 - 6px)); }


.show-1 {
  transform: rotateX(720deg) rotateZ(-720deg); 
}

.show-2 {
  transform: rotateX(-900deg) rotateZ(1080deg); 
}  

.show-3 {
  transform: rotateY(810deg) rotateZ(720deg); 
}

.show-4 {
  transform: rotateX(-810deg) rotateZ(-1080deg); 
}

.show-5 {
    transform: rotateX(450deg) rotateZ(-720deg); 
}

.show-6 {
  transform: rotateY(-450deg) rotateZ(-1440deg); 
}

.two-1, .three-1, .four-1, .five-1, .six-1 {
  top: 20%;
  left: 20%;
}

.four-3, .five-3, .six-4 {
  top: 20%;
  left: 80%; 
}

.one-1, .three-2, .five-5 {
  top: 50%;
  left: 50%; 
}

.four-2, .five-2, .six-3 {
  top: 80%;
  left: 20%; 
}

.two-2, .three-3, .four-4, .five-4, .six-6 {
    top: 80%;
    left: 80%; 
}

.six-2 {
    top: 50%;
    left: 20%; 
}

.six-5 {
    top: 50%;
    left: 80%; 
}