/* /dice-roller only: the dice tray and the faces. Scoped under #diceApp.
   The tumble animation is switched off by the kit's reduced-motion rule
   and the UI script skips it entirely when reduced motion is requested. */
#diceApp .dice-tray { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 18px 12px; border-radius: 16px; background: var(--bm-bg); border: 1px solid var(--bm-line); min-height: 92px; }
#diceApp .dice-die { position: relative; width: 60px; height: 60px; display: grid; place-items: center; font-weight: 800; font-size: 1.25rem; color: var(--bm-ink); font-variant-numeric: tabular-nums; }
#diceApp .dice-die .dice-shape { position: absolute; inset: 0; background: var(--bm-surface); border: 2px solid var(--bm-accent); border-radius: 12px; box-shadow: var(--bm-shadow); }
#diceApp .dice-die .dice-num { position: relative; }
#diceApp .dice-die .dice-sides { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: .68rem; font-weight: 700; color: var(--bm-ink-3); }
#diceApp .dice-die.is-d4 .dice-shape { clip-path: polygon(50% 4%, 97% 92%, 3% 92%); border-radius: 0; background: var(--bm-accent-soft); border: 0; }
#diceApp .dice-die.is-d4 .dice-num { top: 8px; }
#diceApp .dice-die.is-d8 .dice-shape, #diceApp .dice-die.is-d100 .dice-shape { clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%); border-radius: 0; background: var(--bm-accent-soft); border: 0; }
#diceApp .dice-die.is-d10 .dice-shape { clip-path: polygon(50% 2%, 98% 42%, 50% 98%, 2% 42%); border-radius: 0; background: var(--bm-accent-soft); border: 0; }
#diceApp .dice-die.is-d12 .dice-shape { clip-path: polygon(50% 2%, 98% 38%, 80% 96%, 20% 96%, 2% 38%); border-radius: 0; background: var(--bm-accent-soft); border: 0; }
#diceApp .dice-die.is-d20 .dice-shape, #diceApp .dice-die.is-dx .dice-shape { clip-path: polygon(25% 3%, 75% 3%, 99% 50%, 75% 97%, 25% 97%, 1% 50%); border-radius: 0; background: var(--bm-accent-soft); border: 0; }
#diceApp .dice-die.is-dropped { opacity: .4; }
#diceApp .dice-die.is-dropped .dice-num { text-decoration: line-through; }
#diceApp .dice-die.is-crit .dice-shape { background: var(--ic-ok-soft, var(--bm-accent-soft)); }
#diceApp .dice-die.is-fumble .dice-shape { background: var(--ic-bad-soft, var(--bm-line-2)); }
#diceApp .dice-pips { position: relative; display: grid; grid-template-columns: repeat(3, 10px); grid-template-rows: repeat(3, 10px); gap: 4px; }
#diceApp .dice-pips i { width: 10px; height: 10px; border-radius: 50%; background: transparent; }
#diceApp .dice-pips i.on { background: var(--bm-ink); }
#diceApp .dice-die.is-rolling { animation: dice-tumble .6s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes dice-tumble {
    0% { transform: translateY(-14px) rotate(-200deg) scale(.8); }
    60% { transform: translateY(3px) rotate(18deg) scale(1.04); }
    100% { transform: none; }
}
#diceApp .dice-breakdown { margin: 0; font-family: var(--xt-mono); font-size: .9rem; color: var(--bm-ink-2); overflow-wrap: anywhere; }
#diceApp .dice-seg span { min-width: 44px; text-align: center; }
#diceApp .dice-roll { min-width: 140px; }
@media (forced-colors: active) {
    #diceApp .dice-die .dice-shape { border: 2px solid CanvasText; clip-path: none; border-radius: 12px; }
    #diceApp .dice-pips i.on { background: CanvasText; }
}
@media (prefers-reduced-motion: reduce) { #diceApp .dice-die.is-rolling { animation: none; } }