/* Dice: stage layer, flat shaded SVG polyhedra, ground shadows, total badge.
   Colours come from --die-body, --die-ink and --die-edge with dark fantasy fallbacks. */
.dice-layer { --die-b: var(--die-body, var(--die-fill, #6b1d1d)); --die-i: var(--die-ink, var(--die-num, #f3e6c4)); position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.dice-layer.in-tray { z-index: 1; }
.dice-layer.crit { --die-b: #8a6410; --die-i: #fff3c4; }
.dice-layer.fumble { --die-b: #4a1a1f; --die-i: #c9a3a3; }

.dice-layer .die-shape { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.dice-layer.on-board .die-shape { pointer-events: auto; cursor: pointer; }
.dice-layer.crit .die-shape { filter: drop-shadow(0 0 14px rgba(255, 211, 107, 0.9)); }
.dice-layer.fumble .die-shape { filter: drop-shadow(0 0 10px rgba(160, 30, 40, 0.6)); }
.die-shadow { position: absolute; left: 0; top: 0; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 70%); will-change: transform, opacity; pointer-events: none; }

/* Flat illustrated polyhedra: fill colour is set per face by dice-shapes.js */
.die-shape svg { width: 100%; height: 100%; overflow: visible; }
.die-shape .facet { stroke: rgba(10, 4, 4, 0.78); stroke-width: 1.1; stroke-linejoin: round; }
.die-shape .die-num { fill: var(--die-i); font-family: var(--font-display, serif); font-weight: 800; }
.die-shape .die-num-cut { fill: rgba(0, 0, 0, 0.55); font-family: var(--font-display, serif); font-weight: 800; }
.die-shape .die-underline { stroke: var(--die-i); stroke-width: 1.6; stroke-linecap: round; }

/* Total badge */
.dice-total { position: absolute; left: 50%; top: 50%; margin-top: 70px; transform: translateX(-50%); min-width: 120px; padding: 8px 20px 10px; text-align: center; border-radius: 16px; background: var(--panel-bg); border: 1px solid var(--gold); box-shadow: var(--shadow-2); pointer-events: auto; cursor: pointer; }
.dice-total small { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--parchment-dim); }
.dice-total b { display: block; font-family: var(--font-display); font-size: 40px; line-height: 1.1; color: var(--parchment); }
.dice-layer.crit .dice-total { border-color: #ffd36b; box-shadow: 0 0 28px rgba(255, 211, 107, 0.55); }
.dice-layer.crit .dice-total b { color: #ffd36b; }
.dice-layer.fumble .dice-total { border-color: #fb7185; }
.dice-layer.fumble .dice-total b { color: #fb7185; }