/* BILSTORE_SITE_NORMAL_BANNER_V1
   Optimized copies of the existing artwork. Layout and admin uploads are kept
   under the existing responsive-banner rules; only the default FF source is
   replaced here. A phone never selects the full desktop file. */

html:root body .purchase-route[data-game="ff"][data-bil-live-banner-v2][style*="/assets/game-original-v1/ff-banner.jpg"] .purchase-route-banner {
  background-image: url("/assets/ff-banner-optimized-v1-1600.webp") !important;
}
html:root body .sp-hero-media[data-bil-banner-shell] img[src*="/assets/game-original-v1/ff-banner.jpg"] {
  content: url("/assets/ff-banner-optimized-v1-1600.webp") !important;
}

/* Retain the original pixel dimensions for large or high-density desktops. */
@media (min-width: 1601px), (min-width: 761px) and (min-resolution: 1.5dppx) {
  html:root body .purchase-route[data-game="ff"][data-bil-live-banner-v2][style*="/assets/game-original-v1/ff-banner.jpg"] .purchase-route-banner {
    background-image: url("/assets/ff-banner-optimized-v1-2796.webp") !important;
  }
  html:root body .sp-hero-media[data-bil-banner-shell] img[src*="/assets/game-original-v1/ff-banner.jpg"] {
    content: url("/assets/ff-banner-optimized-v1-2796.webp") !important;
  }
}

/* Two or more source pixels per CSS pixel on common 320–480px phone screens. */
@media (max-width: 760px) {
  html:root body .purchase-route[data-game="ff"][data-bil-live-banner-v2][style*="/assets/game-original-v1/ff-banner.jpg"] .purchase-route-banner {
    background-image: url("/assets/ff-banner-optimized-v1-960.webp") !important;
  }
  html:root body .sp-hero-media[data-bil-banner-shell] img[src*="/assets/game-original-v1/ff-banner.jpg"] {
    content: url("/assets/ff-banner-optimized-v1-960.webp") !important;
  }
}

/* Low-density small screens can use the smallest download without upscaling. */
@media (max-width: 480px) and (max-resolution: 1.49dppx) {
  html:root body .purchase-route[data-game="ff"][data-bil-live-banner-v2][style*="/assets/game-original-v1/ff-banner.jpg"] .purchase-route-banner {
    background-image: url("/assets/ff-banner-optimized-v1-480.webp") !important;
  }
  html:root body .sp-hero-media[data-bil-banner-shell] img[src*="/assets/game-original-v1/ff-banner.jpg"] {
    content: url("/assets/ff-banner-optimized-v1-480.webp") !important;
  }
}