#odd-dice-overlay-root {
  position: relative;
  z-index: 2147483000;
  pointer-events: none;
}

#odd-dice-overlay-root.odd-dice-interactive {
  pointer-events: auto;
}

.odd-dice-launcher,
.odd-dice-shortcode-btn {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(160deg, #d63232, #9e1e1e);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.odd-dice-launcher {
  position: fixed;
  left: 20px;
  bottom: 20px;
}

.odd-dice-modal {
  position: fixed;
  inset: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.odd-dice-modal[hidden] {
  display: none !important;
}

.odd-dice-modal.is-open {
  opacity: 1;
  pointer-events: none;
}

#odd-dice-overlay-root.odd-dice-interactive .odd-dice-modal.is-open,
#odd-dice-overlay-root.odd-dice-interactive .odd-dice-panel,
#odd-dice-overlay-root.odd-dice-interactive .odd-dice-frame {
  pointer-events: auto;
}

.odd-dice-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  transition: background 160ms ease;
}

#odd-dice-overlay-root.odd-dice-interactive .odd-dice-backdrop {
  /* Darken page so underlying content is visible at about 0.4 opacity. */
  background: rgba(0, 0, 0, 0.6);
}

body.odd-dice-mode-active .odd-dice-undimmed:not(.od-hero-title) {
  position: relative;
  z-index: 2147483001;
}

/* Hero title stays behind the overlay/dice; dim it with the rest of the page. */
body.odd-dice-mode-active .od-hero-title {
  position: static !important;
  z-index: auto !important;
}

.odd-dice-panel {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.odd-dice-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
  opacity: 0;
  transition: opacity 140ms ease;
}

.odd-dice-frame.is-ready {
  opacity: 1;
}

.odd-dice-loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 20px;
  padding: 24px;
  color: #fff4c9;
  text-align: center;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease, visibility 0s linear 0s;
}

#odd-dice-overlay-root.odd-dice-system-ready .odd-dice-loader {
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.odd-dice-loader-sigil {
  position: relative;
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  border: 1px solid rgba(255, 222, 126, 0.72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 35%, rgba(255, 255, 255, 0.94) 0 3%, transparent 4%),
    radial-gradient(circle, rgba(95, 67, 151, 0.88) 0 22%, rgba(25, 20, 46, 0.96) 58%, rgba(7, 8, 14, 0.98) 100%);
  box-shadow:
    0 0 22px rgba(154, 113, 255, 0.64),
    0 0 54px rgba(255, 194, 79, 0.28),
    inset 0 0 20px rgba(255, 226, 146, 0.18);
  animation: odd-dice-loader-float 1.8s ease-in-out infinite;
}

.odd-dice-loader-sigil::before,
.odd-dice-loader-sigil::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

.odd-dice-loader-sigil::before {
  inset: -10px;
  border: 2px solid transparent;
  border-top-color: #ffe28a;
  border-right-color: rgba(174, 132, 255, 0.88);
  border-bottom-color: rgba(255, 226, 138, 0.28);
  animation: odd-dice-loader-spin 1.15s linear infinite;
}

.odd-dice-loader-sigil::after {
  inset: -18px;
  border: 1px dashed rgba(255, 226, 138, 0.42);
  animation: odd-dice-loader-spin-reverse 4.5s linear infinite;
}

.odd-dice-loader-glyph {
  color: #ffe9a6;
  font-size: 2.35rem;
  line-height: 1;
  text-shadow: 0 0 10px #fff, 0 0 24px rgba(255, 202, 95, 0.92);
  animation: odd-dice-loader-pulse 1.2s ease-in-out infinite;
}

.odd-dice-loader-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.055em;
  text-shadow: 0 2px 12px #000, 0 0 20px rgba(255, 206, 104, 0.5);
}

.odd-dice-close {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 5;
  display: grid;
  width: 58px;
  height: 58px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: #fff7dc;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.odd-dice-close::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 226, 138, 0.72);
  border-radius: 50%;
  background: rgba(11, 10, 16, 0.84);
  box-shadow:
    0 0 0 1px rgba(255, 226, 138, 0.18),
    0 0 22px rgba(255, 198, 88, 0.48),
    0 6px 22px rgba(0, 0, 0, 0.52),
    inset 0 0 14px rgba(132, 92, 216, 0.22);
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.odd-dice-close span {
  position: relative;
  z-index: 1;
  display: block;
  width: 20px;
  height: 20px;
  overflow: hidden;
  color: transparent;
}

.odd-dice-close span::before,
.odd-dice-close span::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 9px;
  width: 2px;
  height: 18px;
  border-radius: 999px;
  background: #fff7dc;
  box-shadow: 0 0 7px rgba(255, 226, 138, 0.72);
}

.odd-dice-close span::before {
  transform: rotate(45deg);
}

.odd-dice-close span::after {
  transform: rotate(-45deg);
}

.odd-dice-close:hover::before,
.odd-dice-close:focus-visible::before {
  border-color: #ffe48f;
  background: rgba(115, 24, 30, 0.94);
  transform: scale(1.06);
}

.odd-dice-close:focus-visible {
  outline: 2px solid #ffe48f;
  outline-offset: -3px;
  border-radius: 50%;
}

@keyframes odd-dice-loader-spin {
  to { transform: rotate(360deg); }
}

@keyframes odd-dice-loader-spin-reverse {
  to { transform: rotate(-360deg); }
}

@keyframes odd-dice-loader-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.025); }
}

@keyframes odd-dice-loader-pulse {
  0%, 100% { opacity: 0.72; transform: scale(0.88) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.08) rotate(18deg); }
}

.odd-dice-mode-toggle {
  position: fixed;
  left: 92px;
  bottom: 14px;
  border: 1px solid rgba(32, 48, 58, 0.45);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #17303f;
  background: linear-gradient(160deg, rgba(236, 250, 255, 0.95), rgba(206, 239, 249, 0.95));
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  z-index: 2147483010;
  pointer-events: auto;
}

.odd-dice-mode-toggle .odd-mode-off {
  margin-left: 6px;
  color: #ff4f4f;
  font-weight: 800;
  text-transform: uppercase;
}

.odd-dice-mode-toggle:hover {
  background: linear-gradient(160deg, rgba(247, 255, 255, 0.98), rgba(219, 247, 255, 0.98));
}

#odd-dice-overlay-root.odd-dice-interactive .odd-dice-mode-toggle {
  color: #fff7c9;
  border-color: rgba(255, 226, 117, 0.9);
  background: linear-gradient(160deg, rgba(177, 120, 0, 0.96), rgba(118, 76, 0, 0.94));
  box-shadow: 0 0 0 1px rgba(255, 226, 117, 0.42), 0 11px 26px rgba(0, 0, 0, 0.34);
}

/* Reduced motion.

   The three transitions in this file are opacity and background fades on
   the overlay, its backdrop, and the iframe. They are collapsed rather than
   removed so each element still reaches its final state - the iframe fades
   to opacity 1 and must not be left invisible. The short loading indicator
   keeps its gentle rotation so it remains visibly identifiable as a spinner. */
@media (prefers-reduced-motion: reduce) {
  .odd-dice-modal,
  .odd-dice-backdrop,
  .odd-dice-frame,
  .odd-dice-loader {
    transition-duration: 0.01ms !important;
  }

  /* The theme applies a global !important animation clamp in reduced-motion
     mode. Keep this small loading indicator visibly active as requested. */
  .odd-dice-loader-sigil {
    animation: odd-dice-loader-float 1.8s ease-in-out infinite !important;
  }

  .odd-dice-loader-sigil::before {
    animation: odd-dice-loader-spin 1.15s linear infinite !important;
  }

  .odd-dice-loader-sigil::after {
    animation: odd-dice-loader-spin-reverse 4.5s linear infinite !important;
  }

  .odd-dice-loader-glyph {
    animation: odd-dice-loader-pulse 1.2s ease-in-out infinite !important;
  }

}

.odd-dice-fab-proxy {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 2147483011;
  display: grid;
  width: 58px;
  height: 58px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(214, 92, 92, 0.78);
  border-radius: 50%;
  background: linear-gradient(145deg, #7a2222, #4a1010);
  color: #fff;
  box-shadow: 0 4px 20px rgba(114, 28, 28, 0.65);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.odd-dice-fab-icon {
  display: block;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 30px;
  line-height: 1;
}

.odd-dice-fab-proxy:hover,
.odd-dice-fab-proxy:focus-visible {
  transform: scale(1.08);
  background: linear-gradient(145deg, #8a2b2b, #5a1616);
  box-shadow: 0 6px 26px rgba(128, 34, 34, 0.74);
}

.odd-dice-fab-proxy:focus-visible {
  outline: 2px solid #ffe48f;
  outline-offset: 3px;
}

.odd-dice-fab-proxy:active {
  transform: scale(0.93);
}

#odd-dice-overlay-root.odd-dice-interactive .odd-dice-fab-proxy {
  border-color: rgba(255, 172, 172, 0.8);
  background: linear-gradient(145deg, #d73f3f, #961c1c);
  box-shadow: 0 0 0 2px rgba(255, 132, 132, 0.3), 0 8px 28px rgba(210, 46, 46, 0.7);
}

@media (max-width: 640px) {
  .odd-dice-launcher {
    left: 12px;
    bottom: 12px;
    padding: 11px 14px;
    font-size: 13px;
  }

  .odd-dice-panel {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }

  .odd-dice-mode-toggle {
    left: 91px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 10px 12px;
    font-size: 12px;
  }

  .odd-dice-fab-proxy {
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
  }

  .odd-dice-fab-icon {
    font-size: 27px;
  }

  #odd-dice-overlay-root.odd-dice-interactive .odd-dice-fab-proxy {
    top: max(8px, env(safe-area-inset-top));
    bottom: auto;
    left: max(8px, env(safe-area-inset-left));
  }

  #odd-dice-overlay-root.odd-dice-interactive .odd-dice-mode-toggle {
    top: max(13px, calc(5px + env(safe-area-inset-top)));
    bottom: auto;
    left: max(72px, calc(64px + env(safe-area-inset-left)));
  }

  .odd-dice-close {
    top: max(4px, env(safe-area-inset-top));
    right: max(4px, env(safe-area-inset-right));
    width: 50px;
    height: 50px;
  }

  .odd-dice-close::before {
    inset: 3px;
  }
}