/* Premium Apong die shell. Geometry and animation remain owned by die.css/js. */

.device.is-playing {
  --face-w: clamp(48px, 7.4vmin, 78px);
  --face-h: calc(var(--face-w) * 1.58);
  --die-pip-size: clamp(4px, calc(var(--face-w) * 0.14), 8px);
}

.device.is-playing .apong-stage {
  /* Resolve the prism radius after each breakpoint chooses its final face width. */
  --die-radius: calc(var(--face-w) / 1.154700538);
}

.device.is-playing .die-wrap {
  transform-style: preserve-3d;
  perspective-origin: 50% 44%;
}

.device.is-playing .die-spindle {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -30%;
  width: clamp(6px, calc(var(--face-w) * 0.11), 9px);
  height: 160%;
  transform: translateX(-50%);
  border: 1px solid rgba(87, 10, 12, 0.72);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(72, 5, 9, 0.95), #be3030 33%, #f06c58 51%, #a61820 70%, #5d070d 100%);
  box-shadow:
    inset 1px 0 1px rgba(255, 181, 130, 0.5),
    inset -1px 0 2px rgba(45, 0, 5, 0.65),
    0 3px 5px rgba(36, 3, 3, 0.3);
  pointer-events: none;
}

.device.is-playing .die-collar {
  position: absolute;
  z-index: 2;
  left: 50%;
  width: clamp(16px, calc(var(--face-w) * 0.31), 25px);
  height: clamp(5px, calc(var(--face-w) * 0.08), 7px);
  transform: translateX(-50%);
  border: 1px solid rgba(113, 67, 13, 0.78);
  border-radius: 50%;
  background: linear-gradient(180deg, #fff0a0 0%, #d59b25 45%, #7c4209 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 195, 0.8),
    0 2px 3px rgba(44, 17, 2, 0.45);
  pointer-events: none;
}

.device.is-playing .die-collar-top {
  top: -3px;
}

.device.is-playing .die-collar-bottom {
  bottom: -3px;
}

.device.is-playing .die {
  z-index: 1;
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
}

.device.is-playing .die-face {
  overflow: hidden;
  border: 1px solid rgba(118, 91, 56, 0.46);
  border-radius: clamp(2px, calc(var(--face-w) * 0.065), 4px);
  background:
    radial-gradient(ellipse at 42% 13%, rgba(255, 255, 255, 0.96), transparent 32%),
    linear-gradient(90deg, rgba(101, 87, 68, 0.28) 0%, rgba(255, 255, 255, 0.34) 10%, transparent 26%, transparent 71%, rgba(85, 71, 55, 0.3) 100%),
    linear-gradient(180deg, #fffefb 0%, #faf6ec 30%, #e8e0d3 76%, #bdb2a2 100%);
  box-shadow:
    inset 7px 0 12px -9px rgba(55, 43, 31, 0.72),
    inset -7px 0 12px -9px rgba(48, 36, 26, 0.82),
    inset 0 7px 9px -9px rgba(255, 255, 255, 1),
    inset 0 -10px 13px -9px rgba(67, 49, 31, 0.64),
    0 1px 2px rgba(41, 25, 10, 0.32);
}

.device.is-playing .die-face::before,
.device.is-playing .die-face::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  width: 100%;
  height: 5%;
  pointer-events: none;
}

.device.is-playing .die-face::before {
  top: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(199, 185, 165, 0.22));
}

.device.is-playing .die-face::after {
  bottom: 0;
  background: linear-gradient(180deg, rgba(170, 157, 139, 0.12), rgba(83, 65, 44, 0.42));
}

.device.is-playing .die-face .pips {
  position: relative;
  z-index: 1;
  width: 68%;
  height: 70%;
  gap: 0;
  justify-items: center;
  align-items: center;
}

.device.is-playing .die-face .pip {
  width: var(--die-pip-size);
  height: var(--die-pip-size);
  max-width: none;
  transform: translateZ(1.25px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  border: 1px solid rgba(0, 0, 0, 0.44);
  background: radial-gradient(circle at 32% 25%, #696969 0%, #1c1c1c 39%, #050505 72%, #000 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.34),
    inset 0 -1px 2px rgba(0, 0, 0, 0.75),
    0 1px 1px rgba(255, 255, 255, 0.6),
    0 2px 3px rgba(0, 0, 0, 0.34);
}

.device.is-playing .die-face .pips.n1,
.device.is-playing .die-face .pips.n2,
.device.is-playing .die-face .pips.n3 {
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

.device.is-playing .die-face .pips.n1 .pip {
  grid-area: 2 / 2;
  width: var(--die-pip-size);
  max-width: none;
}

.device.is-playing .die-face .pips.n2 .pip:nth-child(1) {
  grid-area: 1 / 1;
}

.device.is-playing .die-face .pips.n2 .pip:nth-child(2) {
  grid-area: 3 / 3;
}

.device.is-playing .die-face .pips.n3 .pip:nth-child(1) {
  grid-area: 1 / 1;
}

.device.is-playing .die-face .pips.n3 .pip:nth-child(2) {
  grid-area: 2 / 2;
}

.device.is-playing .die-face .pips.n3 .pip:nth-child(3) {
  grid-area: 3 / 3;
}

.device.is-playing .die-face .pips.n4,
.device.is-playing .die-face .pips.n6 {
  grid-template: repeat(3, 1fr) / repeat(2, 1fr);
}

.device.is-playing .die-face .pips.n4 .pip:nth-child(1) {
  grid-area: 1 / 1;
}

.device.is-playing .die-face .pips.n4 .pip:nth-child(2) {
  grid-area: 1 / 2;
}

.device.is-playing .die-face .pips.n4 .pip:nth-child(3) {
  grid-area: 3 / 1;
}

.device.is-playing .die-face .pips.n4 .pip:nth-child(4) {
  grid-area: 3 / 2;
}

.device.is-playing .die-face .pips.n5 {
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

.device.is-playing .die-face .pip.red {
  border-color: rgba(92, 0, 8, 0.58);
  background: radial-gradient(circle at 32% 24%, #ff8170 0%, #c91d28 39%, #820710 72%, #4d0208 100%);
}

.device.is-playing .die-cap {
  border: 1px solid rgba(124, 96, 62, 0.42);
  background:
    radial-gradient(circle at 42% 36%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.2) 28%, transparent 42%),
    radial-gradient(circle, #fbfaf5 0%, #eee9df 63%, #c9c1b4 100%);
  box-shadow:
    inset 0 0 10px rgba(90, 72, 48, 0.2),
    0 0 2px rgba(42, 26, 11, 0.28);
}

.device.is-playing .die-cap.top {
  background:
    radial-gradient(circle at center, #d8a034 0 7%, transparent 9%),
    radial-gradient(circle at 40% 34%, #ffffff 0%, #f5f1e8 55%, #cbc3b6 100%);
}

.device.is-playing .die-cap.bottom {
  background: radial-gradient(circle at 42% 38%, #f0ede6 0%, #d8d2c8 62%, #aaa195 100%);
}

@media (max-width: 932px) and (orientation: landscape) {
  .device.is-playing {
    --die-pip-size: clamp(3.5px, calc(var(--face-w) * 0.13), 6.5px);
  }

  .device.is-playing .die-spindle {
    top: -25%;
    height: 150%;
    min-width: 5px;
  }
}