/* Shared six-face geometry and square pips for MAD dice. */
.mad-hero-die__face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  transform-style: preserve-3d;
  transform-origin: center;
  background: var(--mad-die-edge);
  backface-visibility: hidden;
}

.mad-hero-die__face::before,
.mad-hero-die__face::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 0;
}

.mad-hero-die__face::before {
  background: var(--mad-face-color, var(--mad-die-face));
}

.mad-hero-die__face::after {
  background-repeat: no-repeat;
}

.mad-hero-die__face.is-one   { transform: translateY(var(--mad-die-depth)) rotateX(-90deg); }
.mad-hero-die__face.is-two   { transform: translateX(var(--mad-die-depth)) rotateY(90deg); }
.mad-hero-die__face.is-three { transform: translateZ(calc(var(--mad-die-depth) * -1)) rotateY(180deg); }
.mad-hero-die__face.is-four  { transform: translateZ(var(--mad-die-depth)); }
.mad-hero-die__face.is-five  { transform: translateX(calc(var(--mad-die-depth) * -1)) rotateY(-90deg); }
.mad-hero-die__face.is-six   { transform: translateY(calc(var(--mad-die-depth) * -1)) rotateX(90deg); }

/* Each die is monochrome and maps directly to one exact MAD brand color. */

.mad-hero-die__face.is-one::after {
  background-image: linear-gradient(var(--mad-die-pip) 0 0);
  background-position: 50% 50%;
  background-size: 20% 20%;
}

.mad-hero-die__face.is-two::after {
  background-image:
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0);
  background-position: 24% 24%, 76% 76%;
  background-size: 20% 20%;
}

.mad-hero-die__face.is-three::after {
  background-image:
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0);
  background-position: 24% 24%, 50% 50%, 76% 76%;
  background-size: 20% 20%;
}

.mad-hero-die__face.is-four::after {
  background-image:
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0);
  background-position: 24% 24%, 76% 24%, 24% 76%, 76% 76%;
  background-size: 20% 20%;
}

.mad-hero-die__face.is-five::after {
  background-image:
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0);
  background-position: 24% 24%, 76% 24%, 50% 50%, 24% 76%, 76% 76%;
  background-size: 20% 20%;
}

.mad-hero-die__face.is-six::after {
  background-image:
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0);
  background-position: 24% 22%, 76% 22%, 24% 50%, 76% 50%, 24% 78%, 76% 78%;
  background-size: 18% 18%;
}