/* story paths */
.story-path {
   border-radius: 1em;

   h3 {
      opacity: .7;
      letter-spacing: .25em;
      border: 0;
      margin-block: .5em;

      &::after,
      &::before {
         content: '-';
      }
   }

   --bg : var(--vdg);

   .story-toggles {
      display: grid;
      grid-auto-flow: column;
      gap: .5em;
      width: calc(100% - 2em);
      margin: auto;
      

      button {
         border-bottom: 0;
         border-radius: .5em .5em 0 0;
         text-transform: capitalize;

         background-color: var(--bg);

         &::after {
            content: '';
            position: absolute;
            bottom: -.2em;
            left: 0;
            width: 100%;
            height: .5em;
            background-color: inherit;
         }
      }
   }

   .story-main {
      border: var(--brd);
      border-radius: .5em;
      box-shadow: var(--shd);
      min-height: 2em;

      background-color: var(--bg);

      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      padding: .5em;
      gap: .5em;

      .seen {opacity: .5;}

   }
}

[data-type="message"] .start-label {
   display: none;
}

[data-display="scenes"] .show-scenes {
   z-index: 10;
}

[data-display="interactions"] .show-interactions {
   z-index: 10;
}

[data-display="messages"] .show-messages {
   z-index: 10;
}

#content-back-menu {
   display: block;
   margin: 1em auto;
   padding-inline: 3rem;
}

.word-num {
   opacity: .7;
   font-size: .75em;
}