/* Phones: a plain, light page. iPhones (Safari) go black while scrolling when the page has big fixed pictures, filters, blurs, masks
   and promoted layers behind the content. So here: no fixed aurora picture, no filter / blur / mask, no extra layers.
   The look stays (colours, cards, type); only the heavy effects go. Loaded last, phones only. */
@media (max-width: 820px), (pointer: coarse) {
  .spotlight { display: none !important; }
  html, body { background-color: #06060a; }
  body {
    background-image:
      radial-gradient(70% 420px at 8% 0, rgba(43, 240, 138, 0.16), transparent 72%),
      radial-gradient(70% 420px at 94% 0, rgba(124, 107, 255, 0.2), transparent 74%);
    background-repeat: no-repeat;
  }
  *, *::before, *::after {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    mix-blend-mode: normal !important;
    will-change: auto !important;
  }
  .hero-ring, .hero-stage::before { display: none !important; }
  /* the big glowing shadows that pulse forever (a full repaint each frame) and the slow zoom of the trailer picture */
  .fa-mid img { animation: none !important; box-shadow: 0 0 26px rgba(43, 240, 138, 0.5) !important; }
  .fa-mid::before, .fa-mid::after { animation: none !important; display: none !important; }
  .tr-bg { animation: none !important; inset: 0 !important; }
  .fa-src i { box-shadow: none !important; }
  .tp-tray i { box-shadow: none !important; }
}