#scene-wrapper {
   width: 50vw;
   height: 70vh;
   overflow: auto;
}

#overlay.fade-in {
   animation: fade-in 2s forwards;
}

@keyframes fade-in {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

.fade-out {
   animation: fade-out 2s forwards;
}

@keyframes fade-out {
   0% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
}

.twee-context {
   max-width: 80vw;

   .twee-passage:not(:first-child)::before {
      content: '';
      width: 10em;
      height: .2em;
      border-radius: .2em;
      background-color: var(--dg);
      margin-bottom: 1em;
      align-self: center;
   }

   .twee-passage {

      display: flex;
      flex-direction: column;
      animation: fade-in .5s ease-in-out;
   }

   a {
      margin-block: .1rem;
      display: block;
      cursor: pointer;
   }

   p {
      margin-block: .4rem;
   }

   .twee-passage:empty::before {
      display: none;
   }

   .dialog-line,
   .player-say {
      width: fit-content;
      margin-block: .5em;

      &::before {
         content: '';

         position: absolute;
         top: -.2em;

         border-top: var(--brd);

         height: 1em;
         width: min(2.5em, 100%);
      }
   }

   .player-say::before {
      left: -.4em;
      border-left: var(--brd);
   }

   .dialog-line {
      align-self: flex-end;
      text-align: end;

      &::before {
         right: -.4em;
         border-right: var(--brd);
      }
   }

}

#epilogue {height: 80vh;}


.story-scene {
   max-height: 90vh;
   font-size: 1.1rem;
   max-width: 60vw;

   padding-inline: .5em;

   .twee-passage {
      padding-block: .5em;
   }
}

#end {
   text-align: center;
}