.die-wrap {
  position: absolute;
  left: 50%;
  top: 22%;
  width: var(--face-w);
  height: var(--face-h);
  margin-left: calc(var(--face-w) / -2);
  transform-style: preserve-3d;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  will-change: transform;
}

.die-wrap.is-visible {
  opacity: 1;
  visibility: visible;
}

.die {
  position: relative;
  width: var(--face-w);
  height: var(--face-h);
  transform-style: preserve-3d;
  transform: rotateX(-8deg) rotateY(18deg);
}

.die-face {
  position: absolute;
  width: var(--face-w);
  height: var(--face-h);
  left: 0;
  top: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 38%),
    linear-gradient(180deg, #fffef8 0%, #f4eee2 55%, #d9cbb6 100%);
  border: 1px solid rgba(160, 120, 70, 0.35);
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 16px rgba(80, 50, 20, 0.12), 0 0 8px rgba(0, 0, 0, 0.15);
}

.die-face:nth-child(1) {
  transform: rotateY(0deg) translateZ(var(--die-radius));
}
.die-face:nth-child(2) {
  transform: rotateY(60deg) translateZ(var(--die-radius));
}
.die-face:nth-child(3) {
  transform: rotateY(120deg) translateZ(var(--die-radius));
}
.die-face:nth-child(4) {
  transform: rotateY(180deg) translateZ(var(--die-radius));
}
.die-face:nth-child(5) {
  transform: rotateY(240deg) translateZ(var(--die-radius));
}
.die-face:nth-child(6) {
  transform: rotateY(300deg) translateZ(var(--die-radius));
}

.die-cap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--die-radius) * 2);
  height: calc(var(--die-radius) * 2);
  margin: calc(var(--die-radius) * -1);
  background: #f3eee6;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

.die-cap.top {
  transform: rotateX(90deg) translateZ(calc(var(--face-h) / 2));
  background: radial-gradient(circle, #fff 20%, #eee8dc 80%);
}

.die-cap.bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--face-h) / 2));
  background: #d9d0c2;
}

.pips {
  width: 78%;
  height: 82%;
  display: grid;
  gap: 4px;
}

.pip {
  width: 22%;
  max-width: 16px;
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  background: var(--pip-black);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.25), 0 1px 1px rgba(0, 0, 0, 0.35);
  justify-self: center;
  align-self: center;
}

.pip.red {
  background: radial-gradient(circle at 35% 30%, #ff6a60, var(--pip-red) 55%, #7a0a0c);
}

.pip.black {
  background: radial-gradient(circle at 35% 30%, #555, var(--pip-black) 60%);
}

.pips.n1 {
  grid-template: 1fr / 1fr;
}
.pips.n1 .pip {
  width: 34%;
  max-width: 26px;
}

.pips.n2 {
  grid-template: 1fr 1fr / 1fr;
}
.pips.n3 {
  grid-template: 1fr 1fr 1fr / 1fr;
}
.pips.n4 {
  grid-template: 1fr 1fr / 1fr 1fr;
}
.pips.n5 {
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
}
.pips.n5 .pip:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}
.pips.n5 .pip:nth-child(2) {
  grid-column: 3;
  grid-row: 1;
}
.pips.n5 .pip:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}
.pips.n5 .pip:nth-child(4) {
  grid-column: 1;
  grid-row: 3;
}
.pips.n5 .pip:nth-child(5) {
  grid-column: 3;
  grid-row: 3;
}

.pips.n6 {
  grid-template: 1fr 1fr 1fr / 1fr 1fr;
}

.tile-pips {
  width: 100%;
  height: 100%;
  max-width: 48px;
  max-height: 48px;
  aspect-ratio: 1;
  display: grid;
  gap: 3px;
}

.tile-pips .pip {
  width: 24%;
  max-width: 11px;
  height: auto;
}

.tile-pips.n1 .pip {
  width: 36%;
  max-width: 16px;
  height: auto;
}

.tile-pips.n1 {
  grid-template: 1fr / 1fr;
  place-items: center;
}
.tile-pips.n2 {
  grid-template: 1fr 1fr / 1fr;
}
.tile-pips.n3 {
  grid-template: 1fr 1fr 1fr / 1fr;
}
.tile-pips.n4 {
  grid-template: 1fr 1fr / 1fr 1fr;
}
.tile-pips.n5 {
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
}
.tile-pips.n5 .pip:nth-child(1) {
  grid-area: 1 / 1;
}
.tile-pips.n5 .pip:nth-child(2) {
  grid-area: 1 / 3;
}
.tile-pips.n5 .pip:nth-child(3) {
  grid-area: 2 / 2;
}
.tile-pips.n5 .pip:nth-child(4) {
  grid-area: 3 / 1;
}
.tile-pips.n5 .pip:nth-child(5) {
  grid-area: 3 / 3;
}
.tile-pips.n6 {
  grid-template: 1fr 1fr 1fr / 1fr 1fr;
}