/* Живой фон настоящего теста — три слоя из src/page.template.html:
   1) #castle  — замок, приглушённый, z-index 0;
   2) #embers  — поднимающиеся искры на canvas, z-index 1;
   3) .scrim   — двойное затемнение поверх них, z-index 2.
   Контент страниц должен лежать выше (в тесте это .page{z-index:3}).
   Подключается на лабораторию, прохождение и результат: <link rel="stylesheet" href="…/quiz-ambient.css"> */
#castle {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url('/assets/img/castle.webp') center 30% / cover no-repeat;
  opacity: .32; filter: saturate(.8);
}
#embers { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.scrim {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 11, 21, .88) 0%, rgba(8, 11, 21, .52) 32%, rgba(8, 11, 21, .94) 100%),
    radial-gradient(96% 84% at 50% 46%, transparent 30%, rgba(4, 6, 12, .82) 100%);
}

/* Контент поверх фона. Селекторы с элементом перебивают классы страниц
   (.fl-main, .mechs и прочие задают z-index:1 и иначе уйдут под .scrim). */
body > header, body > main, body > footer,
body > .fl-top, body > .fl-main, body > .fl-foot { position: relative; z-index: 3; }
body > .fl-progress { z-index: 3; }   /* остаётся position:fixed */