/* ============================================================
   dice.css — animated duality dice, themed to the umbra grimoire.
   Companion to dice.js. Hope die = gilt/gold, Fear die = umbral
   violet; advantage/disadvantage d6 are plain tiles.
   ============================================================ */
.dice-stage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dice-gap, 10px); }

.dice-die {
  width: var(--dice-size, 52px); height: var(--dice-size, 52px);
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--caps, "Cinzel", Georgia, serif);
  font-size: calc(var(--dice-size, 52px) * 0.42); font-weight: 700; line-height: 1;
  border: 1px solid var(--edge, #3b4653);
  background: var(--slate-2, #1c242e); color: var(--bone, #d7d2c4);
  position: relative; will-change: transform; user-select: none; flex: 0 0 auto;
}

.dice-die.rolling { animation: dice-tumble 0.5s linear infinite; }
@keyframes dice-tumble {
  0%   { transform: translateY(0)    rotate(0deg); }
  25%  { transform: translateY(-5px) rotate(-13deg); }
  50%  { transform: translateY(0)    rotate(11deg); }
  75%  { transform: translateY(-3px) rotate(-7deg); }
  100% { transform: translateY(0)    rotate(0deg); }
}
.dice-die.settling { animation: dice-settle 0.34s cubic-bezier(.2,1.5,.4,1); }
@keyframes dice-settle {
  0% { transform: scale(0.7); } 60% { transform: scale(1.14); } 100% { transform: scale(1); }
}

/* the die that "won" the pair (higher) gets a glow */
.dice-die.high { box-shadow: 0 0 14px rgba(150,180,200,0.35); }

/* ---- d12 (pentagon) shape --------------------------------- */
/* transparent box + no box-shadow: the die's glow comes from a drop-shadow
   on the polygon (which follows the pentagon), not a square box-shadow. */
.dice-die.shape-d12 { background: transparent !important; border: none !important; box-shadow: none !important; overflow: visible; }
.dice-die.shape-d12 .dice-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dice-die.shape-d12 .dice-poly {
  fill: var(--slate-2, #1c242e); stroke: var(--edge, #3b4653);
  stroke-width: 4; stroke-linejoin: round;
}
.dice-die.shape-d12 .dice-facet { fill: none; stroke: var(--edge, #3b4653); stroke-width: 1.4; opacity: 0.4; }
.dice-die.shape-d12 .dice-num {
  position: absolute; left: 0; right: 0; top: 60%; transform: translateY(-50%);
  text-align: center; line-height: 1;
}

/* Hope die — gilt/gold */
.dice-die.hope.shape-d12 .dice-poly { fill: rgba(179,154,99,0.20); stroke: var(--gilt, #b39a63); }
.dice-die.hope { color: var(--gilt, #b39a63); }
.dice-die.hope.high.shape-d12 .dice-poly { fill: rgba(179,154,99,0.34); filter: drop-shadow(0 0 4px rgba(179,154,99,0.9)); }

/* Fear die — umbral violet */
.dice-die.fear.shape-d12 .dice-poly { fill: rgba(109,111,154,0.22); stroke: var(--umbra, #6d6f9a); }
.dice-die.fear { color: #b9bae0; }
.dice-die.fear.high.shape-d12 .dice-poly { fill: rgba(109,111,154,0.40); filter: drop-shadow(0 0 4px rgba(159,161,214,0.9)); }

/* crit — matched dice */
.dice-die.crit.shape-d12 .dice-poly { stroke: var(--moon-lit, #d2e2ec); stroke-width: 6; }
.dice-die.crit { color: var(--moon-lit, #d2e2ec); }

/* advantage / disadvantage d6 (plain tiles) */
.dice-die.adv { background: rgba(159,180,194,0.14); border-color: var(--moon, #9fb4c2); color: var(--moon-lit, #d2e2ec); }
.dice-die.dis { background: rgba(154,70,61,0.16); border-color: var(--blood, #9a463d); color: #d9a49c; }

@media (prefers-reduced-motion: reduce) {
  .dice-die.rolling, .dice-die.settling { animation: none; }
}