body {
   
   /*vars:*/ 
      /*colortheme:*/
      --color-dark: #380066;
      --color-default: #d1adff;
      --color-light: #fd499d;
      --color-accent: #536ae1;
      /*sizes:*/
      --element-height: 25px;
      --padding: 20px;

      --block-width: 25vw; 
      --block-height: 70vh;
      
      /* alt option for block sizes
      --block-width: 500px 
      --block-height: 600px;
      @media (width < calc(500px*2 + 20px*3)) {
         --block-width: 150px;
      }
      @media (height < calc(700px+25px*6+20px*8)) {
         --block-height: 200px;
      }*/
   
   /*experimental settings*/
      /*stat display*/
      --health-percentage: 0.5;
      --wealth-percentage: 0.12;
      --wave-percentage: 0.69;

   /*default settings*/
      /*fonts*/
      font-family: monospace;
      font-weight:600;
      font-size: x-large;
} 

.game-over-lay{
   /*positioning*/
   position: absolute;
   top:0;
   left:0;

   width: 100vw;
   height:100vh;

   align-content: center;
   justify-content: center;

   z-index: 5; /*displayed above all*/

   background-color: rgb(0, 0, 0, 0.5);


   visibility: hidden;   
   opacity: 0;  /* Initially invisible */
   > div {
      /*positioning*/
      position: absolute;
      top:50%;
      left:50%;
      transform: translate(-50%, -50%);

      border: solid 3px var(--color-default);
      opacity: inherit;
      > div{
         padding: var(--padding);
         color: var(--color-default);
         font-size: 6cap;
         opacity: inherit;
      }
      > button {
         /*positioning*/
         position: absolute;
         bottom: -calc(2*var(--element-height));
         left: 50%;

         transform: translate(-50%, var(--padding));

         height: calc(2*var(--element-height));
         background-color: var(--color-light);
         border-color: var(--color-light);
         border-radius: 5000px;
         font: inherit; /*to overwrite button defaults*/
         padding-left: var(--padding);
         padding-right: var(--padding);
      }
      > button:hover {
         background-color: var(--color-accent); /*i have no clue about colortheory*/
         border-color: var(--color-accent);
      }
   }
}
.game-over-lay.active {
   opacity: 1;
   visibility: visible;
   transition: opacity 3s ease-in-out;
 }

#loading{ /*i know this one is weird, but trust me*/
   /*positioning*/
   position: absolute;
   top:50%;
   left:50%;
   transform: translate(-50%, -50%);

   width: 100vw;
   height:100vh;

   align-content: center;
   justify-content: center;

   z-index: 5; /*displayed above all*/

   background-color: black;
   opacity: 90%;
   > div {
      /*positioning*/
      position: absolute;
      top:50%;
      left:50%;
      transform: translate(-50%, -50%);

      #loading1 {
         width: 100px;
         aspect-ratio: 1;
         border-radius: 50%;
         background: var(--color-accent);
         -webkit-mask: radial-gradient(circle closest-side at 50% 40%,#0000 94%, #000);
         transform-origin: 50% 40%;
         animation: l25 1s infinite linear;
      }
      #loading2 {
         width: 60px;
         aspect-ratio: 1;
         background: linear-gradient(var(--color-light) 0 0) bottom/100% 0% no-repeat var(--color-dark);
         -webkit-mask: 
         radial-gradient(circle at 60% 65%, #000 62%, #0000 65%) top left, 
         radial-gradient(circle at 40% 65%, #000 62%, #0000 65%) top right, 
         linear-gradient(to bottom left, #000 42%,#0000 43%) bottom left , 
         linear-gradient(to bottom right,#000 42%,#0000 43%) bottom right;
         -webkit-mask-size: 50% 50%;
         -webkit-mask-repeat: no-repeat;
         animation: l19 2s infinite linear;
      }
      #loading3 {
         display: inline-flex;
         border: 2px solid var(--color-default);
         --c:no-repeat linear-gradient(var(--color-default) 0 0) 50%;
         background:
         var(--c) calc(50% - 5px)/5px 5px,
         var(--c) calc(50% + 5px)/5px 5px;
      }
      #loading3::before,
      #loading3::after {
         content: "12 00 23 01 40 31 45 60 12 17 45 32 29 42 31 50 08 14 07 46 29 11 14 03 55";
         font-size: 30px;
         font-family: monospace;
         font-weight: bold;
         line-height: 1em;
         height: 1em;
         width: 2ch;
         color: #000000;
         text-shadow: 0 0 0 var(--color-default);
         overflow: hidden;
         margin: 5px 10px; 
         animation: l3 1s steps(20) infinite;
      }
      #loading3::before {
         animation-duration: 1.5s;
      }
   }
}

@keyframes l25 {
   100% {transform: rotate(1turn)}
}

@keyframes l19 {
   90%,100% {background-size:100% 100%}
}

@keyframes l3 {
100% {text-shadow: 0 -20em 0 var(--color-default)}
}
   .active#info-screen{
      top: var(--padding);
      transition: top 1s ease-out;
   }
   #info-screen {
      /*default invisible*/
      /*display: none;*/

      /*positioning*/
      position: absolute;
      top: calc(-1*var(--block-height));
      transition: top 2s ease-in;
      left: 50%;
      transform: translate(-50%, 0);

      z-index: 1;
      opacity: 0.5;

      padding: var(--padding);

      width: var(--block-width);
      
      color:var(--color-default);
      background-color: var(--color-dark);
      
      border: solid 3px var(--color-default);
      border-radius: 10px;
      > i {
         position: absolute;
         top: 0;
         right: 0;

         transform: translate(0, -50%);

         color: var(--color-light);

         font-size: xxx-large;
         font-style: italic;
         font-weight: 900;


      }
   }


   #actions {
      /*positioning*/
      position: absolute;
      right: var(--padding);
      bottom: var(--padding);

      z-index: 4; /*above even other UI elements*/

      > button {
         height: calc(2*var(--element-height));
         background-color: var(--color-light);
         border-color: var(--color-light);
         border-radius: 5000px;
         font: inherit; /*to overwrite button defaults*/
      }
      > button:hover {
         background-color: var(--color-accent); /*i have no clue about colortheory*/
         border-color: var(--color-accent);
      }
   } 


   #menu:has(#shop-toggle:checked)>#sidebar {
      display:block;
      #shop-sidebar {
         display:block;
      }
   }
   #menu:has(#settings-toggle:checked)>#sidebar {
      display:block;
      #settings-sidebar {
         display:block;
      }
   }
   #menu {
      /*positioning*/
      position: absolute;
      right: var(--padding);
      top: var(--padding);
      
      z-index: 2; /*default UI element*/

      .menu-button {
         background-color: var(--color-default);
         padding: calc(var(--padding)*0.5);
         border-radius: 10px;
      }

      #menu-select {
         z-index: 3; /*important UI element (no clue if that actually works)*/
         
         /*alignement*/
         display: flex;
         flex-flow: row nowrap;
         justify-content: right;
         align-content: top;
         gap: calc(var(--padding)*0.5);

         > label {
            flex: 1 0;
         }
         > input:checked+label{
            background-color: var(--color-light);
         }
         >input { 
            display: none;
         }
         >button {
            display: none;
         }
      }
      
      #sidebar {
         /*positioning*/
         position: fixed;
         top: 50%;
         right: 0;
         transform: translate(0, -50%);

         z-index: 1; /* low priority UI element*/
         
         /*dont display until sth selected*/
         display:none;
         overflow-y: scroll;
         > div{
            display: none;
         }
         
         /*size*/
         height: var(--block-height);
         width: var(--block-width);
         padding: var(--padding);

         border: solid 5px var(--color-default);
         border-radius: 20px;

         color: var(--color-default);
         background-color: var(--color-dark);

         .menu-button {
            position: sticky;
            left: calc(var(--block-width)*0.75);
            top: var(--padding);
            color: var(--color-dark);
         }

         .sidebar-welcome {
            width: 100%;
            color: var(--color-light);
         }
         .category:not(:last-child) {
            padding-bottom: var(--padding);
            border-bottom: double 10px var(--color-accent);
         }
         .shop-category-title {
            text-align: center;
            margin: 0 0 0 0;
            text-decoration: wavy;
            border-bottom: double 10px var(--color-accent);
         }
         .shop-item {
            display: grid;
            gap: 5px;
            grid-template-columns: 50% 50%;
            grid-template-rows: 1rem 70% calc(var(--element-height)+2*var(--padding));

            .shop-item-img {
               grid-column-start: 1;
               grid-column-end:  2;
               grid-row-start: 2;
               grid-row-end:  4;
               width: 100%;
               height: 100%;
            }
            .shop-item-title {
               padding: 0 0 0 0;
               margin: 0 0 0 0;
               grid-column-start: 1;
               grid-column-end:  3;
               grid-row-start: 1;
               grid-row-end:  2;
               border-bottom: solid 2px var(--color-default);

            }
            .shop-item-description {
               padding: 0 0 0 0;
               margin: 0 0 0 0;
               grid-column-start: 2;
               grid-column-end:  3;
               grid-row-start: 2;
               grid-row-end:  3;

            }
            .shop-item-buy {
               grid-column-start: 2;
               grid-column-end:  3;
               grid-row-start: 3;
               grid-row-end:  4;

               height: calc(2*var(--element-height));
               background-color: var(--color-light);
               border-color: var(--color-light);
               border-radius: 5000px;
               font: inherit; /*to overwrite button defaults*/
            }
            .shop-item-buy:hover {
               background-color: var(--color-accent); /*i have no clue about colortheory*/
               border-color: var(--color-accent);
            }
         }
      }

   }    

      
   #tile-box{
      /*positioning*/
      position: absolute;
      bottom: var(--padding);
      left: var(--padding);
      
      z-index: 1;

      #tile-count{
         position: absolute;
         top:128px;
         right:0;
         
         z-index: 2;

         color: var(--color-light);
      }
      #tile-queue{
         /*remove default style*/
         padding: 0;
         margin: 0;
         list-style: none;
         
         width: calc(var(--block-height)*0.2);
         height: var(--block-height);

         /*alignement*/
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content:space-evenly;
         gap: var(--padding);

         > img:first-child {
            flex: 0 0; /*first item twice the size*/
            border-bottom: solid 3px var(--color-accent);
            scale: 1.2;
            
         }
         > img.unreachable {
            filter: grayscale(80%);
         }
         > img {
            width: inherit;
            flex: 0 0;
            aspect-ratio: 1;
            align-content: center;
            > img {
               height: 100%;
               width: 100%;
            }
         }
      }
   }
   


   #stats {
      /*positioning*/
      position: absolute;
      left: var(--padding);
      top: var(--padding);

      /*alignement*/
      display: flex;
      flex-direction: column;
      justify-content: top;
      align-content: left;

      gap: var(--padding);

      width: fit-content;
      height: fit-content;

      .status-name {
         position: relative; 
         align-content: center;
         display: inline;
         
         margin: 0 0 0 0;
         padding-left: var(--padding); /*so text doesn't clip out of border*/
         height: 100%;
         
         z-index: 3;

         color: var(--stat-color);
         mix-blend-mode: difference;

      }

      .status-value {
         position: absolute; 
         align-content: center;
         display: inline;
         
         margin: 0 0 0 0;
         right: var(--padding); /*so text doesn't clip out of border*/
         height: 100%;
         
         z-index: 3;

         color: var(--stat-color);
         mix-blend-mode: difference;

      }

      .status-bar {
         position: relative;
         align-self: right;
         
         z-index: 2;
         
         width: var(--block-width);
         height: var(--element-height);

         border: solid 3px var(--stat-color);
         border-radius: 5000px;
         
         overflow: hidden;
         
         > .bar-value{
            position:absolute;
            top: 0;
            left: 0;
            z-index: 2;


            width: 100%;
            height: inherit;

            background-color: var(--stat-color);
         }
         > .bar-dmg-indicator { 
            
            width: 10px;
            height: inherit;
            
            background-color: var(--color-dark);
            transition: width 2s;
            z-index: 1;
         }
      }
      
      #health {
         --stat-color: var(--color-light);
      }
      
      #wealth {
         --stat-color: var(--color-default);   
      }

      #wave {
         --stat-color: var(--color-accent);   
      }
      #wave-bar2{
         transition: width 0.5s;
      }
   }