.dice-roller { color: #e3dccb; background: #14171a; border: 1px solid #6a5541; margin: 2rem auto; padding: 1rem; max-width: 960px; width: calc(100% - 2rem); box-sizing: border-box; }
.dice-roller summary { cursor: pointer; font: 1.6rem 'Big Shoulders Display', sans-serif; }
.dice-roller details[open] summary { margin-bottom: 1rem; }
.dice-form { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; }
.dice-form label { flex: 1; min-width: 160px; }
.dice-roller button, #sequenceRoll3d { background: #702d23; color: #fff0d5; border: 1px solid #b77853; padding: .65rem 1rem; cursor: pointer; }
.dice-roller input { background: #0c1014; color: #e3dccb; border: 1px solid #6a5541; padding: .5rem; width: 100%; box-sizing: border-box; }
.dice-roller :focus-visible, #sequenceRoll3d:focus-visible { outline: 3px solid #e7bb79; outline-offset: 3px; }
.dice-roller button:disabled, #sequenceRoll3d:disabled { opacity: .55; cursor: wait; }
/* A transparent full-visible-viewport physics layer, not a popup. All hits pass to the page. */
.dice-overlay { position: fixed; left: 0; top: 0; width: 100vw; height: 100dvh; overflow: hidden; z-index: 1000; visibility: hidden; opacity: 1; pointer-events: none; background: transparent; border: 0; padding: 0; box-shadow: none; }
.dice-overlay.is-open { visibility: visible; }
.dice-overlay.is-open.is-fading { opacity: 0; transition: opacity 600ms ease; }
#nyra-dice-stage { position: absolute; width: 100%; height: 100%; background: transparent; pointer-events: none; }
#nyra-dice-stage canvas { width: 100%; height: 100%; display: block; background: transparent; pointer-events: none; }
.dice-anchor-status { display: block; font-weight: bold; overflow-wrap: anywhere; margin-top: .4rem; }
.dice-status { font-weight: bold; overflow-wrap: anywhere; }
.dice-history { max-height: 260px; overflow: auto; padding-left: 1.5rem; }
.dice-history li { padding: .4rem; overflow-wrap: anywhere; border-bottom: 1px solid #343033; }
.dice-storage, #dice-help { font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .dice-roller { scroll-behavior: auto; } .dice-overlay.is-open.is-fading { transition: none; } }
