/*
 * Game-board stage behind every page that uses _Layout: an Umber-Tint ground, warm like the gold accents of the
 * quiz, with a tone-on-tone wallpaper of design-system outline icons (img/stage/*.svg). The SVGs are masks, so the
 * colours stay tokens.
 * Text sits on White cards or reads as Blue on Umber-Tint (AAA), and the White/Umber-Light icons stay low contrast,
 * so the wallpaper never turns into a noisy background behind copy.
 * The wallpaper is static on purpose: animating a page-sized masked layer costs too much on low-end phones.
 */
.elx-stage {
  --elx-stage-tile: 360px;
  position: relative;
  isolation: isolate;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--elx-umber-tint);
}

/*
 * The second mask layer fades the wallpaper in below the top of the page, so headings and progress always sit on
 * plain Umber-Tint. Masks only read alpha, so any opaque token works as the mask colour.
 */
.elx-stage::before,
.elx-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask:
    url("../img/stage/pattern-1.svg") 0 0 / var(--elx-stage-tile) var(--elx-stage-tile) repeat,
    linear-gradient(transparent 6rem, var(--elx-blue) 12rem);
  -webkit-mask-composite: source-in;
  mask:
    url("../img/stage/pattern-1.svg") 0 0 / var(--elx-stage-tile) var(--elx-stage-tile) repeat,
    linear-gradient(transparent 6rem, var(--elx-blue) 12rem);
  mask-composite: intersect;
  background: var(--elx-white);
}

.elx-stage::after {
  -webkit-mask-image: url("../img/stage/pattern-2.svg"), linear-gradient(transparent 6rem, var(--elx-blue) 12rem);
  mask-image: url("../img/stage/pattern-2.svg"), linear-gradient(transparent 6rem, var(--elx-blue) 12rem);
  background: color-mix(in srgb, var(--elx-umber-light) 70%, transparent);
}