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

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

#odd-dice-overlay-root:not(.odd-dice-system-ready) .odd-dice-mode-toggle,
#odd-dice-overlay-root:not(.odd-dice-system-ready) .odd-dice-fab-proxy {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.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-overlay-open {
  overflow: hidden;
}

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

.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-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-fab-proxy {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  z-index: 2147483009;
  pointer-events: auto;
}

#odd-dice-overlay-root.odd-dice-interactive .odd-dice-fab-proxy {
  pointer-events: none;
}

.odd-dice-modal[hidden] ~ .odd-dice-fab-proxy {
  display: none;
}

.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. No transform movement is
   involved here, so nothing else needs suppressing. */
@media (prefers-reduced-motion: reduce) {
  .odd-dice-modal,
  .odd-dice-backdrop,
  .odd-dice-frame {
    transition-duration: 0.01ms !important;
  }
}

@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: 56px;
    height: 56px;
  }
}