/* Dice Fight: the enormous CSS 3D die. */

.die-scene {
  --die: min(52vw, 30vh, 280px);
  display: flex; gap: calc(var(--die) * 0.18); align-items: center; justify-content: center;
  perspective: calc(var(--die) * 4.2);
}
.die-scene.two { --die: min(36vw, 22vh, 190px); }

.cube {
  position: relative;
  width: var(--die); height: var(--die);
  transform-style: preserve-3d;
  transform: rotateX(-24deg) rotateY(32deg);
  will-change: transform;
}
.cube.spinning { transition: none; }

.face {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 25%, #ffffff 0%, var(--cream) 45%, #efd9b0 100%);
  border: calc(var(--die) * 0.025) solid var(--ink);
  border-radius: calc(var(--die) * 0.16);
  box-shadow: inset 0 0 calc(var(--die) * 0.12) rgba(120, 80, 30, 0.35);
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: calc(var(--die) * 0.13);
  backface-visibility: hidden;
}
.face .pip {
  width: 70%; height: 70%; place-self: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a3a4a, var(--ink) 70%);
  box-shadow: inset 0 calc(var(--die) * 0.01) calc(var(--die) * 0.02) rgba(255, 255, 255, 0.25);
}
.face.f1 .pip { background: radial-gradient(circle at 35% 30%, #ff6fb5, var(--magenta) 60%, #a0004f); width: 85%; height: 85%; }

.face.f1 { transform: translateZ(calc(var(--die) / 2)); }
.face.f6 { transform: rotateY(180deg) translateZ(calc(var(--die) / 2)); }
.face.f3 { transform: rotateY(90deg) translateZ(calc(var(--die) / 2)); }
.face.f4 { transform: rotateY(-90deg) translateZ(calc(var(--die) / 2)); }
.face.f2 { transform: rotateX(90deg) translateZ(calc(var(--die) / 2)); }
.face.f5 { transform: rotateX(-90deg) translateZ(calc(var(--die) / 2)); }

/* pip positions on a 3×3 grid */
.p-tl { grid-area: 1 / 1; } .p-tr { grid-area: 1 / 3; }
.p-ml { grid-area: 2 / 1; } .p-mc { grid-area: 2 / 2; } .p-mr { grid-area: 2 / 3; }
.p-bl { grid-area: 3 / 1; } .p-br { grid-area: 3 / 3; }

.die-shadow {
  position: absolute; left: 50%; bottom: 8%;
  width: calc(var(--die) * 0.9); height: calc(var(--die) * 0.16);
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
  pointer-events: none;
}

.die-zone.disabled .cube { filter: saturate(0.4) brightness(0.75); }
.die-zone.busted .cube { filter: grayscale(1) brightness(0.55); }