/* Background image override for the Doctor Hope games platform.
   Loaded after the built stylesheet so it wins the cascade without
   touching the hashed Vite bundle. */

html,
body {
  margin: 0;
  min-height: 100%;
}

/* Page-level fallback (visible behind any screen that does not paint
   its own opaque background). */
#root {
  min-height: 100vh;
  background-image:
    linear-gradient(rgba(2, 6, 20, 0.5), rgba(2, 6, 20, 0.5)),
    url("/assets/games-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* The "مركز الألعاب" (games hub) screen renders its own fixed,
   full-viewport wrapper with an opaque Tailwind gradient background
   (bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950) that
   fully covers #root — that is the actual element painting the old
   dark background. This compound selector requires the exact set of
   utility classes that element carries (verified unique in the
   compiled bundle) so it is targeted precisely, without affecting any
   other element elsewhere in the app that reuses the same individual
   Tailwind classes. */
.fixed.inset-0.flex.flex-col.items-center.justify-center.overflow-y-auto.bg-gradient-to-b.from-slate-950.via-slate-900.to-slate-950 {
  background-image:
    linear-gradient(rgba(2, 6, 20, 0.5), rgba(2, 6, 20, 0.5)),
    url("/assets/games-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}