/* ── 3D Dice on a Table ──────────────────────────────────────────────────── */

/* ── The Table ───────────────────────────────────────────────────────────── */
.dice-table {
  width: 100%;
  aspect-ratio: 5 / 3;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.08) 0%, transparent 65%),
    linear-gradient(160deg, #1B5E20 0%, #2E7D32 50%, #1B5E20 100%);
  border-radius: 20px;
  border: 5px solid #4E342E;
  box-shadow:
    inset 0 2px 24px rgba(0,0,0,0.45),
    inset 0 -1px 6px rgba(255,255,255,0.04),
    0 10px 36px rgba(0,0,0,0.55);
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  /* keeps it readable on narrow phones */
  min-height: 140px;
}

/* Felt texture overlay */
.dice-table::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ── Die Wrapper (positions on the table) ────────────────────────────────── */
.die-wrap {
  position: absolute;
  /* Fluid size: 44px on tiny phones, up to 56px on wider screens */
  width: clamp(40px, 12vw, 58px);
  height: clamp(40px, 12vw, 58px);
  perspective: 280px;
  cursor: pointer;

  /* JS sets these custom properties */
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, -50%) rotate(var(--rz, 0deg));
  transition:
    left 0.6s cubic-bezier(.2,.8,.3,1),
    top  0.6s cubic-bezier(.2,.8,.3,1),
    transform 0.6s cubic-bezier(.2,.8,.3,1),
    opacity 0.15s ease-out;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

.die-wrap.landing {
  animation: dieBounce 0.4s ease-out forwards;
}

@keyframes dieBounce {
  0%   { transform: translate(-50%, -50%) rotate(var(--rz, 0deg)) scale(1.15); }
  40%  { transform: translate(-50%, -50%) rotate(var(--rz, 0deg)) scale(0.95); }
  70%  { transform: translate(-50%, -50%) rotate(var(--rz, 0deg)) scale(1.03); }
  100% { transform: translate(-50%, -50%) rotate(var(--rz, 0deg)) scale(1); }
}

/* ── The 3D Cube ─────────────────────────────────────────────────────────── */
.die-cube {
  /* --half drives all face translateZ. Matches die-wrap's clamp-based size / 2 */
  --half: calc(clamp(40px, 12vw, 58px) / 2);
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(.2,.85,.3,1.1);
}

/* ── Faces ────────────────────────────────────────────────────────────────── */
.die-face {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #FAFAFA;
  border: 1px solid #D4D4D4;
  border-radius: 16%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 18%;
  gap: 4%;
  backface-visibility: hidden;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.08);
}

.die-face.front  { transform: translateZ(var(--half)); }
.die-face.back   { transform: rotateY(180deg) translateZ(var(--half)); }
.die-face.right  { transform: rotateY( 90deg) translateZ(var(--half)); }
.die-face.left   { transform: rotateY(-90deg) translateZ(var(--half)); }
.die-face.top    { transform: rotateX( 90deg) translateZ(var(--half)); }
.die-face.bottom { transform: rotateX(-90deg) translateZ(var(--half)); }

/* ── Pips ─────────────────────────────────────────────────────────────────── */
.pip {
  background: #1a1a2e;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2);
}

/* ── Value → Rotation ─────────────────────────────────────────────────────── */
/* front=1, top=2, right=3, left=4, bottom=5, back=6 */
.die-cube[data-value="1"] { transform: rotateX(   0deg) rotateY(   0deg); }
.die-cube[data-value="2"] { transform: rotateX( -90deg) rotateY(   0deg); }
.die-cube[data-value="3"] { transform: rotateX(   0deg) rotateY( -90deg); }
.die-cube[data-value="4"] { transform: rotateX(   0deg) rotateY(  90deg); }
.die-cube[data-value="5"] { transform: rotateX(  90deg) rotateY(   0deg); }
.die-cube[data-value="6"] { transform: rotateX( 180deg) rotateY(   0deg); }

/* ── Rolling (tumble in air) ──────────────────────────────────────────────── */
@keyframes cubeTumble {
  0%   { transform: rotateX(   0deg) rotateY(   0deg) rotateZ(   0deg); }
  100% { transform: rotateX(1080deg) rotateY( 720deg) rotateZ( 360deg); }
}

.die-cube.rolling {
  animation: cubeTumble 0.7s linear infinite;
  transition: none !important;
}

/* ── Held ─────────────────────────────────────────────────────────────────── */
.die-wrap.held {
  z-index: 5;
}

.die-wrap.held .die-face {
  background: #EEF2FF;
  border-color: var(--accent);
  border-width: 2px;
  box-shadow:
    inset 0 0 6px rgba(99,102,241,0.12),
    0 0 16px rgba(99, 102, 241, 0.35);
}

/* Lock badge on the 3D die in the table */
.die-wrap.held::after {
  content: '🔒';
  position: absolute;
  top: -9px;
  right: -9px;
  font-size: clamp(11px, 3vw, 15px);
  z-index: 10;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
  line-height: 1;
}

/* Shadow under each die */
.die-wrap::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 10%;
  width: 80%;
  height: 8px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.35) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Very small phones: compact table */
@media (max-width: 360px) {
  .dice-table {
    aspect-ratio: 4 / 3;
    border-width: 4px;
    border-radius: 16px;
    min-height: 120px;
    margin-bottom: 14px;
  }
}

/* Large phones and tablets: fuller table */
@media (min-width: 481px) {
  .dice-table {
    border-radius: 24px;
    border-width: 6px;
    margin-bottom: 24px;
  }
}

/* Wide screens: larger dice */
@media (min-width: 600px) {
  .die-wrap {
    width: 64px;
    height: 64px;
  }
  .die-cube { --half: 32px; }
}