.app {
  isolation: isolate;
  background: #075f93;
}

.babylon-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: none;
  outline: none;
  opacity: 1;
}

.app::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, rgba(13, 137, 210, 0.02) 0, rgba(0, 40, 75, 0.12) 58%, rgba(0, 20, 42, 0.42) 100%),
    linear-gradient(180deg, rgba(4, 66, 105, 0.16) 0%, rgba(2, 50, 83, 0.26) 100%);
  opacity: 0.66;
  transition: opacity 900ms ease;
}

body[data-background-state="slider"] .app::after {
  opacity: 0.38;
}

body[data-background-state="general"] .app::after {
  opacity: 0.66;
}

.main-screen {
  z-index: 2;
  background: transparent;
}

.content-page {
  background: transparent;
}

.content-page::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: rgba(0, 50, 84, 0.28);
  backdrop-filter: blur(2px);
}

.content-page-container {
  background: rgba(0, 58, 96, 0.5);
  backdrop-filter: blur(12px);
}

.overlay.menu-overlay {
  background: rgba(3, 61, 99, 0.68);
  backdrop-filter: blur(12px);
}

.info-overlay {
  background: rgba(3, 56, 92, 0.58);
  backdrop-filter: blur(9px);
}

.info-panel {
  background: rgba(11, 157, 244, 0.84);
  backdrop-filter: blur(14px);
}

.topbar,
.content-page,
.overlay,
.app-version {
  position: absolute;
}

.babylon-background-unavailable .app {
  background:
    radial-gradient(circle at 50% 45%, rgba(27, 149, 218, 0.22), transparent 45%),
    linear-gradient(180deg, #075f93 0%, #08689d 100%);
}

@media (prefers-reduced-motion: reduce) {
  .app::after {
    transition: none;
  }
}