#generator-wrapper {
   display: grid;
   place-items: center;
   padding: 0;

   &::before {
      width: calc(100% - 3em);
   }

   &::after {
      bottom: 0;
      width: calc(100% - 3em);
   }

}

#floor-view {




   display: grid;
   place-items: center;
   align-items: baseline;
   height: calc(80vh - 4px);
   width: 100%;
   overflow: auto;
   padding-block: 1.5rem;
   scrollbar-width: none;

}




/* nav buttons */
#floor-menu[locked] {
   display: none;
}

#floor-menu {
   --iconSize: 2.5em;

   position: absolute;
   right: calc(100% - var(--iconSize) - .5em);
   top: 5vh;

   display: grid;
   grid-template-columns: repeat(3, 1fr);

   padding: .5rem;
   gap: .5em;
   z-index: 10;

   border: var(--brd);
   border-radius: 1rem;
   width: max-content;

   background-color: var(--vdg);
   box-shadow: 0 0 1em .75em var(--dg) inset, var(--shd);
}


#toggle-floor {
   position: absolute;
   top: -1.25em;
   right: -1.25em;
   z-index: 2;
}

#buy-floor {
   order: 9;
}

#buy-floor,
.floor-select {
   display: grid;
   place-items: center;
   padding: 0;
   height: var(--iconSize);
   width: var(--iconSize);
   border: .1em solid;
   border-radius: .5rem;

   background: var(--bl);
   box-shadow: 0 0 .5em .25em var(--dg) inset;
   transition: .15s;
}


.floor-select:hover,
.floor-select.active-icon {
   scale: 1.15;
   box-shadow: 0 0 .5em .25em var(--dg) inset, 0 0 .25em var(--pk);

   &::after {
      text-shadow: var(--pkText);
      color: var(--w);
   }
}

.floor-select::after {
   content: attr(data-num);
   font-weight: bold;
   color: var(--gr);
   display: flex;
}

/* floor */
.gen-floor {
   display: none;
   border: var(--brd);
   border-radius: 2rem;
   background-color: var(--vdg);
   box-shadow: 0 0 3rem 1rem var(--dg) inset;



   background-size: calc((var(--floorWidth) - var(--rowGap) * 2) / 12) calc((var(--rowHeight) + var(--rowGap)) / 2);
   background-position: var(--rowGap) var(--rowGap);

   background-image:
      linear-gradient(to right, var(--dg) 2px, transparent 2px),
      linear-gradient(to bottom, var(--dg) 2px, transparent 2px);

}

.gen-floor::before {
   z-index: unset;
   font-size: 6rem;
}

.gen-floor.active-floor {
   display: grid;
}

.inner-floor {
   display: grid;
   padding-bottom: 5rem;
   padding: 1.5em;

   width: var(--floorWidth);
   gap: var(--rowGap);

   grid-template-rows: repeat(4, 1fr);
   cursor: default;
}

.gen-row {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   grid-template-rows: repeat(4, 1fr);

   height: var(--rowHeight);
   gap: var(--rowGap);

   grid-auto-flow: column;
}

.det-view {
   display: none;
   position: absolute;
   top: 1rem;
   left: 1rem;
}

/* side-bar */
.side-floor {
   --s: 1rem;
   font-size: var(--s);

   position: absolute;
   left: 100%;
   top: 2em;

   display: flex;
   flex-direction: column;
   gap: .5em;

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

   padding: .5em;
   padding-left: .75em;

   .NT-bar {
      margin-left: .1em;
      margin-bottom: .1em;
      width: calc(var(--s) * 2);
   }


   .NT-bar::before,
   .NT-bar::after {
      border-radius: .5em;
   }
}

.side-floor::before {
   content: '';
   position: absolute;
   z-index: 1;
   left: 2px;
   top: -2px;
   background: linear-gradient(90deg, var(--bl), transparent);
   width: .5em;
   height: 110%;
   justify-self: center;
}

/* small view */

#floor-view.small-view {

   display: grid;
   grid-template-columns: repeat(3, 1fr);
   padding: 2rem;
   row-gap: 1em;

   .gen-floor {

      display: grid !important;
      border-radius: 1rem;
      background: none;

      &::before {
         font-size: 2rem;
      }

      .side-floor {
         --s: .8rem
      }

   }
}

#floor-view.small-view .inner-floor {
   padding: 1rem;
   width: calc(var(--floorWidth) / 3 - 2em);
   gap: .5rem;
   aspect-ratio: 1/1;
   cursor: pointer;
}

#floor-view.small-view .gen-row {
   height: 100%;
   gap: .5rem;

   .gen-base {
      border-radius: .5rem;
      box-shadow: 0 0 .25rem .1rem var(--hl);

      >* {
         display: none;
      }


   }
}