/* The game's glass treatment, without sampling or repainting the live page. */
body::after,
.lightbox::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      #00000011 0 1px,
      #00000006 1px 2px,
      transparent 2px 3px
    ),
    repeating-linear-gradient(
      to right,
      #ff686804 0 1px,
      #80ffad04 1px 2px,
      #72baff04 2px 3px
    ),
    url("assets/phosphor-grain.svg") repeat,
    linear-gradient(125deg, #ffffff07, transparent 28%, #00000008),
    radial-gradient(ellipse at center, transparent 48%, #0000002b 100%);
}

/* Native dialogs sit above the page overlay in the browser's top layer. */
.lightbox {
  isolation: isolate;
}

.lightbox::after {
  position: absolute;
}

/* Keep the colour fringe below one pixel so small copy stays crisp. */
.wordmark,
h1,
h2,
h3,
.eyebrow,
.button {
  text-shadow: -.35px 0 #75e6f22b, .35px 0 #ed849926;
}

.hero h1 > span,
.wordmark span {
  text-shadow: -.35px 0 #75e6f22b, .35px 0 #ed849926, 0 0 24px #76e0ef24;
}

@media (prefers-contrast: more), (forced-colors: active) {
  body::after,
  .lightbox::after {
    display: none;
  }

  .wordmark,
  .wordmark span,
  h1,
  h2,
  h3,
  .hero h1 > span,
  .eyebrow,
  .button {
    text-shadow: none;
  }
}