/* Six-sided CSS geometry, with a camera and flight rig independent of the cube. */
.dice-row { --die-size: 79px; --die-half: 39.5px; --face-padding: 14px; }
.dice-stage { padding-top: 60px; }
.die {
  width: var(--die-size); height: var(--die-size); padding: 0;
  display: block; border: 0; background: none; box-shadow: none;
  perspective: 700px; overflow: visible; isolation: auto;
}
.die.gold-die { background: none; border: 0; }
.die.held { box-shadow: 0 0 0 3px var(--green), 0 0 20px #b3c89a25; }
.die-camera, .die-flight, .die-cube {
  position: absolute; inset: 0; display: block; transform-style: preserve-3d;
}
.die-cube { transform: rotateX(0deg) rotateY(0deg); }
/* Recess the cube so its front face rests exactly in the original button plane. */
.die-flight { top: 0; }
.die-camera { translate: 0 0 calc(-1 * var(--die-half)); }
.cube-face {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  padding: var(--face-padding); gap: 4px; border: 1px solid #eee0c0;
  /* Square geometry closes the cube; inset shading supplies the bevel visually. */
  border-radius: 0; backface-visibility: hidden;
  background: linear-gradient(135deg, #f3ecda, #d8ccb0);
  box-shadow: inset 0 0 0 2px #fff2, inset 0 0 10px #8e7f5430;
}
.face-0 { transform: translateZ(var(--die-half)); }
.face-1 { transform: rotateY(90deg) translateZ(var(--die-half)); background: linear-gradient(135deg,#d9cdb2,#b9ac8f); }
.face-2 { transform: rotateY(180deg) translateZ(var(--die-half)); }
.face-3 { transform: rotateY(-90deg) translateZ(var(--die-half)); background: linear-gradient(135deg,#e7ddc7,#c8b99a); }
.face-4 { transform: rotateX(90deg) translateZ(var(--die-half)); background: linear-gradient(135deg,#fff6df,#dbceb2); }
.face-5 { transform: rotateX(-90deg) translateZ(var(--die-half)); }
.gold-die .cube-face { background: linear-gradient(135deg,#f7d98a,#b98d3c); border-color: #efcd7b; }
.gold-die .face-1, .gold-die .face-5 { background: linear-gradient(135deg,#d7b560,#9f752e); }
.die-shadow {
  position: absolute; inset: 4px; border-radius: 12px;
  background: #000; filter: blur(7px); opacity: .35; transform: translateY(5px);
  pointer-events: none;
}
.die-upgrade { pointer-events: none; }
.rolling .die:not(.held) + .die-label { opacity: .5; }
.rolling .die:not(.held) .die-camera,
.rolling .die:not(.held) .die-flight,
.rolling .die:not(.held) .die-cube { will-change: transform; }
.landed + #dice-hint { color: #b3c89a; }
.dice-row.landed .die:not(.held) .cube-face { animation: result-glow .5s ease-out; }
@keyframes result-glow {
  from { box-shadow: inset 0 0 12px #fff8, 0 0 18px #edbe6950; }
  to { box-shadow: inset 0 0 0 2px #fff2, inset 0 0 10px #8e7f5430; }
}
@media(max-width:1050px) {
  .dice-row { --die-size:64px; --die-half:32px; --face-padding:11px; }
}
@media(max-width:760px) {
  .dice-row { --die-size:56px; --die-half:28px; --face-padding:9px; }
  .cube-face { gap:3px; }
  .dice-stage { padding-top:55px; }
}
@media(prefers-reduced-motion:reduce) {
  .dice-row.landed .cube-face { animation:none; }
  .die { transition:none; }
}