/* MTC physical-branding QA root-cause correction.
   Visual-only: Splash/Home/Calendar image rendering plus the existing desktop runner crop.
   No workout, scheduling, Supabase, Progress, History, persistence, or error-boundary logic. */

/* Splash: use one direct, reliable image layer on the actual screen. */
html body .intro-screen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  overflow: hidden !important;
  background-color: #050505 !important;
  background-image:
    linear-gradient(180deg,
      rgba(5,5,5,.06) 0%,
      rgba(5,5,5,.12) 22%,
      rgba(5,5,5,.42) 42%,
      rgba(5,5,5,.82) 60%,
      #050505 78%),
    url('/assets/mtc-real-flag-approved.jpg') !important;
  background-size: 100% 100%, 122% auto !important;
  background-position: center center, center 4% !important;
  background-repeat: no-repeat, no-repeat !important;
}
html body .intro-screen::before {
  content: none !important;
  display: none !important;
  background: none !important;
}
html body .intro-screen .intro-inner {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}

/* Home: same real flag directly on the Home screen. Keep runner styling separate. */
html body .screen-home.home-mode:not(.workout-mode) {
  position: relative !important;
  overflow-x: hidden !important;
  background-color: #050505 !important;
  background-image:
    linear-gradient(180deg,
      rgba(5,5,5,.08) 0%,
      rgba(5,5,5,.16) 26%,
      rgba(5,5,5,.46) 48%,
      rgba(5,5,5,.84) 68%,
      #050505 84%),
    url('/assets/mtc-real-flag-approved.jpg') !important;
  background-size: 100% 360px, 116% auto !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
}
html body .screen-home.home-mode:not(.workout-mode)::before {
  content: none !important;
  display: none !important;
  background: none !important;
}
html body .screen-home.home-mode:not(.workout-mode) .home-page {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}

/* Calendar: same repaired asset, intentionally darker than Splash/Home. */
html body .screen-calendar {
  position: relative !important;
  overflow-x: hidden !important;
  background-color: #050505 !important;
  background-image:
    linear-gradient(180deg,
      rgba(5,5,5,.34) 0%,
      rgba(5,5,5,.48) 34%,
      rgba(5,5,5,.78) 58%,
      #050505 76%),
    url('/assets/mtc-real-flag-approved.jpg') !important;
  background-size: 100% 300px, 116% auto !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
}
html body .screen-calendar::before {
  content: none !important;
  display: none !important;
  background: none !important;
}
html body .screen-calendar .wrap {
  position: relative !important;
  z-index: 1 !important;
}

/* Preserve the already-passing mobile Workout Runner treatment.
   Only wider screens get the bounded natural-aspect crop. */
@media (min-width: 768px) {
  html body .screen-home.workout-mode::before {
    background-color: #050505 !important;
    background-image:
      linear-gradient(180deg,
        rgba(5,5,5,.24) 0%,
        rgba(5,5,5,.38) 54%,
        rgba(5,5,5,.74) 78%,
        #050505 100%),
      url('/assets/mtc-real-workout-gym-approved.jpg') !important;
    background-size: 100% 100%, min(960px, 88vw) auto !important;
    background-position: center center, center 45% !important;
    background-repeat: no-repeat, no-repeat !important;
    filter: saturate(.82) brightness(.94) !important;
  }
}

@media (max-width: 420px) {
  html body .intro-screen {
    background-size: 100% 100%, 135% auto !important;
    background-position: center center, center 4% !important;
  }
  html body .screen-home.home-mode:not(.workout-mode) {
    background-size: 100% 320px, 122% auto !important;
  }
  html body .screen-calendar {
    background-size: 100% 280px, 122% auto !important;
  }
}