footer {
   position: fixed;
   z-index: 10;
   display: flex;
   bottom: 0;
   left: 2em;
   gap: 1.5em;
   align-items: end;

   transition: .3s;

   button {
      --hl: var(--pk);

      border-bottom: none;
      font-size: 3rem;

      padding-bottom: .5rem;
      border-radius: 1rem 1rem 0 0;

      user-select: none;
      background-color: var(--bl);

      transition: .2s;

      svg {
         width: .75em;
         height: .75em;
      }
   }

   button,
   button:hover {
      box-shadow: var(--shd) !important;
   }

   button:hover,
   button:focus {
      padding-bottom: 2.5rem;
   }
}

footer>button::before {
   content: '';
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 1em;
   left: 0;
   box-shadow: 0 0 .5rem var(--tbl) inset;
   opacity: .4;

   background: linear-gradient(transparent, var(--hl));
}

/* colors */
#metrics-button,
#msg-button,
#hire-button {
   --hl: var(--yl);
}

#med-button,
#log-button,
#res-button {
   --hl: var(--med);
}

button[data-n] {
   --s: .15rem;
   border: var(--s) solid;
   border-bottom: 0;
}

button[data-n]::after {
   content: attr(data-n);

   position: absolute;
   height: 1rem;
   background-color: var(--bl);
   top: calc(var(--s) * -1);
   right: calc(var(--s) * -1);

   border-bottom: var(--s) solid;
   border-left: var(--s) solid;

   padding-left: .35rem;

   font-size: 1.25rem;
   line-height: 0;

   text-shadow: 0 0 .25rem var(--bl), 0 0 .35rem var(--bl), 0 0 .45rem var(--bl);
   text-align: right;
}


#cash-in-icon .sway-up {
   font-size: 2rem;
   padding-bottom: 3rem;
   color: var(--w);
}

/* speed controls */
#speed-wrapper {

   position: fixed;
   right: 0;
   bottom: 0;

   .day-view {
      opacity: .65;
      text-align: end;
      margin-right: .5em;
   }

   button {
      border: 0;
      padding: 0;
   }

   #speed-control {
      display: flex;
      padding: .2em;
      gap: .2em;

      padding-bottom: 1.4em;

      border: var(--brd);
      border-right: 0;
      border-bottom: 0;
      border-top-left-radius: 1em;
   }

   .time-track {
      position: absolute;
      bottom: 0;
      right: 0;

      display: grid;
      place-items: center;

      width: 10vw;
      height: 1em;

      margin: .2em .5em;

      &::before {
         content: '';
         position: absolute;
         width: 100%;
         height: .1em;
         border-radius: .2em;
         background-color: var(--w);
         box-shadow: var(--shd);
      }
   }

   #time-progress {
      position: absolute;
      left: 0;
      height: 1em;

      border: var(--brd);
      border-radius: 1em;

      box-shadow: var(--shd);
      transition: .3s;
   }
}



.speed-display {
   display: grid;
   place-items: center;

   button {
      opacity: 0;
   }

}


.speed-decrease {
   rotate: 180deg;
}

.speed-display.paused,
.speed-display:hover {
   button {
      opacity: .5;
   }

   &::after {
      opacity: 0;
   }
}

.speed-display.paused {
   button {
      opacity: 1;
   }
}

.speed-display::after {
   content: attr(data-speed);
   font-weight: bold;
   position: absolute;
   pointer-events: none;
   transition: .2s;
}

[data-locked]:not(section) {
   display: none !important;
}