.dice-roller[hidden] { display: none; }
.dice-roller {
  background: var(--surface-elevated);
  border: 1px solid var(--accent-gold);
  border-radius: 1.25rem;
  box-shadow: 0 24px 70px rgba(15, 35, 62, .24);
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-height: calc(100vh - 7rem);
  overflow: auto;
  padding: 1.5rem;
  position: fixed;
  right: 2rem;
  top: 5.5rem;
  width: min(31rem, calc(100vw - 3rem));
  z-index: 240;
}
.dice-roller__header { align-items: flex-start; display: flex; justify-content: space-between; gap: 1rem; }
.dice-roller__header { cursor: grab; touch-action: none; user-select: none; }
.dice-roller.is-dragging .dice-roller__header { cursor: grabbing; }
.dice-roller__kicker { color: var(--accent-gold); font-size: .75rem; font-weight: 700; letter-spacing: .14em; margin: 0 0 .25rem; text-transform: uppercase; }
.dice-roller__header h2 { color: var(--text-heading); font-family: var(--font-heading); font-size: 2rem; font-weight: 600; line-height: 1; margin: 0; }
.dice-roller__close { align-items: center; background: transparent; border: 0; border-radius: .5rem; color: var(--text-muted); cursor: pointer; display: flex; font-size: 2rem; height: 2.5rem; justify-content: center; line-height: 1; width: 2.5rem; }
.dice-roller__close:hover, .dice-roller__close:focus-visible { background: var(--surface-soft); color: var(--text-main); }
.dice-roller__dice { display: grid; gap: .65rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dice-roller__die { background: var(--surface-card); border: 1px solid var(--line-main); border-radius: .85rem; color: var(--text-main); cursor: pointer; font: inherit; min-height: 3.75rem; padding: .7rem; }
.dice-roller__die:hover { border-color: var(--accent-gold); }
.dice-roller__die.is-selected { background: #183c68; border-color: #183c68; color: #fff; }
.dice-roller__d20-modes { display: grid; gap: .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dice-roller__mode { align-items: center; background: var(--surface-card); border: 1px solid var(--accent-gold); border-radius: .75rem; color: var(--text-main); cursor: pointer; display: flex; font: inherit; font-weight: 700; gap: .5rem; justify-content: center; min-height: 3rem; padding: .65rem .8rem; }
.dice-roller__mode:hover { background: #183c68; color: #fff; }
.dice-roller__mode.is-selected { background: #183c68; border-color: #183c68; color: #fff; }
.dice-roller__mode span { font-size: 1.2em; line-height: 1; }
.dice-roller__settings { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dice-roller__settings label { color: var(--text-muted); display: grid; font-size: .9rem; gap: .45rem; }
.dice-roller__settings input { background: var(--surface-input); border: 1px solid var(--line-main); border-radius: .75rem; color: var(--text-main); font: inherit; min-width: 0; padding: .8rem; }
.dice-roller__settings input:disabled { cursor: not-allowed; opacity: .48; }
.dice-roller__result { align-content: center; background: var(--surface-soft); border: 2px solid transparent; border-radius: 1rem; box-sizing: border-box; display: grid; gap: .85rem; justify-items: center; min-height: 9.5rem; padding: 1.5rem; text-align: center; transition: background-color .16s ease, border-color .16s ease; }
.dice-roller__result.is-natural-20 { background: color-mix(in srgb, var(--surface-soft) 72%, #b9ddf3); border-color: #2f6f9f; }
.dice-roller__result.is-natural-1 { background: color-mix(in srgb, var(--surface-soft) 72%, #f3c4bf); border-color: #ad443b; }
.dice-roller__critical-label { color: #245782; font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; letter-spacing: .06em; margin: 0; text-transform: uppercase; }
.dice-roller__result.is-natural-1 .dice-roller__critical-label { color: #9b3129; }
.dice-roller__total { color: var(--text-heading); display: block; font-family: var(--font-heading); font-size: clamp(3.5rem, 8vw, 4.75rem); font-weight: 600; line-height: .9; margin: 0; }
.dice-roller__detail { color: var(--text-muted); display: block; line-height: 1.45; margin: 0; max-height: 7rem; max-width: 100%; overflow: auto; overflow-wrap: anywhere; width: 100%; }
.dice-roller__roll { align-items: center; background: #183c68; border: 1px solid var(--accent-gold); border-radius: .9rem; color: #fff; cursor: pointer; display: flex; font: inherit; gap: .75rem; justify-content: center; min-height: 4rem; padding: .9rem 1.25rem; }
.dice-roller__roll:hover { background: #214b7d; }
.dice-roller :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-gold) 65%, transparent); outline-offset: 2px; }
.wayfarer-sidebar .wayfarer-nav__link[data-dice-roller-target~="trigger"] { background: transparent !important; font-weight: 400; }
body:has(#campaign-dice-roller:not([hidden])) .wayfarer-sidebar .wayfarer-nav__link[data-dice-roller-target~="trigger"] { background: #21456f !important; font-weight: 700; }
@media (max-width: 600px) {
  .dice-roller { max-height: calc(100vh - 5rem); padding: 1.1rem; right: .75rem; top: 4rem; width: calc(100vw - 1.5rem); }
  .dice-roller__settings { grid-template-columns: 1fr; }
}