/* Candy dice: the supplied renders (cut by tools/cut_dice.py) plus SVG power-ups, in assets/dice/. */
.die { padding: 2px; }
.die.static { position: relative; width: 100%; height: 100%; padding: 0; }

.face {
  width: 100%;
  height: 100%;
  background: center / contain no-repeat;
  transition: transform 0.2s ease;
}

.die[data-v="1"] .face { background-image: url("dice/1.webp"); }
.die[data-v="2"] .face { background-image: url("dice/2.webp"); }
.die[data-v="3"] .face { background-image: url("dice/3.webp"); }
.die[data-v="4"] .face { background-image: url("dice/4.webp"); }
.die[data-v="5"] .face { background-image: url("dice/5.webp"); }
.die[data-v="6"] .face { background-image: url("dice/6.webp"); }

/* Power-ups in the same style. */
.die[data-v="bomb"] .face { background-image: url("dice/bomb.svg"); }
.die[data-v="star"] .face { background-image: url("dice/star.svg"); }

/* Themed dice: the same glossy die with pips, in the theme's colours. */
.die.themed { container-type: size; }
.die.themed .face {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 15%;
  border-radius: 28%;
  background:
    radial-gradient(ellipse 30% 14% at 30% 13%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle at 45% 30%, var(--t1), var(--t2) 58%, var(--t3));
  box-shadow: inset 0 -7cqh 0 rgba(0, 0, 0, 0.2), inset 0 2cqh 0 rgba(255, 255, 255, 0.35);
}
.die.themed .face span { align-self: center; justify-self: center; width: 70%; height: 70%; border-radius: 50%; }
.die.themed .face span.on { background: var(--pip); box-shadow: inset 0 1.4cqw 0 rgba(0, 0, 0, 0.18); }