/* Reusable 3D die. A real CSS cube textured with the six dice renders, opposite
   faces summing to 7 (5/2 front-back, 3/4 right-left, 1/6 top-bottom). scripts/
   dice.js throws each die in with random physics and lands it on a random face.
   The table is seen from above, so at rest only the top face reads (the side
   faces collapse edge-on) and the die casts the shared prop shadow.

   A die is absolutely positioned inside its section (left/top set inline); the
   roll only animates transform and a motion-blur filter. */

.die {
  --die-size: 42px;
  --die-half: calc(var(--die-size) / 2);
  position: absolute;
  width: var(--die-size);
  height: var(--die-size);
  perspective: 640px;
  z-index: 6;
  pointer-events: none;
}

@media (min-width: 768px) {
  .die { --die-size: 50px; }
}

@media (min-width: 1280px) {
  .die { --die-size: 58px; }
}

/* Landed: cast the same directional shadow as every other prop. */
.die.is-rest {
  filter: var(--prop-shadow);
}

.die-cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* Resting orientation: flat, face 5 toward the overhead viewer (the no-JS /
     reduced-motion default; JS overrides per roll). */
  transform: rotateX(0deg) rotateY(0deg);
}

.die-face {
  position: absolute;
  width: var(--die-size);
  height: var(--die-size);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: calc(var(--die-size) * 0.16);
  /* Inset edge so each face reads as a cube facet under the felt light. */
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 0.18),
    inset 0 calc(var(--die-size) * -0.08) calc(var(--die-size) * 0.12) rgb(0 0 0 / 0.22);
  backface-visibility: hidden;
}

.die-face--1 { background-image: url("../../assets/props/dice/dice-1.webp"); }
.die-face--2 { background-image: url("../../assets/props/dice/dice-2.webp"); }
.die-face--3 { background-image: url("../../assets/props/dice/dice-3.webp"); }
.die-face--4 { background-image: url("../../assets/props/dice/dice-4.webp"); }
.die-face--5 { background-image: url("../../assets/props/dice/dice-5.webp"); }
.die-face--6 { background-image: url("../../assets/props/dice/dice-6.webp"); }

/* Face placement: opposite faces sum to 7. */
.die-face--5 { transform: translateZ(var(--die-half)); }                  /* front */
.die-face--2 { transform: rotateY(180deg) translateZ(var(--die-half)); }  /* back  */
.die-face--3 { transform: rotateY(90deg) translateZ(var(--die-half)); }   /* right */
.die-face--4 { transform: rotateY(-90deg) translateZ(var(--die-half)); }  /* left  */
.die-face--1 { transform: rotateX(90deg) translateZ(var(--die-half)); }   /* top   */
.die-face--6 { transform: rotateX(-90deg) translateZ(var(--die-half)); }  /* bottom*/