/* The start-up splash, shown on the first frame of every game page. Its color is
   the manifest's background color, so iPhone's plain start-up screen blends in. */

#splash {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: #f6f0e2;
  color: #1f2a30;
  transition: opacity 300ms ease;
  /* If the script never runs, the splash still clears after a few seconds. */
  animation: splash-give-way 1ms linear 4s forwards;
}

#splash img {
  width: 128px;
  height: 128px;
  border-radius: 28px;
}

#splash p {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
}

#splash.leaving {
  opacity: 0;
}

@keyframes splash-give-way {
  to {
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  #splash {
    transition: none;
  }
}