/**
 * NeoPoly - 3D Dice Stylesheet
 * True CSS 3D Perspective Cubes with dynamic pips and tumble animation
 */

.dice-container-3d {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  perspective: 800px;
  padding: 12px;
}

.dice-cube {
  position: relative;
  width: 54px;
  height: 54px;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.dice-container-3d.is-shaking .dice-cube {
  animation: diceTumble 0.5s linear infinite;
}

@keyframes diceTumble {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  25% { transform: rotateX(90deg) rotateY(180deg) rotateZ(45deg); }
  50% { transform: rotateX(180deg) rotateY(360deg) rotateZ(90deg); }
  75% { transform: rotateX(270deg) rotateY(180deg) rotateZ(135deg); }
  100% { transform: rotateX(360deg) rotateY(0deg) rotateZ(180deg); }
}

.dice-face {
  position: absolute;
  width: 54px;
  height: 54px;
  background: #FFFFFF;
  border: 2px solid #D97706;
  border-radius: 10px;
  box-shadow: inset 0 0 8px rgba(217, 119, 6, 0.12), 0 4px 12px rgba(15, 23, 42, 0.18);
  display: grid;
  padding: 6px;
}

/* 6 Faces Transforms (Half of 54px is 27px) */
.dice-face.face-1 { transform: translateZ(27px); }
.dice-face.face-2 { transform: rotateX(90deg) translateZ(27px); }
.dice-face.face-3 { transform: rotateY(-90deg) translateZ(27px); }
.dice-face.face-4 { transform: rotateY(90deg) translateZ(27px); }
.dice-face.face-5 { transform: rotateX(-90deg) translateZ(27px); }
.dice-face.face-6 { transform: rotateX(180deg) translateZ(27px); }

/* Pips / Titik Dadu */
.pip {
  width: 8.5px;
  height: 8.5px;
  background: #0F172A;
  border-radius: 50%;
  align-self: center;
  justify-self: center;
}

/* Red Pip for 1 */
.dice-face.face-1 .pip {
  background: #E11D48;
  width: 12px;
  height: 12px;
}

/* Face 1 layout */
.dice-face.face-1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Face 2 layout */
.dice-face.face-2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.dice-face.face-2 .pip:nth-child(1) { align-self: start; justify-self: start; }
.dice-face.face-2 .pip:nth-child(2) { align-self: end; justify-self: end; }

/* Face 3 layout */
.dice-face.face-3 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.dice-face.face-3 .pip:nth-child(1) { grid-area: 1 / 1; }
.dice-face.face-3 .pip:nth-child(2) { grid-area: 2 / 2; }
.dice-face.face-3 .pip:nth-child(3) { grid-area: 3 / 3; }

/* Face 4 layout */
.dice-face.face-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* Face 5 layout */
.dice-face.face-5 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.dice-face.face-5 .pip:nth-child(1) { grid-area: 1 / 1; }
.dice-face.face-5 .pip:nth-child(2) { grid-area: 1 / 3; }
.dice-face.face-5 .pip:nth-child(3) { grid-area: 2 / 2; }
.dice-face.face-5 .pip:nth-child(4) { grid-area: 3 / 1; }
.dice-face.face-5 .pip:nth-child(5) { grid-area: 3 / 3; }

/* Face 6 layout */
.dice-face.face-6 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}