/* Bleak Forest Engine – Dice Roller styles
   Loaded after CSS/styles.css. Text and background colours inherit from the site stylesheet;
   only the dice carry their own colours (the custom properties on .roller below). */

.roller { --bone: #e9e0cb; --bone-shade: #cfc3a6; --ink: #1f1a16; --edge: #3a2f27;
          --wyrd: #6e1616; --wyrd-shade: #4d0f0f; --wyrd-ink: #f1e7d3;
          --crit: #d9a441; --fumble: #a3241f; }

.roller-panel { display: grid; gap: 1.2em; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
                margin: 1.5em 0; }
.roller-field { display: flex; flex-direction: column; gap: 0.4em; }
.roller-field > label, .roller-field > .label { font-weight: bold; }
.stepper { display: inline-flex; align-items: center; gap: 0.5em; }
.stepper output { min-width: 1.6em; text-align: center; font-size: 1.4em; font-weight: bold; }
.roller button, .roller select, .roller input[type="number"] {
    font: inherit; color: inherit; background: transparent;
    border: 1px solid currentColor; border-radius: 4px; padding: 0.35em 0.7em; }
.roller select option { color: #1f1a16; background: #f4efe4; }
.roller input[type="number"] { width: 5em; }
.roller button { cursor: pointer; }
.roller button:hover, .roller button:focus-visible { background: rgba(127,127,127,0.15); }
.roller button:disabled { opacity: 0.4; cursor: default; }
.stepper button { width: 2.2em; height: 2.2em; padding: 0; font-size: 1.1em; }
.check-row { display: flex; align-items: center; gap: 0.5em; }
.check-row input { width: 1.1em; height: 1.1em; }
.presets { display: flex; flex-wrap: wrap; gap: 0.5em; }
.presets button { font-size: 0.9em; }

.roll-button { display: block; margin: 0.5em auto 1.5em; font-size: 1.3em !important;
               padding: 0.6em 2.2em !important; letter-spacing: 0.08em; text-transform: uppercase;
               border-width: 2px !important; }

.tray { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.2em;
        min-height: 140px; padding: 1.5em 1em; border: 1px solid rgba(127,127,127,0.4); border-radius: 8px;
        background: rgba(0,0,0,0.12); }
.tray-empty { opacity: 0.6; font-style: italic; }
.die { width: 96px; height: 96px; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.45)); transition: filter 0.3s; }
.die.d20 { width: 110px; height: 110px; }
.die svg { width: 100%; height: 100%; display: block; overflow: visible; }
.die.rolling { animation: tumble 0.65s cubic-bezier(.3,.6,.4,1); }
.die.nat-max { filter: drop-shadow(0 0 10px var(--crit)) drop-shadow(0 4px 4px rgba(0,0,0,0.45)); }
.die.nat-one { filter: drop-shadow(0 0 10px var(--fumble)) drop-shadow(0 4px 4px rgba(0,0,0,0.45)); }
@keyframes tumble {
    0%   { transform: translate(-30px, -18px) rotate(-200deg) scale(0.85); }
    40%  { transform: translate(12px, 6px) rotate(40deg) scale(1.05); }
    70%  { transform: translate(-4px, -2px) rotate(-12deg) scale(0.98); }
    100% { transform: translate(0, 0) rotate(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .die.rolling { animation: none; } }

.results { margin: 1.2em 0; min-height: 3em; }
.results h3 { margin: 0.8em 0 0.3em; }
.verdict { font-size: 1.25em; font-weight: bold; }
.verdict.crit { color: var(--crit); }
.verdict.fumble { color: var(--fumble); }
.result-line { margin: 0.25em 0; }
.history { font-size: 0.92em; }
.history ol { padding-left: 1.4em; }
.history li { margin-bottom: 0.3em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 600px) {
    .die { width: 76px; height: 76px; }
    .die.d20 { width: 88px; height: 88px; }
    .tray { gap: 0.8em; }
}