/* Six solid faces share a physical cube; opacity stays at 1 to preserve CSS 3D. */
.dice-tray {
  height: 184px;
  gap: 37px;
  perspective: 650px;
  background:
    radial-gradient(ellipse at 48% 25%, #eef1df 0%, #dee5cb 58%, #cdd7b7 100%);
  border: 1px solid #b5c09f;
  box-shadow: inset 0 2px 5px #60704a20, inset 0 -2px 0 #f8faed8c;
}
.dice-tray::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid #f7fae947;
  border-radius: 7px;
  pointer-events: none;
}
.die-seat {
  --die-size: 74px;
  --die-depth: 37px;
  --rest-x: -27deg;
  --rest-y: -31deg;
  --rest-z: -11deg;
  position: relative;
  width: var(--die-size);
  height: var(--die-size);
  margin-top: -8px;
  transform-style: preserve-3d;
}
.two-dice .die-seat { --die-size: 59px; --die-depth: 29.5px; }
.die-seat.enemy-seat { --rest-y: -27deg; --rest-z: 12deg; }
.dice-object {
  width: var(--die-size);
  height: var(--die-size);
  transform: rotateX(var(--rest-x)) rotateY(var(--rest-y)) rotateZ(var(--rest-z));
  transform-style: preserve-3d;
  transition: transform .22s ease;
  border: 0;
  background: transparent;
  padding: 0;
  opacity: 1;
  outline-offset: 16px;
}
.dice-object:disabled { opacity: 1; }
.dice-object:not(:disabled):hover {
  transform: translateY(-4px) rotateX(-31deg) rotateY(-35deg) rotateZ(var(--rest-z));
}
.dice-object:not(:disabled):active {
  transform: translateY(2px) rotateX(var(--rest-x)) rotateY(var(--rest-y)) rotateZ(var(--rest-z));
}
.die-face {
  inset: 0;
  padding: 14%;
  gap: 7%;
  border: 1px solid #bcb4a0;
  border-radius: 10%;
  background: linear-gradient(140deg, #fffef8 0%, #f8f3e6 52%, #e4d9c2 100%);
  box-shadow: inset 0 2px 2px #ffffff, inset 0 -3px 5px #8f80632b, inset 2px 0 2px #ffffff91;
  backface-visibility: hidden;
}
.die-face::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 8%;
  border-top: 1px solid #ffffffb8;
  border-left: 1px solid #ffffff70;
  pointer-events: none;
}
.die-front { transform: translateZ(var(--die-depth)); }
.die-back { transform: rotateY(180deg) translateZ(var(--die-depth)); }
.die-right {
  transform: rotateY(90deg) translateZ(var(--die-depth));
  background: linear-gradient(155deg, #e8ddc8, #c0ae8c);
  border-color: #b4a181;
}
.die-left { transform: rotateY(-90deg) translateZ(var(--die-depth)); background: linear-gradient(145deg, #e8dfcf, #cfc1a7); }
.die-top {
  transform: rotateX(90deg) translateZ(var(--die-depth));
  background: linear-gradient(135deg, #ffffff, #fffbef 65%, #e6dec9);
}
.die-bottom { transform: rotateX(-90deg) translateZ(var(--die-depth)); background: #c3b493; }
.die-pip {
  background: radial-gradient(circle at 66% 68%, #444b3a 0%, #252d21 55%, #12190f 100%);
  box-shadow: inset 1px 2px 2px #0009, 0 1px 0 #ffffffc9;
  border: 1px solid #333b2a;
  border-radius: 50%;
}
.die-right .die-pip { background: radial-gradient(circle at 65% 70%, #353a29, #10160c); }
.enemy-die .die-face { background: linear-gradient(140deg, #ffebe4, #e5aca0); border-color: #c28c7f; }
.enemy-die .die-top { background: linear-gradient(135deg, #fff3ed, #f4c9bc); }
.enemy-die .die-right { background: linear-gradient(155deg, #d9a292, #b97163); border-color: #a66c5c; }
.enemy-die .die-pip { background: radial-gradient(circle at 65% 70%, #733d35, #381a14); border-color: #54271f; }
.die-contact-shadow {
  position: absolute;
  width: 133%;
  height: 35%;
  bottom: -23%;
  left: -16%;
  background: radial-gradient(ellipse, #35442666 0%, #41503036 40%, transparent 73%);
  transform: rotate(8deg);
  pointer-events: none;
}
.tray-mark { bottom: 13px; color: #6b7a56; font-size: 8px; letter-spacing: 1.1px; }
.die-label { z-index: 1; top: 12px; font-size: 8px; }
.die-label.you { left: 31px; }
.die-label.enemy { right: 23px; }
.rolling .dice-object { animation: dice-tumble-3d 1.02s linear both; }
.rolling .dice-object:nth-child(2) { animation-delay: 0s; }
.rolling .enemy-seat .dice-object { animation-name: enemy-tumble-3d; }
.rolling .die-contact-shadow { animation: dice-shadow-bounce 1.02s linear both; }
@keyframes dice-tumble-3d {
  0% { transform: rotateX(var(--rest-x)) rotateY(var(--rest-y)) rotateZ(var(--rest-z)); }
  18% { transform: translateY(-32px) rotateX(120deg) rotateY(165deg) rotateZ(35deg); }
  43% { transform: translateY(5px) rotateX(327deg) rotateY(383deg) rotateZ(-30deg); }
  60% { transform: translateY(-15px) rotateX(535deg) rotateY(660deg) rotateZ(18deg); }
  78% { transform: translateY(2px) rotateX(691deg) rotateY(998deg) rotateZ(-15deg); }
  90% { transform: translateY(-3px) rotateX(701deg) rotateY(1047deg) rotateZ(-9deg); }
  100% { transform: rotateX(693deg) rotateY(1049deg) rotateZ(-11deg); }
}
@keyframes enemy-tumble-3d {
  0% { transform: rotateX(var(--rest-x)) rotateY(var(--rest-y)) rotateZ(var(--rest-z)); }
  20% { transform: translateY(-27px) rotateX(-140deg) rotateY(-190deg) rotateZ(-26deg); }
  45% { transform: translateY(4px) rotateX(-335deg) rotateY(-405deg) rotateZ(30deg); }
  62% { transform: translateY(-12px) rotateX(-570deg) rotateY(-655deg) rotateZ(-18deg); }
  83% { transform: translateY(2px) rotateX(-738deg) rotateY(-1060deg) rotateZ(17deg); }
  100% { transform: rotateX(-747deg) rotateY(-1107deg) rotateZ(12deg); }
}
@keyframes dice-shadow-bounce {
  0%, 100% { transform: scale(1) rotate(8deg); opacity: 1; }
  18% { transform: scale(.65) rotate(8deg); opacity: .4; }
  43% { transform: scale(1.15) rotate(8deg); opacity: 1; }
  60% { transform: scale(.82) rotate(8deg); opacity: .65; }
  78% { transform: scale(1.07) rotate(8deg); opacity: 1; }
}
@media (min-width:1550px) { .dice-tray { height: 196px; } .die-seat { --die-size: 82px; --die-depth: 41px; } }
@media (max-width:1160px) { .dice-tray { height: 164px; gap: 27px; } .die-seat { --die-size: 66px; --die-depth: 33px; } .two-dice .die-seat { --die-size: 52px; --die-depth: 26px; } }
@media (max-width:900px) { .dice-tray { height: 162px; } }
@media (max-width:640px) {
  .dice-tray { height: 136px; gap: 22px; }
  .die-seat { --die-size: 55px; --die-depth: 27.5px; margin-top: -7px; }
  .two-dice .die-seat { --die-size: 38px; --die-depth: 19px; }
  .dice-tray.two-dice { gap: 16px; }
  .two-dice .dice-object { width: var(--die-size); height: var(--die-size); }
  .two-dice .die-face { padding: 14%; }
  .two-dice .die-front { transform: translateZ(var(--die-depth)); }
  .two-dice .die-back { transform: rotateY(180deg) translateZ(var(--die-depth)); }
  .two-dice .die-right { transform: rotateY(90deg) translateZ(var(--die-depth)); }
  .two-dice .die-left { transform: rotateY(-90deg) translateZ(var(--die-depth)); }
  .two-dice .die-top { transform: rotateX(90deg) translateZ(var(--die-depth)); }
  .two-dice .die-bottom { transform: rotateX(-90deg) translateZ(var(--die-depth)); }
  .tray-mark { font-size: 6px; letter-spacing: .6px; bottom: 9px; }
  .die-label { font-size: 6px; top: 9px; }
  .die-label.you { left: 16px; }
  .die-label.enemy { right: 10px; }
}
@media (prefers-reduced-motion:reduce) { .rolling .dice-object, .rolling .die-contact-shadow { animation: none; } }