#popup {
   position: fixed;

   display: grid;
   place-items: center;

   min-width: 20vw;
   max-width: 80vw;

   scale: 0;
   z-index: 200;
   transition: scale .3s ease-in-out;
}

#popup[open] {
   scale: 1;
}

#popup.thought {
   font-size: 1.5rem;
   font-style: italic;
}

/*

#popup[name]::before {
   content: attr(name);
   position: absolute;
   font-weight: bold;
   text-transform: uppercase;
   font-size: 1.25rem;
   top: -.75em;
}*/

#popup.ui-confirm,
#popup.error-popup,
#rw-load {
   display: block;
   padding: 1.5em;

   border: 2px solid var(--red);
   border-radius: 2em;

   background-color: var(--tbl);
   background-image: repeating-linear-gradient(-45deg, var(--tbl) 0 3rem, var(--ddr) 3rem 4rem);

   box-shadow: var(--popupShadow), 0 0 3em 2em var(--bl) inset;

   text-shadow: 0 0 .5em var(--bl), 0 0 .4em var(--bl), 0 0 .3em var(--bl), 0 0 .2em var(--bl);

   h2 {
      text-align: center;
      text-transform: uppercase;
   }

   h3 {
      margin-block: .5em;
      border: 0;
   }

   button {
      border-color: var(--red);
   }
}

#error-contents {
   border: var(--brd);
   border-radius: 1em;
   background-color: var(--vdg);
   padding-inline: 1em;

   box-shadow: 0 0 1em .5em var(--bl);

   #copy {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 5;

      button {
         border: 0;
         padding: .5em;
      }
   }
}

#popup.ui-confirm {
   display: grid;
}

.popup-inner {
   border: var(--brd);
   background-color: var(--vdg);
   padding: 1em;
   border-radius: 1em;
   box-shadow: 0 0 4em 2em var(--bl);

   scrollbar-width: none;
   max-height: 90vh;
   overflow: auto;
}

.ui-warning {
   display: flex;
   flex-direction: column;
   padding-inline: 1em;
   align-items: center;

   h3 {
      border: 0;
      margin: 0;
   }
}

#popup .confirm-button {
   position: absolute;
   bottom: -2.75em;
   box-shadow: var(--shd);
   background-color: var(--tbl);
   text-transform: uppercase;
   font-weight: bold;

   &:hover {
      border-color: var(--w);
   }
}

#changelog {
   font-size: .9rem;

   &::before {
      content: 'Changelog';
      font-size: 1.2rem;
      display: block;
      text-align: center;
   }

   h2 {
      font-size: 1rem;
      margin-top: 1rem;
   }

   strong {
      font-size: 1.25rem;
      color: red;
   }
}

#save-dialog {
   display: grid;
   gap: 1em;
   padding: 1.5em;
   border: var(--brd);
   border-radius: 1em;
   background-color: var(--vdg);
   box-shadow: 0 0 3em 3em var(--bl), 0 0 .5em .5em var(--dg) inset;

   >* {
      text-transform: uppercase;
      font-weight: bold;
   }


   button {
      display: grid;
      place-items: center;
      height: 4em;
      width: 30em;
      box-shadow: var(--shd);
      background-color: var(--bl);

      &::after {
         content: '';
         display: block;
         position: absolute;
         right: 1.5em;
         height: 1em;
         width: 1em;


         border: .15em solid;
         border-radius: 100%;
         background: var(--bl);

      }

      &:hover {
         box-shadow: 0 0 .5em var(--pk) inset, 0 0 1em var(--pk);

         &::after {
            box-shadow: 0 0 .5em var(--pk) inset, 0 0 1em var(--pk);
         }
      }
   }

   div,
   h2 {
      letter-spacing: .5em;
      font-size: 1.2em;
      text-align: center;
      background: repeating-linear-gradient(-45deg, var(--dg) 0 .3em, transparent .3em 1em);
   }
}


#popup.dialog-scene {
   background-color: var(--bl);
   padding: 1em;
   border-radius: 1em;
   box-shadow: 0 0 4em 4em var(--bl);
}

#rw-load {
   display: flex;
   flex-direction: column;
   gap: 1em;
}

.tutorial-inner {
   outline: .15em solid var(--red);
   outline-offset: -.5em;
   text-align: center;
   max-width: 50vw;

   padding: 1em;
   padding-bottom: 1.5em;

   border-radius: 1.5em;

   background-color: var(--vdg);
   box-shadow: 0 0 2em 2em var(--bl);
}

.ui-details>button {
   position: absolute;
   bottom: -1em;
   background-color: var(--vdg);
   box-shadow: var(--shd);
   width: 10em;


}

.ui-details>button:hover {
   text-decoration: underline;
}


.ui-focus {
   position: fixed;
   border: .2em solid var(--red);
   border-radius: 1em;
   cursor: help;
   pointer-events: none;

   z-index: 100;
   box-shadow: 0 0 6em 4em var(--bl);
   animation: ui-focus forwards 1s;
}

@keyframes ui-focus {
   0% {
      opacity: 0;
      scale: 2;
   }

   80% {
      opacity: 1;
   }

   100% {
      opacity: 1;
      scale: 1;
   }

}


#poppup a[label="Back"] {
   width: fit-content;
}