/* Global background normalization for Playora pages */
:root {
  /* This CSS file lives in /css/, background image is in /assets/backgrounds/. */
  --playora-bg-img: url("../assets/backgrounds/wallpaper.jpeg");
  --playora-bg-overlay: linear-gradient(
    rgba(11, 16, 32, 0.6),
    rgba(11, 16, 32, 0.6)
  );
  --playora-bg-color: #0b1020;
}

/* Apply the background to the root element so body differences (min-height, layout) don't change scaling */
html {
  background-color: var(--playora-bg-color);
  background-image: var(--playora-bg-overlay), var(--playora-bg-img);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  scrollbar-gutter: stable;
  /* consistent cover scaling */
  background-attachment: fixed;
  /* keeps perceived size while scrolling */
  min-height: 100%;
}

/* Body uses transparent background so page-specific styles don't rescale image */
body {
  background: transparent !important;
  min-height: 100%;
  /* Fallback in case html background fails to load (e.g., CSP or path issue) */
  background-color: var(--playora-bg-color);
}

/* Mobile Safari & some Android browsers struggle with fixed attachment; fall back to scroll */
@media (max-width: 900px) {
  html {
    background-attachment: scroll;
  }
}

/* Font loading helper: hide text until webfont is ready to avoid FOUT/FOIT */
/* Keep nav-avatar always visible */
html.fonts-loading body {
  visibility: hidden !important;
}

html.fonts-loading .welcome-text {
  visibility: hidden !important;
}

/* Fallback: if fonts-loading class isn't removed after 3s, ensure visibility anyway */
/* This is handled in JS but CSS can help with edge cases */
html:not(.fonts-loading):not(.fonts-ready) body {
  visibility: visible;
}

/* When fonts are ready, revert visibility */
html.fonts-ready body,
html.fonts-ready .welcome-text {
  visibility: visible !important;
}