/* Manual dice tray: shared by editable and read-only D&D sheets. */
.dice-tray-toggle {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 60;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 11px;
  border: 1px solid #f4d99b;
  border-radius: 14px;
  background: #c9a361;
  color: #142a2e;
  box-shadow: 0 4px 20px #0006;
  cursor: pointer;
  touch-action: manipulation;
}
.dice-tray-toggle svg { width: 28px; height: 28px; }
.dice-tray-toggle:hover { background: #f0cc87; }
.dice-tray-toggle:active { background: #b18e53; }
.dice-tray[popover] {
  position: fixed;
  inset: auto max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) auto;
  width: 280px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  margin: 0;
  padding: 12px;
  overflow-y: auto;
  border: 1px solid #8b7953;
  border-radius: 16px;
  background: #142b31;
  color: #f3f3e9;
  font: 14px/1.4 system-ui, sans-serif;
  color-scheme: dark;
  box-shadow: 0 12px 48px #0009, inset 0 1px #f0c87922;
}
.dice-tray::backdrop { background: transparent; }
.dice-tray-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.dice-tray-header h2 { margin: 0; color: #f0c879; font: 400 23px/1.2 Georgia, serif; }
.dice-tray-close {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  margin: -6px -6px -6px 0; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: #bdcdd0; font: 28px/1 system-ui, sans-serif; cursor: pointer;
}
.dice-tray-close:hover { color: #fff1cc; background: #29444a; }
.dice-tray-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dice-tray-die {
  --die-color: #b8d4e3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; min-height: 60px; padding: 7px 3px;
  border: 1px solid color-mix(in srgb, var(--die-color) 45%, #263b40);
  border-radius: 10px; background: color-mix(in srgb, var(--die-color) 10%, #10272d);
  color: var(--die-color); font: 650 11px/1.2 system-ui, sans-serif; cursor: pointer; touch-action: manipulation;
}
.dice-tray-die[data-sides="4"] { --die-color: #ffac95; }
.dice-tray-die[data-sides="6"] { --die-color: #8ddda5; }
.dice-tray-die[data-sides="8"] { --die-color: #f1d18c; }
.dice-tray-die[data-sides="10"] { --die-color: #9ed5ff; }
.dice-tray-die[data-sides="100"] { --die-color: #c7b0f5; }
.dice-tray-die[data-sides="12"] { --die-color: #f1afd0; }
.dice-tray-die[data-sides="20"] { --die-color: #f0c879; }
.dice-tray-die svg { display: block; width: 25px; height: 25px; }
.dice-tray-die:hover { background: color-mix(in srgb, var(--die-color) 22%, #10272d); border-color: var(--die-color); }
.dice-tray-die:active { transform: translateY(1px); }
.dice-tray-result { margin-top: 10px; padding: 10px; border: 1px solid #36565b; border-radius: 10px; background: #0d2026; }
.dice-tray-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.dice-tray-formula { min-width: 0; overflow-wrap: anywhere; color: #c4d7db; font: 12px/1.5 ui-monospace, monospace; }
.dice-tray-total { color: #f8d492; font-size: 32px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dice-tray-group { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin-top: 6px; }
.dice-tray-group-label { color: #9fbac1; font: 10px/1.5 ui-monospace, monospace; }
.dice-tray-values { display: flex; flex-wrap: wrap; gap: 4px; }
.dice-tray-value { display: inline-grid; place-items: center; min-width: 25px; padding: 3px 5px; border: 1px solid #6c927d; border-radius: 5px; background: #204539; color: #c0f4d5; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.dice-tray-value.is-discarded { color: #a7b8bd; border-color: #3d535a; background: #1a2e35; text-decoration-thickness: 2px; }
.dice-tray-modifier { margin: 8px 0 0; color: #c6d4d7; font-size: 11px; }
.dice-tray-form { display: flex; align-items: stretch; gap: 6px; margin-top: 10px; }
.dice-tray-input { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid #66858d; border-radius: 9px; background: #0c1d22; color: #f3f3e9; font: 16px/1.3 ui-monospace, monospace; }
.dice-tray-input::placeholder { color: #9cbbc3; opacity: 1; }
.dice-tray-input[aria-invalid="true"] { border-color: #ff9b89; }
.dice-tray-submit { display: grid; place-items: center; flex: none; width: 44px; min-height: 44px; padding: 0; border: 1px solid #f4d99b; border-radius: 9px; background: #f0c879; color: #172525; font: 24px/1 system-ui, sans-serif; cursor: pointer; }
.dice-tray-submit:hover { background: #ffe1a3; }
.dice-tray-error { margin: 9px 0 0; color: #ffb8a9; font-size: 12px; line-height: 1.5; }
.dice-tray :is(button, input):focus-visible, .dice-tray-toggle:focus-visible { outline: 2px solid #ffda88; outline-offset: 2px; }
@media (max-width: 359px) {
  .dice-tray[popover] { width: 272px; }
}
@media (prefers-reduced-motion: reduce) {
  .dice-tray-die:active { transform: none; }
}
@media (forced-colors: active) {
  .dice-tray-die, .dice-tray-value, .dice-tray-submit, .dice-tray-toggle { border: 1px solid ButtonText; }
  .dice-tray-value.is-discarded { border-style: dashed; }
}