/* Dadomancia — 3 dados D6 con caras renderizadas en CSS (grid 3×3 de pips). */

.dado-page { color: #f5ecd2; }
.dado-header { text-align: center; margin-bottom: 1.4rem; }
.dado-header h1 {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: #ffd9a8;
  text-shadow: 0 0 16px rgba(255,217,168,0.55);
  margin: 0 0 .6rem;
}
.dado-intro {
  max-width: 60ch;
  margin: 0 auto;
  color: rgba(245,236,210,0.85);
  line-height: 1.55;
}

.dado-app {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

/* ---------- Dice stage ---------- */
.dado-stage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  width: 100%;
  max-width: 460px;
  perspective: 800px;
}

.dado {
  aspect-ratio: 1;
  position: relative;
  transform-style: preserve-3d;
}

.dado-face {
  width: 100%;
  height: 100%;
  border-radius: 14%;
  background: linear-gradient(160deg, #fff8e8 0%, #e8d8b4 100%);
  border: 1px solid rgba(120,90,40,0.55);
  box-shadow:
    inset 0 -4px 0 rgba(120,90,40,0.18),
    inset 0 3px 0 rgba(255,255,255,0.7),
    inset 0 0 0 1px rgba(255,255,255,0.5),
    0 10px 22px rgba(0,0,0,0.45),
    0 2px 4px rgba(0,0,0,0.25);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 14%;
  box-sizing: border-box;
  color: #2a1a0a;
}

.dado-pip {
  width: 78%;
  height: 78%;
  align-self: center;
  justify-self: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #555 0%, #1a0e04 70%, #000 100%);
  box-shadow: inset -1px -1px 2px rgba(255,255,255,0.25);
  opacity: 0;
}

/* Pip positions in 3x3 grid (column,row indexed 1..3) */
.dado-pip--1 { grid-area: 1 / 1; }
.dado-pip--2 { grid-area: 1 / 2; }
.dado-pip--3 { grid-area: 1 / 3; }
.dado-pip--4 { grid-area: 2 / 1; }
.dado-pip--5 { grid-area: 2 / 2; }
.dado-pip--6 { grid-area: 2 / 3; }
.dado-pip--7 { grid-area: 3 / 1; }
.dado-pip--8 { grid-area: 3 / 2; }
.dado-pip--9 { grid-area: 3 / 3; }

/* Face visibility per value:
   1 → center (5)
   2 → top-left (1) + bottom-right (9)
   3 → 1, 5, 9
   4 → 1, 3, 7, 9
   5 → 1, 3, 5, 7, 9
   6 → 1, 3, 4, 6, 7, 9 */
.dado[data-face="1"] .dado-pip--5 { opacity: 1; }
.dado[data-face="2"] .dado-pip--1,
.dado[data-face="2"] .dado-pip--9 { opacity: 1; }
.dado[data-face="3"] .dado-pip--1,
.dado[data-face="3"] .dado-pip--5,
.dado[data-face="3"] .dado-pip--9 { opacity: 1; }
.dado[data-face="4"] .dado-pip--1,
.dado[data-face="4"] .dado-pip--3,
.dado[data-face="4"] .dado-pip--7,
.dado[data-face="4"] .dado-pip--9 { opacity: 1; }
.dado[data-face="5"] .dado-pip--1,
.dado[data-face="5"] .dado-pip--3,
.dado[data-face="5"] .dado-pip--5,
.dado[data-face="5"] .dado-pip--7,
.dado[data-face="5"] .dado-pip--9 { opacity: 1; }
.dado[data-face="6"] .dado-pip--1,
.dado[data-face="6"] .dado-pip--3,
.dado[data-face="6"] .dado-pip--4,
.dado[data-face="6"] .dado-pip--6,
.dado[data-face="6"] .dado-pip--7,
.dado[data-face="6"] .dado-pip--9 { opacity: 1; }

/* Idle: tiny wobble */
.dado-app[data-state="ready"] .dado { animation: dado-idle 5s ease-in-out infinite; }
.dado--1 { animation-delay: 0s; }
.dado--2 { animation-delay: 0.6s; }
.dado--3 { animation-delay: 1.1s; }
@keyframes dado-idle {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(3deg)  translateY(-3px); }
}

/* Rolling: shake/spin animation */
.dado-app[data-state="rolling"] .dado {
  animation: dado-shake 1.4s cubic-bezier(.4,.05,.4,1) forwards;
}
.dado-app[data-state="rolling"] .dado--1 { animation-delay: 0s; }
.dado-app[data-state="rolling"] .dado--2 { animation-delay: 0.1s; }
.dado-app[data-state="rolling"] .dado--3 { animation-delay: 0.2s; }
@keyframes dado-shake {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  20%  { transform: translateY(-22px) rotate(180deg) scale(1.05); }
  40%  { transform: translateY(8px)   rotate(420deg) scale(.95); }
  60%  { transform: translateY(-12px) rotate(720deg) scale(1.08); }
  80%  { transform: translateY(4px)   rotate(900deg) scale(.97); }
  100% { transform: translateY(0)     rotate(1080deg) scale(1); }
}

/* While rolling, the pip face quickly shifts */
.dado-app[data-state="rolling"] .dado-face {
  animation: dado-flash 0.12s steps(2) infinite;
}
@keyframes dado-flash {
  from { filter: brightness(1); }
  to   { filter: brightness(1.12); }
}

/* ---------- Controls ---------- */
.dado-controls { width: 100%; }
.dado-form {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  align-items: stretch;
}
.dado-label {
  font-size: .9rem;
  color: rgba(245,236,210,0.75);
  text-align: center;
}
.dado-input {
  width: 100%;
  padding: .8rem 1rem;
  background: rgba(20,12,5,0.55);
  border: 1px solid rgba(255,217,168,0.4);
  border-radius: 10px;
  color: #f5ecd2;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
}
.dado-input:focus {
  outline: none;
  border-color: rgba(255,217,168,0.85);
  box-shadow: 0 0 0 3px rgba(255,217,168,0.2);
}
.dado-input::placeholder { color: rgba(245,236,210,0.45); }
.dado-roll, .dado-restart {
  align-self: center;
  padding: .7rem 1.8rem;
  font-family: 'Cinzel', 'Times New Roman', serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dado-app[data-state="rolling"] .dado-roll,
.dado-app[data-state="rolling"] .dado-input { opacity: .55; pointer-events: none; }

/* ---------- Result ---------- */
.dado-result {
  width: 100%;
  text-align: center;
  background: linear-gradient(160deg, rgba(60,40,12,0.55), rgba(20,12,4,0.4));
  border: 1px solid rgba(255,217,168,0.4);
  border-radius: 16px;
  padding: 1.4rem 1.2rem 1rem;
  box-shadow: 0 14px 28px rgba(0,0,0,0.45);
  animation: dado-reveal .55s ease-out;
}
@keyframes dado-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dado-result-question {
  font-style: italic;
  color: rgba(245,236,210,0.7);
  margin: 0 0 1rem;
}
.dado-result-question:empty { display: none; }

.dado-sum {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  font-family: 'Cinzel', serif;
  margin-bottom: .8rem;
}
.dado-sum-label {
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(245,236,210,0.6);
}
.dado-sum-value {
  font-size: 2.4rem;
  color: #ffd9a8;
  text-shadow: 0 0 14px rgba(255,217,168,0.55);
}

.dado-verdict {
  display: inline-block;
  padding: .55rem 1.4rem;
  border-radius: 999px;
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1rem;
}
.dado-result[data-verdict="si"]  .dado-verdict {
  background: linear-gradient(160deg, #1c5a2a, #0a2a12);
  color: #c0ffce;
  border: 1px solid rgba(160,255,180,0.5);
  box-shadow: 0 0 18px rgba(60,180,80,0.45);
}
.dado-result[data-verdict="no"]  .dado-verdict {
  background: linear-gradient(160deg, #6a1818, #2a0606);
  color: #ffcaca;
  border: 1px solid rgba(255,160,160,0.5);
  box-shadow: 0 0 18px rgba(200,60,60,0.45);
}
.dado-result[data-verdict="tie"] .dado-verdict {
  background: linear-gradient(160deg, #4a3a18, #1a1408);
  color: #ffe1a8;
  border: 1px solid rgba(255,225,168,0.5);
  box-shadow: 0 0 18px rgba(255,225,168,0.4);
}

.dado-interpretation {
  color: #f5ecd2;
  line-height: 1.6;
  margin: 0 0 1.2rem;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

.dado-error { color: #ff9999; text-align: center; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .dado-app[data-state="ready"]   .dado,
  .dado-app[data-state="rolling"] .dado,
  .dado-app[data-state="rolling"] .dado-face { animation: none; }
  .dado-result { animation: none; }
}

@media (max-width: 520px) {
  .dado-stage { max-width: 320px; gap: .7rem; }
  .dado-sum-value { font-size: 1.8rem; }
}