/* Omaxac · los dados. Se carga donde se tira y en el perfil, donde se eligen.
   Cuidado con el peso de los selectores: los puntos se encienden con
   .dado[data-cara] i:nth-child(), y cualquier regla que quiera taparlos
   tiene que igualar ese peso. */

.tirada__dados {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin-bottom: 1rem;
}

.dado {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--hueso), #b9b1a0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 4px rgba(0,0,0,.22),
    0 6px 14px rgba(0,0,0,.45);
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 0.5rem;
  gap: 2px;
}

.dado i {
  display: block;
  border-radius: 50%;
  background: #23282e;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.6);
  visibility: hidden;
}

.dado i:nth-child(1) { grid-area: 1/1; }

.dado i:nth-child(2) { grid-area: 1/3; }

.dado i:nth-child(3) { grid-area: 2/1; }

.dado i:nth-child(4) { grid-area: 2/2; }

.dado i:nth-child(5) { grid-area: 2/3; }

.dado i:nth-child(6) { grid-area: 3/1; }

.dado i:nth-child(7) { grid-area: 3/3; }

.dado[data-cara="1"] i:nth-child(4),
.dado[data-cara="2"] i:nth-child(1), .dado[data-cara="2"] i:nth-child(7),
.dado[data-cara="3"] i:nth-child(1), .dado[data-cara="3"] i:nth-child(4), .dado[data-cara="3"] i:nth-child(7),
.dado[data-cara="4"] i:nth-child(1), .dado[data-cara="4"] i:nth-child(2), .dado[data-cara="4"] i:nth-child(6), .dado[data-cara="4"] i:nth-child(7),
.dado[data-cara="5"] i:nth-child(1), .dado[data-cara="5"] i:nth-child(2), .dado[data-cara="5"] i:nth-child(4), .dado[data-cara="5"] i:nth-child(6), .dado[data-cara="5"] i:nth-child(7),
.dado[data-cara="6"] i:nth-child(1), .dado[data-cara="6"] i:nth-child(2), .dado[data-cara="6"] i:nth-child(3), .dado[data-cara="6"] i:nth-child(5), .dado[data-cara="6"] i:nth-child(6), .dado[data-cara="6"] i:nth-child(7) {
  visibility: visible;
}

.dado.rodando { animation: rodar .13s steps(2) infinite; }

.dado.dormido {
  background: linear-gradient(150deg, #4a5058, #363c44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 3px 8px rgba(0,0,0,.35);
  transition: background .45s ease, box-shadow .45s ease;
}

.dado.dormido i { background: #22262c; }

/* ── Los otros colores ────────────────────────────────────────────────────
   Los puntos se encienden con .dado[data-cara] i:nth-child(), que pesa tres
   clases y un elemento. Cualquier regla que quiera cambiarlos tiene que
   igualar ese peso. */

.dados--rojo .dado {
  background: linear-gradient(155deg, #c0362f, #7d1d17);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -3px 5px rgba(0,0,0,.36),
    0 6px 14px rgba(0,0,0,.45);
}

.dados--rojo .dado[data-cara] i {
  background: #fbf9f5;
  box-shadow: inset 0 -1px 1px rgba(0,0,0,.28);
}

/* Antes de tirar, apagados */
.dados--rojo .dado.dormido {
  background: linear-gradient(155deg, #342220, #1e1514);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 8px rgba(0,0,0,.35);
}

.dados--rojo .dado.dormido[data-cara] i { background: #4b3430; box-shadow: none; }

/* ── El de rol ────────────────────────────────────────────────────────────
   Un dodecaedro visto de frente, con las once caras dibujadas una por una.
   Va como imagen de fondo porque el sólido no cambia nunca: lo único que
   cambia es el número, y ése va encima en texto.
   Los puntos se apagan con display, no con visibility, porque las reglas que
   los encienden pesan más y sólo tocan visibility. */

.dados--d20 .dado i { display: none; }

.dados--d20 .dado {
  aspect-ratio: 1;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cG9seWdvbiBwb2ludHM9IjUwLjAwLDMuMDAgNzcuNjMsMTEuOTggOTQuNzAsMzUuNDggOTQuNzAsNjQuNTIgNzcuNjMsODguMDIgNTAuMDAsOTcuMDAgMjIuMzcsODguMDIgNS4zMCw2NC41MiA1LjMwLDM1LjQ4IDIyLjM3LDExLjk4IiBmaWxsPSIjNWUxMjBlIi8+PHBvbHlnb24gcG9pbnRzPSI1MC4wMCwyMi41MCA1MC4wMCwzLjAwIDc3LjYzLDExLjk4IDk0LjcwLDM1LjQ4IDc2LjE1LDQxLjUwIiBmaWxsPSIjYWMzMzJiIi8+PHBvbHlnb24gcG9pbnRzPSI3Ni4xNSw0MS41MCA5NC43MCwzNS40OCA5NC43MCw2NC41MiA3Ny42Myw4OC4wMiA2Ni4xNiw3Mi4yNSIgZmlsbD0iIzZhMTcxMiIvPjxwb2x5Z29uIHBvaW50cz0iNjYuMTYsNzIuMjUgNzcuNjMsODguMDIgNTAuMDAsOTcuMDAgMjIuMzcsODguMDIgMzMuODQsNzIuMjUiIGZpbGw9IiM2OTE3MTIiLz48cG9seWdvbiBwb2ludHM9IjMzLjg0LDcyLjI1IDIyLjM3LDg4LjAyIDUuMzAsNjQuNTIgNS4zMCwzNS40OCAyMy44NSw0MS41MCIgZmlsbD0iI2FhMzIyYSIvPjxwb2x5Z29uIHBvaW50cz0iMjMuODUsNDEuNTAgNS4zMCwzNS40OCAyMi4zNywxMS45OCA1MC4wMCwzLjAwIDUwLjAwLDIyLjUwIiBmaWxsPSIjZDQ0NDNhIi8+PHBvbHlnb24gcG9pbnRzPSI1MC4wMCwyMi41MCA3Ni4xNSw0MS41MCA2Ni4xNiw3Mi4yNSAzMy44NCw3Mi4yNSAyMy44NSw0MS41MCIgZmlsbD0iI2U4NTY0YyIvPjwvc3ZnPg==") center / contain no-repeat;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  position: relative;
  filter: drop-shadow(0 5px 9px rgba(0,0,0,.55));
}

.dados--d20 .dado::after {
  content: attr(data-cara);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 500 1.15rem/1 "IBM Plex Mono", monospace;
  color: #fdfbf7;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

.dados--d20 .dado.dormido {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cG9seWdvbiBwb2ludHM9IjUwLjAwLDMuMDAgNzcuNjMsMTEuOTggOTQuNzAsMzUuNDggOTQuNzAsNjQuNTIgNzcuNjMsODguMDIgNTAuMDAsOTcuMDAgMjIuMzcsODguMDIgNS4zMCw2NC41MiA1LjMwLDM1LjQ4IDIyLjM3LDExLjk4IiBmaWxsPSIjMTcxNDEyIi8+PHBvbHlnb24gcG9pbnRzPSI1MC4wMCwyMi41MCA1MC4wMCwzLjAwIDc3LjYzLDExLjk4IDk0LjcwLDM1LjQ4IDc2LjE1LDQxLjUwIiBmaWxsPSIjMmUyOTI1Ii8+PHBvbHlnb24gcG9pbnRzPSI3Ni4xNSw0MS41MCA5NC43MCwzNS40OCA5NC43MCw2NC41MiA3Ny42Myw4OC4wMiA2Ni4xNiw3Mi4yNSIgZmlsbD0iIzFiMTcxNSIvPjxwb2x5Z29uIHBvaW50cz0iNjYuMTYsNzIuMjUgNzcuNjMsODguMDIgNTAuMDAsOTcuMDAgMjIuMzcsODguMDIgMzMuODQsNzIuMjUiIGZpbGw9IiMxYTE3MTUiLz48cG9seWdvbiBwb2ludHM9IjMzLjg0LDcyLjI1IDIyLjM3LDg4LjAyIDUuMzAsNjQuNTIgNS4zMCwzNS40OCAyMy44NSw0MS41MCIgZmlsbD0iIzJlMjgyNCIvPjxwb2x5Z29uIHBvaW50cz0iMjMuODUsNDEuNTAgNS4zMCwzNS40OCAyMi4zNywxMS45OCA1MC4wMCwzLjAwIDUwLjAwLDIyLjUwIiBmaWxsPSIjM2EzMzJlIi8+PHBvbHlnb24gcG9pbnRzPSI1MC4wMCwyMi41MCA3Ni4xNSw0MS41MCA2Ni4xNiw3Mi4yNSAzMy44NCw3Mi4yNSAyMy44NSw0MS41MCIgZmlsbD0iIzQ0M2MzNiIvPjwvc3ZnPg==") center / contain no-repeat;
  box-shadow: none;
  filter: none;
}

.dados--d20 .dado.dormido::after { color: #5b544c; text-shadow: none; }

@media (max-width: 480px) {
  .dados--d20 .dado::after { font-size: 1rem; }
}

/* ── El selector del perfil ─────────────────────────────────────────────── */
.dados-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: .8rem;
  margin: .6rem 0 1.2rem;
}

.dados-opcion { display: block; cursor: pointer; }

.dados-opcion input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dados-opcion__caja {
  display: block;
  border: 1px solid var(--musgo);
  border-radius: 4px;
  padding: 1.1rem .6rem .85rem;
  text-align: center;
  transition: border-color .12s;
}

.dados-opcion input:checked + .dados-opcion__caja { border-color: var(--brasa); }
.dados-opcion:hover .dados-opcion__caja { border-color: var(--plata); }

.dados-opcion__nombre {
  display: block;
  margin-top: .8rem;
  font: 400 .66rem/1.3 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--plata);
}

.dados-opcion input:checked + .dados-opcion__caja .dados-opcion__nombre { color: var(--brasa); }

/* Cada muestra se pinta sola. Da igual qué tipo esté puesto en el body:
   aquí se devuelve todo al punto de partida y luego se aplica el suyo. */
.dados-opciones .dado {
  margin: 0 auto;
  width: 2.7rem;
  height: 2.7rem;
  aspect-ratio: auto;
  border-radius: 8px;
  padding: .42rem;
  position: static;
  filter: none;
  background: linear-gradient(155deg, var(--hueso), #b9b1a0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 4px rgba(0,0,0,.22),
    0 4px 9px rgba(0,0,0,.4);
}

.dados-opciones .dado::before,
.dados-opciones .dado::after { content: none; }

.dados-opciones .dado i { display: block; }
.dados-opciones .dado[data-cara] i { background: #23282e; box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }

.dados-opciones .muestra--rojo .dado {
  background: linear-gradient(155deg, #c0362f, #7d1d17);
}
.dados-opciones .muestra--rojo .dado[data-cara] i { background: #fbf9f5; }

.dados-opciones .muestra--d20 .dado {
  aspect-ratio: 1;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cG9seWdvbiBwb2ludHM9IjUwLjAwLDMuMDAgNzcuNjMsMTEuOTggOTQuNzAsMzUuNDggOTQuNzAsNjQuNTIgNzcuNjMsODguMDIgNTAuMDAsOTcuMDAgMjIuMzcsODguMDIgNS4zMCw2NC41MiA1LjMwLDM1LjQ4IDIyLjM3LDExLjk4IiBmaWxsPSIjNWUxMjBlIi8+PHBvbHlnb24gcG9pbnRzPSI1MC4wMCwyMi41MCA1MC4wMCwzLjAwIDc3LjYzLDExLjk4IDk0LjcwLDM1LjQ4IDc2LjE1LDQxLjUwIiBmaWxsPSIjYWMzMzJiIi8+PHBvbHlnb24gcG9pbnRzPSI3Ni4xNSw0MS41MCA5NC43MCwzNS40OCA5NC43MCw2NC41MiA3Ny42Myw4OC4wMiA2Ni4xNiw3Mi4yNSIgZmlsbD0iIzZhMTcxMiIvPjxwb2x5Z29uIHBvaW50cz0iNjYuMTYsNzIuMjUgNzcuNjMsODguMDIgNTAuMDAsOTcuMDAgMjIuMzcsODguMDIgMzMuODQsNzIuMjUiIGZpbGw9IiM2OTE3MTIiLz48cG9seWdvbiBwb2ludHM9IjMzLjg0LDcyLjI1IDIyLjM3LDg4LjAyIDUuMzAsNjQuNTIgNS4zMCwzNS40OCAyMy44NSw0MS41MCIgZmlsbD0iI2FhMzIyYSIvPjxwb2x5Z29uIHBvaW50cz0iMjMuODUsNDEuNTAgNS4zMCwzNS40OCAyMi4zNywxMS45OCA1MC4wMCwzLjAwIDUwLjAwLDIyLjUwIiBmaWxsPSIjZDQ0NDNhIi8+PHBvbHlnb24gcG9pbnRzPSI1MC4wMCwyMi41MCA3Ni4xNSw0MS41MCA2Ni4xNiw3Mi4yNSAzMy44NCw3Mi4yNSAyMy44NSw0MS41MCIgZmlsbD0iI2U4NTY0YyIvPjwvc3ZnPg==") center / contain no-repeat;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  position: relative;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
}

.dados-opciones .muestra--d20 .dado i { display: none; }

.dados-opciones .muestra--d20 .dado::after {
  content: attr(data-cara);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 500 1rem/1 "IBM Plex Mono", monospace;
  color: #fdfbf7;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}