/* ===== 3D DICE ===== */
/* Die container, faces, pips, transforms, animations */

/* 3D Dice Container */
.die-container {
  width: clamp(46px, 7vh, 75px);
  height: clamp(46px, 7vh, 75px);
  perspective: 300px;
  cursor: pointer;
  position: relative;
}

.die-container::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 10%;
  width: 80%;
  height: 10px;
  background: rgba(0,0,0,0.15);
  border-radius: 50%;
  filter: blur(4px);
  transition: all 0.3s;
}

.die-container.held::after {
  bottom: -4px;
  opacity: 0.8;
}

.die-container.held .die-face {
  box-shadow: 0 0 0 3px var(--tile-orange), 0 0 15px var(--tile-orange), inset 0 0 8px rgba(0,0,0,0.1);
}

.die {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease-out;
}

.die-container:hover .die:not(.rolling) {
  transform: rotateX(-10deg) rotateY(10deg);
}

.die-container.held .die {
  transform: rotateX(0deg) rotateY(0deg);
}

.die-face {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f5 100%);
  box-shadow: inset 0 0 8px rgba(0,0,0,0.1);
  backface-visibility: hidden;
}

/* Position each face of the cube */
.die-face.front  { transform: rotateY(0deg) translateZ(calc(clamp(46px, 7vh, 75px) / 2)); }
.die-face.back   { transform: rotateY(180deg) translateZ(calc(clamp(46px, 7vh, 75px) / 2)); }
.die-face.right  { transform: rotateY(90deg) translateZ(calc(clamp(46px, 7vh, 75px) / 2)); }
.die-face.left   { transform: rotateY(-90deg) translateZ(calc(clamp(46px, 7vh, 75px) / 2)); }
.die-face.top    { transform: rotateX(90deg) translateZ(calc(clamp(46px, 7vh, 75px) / 2)); }
.die-face.bottom { transform: rotateX(-90deg) translateZ(calc(clamp(46px, 7vh, 75px) / 2)); }

.die-face .pips {
  position: absolute;
  inset: 18%;
}

.die-face .pip {
  position: absolute;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: var(--pip-color);
}

/* ===== TILE DICE (mini pips) ===== */
.tile .pips {
  position: absolute;
  inset: 18%;
}

.tile .pip {
  position: absolute;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background: #fff;
  opacity: 0.95;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Pip positions */
.pip.tl { left: 0; top: 0; }
.pip.tr { right: 0; top: 0; }
.pip.ml { left: 0; top: 50%; transform: translateY(-50%); }
.pip.mr { right: 0; top: 50%; transform: translateY(-50%); }
.pip.bl { left: 0; bottom: 0; }
.pip.br { right: 0; bottom: 0; }
.pip.c { left: 50%; top: 50%; transform: translate(-50%, -50%); }