html, body { min-height:100%; }

.prologue-screen {
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#090b08;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  opacity:1;
  visibility:visible;
  transition:opacity .18s ease;
}

.prologue-screen.is-changing {
  opacity:.18;
  pointer-events:none;
}

.prologue-screen.is-leaving {
  opacity:0;
  pointer-events:none;
}

.prologue-screen-art {
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

body.prologue-active {
  overflow:hidden;
  background:#090b08;
}

/* The comic prologue is the absolute first scene. Keep everything behind it
   physically hidden until page 2 has been dismissed. */
body.prologue-active #titleScreen,
body.prologue-active #gameShell {
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

@media (prefers-reduced-motion:reduce) {
  .prologue-screen {
    transition-duration:1ms;
  }
}