/* Original artwork, with light colours baked into lossless images to avoid
   runtime SVG filtering/compositing artifacts on iPhone. */
:root {
  --mj-art-home: url('/assets/home-bg-layer.png');
  --mj-art-select: url('/assets/select-bg-layer.png');
  --mj-art-lobby: url('/assets/lobby-original-dark-v3.webp');
  --mj-art-khedaa: url('/assets/khedaa/stage-texture.webp');
  --mj-art-nesba: url('/assets/nesba/stage-regular-v2.jpg');
  --mj-art-nesba-final: url('/assets/nesba/stage-finale-v2.jpg');
}
html[data-appearance="light"] {
  --mj-art-home: url('/assets/home-original-light-v3.webp');
  --mj-art-select: url('/assets/select-original-light-v3.webp');
  --mj-art-lobby: url('/assets/lobby-original-light-v3.webp');
  --mj-art-khedaa: url('/assets/blue/khedaa.svg');
  --mj-art-nesba: url('/assets/blue/nesba.svg');
  --mj-art-nesba-final: url('/assets/blue/nesba-final.svg');
}
/* iOS ignores background-attachment:fixed on a scrolling panel. A separate
   fixed, non-interactive layer prevents its artwork scaling to scrollHeight.
   This also avoids scroll-time blur / resampling on desktop and Android. */
html :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay) {
  isolation: isolate;
  background-image: none !important;
  background-attachment: scroll !important;
}
html :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay)::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--mj-art-home) center / cover no-repeat;
}
/* Portrait keeps the original corners at uniform scale. Its centre crop
   excludes corner art so the baked composition cannot show ghost drawings. */
@media (orientation: portrait) {
  :root { --mj-art-home: url('/assets/home-portrait-dark-v3.webp'); }
  html[data-appearance="light"] { --mj-art-home: url('/assets/home-portrait-light-v3.webp'); }
  html.mobile-shell.mobile-shell #main-menu,
  html :is(#settings-overlay, #cqhub-overlay, #history-overlay, #admin-overlay)::before {
    background-size: cover !important;
  }
}
@media (orientation: portrait) and (min-width: 600px) {
  :root { --mj-art-home: url('/assets/home-tablet-dark-v3.webp'); }
  html[data-appearance="light"] { --mj-art-home: url('/assets/home-tablet-light-v3.webp'); }
}
/* The settings swatches describe blue light mode versus the original navy. */
html.mobile-shell [data-appearance="light"] .ms-color-swatch { background: #086b99; }
html.mobile-shell [data-appearance="dark"] .ms-color-swatch { background: #032333; }
html.mobile-shell #settings-overlay .ms-appearance button[aria-pressed="true"] {
  border-color: #e5a52a; box-shadow: inset 0 0 0 1px #e5a52a;
}

/* Paint the same artwork during boot and after it; never expose the old
   navy loader or the menu's separate blurred glow layer between frames. */
html #boot-loader {
  background: #032333 var(--mj-art-home) center / cover no-repeat;
  transition: none;
}
html[data-appearance="light"] #boot-loader { background-color: #086b99; }
html[data-mj-surface="player"] #boot-loader { background-image: var(--mj-art-lobby); }
html #boot-loader > * { visibility: hidden; }
html #main-menu .mm-glow { display: none; }