#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-of-type)::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;

      p,
      em {
         margin-block: .4rem;
      }
   }

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

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

.dialog-line,
[data-say] {
   width: fit-content;
   margin-block: .5em !important;

   &::before {
      content: '';

      position: absolute;
      top: -.2em;

      border-top: var(--brd);

      height: 1em;
      width: min(2.5em, 100%);
      pointer-events: none;
   }
}

/* right align */
.dialog-line,
[data-say] {
   align-self: flex-end;
   text-align: end;

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

/* left align */
[data-say="p"] {
   align-self: flex-start;
   text-align: revert;

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

[data-say] .icon {
   font-size: .6em;
}

#epilogue {
   height: 80vh;
}


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

   padding-inline: 1.25em;

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

#end {
   text-align: center;
}