/* =============================================================================
   dungeon-mode.css: The dark vignette and the stacking overrides that keep
   torches, glow, and flames visible over it.
   ============================================================================= */

#dungeon-vignette {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.97);
  mask-image:
    radial-gradient(
      circle 350px at var(--cursor-x, 50%) var(--cursor-y, 50%),
      transparent 0%,
      black 75%
    ),
    radial-gradient(
    circle 500px at var(--torch-x, -9999px) var(--torch-y, -9999px),
    transparent 0%,
    black 75%
  );
  mask-composite: intersect;
  -webkit-mask-image:
    radial-gradient(
      circle 350px at var(--cursor-x, 50%) var(--cursor-y, 50%),
      transparent 0%,
      black 75%
    ),
    radial-gradient(
    circle 500px at var(--torch-x, -9999px) var(--torch-y, -9999px),
    transparent 0%,
    black 75%
  );
  -webkit-mask-composite: destination-in;
}
body.dungeon-mode #dungeon-vignette {
  display: block;
}
body.dungeon-mode #btn-timer-toggle {
  background: #f5a848;
  border-color: #f5a848;
  color: #1a1a1a;
}
body.dungeon-mode #theme-toggle:disabled {
  cursor: not-allowed;
}
body.dungeon-mode #btn-timer-toggle:hover {
  background: #a8650a;
  border-color: #a8650a;
  color: #fff;
}
body.dungeon-mode main {
  /* Break main's stacking context so torch-visual can float above the vignette */
  z-index: auto;
}
body.dungeon-mode .torch-visual {
  /* Torch visual and glow always visible above vignette */
  z-index: 15;
}
body.dungeon-mode .torch-glow {
  z-index: 15;
}
body.dungeon-mode #flame-overlay {
  z-index: 15;
}