/* ===== 3D 骰子立方体（实体倒角 + 象牙材质 + 凹刻点数） ===== */
.die {
  --die-size: 52px;
  --die-half: calc(var(--die-size) / 2);
  --die-radius: calc(var(--die-size) * 0.18);
  --die-inset: calc(var(--die-size) * 0.045);
  --die-face: calc(var(--die-size) - var(--die-inset) * 2);
  --pip-size: calc(var(--die-size) * 0.155);
  width: var(--die-size);
  height: var(--die-size);
  position: relative;
  flex-shrink: 0;
}
.die.size-lg { --die-size: 70px; }
.die.size-md { --die-size: 46px; }
.die.size-sm { --die-size: 42px; }

.die-scene {
  width: 100%;
  height: 100%;
  perspective: 480px;
  perspective-origin: 50% 42%;
  position: relative;
}

.die:not(.shaking):not(.rolling) .die-scene {
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.32))
          drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

.die-cube {
  width: var(--die-size);
  height: var(--die-size);
  position: relative;
  transform-style: preserve-3d;
}

/* 内核：面与面之间的倒角/边缘 */
.die-core {
  position: absolute;
  left: var(--die-inset);
  top: var(--die-inset);
  width: var(--die-face);
  height: var(--die-face);
  border-radius: calc(var(--die-radius) - 1px);
  transform: translateZ(0);
  background:
    linear-gradient(145deg, #4a4540 0%, #2e2b28 40%, #1c1a18 100%);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.12),
    inset 0 -2px 4px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.die-face {
  position: absolute;
  left: var(--die-inset);
  top: var(--die-inset);
  width: var(--die-face);
  height: var(--die-face);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: calc(var(--die-face) * 0.11);
  gap: calc(var(--die-face) * 0.03);
  border-radius: calc(var(--die-radius) - 1px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 55% at 50% 8%, rgba(255, 255, 255, 0.55) 0%, transparent 58%),
    radial-gradient(ellipse 70% 40% at 85% 92%, rgba(0, 0, 0, 0.06) 0%, transparent 55%),
    linear-gradient(168deg, #faf7f0 0%, #ede8df 38%, #ddd6ca 72%, #cfc7ba 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2.5px 5px rgba(0, 0, 0, 0.07),
    inset 2px 0 4px rgba(0, 0, 0, 0.035),
    inset -2px 0 4px rgba(255, 255, 255, 0.25);
}

/* 微纹理 */
.die-face::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 88px 88px;
  pointer-events: none;
}

/* 各面独立光照，减少「贴图感」 */
.die-face-1 {
  transform: rotateY(0deg) translateZ(var(--die-half));
  background:
    radial-gradient(ellipse 85% 50% at 48% 6%, rgba(255, 255, 255, 0.6) 0%, transparent 55%),
    linear-gradient(168deg, #fcfaf5 0%, #f0ebe2 45%, #e0d9cd 100%);
}
.die-face-2 {
  transform: rotateY(90deg) translateZ(var(--die-half));
  background:
    radial-gradient(ellipse 80% 45% at 52% 10%, rgba(255, 255, 255, 0.35) 0%, transparent 50%),
    linear-gradient(155deg, #f2ede4 0%, #e4ddd2 50%, #d5cdc0 100%);
}
.die-face-3 {
  transform: rotateX(90deg) translateZ(var(--die-half));
  background:
    radial-gradient(ellipse 75% 45% at 50% 12%, rgba(255, 255, 255, 0.42) 0%, transparent 52%),
    linear-gradient(175deg, #f5f0e8 0%, #e8e1d6 55%, #d8d0c4 100%);
}
.die-face-4 {
  transform: rotateX(-90deg) translateZ(var(--die-half));
  background:
    radial-gradient(ellipse 75% 45% at 50% 8%, rgba(255, 255, 255, 0.38) 0%, transparent 50%),
    linear-gradient(165deg, #eee9e0 0%, #ded7cb 48%, #cfc7ba 100%);
}
.die-face-5 {
  transform: rotateY(-90deg) translateZ(var(--die-half));
  background:
    radial-gradient(ellipse 80% 48% at 46% 10%, rgba(255, 255, 255, 0.32) 0%, transparent 52%),
    linear-gradient(160deg, #f0ebe3 0%, #e2dbd0 52%, #d3cbc0 100%);
}
.die-face-6 {
  transform: rotateY(180deg) translateZ(var(--die-half));
  background:
    radial-gradient(ellipse 82% 50% at 50% 8%, rgba(255, 255, 255, 0.28) 0%, transparent 50%),
    linear-gradient(170deg, #e8e3da 0%, #d9d2c6 45%, #c9c1b4 100%);
}

/* 静止时镜面高光 */
.die:not(.shaking):not(.rolling) .die-face::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    128deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.08) 22%,
    transparent 42%
  );
  pointer-events: none;
}

/* 凹刻点数 */
.die-face .pip {
  width: var(--pip-size);
  height: var(--pip-size);
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
  align-self: center;
  justify-self: center;
  background:
    radial-gradient(circle at 38% 32%, #3a3a3a 0%, #141414 42%, #0a0a0a 100%);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.75),
    inset 0 -1px 1px rgba(255, 255, 255, 0.12),
    0 0.5px 0 rgba(255, 255, 255, 0.08);
}

.die-face.red-face .pip {
  background:
    radial-gradient(circle at 38% 32%, #ef5350 0%, #c62828 45%, #8e0000 100%);
  box-shadow:
    inset 0 2px 4px rgba(60, 0, 0, 0.65),
    inset 0 -1px 1px rgba(255, 180, 180, 0.2),
    0 0.5px 0 rgba(255, 255, 255, 0.06);
}

.die-face .pip[data-visible="false"] {
  visibility: hidden;
}

.die-shadow {
  position: absolute;
  left: 50%;
  bottom: calc(var(--die-size) * -0.12);
  width: calc(var(--die-size) * 0.82);
  height: calc(var(--die-size) * 0.14);
  transform: translateX(-50%) scale(1);
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.18) 45%,
    transparent 72%
  );
  pointer-events: none;
  z-index: -1;
}

.die.shaking .die-shadow,
.die.rolling .die-shadow {
  transition: none;
}

.die.shaking .die-scene,
.die.rolling .die-scene {
  filter: none !important;
}

.die.shaking .die-face::before,
.die.rolling .die-face::before,
.die.shaking .die-face::after,
.die.rolling .die-face::after {
  display: none;
}

.die.shaking .die-cube,
.die.rolling .die-cube {
  will-change: transform;
}

.die.shaking,
.die.rolling {
  transition: none !important;
}

.die.highlight {
  filter: drop-shadow(0 0 8px var(--accent, #c9a961));
}

.die.popped {
  animation: die3dPop 0.32s ease-out;
}
@keyframes die3dPop {
  0%   { opacity: 0.55; }
  100% { opacity: 1; }
}

.die.niu-base .die-scene {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35))
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.28));
}
.die.niu-value .die-scene {
  filter: drop-shadow(0 0 10px var(--accent, #d4af37))
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.28));
}

.die.shaking .die-cube,
.die.rolling .die-cube {
  filter: none !important;
}