:root {

   --cellHeight: 15vh;
   --rowHeight: 25vh;
   --floorWidth: 70vw;
   --rowGap: 1em;

   --gridWidth: calc((var(--floorWidth) - var(--rowGap) * 2) / 12);
   --gridHeight: calc((var(--rowHeight) + var(--rowGap)) / 2);
}

.structure {

   display: grid;
   place-items: center;
   border-radius: 1em;
   border: 1.5px solid;
   background-color: var(--vdg);
   box-shadow: var(--grShd);

   --hl: var(--pk);
   --txt: 0 0 .15em var(--hl), 0 0 .2em var(--hl);

   &:hover,
   &:focus {
      box-shadow: var(--grShd), var(--pkShd);

      .structure-controls {
         opacity: 1;
      }
   }
}

.structure-controls {
   position: absolute;
   top: -.75em;
   right: -.75em;
   z-index: 10;

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

   opacity: 0;
   transition: .2s;

   button {
      border: 1px solid;
      padding: .2em;
      font-size: .8rem;
      background-color: var(--bl);
      box-shadow: var(--shd);

      &:hover {
         box-shadow: var(--shd), var(--pkShd) inset;
      }
   }
}


#floor-view .unstore-button {
   display: none !important;
}

#storage-view .store-button {
   display: none !important;
}


/* sizes */
[data-height="1"].structure {
   grid-row: span 1;
   height: calc(25vh / 2 - .5em);
   border-radius: .5em;
}

[data-height="2"] {
   grid-row: span 2;
   height: 25vh;
}


[data-width="2"] {
   grid-column: span 2;
}

[data-width="3"] {
   grid-column: span 3;
}

[data-width="4"] {
   grid-column: span 4;
}

[data-width="5"] {
   grid-column: span 5;
}

[data-width="6"] {
   grid-column: span 6;
}



/* broken */
.structure.broken {
   >:not(i) {
      filter: grayscale(1);
   }

   .gen-slot {
      cursor: not-allowed;

      &::before {
         opacity: .25;
         cursor: not-allowed;
      }
   }

   i.gen-repair {
      display: grid;
   }

}


@keyframes spin {
   0% {
      rotate: 0;
   }

   100% {
      rotate: 360deg;
   }
}

/* full NT */
.structure.NT-block {
   .generator {
      filter: grayscale(1);
   }

   i.NT-blocked {
      display: grid;
   }
}

.small-view {

   .structure.NT-block i.NT-blocked,
   .structure.broken i.gen-repair {
      font-size: 1em;
      display: grid !important;
   }

   .structure.broken i.gen-repair::after {
      display: none;
   }

}

/* storage area */

#storage-view>h2 {
   position: absolute;
   top: 8.35vh;
   font-size: 2rem;
   letter-spacing: .5rem;
   z-index: 20;
   line-height: 0;
   text-shadow: var(--txtShd);
}

#storage-wrapper {
   overflow: hidden;
   padding: 0;

   display: grid;
   place-items: center;

}

#overflow-box {
   height: 100%;
   padding-block: 1.5em;
   overflow-y: auto;
   scrollbar-width: none;

}

.structure-grid {

   --width: 12;


   display: grid !important;
   grid-template-columns: repeat(var(--width), 1fr);
   grid-template-rows: repeat(2, 1fr);

   gap: var(--rowGap);
   padding: calc(var(--rowGap) * 1.5);

   width: calc(70vw * var(--width) / 12);

   background-color: var(--bl);
   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);
}


#inner-storage {
   --width: 14;

   min-height: calc(var(--rowHeight) + 4em);
   z-index: 1;
}

#drain-floors {
   position: absolute;
   bottom: 10vh;
   left: -2em;
   z-index: 20;

   padding: 1em;

   border-radius: 1em;

   --hl: var(--dg);
   background: var(--greyHatch);
   box-shadow: var(--grShd), var(--shd);

   &:hover {

      box-shadow: var(--grShd), var(--pkShd);

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