/* ================================================================
   SMOOTH JAZZ BLAST — WEBSITE VISUAL STABILITY
   Prevents startup flashes and full-screen compositor flicker.
================================================================ */

:root {
  color-scheme: dark;
  background-color: #05010d;
}

html {
  min-height: 100%;
  background:
    radial-gradient(circle at 50% 0%, #17072b 0, #080214 46%, #030008 100%);
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background-color: #05010d;
  isolation: isolate;
}

/*
 * Keep the page hidden only during the initial document boot.
 * This prevents the unstyled/default white frame before CSS and JS finish.
 */
html.sjb-visual-booting body {
  visibility: hidden !important;
}

/*
 * Prevent Chrome/Safari from repeatedly promoting and demoting the
 * full-viewport background layers while scrolling or changing screens.
 */
.world-bg,
.world-vignette,
.world-stars {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform-origin: center center;
  contain: paint;
}

/*
 * The previous full-screen starDrift transform could cause a complete-page
 * flash on some browsers and GPUs. Keep the stars but stop moving the
 * entire fixed layer.
 */
.world-stars {
  animation: none !important;
  will-change: auto !important;
}

/*
 * Stabilize the primary application layers.
 */
.app,
.shell,
.topbar,
.bottom-nav,
.screen,
.game-screen,
.world-map,
.board {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/*
 * Large translucent/frosted fixed surfaces sometimes flicker when the
 * browser recomposites them. Give them isolated paint surfaces.
 */
.modal,
.modal-card,
.settings-scrim,
.settings-panel,
.checkout-security-modal,
.checkout-security-card,
.auth-entry-overlay,
.auth-entry-card,
.toast {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

/*
 * Avoid unwanted flashes caused by the browser tap highlight.
 */
button,
a,
input,
select,
textarea,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/*
 * Prevent image placeholders from briefly showing a light background.
 */
img,
video,
canvas,
svg {
  background-color: transparent;
}

/*
 * Hide broken-image text/layout flashes while images decode.
 */
img {
  color: transparent;
}

/*
 * Browser-specific fallback for devices that struggle with full-screen
 * backdrop filtering.
 */
@media (max-width: 720px), (hover: none) {
  .settings-scrim,
  .checkout-security-modal,
  .auth-entry-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(3, 0, 10, 0.94) !important;
  }
}

/*
 * Preserve accessibility preference and avoid visual pulsing.
 */
@media (prefers-reduced-motion: reduce) {
  .world-stars {
    animation: none !important;
  }
}