.splash-screen {
  width: var(--viewport-width);
  display: flex;
  padding: 0 1rem;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;

  .npc-wrapper-yogaraptor {
    .npc-sprite {
      width: 6rem;
      height: 6rem;
      background-image: url("../assets/player/player-walk-right.png");
      @media (prefers-reduced-motion: no-preference) {
        animation: spritesheet 0.6s steps(3) infinite;
      }
    }
  }

  h1 {
    font-size: 2rem;
    color: var(--scale-green);

    span {
      display: block;
      color: white;
      font-size: 2.5rem;
      line-height: 1;
    }
  }

  .splash-screen-actions {
    display: flex;
    gap: 1rem;
  }

  .splash-screen-tips {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: #888;
  }

  .splash-screen-not-supported-message {
    padding: 1rem;
    color: var(--jaw-red-dark);
    background: var(--jaw-red);

    display: none;
    @supports not (container-type: scroll-state) {
      display: block;
    }
  }
}

:has(.map[open]) .splash-screen {
  display: none;
}