/* <!-- кубики · notacross | legume --> */
/* В духе быстрой правки: без обводок, полупрозрачные заливки от цвета
 * текста, акцент — из темы (--acc2, тройка чисел), иначе нейтральный.
 * Правьте свободно: всё оформление кубиков только в этом файле. */

.rsd, .rsd-modal {
  --rsd-acc: 168 129 122;
  --rsd-fill: rgba(127,127,127,.08);
  --rsd-fill-hi: rgba(127,127,127,.14);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .rsd, .rsd-modal {
    --rsd-acc: var(--acc2, 168 129 122);
    --rsd-fill: color-mix(in srgb, currentColor 6%, transparent);
    --rsd-fill-hi: color-mix(in srgb, currentColor 11%, transparent);
  }
}

/* ---------- плашка в посте ---------- */
.rsd {
  display: inline-flex; align-items: center; gap: 7px;
  vertical-align: middle; margin: 1px 2px;
  padding: 3px 11px 3px 8px; border-radius: 999px;
  background: var(--rsd-fill);
  font-size: .92em; line-height: 1.5; white-space: nowrap;
  animation: rsd-in .25s ease-out;
}
@keyframes rsd-in { from { opacity: 0; transform: translateY(2px); } }
.rsd-ico { width: 1.15em; height: 1.15em; flex: none; color: rgb(var(--rsd-acc)); }
.rsd-not { opacity: .55; font-size: .9em; letter-spacing: .02em; }
.rsd-vals { display: inline-flex; gap: 4px; }
.rsd-v {
  min-width: 1.6em; padding: 0 5px; border-radius: 7px; text-align: center;
  background: var(--rsd-fill-hi);
  font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background .3s, color .3s, transform .25s;
}
.rsd.is-rolling .rsd-v:not(.is-set) { opacity: .5; }
.rsd-v.is-set { animation: rsd-pop .28s ease-out; }
@keyframes rsd-pop { 40% { transform: scale(1.18); } }
.rsd-v.is-max { background: rgb(var(--rsd-acc) / .22); color: rgb(var(--rsd-acc)); }
.rsd-v.is-min { opacity: .5; }
.rsd-sum { font-weight: 700; font-variant-numeric: tabular-nums; }
.rsd-sum::before { content: "="; margin-right: 6px; font-weight: 400; opacity: .45; }
.rsd-warn { opacity: .5; cursor: help; }
.rsd.is-crit { box-shadow: 0 0 0 1px rgb(var(--rsd-acc) / .35); }
.rsd.is-crit .rsd-ico { animation: rsd-glow 2.4s ease-in-out infinite; }
@keyframes rsd-glow { 50% { opacity: .5; } }

.rsd-note { opacity: .5; font-size: .9em; font-style: italic; }
.rsd.is-pending, .rsd.is-quoted { background: transparent; box-shadow: inset 0 0 0 1px var(--rsd-fill-hi); }
.rsd.is-quoted { opacity: .6; }
.rsd-dots { display: inline-flex; gap: 3px; }
.rsd-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .3; animation: rsd-dot 1s infinite; }
.rsd-dots i:nth-child(2) { animation-delay: .15s; }
.rsd-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes rsd-dot { 40% { opacity: .8; } }

/* ---------- кнопка в форме ответа ---------- */
#button-dice { cursor: pointer; }
.rsd-fbtn { display: inline-flex; padding: 2px; opacity: .75; transition: opacity .15s, transform .25s; }
.rsd-fbtn .rsd-ico { width: 18px; height: 18px; color: currentColor; }
#button-dice:hover .rsd-fbtn { opacity: 1; transform: rotate(-18deg); }
/* тема сама ставит material-иконку по id кнопки — тогда наш svg не нужен */
#button-dice:has(.material-icons) .rsd-fbtn { display: none; }

/* ---------- окошко ---------- */
.rsd-modal {
  display: none; position: fixed; inset: 0; z-index: 100002;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(0,0,0,.28);
}
.rsd-modal.is-open { display: flex; animation: rsd-in .18s ease-out; }
.rsd-box {
  width: 100%; max-width: 340px; box-sizing: border-box;
  padding: 18px 20px 16px; border-radius: 16px;
  background: #fff; color: #2b2b2b;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  font-size: 13px;
}
.rsd-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-weight: 600; font-size: 1.08em; }
.rsd-head .rsd-ico { width: 20px; height: 20px; }
.rsd-x { margin-left: auto; border: 0; background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .45; }
.rsd-x:hover { opacity: .9; }
.rsd-lbl { margin: 12px 0 6px; font-size: .86em; opacity: .5; }
.rsd-faces { display: flex; flex-wrap: wrap; gap: 5px; }
.rsd-face, .rsd-sbtn, .rsd-btn, .rsd-in {
  font: inherit; color: inherit; border: 0; border-radius: 9px;
  background: var(--rsd-fill); transition: background .15s, color .15s;
}
.rsd-face, .rsd-sbtn, .rsd-btn { cursor: pointer; }
.rsd-face { padding: 5px 9px; }
.rsd-face:hover, .rsd-sbtn:hover, .rsd-btn:hover { background: var(--rsd-fill-hi); }
.rsd-face.is-on { background: rgb(var(--rsd-acc) / .2); color: rgb(var(--rsd-acc)); font-weight: 600; }
.rsd-in { width: 58px; padding: 5px 8px; text-align: center; outline: none; -moz-appearance: textfield; }
.rsd-in::-webkit-inner-spin-button, .rsd-in::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rsd-in:focus { box-shadow: inset 0 0 0 1px rgb(var(--rsd-acc) / .45); }
.rsd-step { display: inline-flex; gap: 5px; }
.rsd-sbtn { width: 30px; }
.rsd-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.rsd-hint { flex: 1 1 100%; font-size: .84em; opacity: .42; margin-bottom: 2px; }
.rsd-btn { padding: 7px 14px; }
.rsd-cancel { margin-left: auto; background: none; opacity: .6; }
.rsd-go { background: rgb(var(--rsd-acc)); color: #fff; font-weight: 600; }
.rsd-go:hover { background: rgb(var(--rsd-acc)); filter: brightness(1.08); }
.rsd-go-not { font-weight: 400; opacity: .8; margin-left: 2px; }

@media (prefers-reduced-motion: reduce) {
  .rsd, .rsd *, .rsd-modal { animation: none !important; transition: none !important; }
}