/* ==========================================================================
   3D dealer dice (js/dice.js)
   Matched to the live game's dice: large, matte-white, rounded cubes with black
   pips (red on the single 1), tumbling in and settling on the rolled face.
   ========================================================================== */

.dice-row {
  display: flex;
  gap: 14px;
  padding: 6px 2px 10px;
}

/* Perspective lives HERE, on the cube's direct parent, so .die-wrap does not
   need preserve-3d and is therefore free to animate opacity (see below). */
.die-wrap {
  position: relative;
  width: 74px;
  height: 74px;
  display: block;
  perspective: 700px;
  perspective-origin: 50% 42%;
  animation: die-drop 1150ms cubic-bezier(.2, .7, .3, 1) var(--delay, 0ms) both;
}

/* Fade + fall are on the WRAPPER. Animating opacity on the cube itself forces
   the browser to flatten transform-style: preserve-3d — the faces collapse
   coplanar and you see a paper-thin sliver instead of a cube. Keep .die's
   animation to rotation only. */
@keyframes die-drop {
  0%   { opacity: 0; transform: translate3d(0, -70px, 0); }
  12%  { opacity: 1; }
  82%  { transform: translate3d(0, 5px, 0); }
  100% { opacity: 1; transform: none; }
}

.die {
  /* Must be block: it is a <span>, and an inline box ignores width/height. */
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: die-roll 1150ms cubic-bezier(.2, .7, .3, 1) var(--delay, 0ms) both;
}

@keyframes die-roll {
  0% {
    transform: rotateX(calc(var(--land-x) + var(--spin-x)))
               rotateY(calc(var(--land-y) + var(--spin-y)));
  }
  /* Slight overshoot so it lands with weight instead of easing to a stop. */
  82% {
    transform: rotateX(calc(var(--land-x) + var(--tilt-x) - 10deg))
               rotateY(calc(var(--land-y) + var(--tilt-y) + 8deg));
  }
  100% {
    transform: rotateX(calc(var(--land-x) + var(--tilt-x)))
               rotateY(calc(var(--land-y) + var(--tilt-y)));
  }
}

.die-face {
  position: absolute;
  /* Exact size. Oversizing to hide corner seams made the faces protrude past
     the silhouette as little tabs, which looked worse than the seams did — a
     small radius closes them well enough at this scale. */
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
  padding: 10px;
  border-radius: 6px;
  /* --shade darkens faces turned away from the light, which is most of what
     sells these as solid objects rather than printed squares. */
  background:
    linear-gradient(150deg,
      rgba(0, 0, 0, var(--shade, 0)) 0%,
      rgba(0, 0, 0, var(--shade, 0)) 100%),
    linear-gradient(150deg, #ffffff 0%, #fafafb 52%, #e9e9ee 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06),
              inset 0 -6px 12px rgba(0, 0, 0, .08);
  backface-visibility: hidden;
}

.die-top    { --shade: .02; }
.die-front  { --shade: 0; }
.die-right  { --shade: .14; }
.die-left   { --shade: .14; }
.die-bottom { --shade: .22; }
.die-back   { --shade: .18; }

/* 37px = half the 74px cube. */
.die-front  { transform: translateZ(37px); }
.die-back   { transform: rotateY(180deg) translateZ(37px); }
.die-right  { transform: rotateY(90deg) translateZ(37px); }
.die-left   { transform: rotateY(-90deg) translateZ(37px); }
.die-top    { transform: rotateX(90deg) translateZ(37px); }
.die-bottom { transform: rotateX(-90deg) translateZ(37px); }

.die-face i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  /* Empty grid cells still render — they just carry no pip background. */
  background: none;
}
.die-face i.pip {
  background: radial-gradient(circle at 36% 32%, #4a4a4f, #17171a 70%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .25);
}
.die-face i.pip.is-red {
  background: radial-gradient(circle at 36% 32%, #ef5350, #b3201c 70%);
}

/* Soft contact shadow so the dice sit on the surface rather than float. */
.die-wrap::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 56px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .45), transparent 70%);
  animation: die-shadow 1150ms cubic-bezier(.2, .7, .3, 1) var(--delay, 0ms) both;
}

@keyframes die-shadow {
  0%   { opacity: 0; transform: translateX(-50%) scale(.4); }
  82%  { opacity: .9; transform: translateX(-50%) scale(1.08); }
  100% { opacity: .7; transform: translateX(-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .die-wrap { animation: none; opacity: 1; }
  .die {
    animation: none;
    transform: rotateX(calc(var(--land-x) + var(--tilt-x)))
               rotateY(calc(var(--land-y) + var(--tilt-y)));
  }
  .die-wrap::after { animation: none; opacity: .6; }
}