/* =========================================
   RPG: Mesa de juego dentro del juego
   ========================================= */

.rpg-layout {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin: 0 auto;
  max-width: 1000px;
}

@media (min-width: 900px) {
  .rpg-layout {
    align-items: start;
    grid-template-columns: 1fr 1fr;
  }
}

/* Dados con su silueta real: el cuerpo de color
   es el "borde" y el ::before recortado igual pero
   más chico crea la cara interior */
.dice-row {
  display: flex;
  filter: drop-shadow(0 0 10px rgba(var(--rgb-purple), 0.35));
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  padding: 12px 0;
}

.die {
  --da: var(--rgb-purple);
  --shape: none;
  align-items: center;
  background-color: rgb(var(--da));
  clip-path: var(--shape);
  cursor: pointer;
  display: flex;
  font-family: var(--font-hud);
  font-size: 0.6rem;
  height: 62px;
  justify-content: center;
  position: relative;
  transition: transform 0.15s ease;
  width: 62px;
}

.die::before {
  background: linear-gradient(160deg, #322a4a 0%, #191325 75%);
  clip-path: var(--shape);
  content: "";
  inset: 4px;
  position: absolute;
}

.die span {
  color: var(--text);
  position: relative;
  z-index: 1;
}

.die:hover {
  transform: translateY(-5px);
}

/* d20: icosaedro de frente = hexágono */
.die--d20 {
  --da: var(--rgb-purple);
  --shape: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  height: 70px;
  width: 70px;
}

/* d12: dodecaedro = pentágono */
.die--d12 {
  --da: var(--rgb-pink);
  --shape: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}

/* d10: trapezoedro = cometa */
.die--d10 {
  --da: var(--rgb-cyan);
  --shape: polygon(50% 0, 97% 44%, 50% 100%, 3% 44%);
  height: 66px;
}

/* d8: octaedro = rombo */
.die--d8 {
  --da: var(--rgb-blue);
  --shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* d6: cubo */
.die--d6 {
  --da: var(--rgb-yellow);
  border-radius: 8px;
  height: 54px;
  width: 54px;
}

.die--d6::before {
  border-radius: 5px;
}

/* d4: tetraedro = triángulo */
.die--d4 {
  --da: var(--rgb-red);
  --shape: polygon(50% 0, 100% 100%, 0 100%);
  height: 58px;
}

.die--d4 span {
  margin-top: 18px;
}

/* Sacudida al rodar (la dispara js/dados.js) */
.die.rolling {
  animation: die-roll 0.6s ease;
}

@keyframes die-roll {
  20% { transform: rotate(-14deg) scale(1.12); }
  50% { transform: rotate(10deg) scale(0.94); }
  80% { transform: rotate(-5deg); }
  100% { transform: none; }
}

.die:hover {
  transform: rotate(225deg);
}

.die:hover span {
  transform: rotate(-225deg);
}

.die:nth-child(2) { --da: var(--rgb-pink); }
.die:nth-child(3) { --da: var(--rgb-cyan); }
.die:nth-child(4) { --da: var(--rgb-yellow); }