/* v52 �complete fixed wallpapers, with foreground UI kept above the material layer. */
html[data-background="prism-mono"] {
  --onlyshows-wallpaper-desktop: url("./assets/backgrounds/light-blur-desktop.webp");
  --onlyshows-wallpaper-mobile: url("./assets/backgrounds/light-blur-mobile.webp");
  --onlyshows-wallpaper-base: #d8d4cb;
}

html[data-background="prism-violet"] {
  --onlyshows-wallpaper-desktop: url("./assets/backgrounds/dark-blur-desktop.webp");
  --onlyshows-wallpaper-mobile: url("./assets/backgrounds/dark-blur-mobile.webp");
  --onlyshows-wallpaper-base: #111210;
}

html[data-background="prism-mono"],
html[data-background="prism-violet"] {
  background: var(--onlyshows-wallpaper-base);
}

html[data-background="prism-mono"] body,
html[data-background="prism-violet"] body {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

html[data-background="prism-mono"] body::before,
html[data-background="prism-mono"] body::after,
html[data-background="prism-violet"] body::before,
html[data-background="prism-violet"] body::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.theme-backdrop {
  display: none;
}

html[data-background="prism-mono"] body > .theme-backdrop,
html[data-background="prism-violet"] body > .theme-backdrop {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100lvh !important;
  min-height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  background-color: var(--onlyshows-wallpaper-base) !important;
  background-image: var(--onlyshows-wallpaper-desktop) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}

.background-preview-mono {
  background: #d8d4cb url("./assets/backgrounds/light-blur-mobile.webp") center / cover no-repeat !important;
}

.background-preview-violet {
  background: #111210 url("./assets/backgrounds/dark-blur-mobile.webp") center / cover no-repeat !important;
}

@media (max-width: 719px) {
  html[data-background="prism-mono"] body > .theme-backdrop,
  html[data-background="prism-violet"] body > .theme-backdrop {
    background-image: var(--onlyshows-wallpaper-mobile) !important;
  }

  html body .mobile-bottom-nav,
  html body .mobile-bottom-nav.is-scroll-hidden {
    display: grid !important;
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(7px + env(safe-area-inset-bottom)) !important;
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1200 !important;
  }
}