:root {

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

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


/* details button */
.structure:hover,
.structure:focus,
.structure[selected] {
   box-shadow: 0 0 .5rem .5rem var(--dg) inset, 0 0 .5em .1em var(--hl);

   .stats-button {
      opacity: 1;
   }
}

.structure .stats-button {
   position: absolute;
   top: -.75em;
   right: -.75em;

   border: 1px solid;

   padding: .1em;
   font: .8rem;
   background-color: var(--bl);
   box-shadow: var(--shd);

   opacity: 0;
   transition: .2s;
}

/* gen screen */

.structure {
   grid-column: span 2;
   grid-row: span 4;
}

.structure[data-type="generator"][data-capacity="1"] {
   grid-column: span 3;
}

.structure[data-type="generator"][data-capacity="2"] {
   grid-column: span 4;
}

.structure[data-type="generator"][data-capacity="3"] {
   grid-column: span 5;
}

.structure[data-type="generator"][data-capacity="4"] {
   grid-column: span 6;
}

.structure[data-size="2"] {
   grid-column: span 1;
   grid-row: span 2;
}

.structure[data-size="4"] {
   grid-column: span 1;
   grid-row: span 4;
}

.structure {
   width: 100%;
   height: 100%;

   display: grid;
   place-items: center;
   border-radius: 1rem;
   border: 1.5px solid;
   background-color: var(--vdg);
   box-shadow: 0 0 .5rem .5rem var(--dg) inset;

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


/* 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-wrapper {
   overflow: auto;
   scrollbar-width: none;

   display: grid;
   place-items: center;

   border: var(--brd);
   border-radius: 2em;
   background-color: var(--bl);
   box-shadow: var(--shd), 0 0 .5em .5em var(--bl) inset;
}


#inner-storage {
   display: grid;
   width: 100%;
   padding: 1.5em;

   grid-template-columns: repeat(12, 1fr);
   grid-template-rows: repeat(4, 1fr);

   gap: var(--rowGap);

   background-color: var(--bl);
   z-index: 1;

   background-position: calc(3em - var(--rowGap)/2) calc(3em - var(--rowGap)/2);
   background-size: var(--gridWidth) var(--gridHeight);

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



   .structure {
      height: var(--rowHeight);
   }

   [data-size="2"] {
      height: calc(12.5vh - .5rem);
   }

   .gen-repair {
      display: none;
   }

   .structure.broken>* {
      filter: none;
   }
}