/* ── HERO DICE — two tumbling wireframe dice (isometric projection) ────── */

.hd2-scene {
  position: absolute;
  inset: 0;
  /* No perspective. Isometric/orthographic projection — parallel edges stay
     parallel through every rotation. Depth hierarchy comes from size
     (.one bigger = foreground, .two smaller = background), not foreshortening. */
}

.hd2-dice {
  position: absolute;
  width: 130px;
  height: 130px;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%);
  /* No per-die perspective either. */
}

.hd2-dice.one {
  margin-left: -72px;
  margin-top: 26px;
  animation: hd2-tumble-1 14s linear infinite;
}

.hd2-dice.two {
  margin-left: 48px;
  margin-top: -36px;
  width: 106px;
  height: 106px;
  animation: hd2-tumble-2 11s linear infinite;
}

@keyframes hd2-tumble-1 {
  0%   { transform: translate(-50%, -50%) rotateX(0deg)   rotateY(0deg)   rotateZ(0deg); }
  100% { transform: translate(-50%, -50%) rotateX(360deg) rotateY(720deg) rotateZ(360deg); }
}

@keyframes hd2-tumble-2 {
  0%   { transform: translate(-50%, -50%) rotateX(0deg)    rotateY(0deg)    rotateZ(0deg); }
  100% { transform: translate(-50%, -50%) rotateX(-720deg) rotateY(-360deg) rotateZ(-360deg); }
}

.hd2-face {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(193, 62, 45, 0.1);
  border: 1.5px solid #C13E2D;
  box-shadow:
    inset 0 0 22px rgba(193, 62, 45, 0.4),
    0 0 16px rgba(193, 62, 45, 0.5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 14%;
  gap: 6%;
}

.hd2-dice.two .hd2-face { padding: 12%; }

.hd2-pip {
  background: #F2EFE6;
  border-radius: 50%;
  box-shadow:
    0 0 5px rgba(242, 239, 230, 0.95),
    0 0 12px rgba(193, 62, 45, 0.7);
  align-self: center;
  justify-self: center;
  width: 70%;
  height: 70%;
}

.f-front  { transform: translateZ(65px);  }
.f-back   { transform: translateZ(-65px) rotateY(180deg); }
.f-right  { transform: translateX(65px)  rotateY(90deg);  }
.f-left   { transform: translateX(-65px) rotateY(-90deg); }
.f-top    { transform: translateY(-65px) rotateX(90deg);  }
.f-bottom { transform: translateY(65px)  rotateX(-90deg); }

.hd2-dice.two .f-front  { transform: translateZ(53px);  }
.hd2-dice.two .f-back   { transform: translateZ(-53px) rotateY(180deg); }
.hd2-dice.two .f-right  { transform: translateX(53px)  rotateY(90deg);  }
.hd2-dice.two .f-left   { transform: translateX(-53px) rotateY(-90deg); }
.hd2-dice.two .f-top    { transform: translateY(-53px) rotateX(90deg);  }
.hd2-dice.two .f-bottom { transform: translateY(53px)  rotateX(-90deg); }

.p11 { grid-column: 2; grid-row: 2; }
.p21 { grid-column: 1; grid-row: 1; }
.p22 { grid-column: 3; grid-row: 3; }
.p31 { grid-column: 1; grid-row: 1; }
.p32 { grid-column: 2; grid-row: 2; }
.p33 { grid-column: 3; grid-row: 3; }
.p41 { grid-column: 1; grid-row: 1; }
.p42 { grid-column: 3; grid-row: 1; }
.p43 { grid-column: 1; grid-row: 3; }
.p44 { grid-column: 3; grid-row: 3; }
.p51 { grid-column: 1; grid-row: 1; }
.p52 { grid-column: 3; grid-row: 1; }
.p53 { grid-column: 2; grid-row: 2; }
.p54 { grid-column: 1; grid-row: 3; }
.p55 { grid-column: 3; grid-row: 3; }
.p61 { grid-column: 1; grid-row: 1; }
.p62 { grid-column: 3; grid-row: 1; }
.p63 { grid-column: 1; grid-row: 2; }
.p64 { grid-column: 3; grid-row: 2; }
.p65 { grid-column: 1; grid-row: 3; }
.p66 { grid-column: 3; grid-row: 3; }

/* Hero vignette: wider clear center, softer edge (vs fear cards' 30%/0.75) */
.hd2-stage .crt-vignette {
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.6) 100%);
}