/**
 * dice.css - 3D CSS Cuboidal Dice Transforms, Faces & Rolling Physics
 *
 * Implements 3D Dayakattai dice transforms with responsive sizing,
 * realistic perspective, surface lighting, and tumbling keyframes.
 */
.dice {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  margin: clamp(4px, 0.8vh, 12px) 0 clamp(6px, 1.2vh, 14px);
  padding: clamp(4px, 0.6vh, 8px) 5px;
  perspective: 1000px;
  perspective-origin: 50% 20%;
  border-radius: 12px;
  transition: background-color 0.2s ease, outline 0.2s ease;
}

.dice.rollable {
  cursor: pointer;
  user-select: none;
}

.dice.rollable .die {
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1), filter 0.2s ease;
}

.dice.rollable:hover .die {
  transform: translateY(-3px) scale(1.05);
  filter: drop-shadow(0 12px 10px #ffbd5955);
}

.dice.rollable .die:active {
  transform: translateY(1px) scale(0.97);
}

.dice.rollable:focus-visible {
  outline: 2px solid #ffdaa5;
  outline-offset: 4px;
}

.die {
  --die-size: clamp(66px, 9.4vh, 88px);
  --cube-size: clamp(54px, 7.6vh, 72px);
  --cube-depth: clamp(27px, 3.8vh, 36px);
  --cube-inset: 5px;
  position: relative;
  width: var(--die-size);
  height: var(--die-size);
  perspective: 700px;
  filter: drop-shadow(0 8px 7px #0008);
}

.die:after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -10px;
  height: 8px;
  border-radius: 50%;
  background: #0905038c;
  filter: blur(4px);
  transform: scale(0.9);
}

.diecube {
  position: absolute;
  inset: var(--cube-inset);
  width: var(--cube-size);
  height: var(--cube-size);
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
  will-change: transform;
}

.dieface {
  position: absolute;
  width: var(--cube-size);
  height: var(--cube-size);
  display: grid;
  place-items: center;
  border: 1px solid #ffe6baaa;
  border-radius: clamp(8px, 1.2vh, 12px);
  background: linear-gradient(
    145deg,
    #ffdaa5 0%,
    #d88745 52%,
    #955027 100%
  );
  box-shadow:
    inset 4px 4px 7px #fff7,
    inset -5px -5px 8px #6d321f77;
  color: #4c2413;
  font-size: clamp(26px, 3.8vh, 36px);
  font-weight: 950;
  line-height: 1;
  backface-visibility: hidden;
}

.dieface:after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 6px;
  border-top: 2px solid #fff7;
  border-left: 1px solid #fff4;
}

.diefront {
  transform: rotateY(0deg) translateZ(var(--cube-depth));
}

.dieback {
  transform: rotateY(180deg) translateZ(var(--cube-depth));
}

.dieright {
  transform: rotateY(90deg) translateZ(var(--cube-depth));
}

.dieleft {
  transform: rotateY(-90deg) translateZ(var(--cube-depth));
}

.dietop {
  transform: rotateX(90deg) translateZ(var(--cube-depth));
}

.diebottom {
  transform: rotateX(-90deg) translateZ(var(--cube-depth));
}

.diecube.show-0 {
  transform: rotateX(-8deg) rotateY(-10deg);
}

.diecube.show-1 {
  transform: rotateX(-8deg) rotateY(170deg);
}

.diecube.show-2 {
  transform: rotateX(-8deg) rotateY(-100deg);
}

.diecube.show-3 {
  transform: rotateX(-8deg) rotateY(80deg);
}

.diecube.rolling {
  transition: none;
  animation-duration: 1.15s;
  animation-timing-function: cubic-bezier(0.18, 0.72, 0.25, 1);
  animation-fill-mode: forwards;
}

.diecube.rolling.show-0 {
  animation-name: cubeRoll0;
}

.diecube.rolling.show-1 {
  animation-name: cubeRoll1;
}

.diecube.rolling.show-2 {
  animation-name: cubeRoll2;
}

.diecube.rolling.show-3 {
  animation-name: cubeRoll3;
}

.die:nth-child(2) .diecube.rolling {
  animation-delay: 0.05s;
}

.die:nth-child(1).tumbling {
  animation: dieBounceA 1.18s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.die:nth-child(2).tumbling {
  animation: dieBounceB 1.22s cubic-bezier(0.2, 0.8, 0.25, 1);
  animation-delay: 0.05s;
}

.die:nth-child(1).tumbling:after {
  animation: dieShadowA 1.18s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.die:nth-child(2).tumbling:after {
  animation: dieShadowB 1.22s cubic-bezier(0.2, 0.8, 0.25, 1);
  animation-delay: 0.05s;
}

@keyframes cubeRoll0 {
  0% { transform: rotateX(-8deg) rotateY(-10deg) rotateZ(0); }
  22% { transform: rotateX(190deg) rotateY(165deg) rotateZ(65deg); }
  52% { transform: rotateX(465deg) rotateY(400deg) rotateZ(195deg); }
  78% { transform: rotateX(655deg) rotateY(630deg) rotateZ(315deg); }
  100% { transform: rotateX(712deg) rotateY(710deg) rotateZ(360deg); }
}

@keyframes cubeRoll1 {
  0% { transform: rotateX(-8deg) rotateY(-10deg) rotateZ(0); }
  22% { transform: rotateX(215deg) rotateY(135deg) rotateZ(90deg); }
  52% { transform: rotateX(480deg) rotateY(420deg) rotateZ(215deg); }
  78% { transform: rotateX(680deg) rotateY(665deg) rotateZ(330deg); }
  100% { transform: rotateX(712deg) rotateY(890deg) rotateZ(360deg); }
}

@keyframes cubeRoll2 {
  0% { transform: rotateX(-8deg) rotateY(-10deg) rotateZ(0); }
  22% { transform: rotateX(165deg) rotateY(185deg) rotateZ(55deg); }
  52% { transform: rotateX(440deg) rotateY(445deg) rotateZ(180deg); }
  78% { transform: rotateX(635deg) rotateY(710deg) rotateZ(300deg); }
  100% { transform: rotateX(712deg) rotateY(980deg) rotateZ(360deg); }
}

@keyframes cubeRoll3 {
  0% { transform: rotateX(-8deg) rotateY(-10deg) rotateZ(0); }
  22% { transform: rotateX(205deg) rotateY(165deg) rotateZ(80deg); }
  52% { transform: rotateX(460deg) rotateY(465deg) rotateZ(205deg); }
  78% { transform: rotateX(670deg) rotateY(695deg) rotateZ(320deg); }
  100% { transform: rotateX(712deg) rotateY(800deg) rotateZ(360deg); }
}

/* Die A: High initial airborne arc, crisp primary landing, secondary hop, settling wobble */
@keyframes dieBounceA {
  0% {
    transform: translateY(0) rotateZ(0) scale(1);
  }
  24% {
    transform: translateY(-46px) rotateZ(6deg) scale(1.04);
  }
  48% {
    transform: translateY(0) rotateZ(-3deg) scaleY(0.94) scaleX(1.03);
  }
  68% {
    transform: translateY(-18px) rotateZ(2deg) scale(1.01);
  }
  84% {
    transform: translateY(0) rotateZ(-1deg) scaleY(0.98);
  }
  92% {
    transform: translateY(-5px) rotateZ(0.5deg) scale(1);
  }
  100% {
    transform: translateY(0) rotateZ(0) scale(1);
  }
}

/* Die B: Higher asynchronous launch, reverse tilt, and trailing bounce */
@keyframes dieBounceB {
  0% {
    transform: translateY(0) rotateZ(0) scale(1);
  }
  22% {
    transform: translateY(-52px) rotateZ(-7deg) scale(1.05);
  }
  46% {
    transform: translateY(0) rotateZ(4deg) scaleY(0.93) scaleX(1.04);
  }
  66% {
    transform: translateY(-22px) rotateZ(-3deg) scale(1.02);
  }
  82% {
    transform: translateY(0) rotateZ(1.5deg) scaleY(0.97);
  }
  92% {
    transform: translateY(-6px) rotateZ(-0.5deg) scale(1);
  }
  100% {
    transform: translateY(0) rotateZ(0) scale(1);
  }
}

/* Dynamic Shadows tied to realistic bounce elevation */
@keyframes dieShadowA {
  0% {
    transform: scale(0.9);
    opacity: 0.85;
    filter: blur(4px);
  }
  24% {
    transform: scale(0.42);
    opacity: 0.3;
    filter: blur(8px);
  }
  48% {
    transform: scale(1.12);
    opacity: 0.95;
    filter: blur(2.5px);
  }
  68% {
    transform: scale(0.65);
    opacity: 0.55;
    filter: blur(5px);
  }
  84% {
    transform: scale(1.04);
    opacity: 0.9;
    filter: blur(3px);
  }
  92% {
    transform: scale(0.85);
    opacity: 0.75;
    filter: blur(4px);
  }
  100% {
    transform: scale(0.95);
    opacity: 0.88;
    filter: blur(4px);
  }
}

/* Dice warning feedback when user attempts to roll during move phase */
@keyframes diceShakeWarn {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px) rotate(-3deg); filter: drop-shadow(0 0 10px #ef4444); }
  40% { transform: translateX(9px) rotate(3deg); filter: drop-shadow(0 0 14px #f59e0b); }
  60% { transform: translateX(-6px) rotate(-2deg); filter: drop-shadow(0 0 10px #ef4444); }
  80% { transform: translateX(4px) rotate(1deg); filter: drop-shadow(0 0 8px #f59e0b); }
}

.dice.dice-shake-warn {
  animation: diceShakeWarn 0.5s ease-in-out !important;
}

.dice-warn-banner {
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: linear-gradient(135deg, #78350f, #451a03);
  border: 1px solid #f59e0b;
  color: #fef3c7;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6), 0 0 12px #f59e0b66;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
}

.dice-warn-banner.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@keyframes moveBtnPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.8); }
  50% { transform: scale(1.08); box-shadow: 0 0 20px 6px rgba(245, 158, 11, 0.9); border-color: #fbbf24; }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

#moveBtn.pulse-attention {
  animation: moveBtnPulse 0.7s ease-in-out 2 !important;
  border-color: #f59e0b !important;
}

@keyframes legalCellFlash {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); box-shadow: 0 0 18px 4px #f59e0b !important; }
}

.cell.cell-highlight-attention {
  animation: legalCellFlash 0.6s ease-in-out 2 !important;
  z-index: 10;
}

@keyframes dieShadowB {
  0% {
    transform: scale(0.9);
    opacity: 0.85;
    filter: blur(4px);
  }
  22% {
    transform: scale(0.38);
    opacity: 0.28;
    filter: blur(9px);
  }
  46% {
    transform: scale(1.15);
    opacity: 0.96;
    filter: blur(2.5px);
  }
  66% {
    transform: scale(0.62);
    opacity: 0.52;
    filter: blur(5.5px);
  }
  82% {
    transform: scale(1.05);
    opacity: 0.9;
    filter: blur(3px);
  }
  92% {
    transform: scale(0.82);
    opacity: 0.75;
    filter: blur(4px);
  }
  100% {
    transform: scale(0.95);
    opacity: 0.88;
    filter: blur(4px);
  }
}

/* Dice warning feedback when user attempts to roll during move phase */
@keyframes diceShakeWarn {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px) rotate(-3deg); filter: drop-shadow(0 0 10px #ef4444); }
  40% { transform: translateX(9px) rotate(3deg); filter: drop-shadow(0 0 14px #f59e0b); }
  60% { transform: translateX(-6px) rotate(-2deg); filter: drop-shadow(0 0 10px #ef4444); }
  80% { transform: translateX(4px) rotate(1deg); filter: drop-shadow(0 0 8px #f59e0b); }
}

.dice.dice-shake-warn {
  animation: diceShakeWarn 0.5s ease-in-out !important;
}

.dice-warn-banner {
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: linear-gradient(135deg, #78350f, #451a03);
  border: 1px solid #f59e0b;
  color: #fef3c7;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6), 0 0 12px #f59e0b66;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
}

.dice-warn-banner.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@keyframes moveBtnPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.8); }
  50% { transform: scale(1.08); box-shadow: 0 0 20px 6px rgba(245, 158, 11, 0.9); border-color: #fbbf24; }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

#moveBtn.pulse-attention {
  animation: moveBtnPulse 0.7s ease-in-out 2 !important;
  border-color: #f59e0b !important;
}

@keyframes legalCellFlash {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); box-shadow: 0 0 18px 4px #f59e0b !important; }
}

.cell.cell-highlight-attention {
  animation: legalCellFlash 0.6s ease-in-out 2 !important;
  z-index: 10;
}