#overlay {
   position: fixed;

   height: 100vh;
   width: 100vw;

   background: var(--bl);
   z-index: 50;

   display: grid;
   place-items: center;

   opacity: 0;
   pointer-events: none;
   transition: 1s linear;
}

#overlay-inner {
   max-height: 90vh;

   padding: .5rem;

   min-width: 30rem;
   max-width: 80vw;

   overflow: auto;
}

#overlay[open] {
   opacity: 1;
   pointer-events: all;
}





/* start screen */

#overlay.night-in::before,
#overlay.start-screen::before {
   content: '';
   position: absolute;
   top: 10vh;
   width: 25vw;
   box-shadow: 0 0 25vw 3vw var(--pk);
}

#overlay.night-in::after,
#overlay.start-screen::after {
   content: '';
   position: fixed;
   width: 80vw;
   height: 150%;
   box-shadow: 0 0 1rem .5rem var(--pk) inset, 0 0 1rem .5rem var(--pk);
   animation: pulse 5s ease-in-out infinite;
   pointer-events: none;
}

#overlay.start-screen>#overlay-inner {
   display: flex;
   flex-direction: column;
   gap: 1em;
   text-align: center;

   >div {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;

      >button {
         min-width: 40%;
         flex-grow: 1;
      }
   }


}

.start-screen button::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   background: linear-gradient(var(--pk), var(--pu));
   width: 100%;
   height: 0%;
   border-top: 2px solid var(--pk);
   filter: blur(2px);
   opacity: .5;
   z-index: -1;
   transition: 3s ease;
}

.start-screen button:hover {
   box-shadow: var(--pkShd);
   text-shadow: var(--pkText);

   &::after {
      transition: 5s ease;
      box-shadow: var(--pkShd);
      height: 100%;
   }
}



/* game title */
#overlay.start-screen h1>span {
   font-size: 6rem;
   display: inline-flex;
   justify-content: center;
   align-items: center;
}

#overlay h1>span::after {
   content: '';
   position: absolute;
   box-shadow: 0 0 .5rem .35rem var(--pk);
   height: 20%;
   border-radius: 100%;
   animation: pulse 5s ease-in-out infinite;
}


html.mobile .mobile-warning {
   display: block;
}

.mobile-warning {
   display: none;
}