/* Each frame is a projection of the same 3D mesh, with its pips attached. */
.die.sprite-ready,
.table.bluff .die.sprite-ready,
.table.bluff .reveal-dice .die.sprite-ready {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
  transform: none;
  overflow: visible;
}
.die.sprite-ready > .pip { display: none; }
.table:not(.bluff) .dice-stage > .die.sprite-ready:nth-child(1) { transform: translateY(5px) rotate(-6deg); }
.table:not(.bluff) .dice-stage > .die.sprite-ready:nth-child(2) { transform: translateY(-4px) rotate(5deg); }
.table:not(.bluff) .dice-stage > .die.sprite-ready:nth-child(3) { transform: translateY(3px) rotate(-3deg); }
.table:not(.bluff) .dice-stage > .die.sprite-ready:nth-child(4) { transform: translateY(-5px) rotate(6deg); }
.table:not(.bluff) .dice-stage > .die.sprite-ready:nth-child(5) { transform: translateY(4px) rotate(-5deg); }
.table:not(.bluff) .dice-stage > .die.sprite-ready:nth-child(6) { transform: translateY(-2px) rotate(4deg); }
.sprite-frame {
  position: absolute;
  inset: -12%;
  background-image: var(--dice-atlas);
  background-size: 800% 400%;
  background-position: var(--sprite-x, 100%) var(--sprite-y, 100%);
  background-repeat: no-repeat;
  pointer-events: none;
  transform: translate3d(var(--toss-x, 0px), var(--toss-y, 0px), 0) scale(var(--toss-scale, 1));
}
.in-flight > .sprite-frame { will-change: transform; }
.table.rolling .cup-zone { animation: sprite-cup var(--roll-time, 1800ms) ease-in-out both; }
.table.rolling .dice-stage { animation: sprite-release var(--roll-time, 1800ms) linear both; }
.table.rolling .die.sprite-ready,
.table.landed .die.sprite-ready { animation: none; }
.table.rolling .motion-tick { animation: sprite-ticks var(--roll-time, 1800ms) both; }
.die.sprite-ready.matches { border-radius: 12px; }
@keyframes sprite-cup {
  0% { transform: translate(-50%,0) rotate(-8deg); }
  8% { transform: translate(-50%,36px) rotate(0deg) scale(.98); }
  14% { transform: translate(-61%,25px) rotate(-17deg); }
  20% { transform: translate(-39%,25px) rotate(16deg); }
  26% { transform: translate(-58%,23px) rotate(-13deg); }
  32% { transform: translate(-43%,20px) rotate(11deg); }
  41% { transform: translate(-50%,-10px) rotate(-8deg); }
  48%,100% { transform: translate(-50%,0) rotate(-8deg); }
}
@keyframes sprite-release {
  0%,17% { opacity: 0; }
  22%,100% { opacity: 1; }
}
@keyframes sprite-ticks {
  0%,7%,38%,100% { opacity: 0; }
  12%,30% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .table.rolling .cup-zone, .table.rolling .dice-stage,
  .table.rolling .motion-tick { animation: none; }
}