@import url("./core/reset.css");
@import url("./core/variables.css");

/* Text */
@import url("./core/text/text.css");

/* Layout */
@import url("./core/layout/body.css");
@import url("./core/layout/header.css");
@import url("./core/layout/main.css");
@import url("./core/layout/footer.css");

/* Input */
@import url("./core/input/button.css");
@import url("./core/input/checkbox.css");
@import url("./core/input/select.css");

/* Menu */
@import url("./core/menu/menu.css");

@import url("./core/toast.css");
@import url("./core/icon.css");
@import url("./core/code.css");
@import url("./core/drawer.css");
@import url("./core/utils.css");
@import url("./core/separator.css");

/* 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Ghost pages 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.ghost-page {
  --header-height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100svw; width: 100svw; max-width: 100svw;
  min-height: 100svh; height: 100svh; max-height: 100svh;
  background-color: var(--color--bg-alt);

  &.hidden {
    display: none;
  }

  .ghost-page-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: 100%; width: 100%; max-width: 100%;
    min-height: var(--header-height); height: var(--header-height); max-height: var(--header-height);
    padding: 8px var(--horizontal-padding);
    background-color: var(--color--bg-default);

    .title-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-width: 100%; width: 100%; max-width: 100%;
      min-height:fit-content; height:fit-content; max-height:fit-content;
      margin-bottom: 8px;
      background-color: var(--color--bg-default);
      
      h1, h2, h3 {
        margin: 0;
      }
    }
  }

  .ghost-page-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: 100%; width: 100%; max-width: 100%;
    min-height: calc(100svh - var(--header-height)); height: calc(100svh - var(--header-height)); max-height: calc(100svh - var(--header-height));
    padding: 8px var(--horizontal-padding);
    overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
.close-ghost-page-button {
  --size: 35px;
  background-color: transparent;
  min-width: var(--size); width: var(--size); max-width: var(--size);
  min-height: var(--size); height: var(--size); max-height: var(--size);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed var(--color--fg-default);
  color: var(--color--fg-default);
  font-size: 16px;
  line-height: 16px;

  &:hover {
    @media (pointer: fine) {
      cursor: pointer;
      background-color: var(--color--bg-alt);
    }
  }
}

/* Équipages =============================================================== */

#myCrewsDisplay {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}
.crew-bloc-container {
  display: flex;
  flex-direction: row;
  min-width: 100%;
  height: fit-content;
  flex-wrap: wrap;
  gap: 24px;
}
.crew-bloc {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  min-width: 100%; width: 100%; max-width: 100%;
  border: 1px dashed var(--color--fg-default);
  padding: 8px;

  &.assigned {
    filter: grayscale(.66);
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color--fg-default);

    .spaceship-sub-bloc {
      opacity: .33;
      filter: brightness(0) saturate(100%) invert(67%) sepia(88%) saturate(3770%) hue-rotate(321deg) brightness(100%) contrast(103%) grayscale(.5);
    }
    
    &:after {
      position: absolute;
      content: 'En mission';
      font-size: 24px;
      color: var(--color--fg-default);
      border: 1px solid var(--color--fg-default);
      padding: 8px 16px;
    }
  }

  &.unafordable {
    border: 1px solid hsl(0, 100%, 69%) !important;
    justify-content: center;
    align-items: center;

    .spaceship-sub-bloc {
      opacity: .33;
      filter: brightness(0) saturate(100%) invert(67%) sepia(88%) saturate(3770%) hue-rotate(321deg) brightness(100%) contrast(103%) grayscale(.5);
    }

    &::after {
      position: absolute;
      content: 'Fonds insuffisants';
      font-size: 24px;
      color: hsl(0, 100%, 69%);
      border: 1px solid hsl(0, 100%, 69%);
      padding: 8px 16px;
    }
  }

  &.rest {
    position: relative;
    border: 1px solid var(--color--fg-default) !important;
    justify-content: center;
    align-items: center;

    .spaceship-sub-bloc {
      opacity: .33;
    }

    &::after {
      position: absolute;
      content: 'Repos';
      font-size: 24px;
      color: var(--color--fg-default);
      border: 1px solid var(--color--fg-default);
      padding: 8px 16px;
    }
  }

  &.current {
    background-color: var(--color--outline-primary);
    border: 1px dashed var(--color--primary) !important;
    color: var(--color--primary);

    &::after {
      color: var(--color--primary);
      border-color: var(--color--primary);
    }
  }

  .spaceship-sub-bloc {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;

    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      /* background-color: var(--color--default-light); */
      font-weight: 600;
      margin-bottom: 8px;
      /* padding: 8px; */
      text-align: center;
    }

    .mini-header {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      gap: 8px;

      .spaceship-img-container {
        --width: 25%;
      }
    }

    .spaceship-img-container {
      --width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: var(--width); width: var(--width); max-width: var(--width);
      aspect-ratio: 4.5/3;
      background-position: center;
      background-size: cover;
    }

    .slots-label {
      margin: 0 auto;
    }

  }
}
.available-slots-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 16px;

  .available-slot-icon, .full-slot-icon {
    --size: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: var(--size); width: var(--size); max-width: var(--size);
    min-height: var(--size); height: var(--size); max-height: var(--size);
    margin: 8px 0;
    font-size: 16px;
    line-height: 16px;
  }

  .available-slot-icon {
    border: 1px solid var(--color--fg-10);
    opacity: .5;
  }

  .full-slot-icon {
    border: 1px solid var(--color--fg-10);

    &.Commun {
      border-color: var(--color--common);
    }
    &.Inhabituel {
      border-color: var(--color--uncommon);
    }
    &.Rare {
      border-color: var(--color--rare);
    }
    &.Légendaire {
      border-color: var(--color--legendary);
    }
  }
}

/* Entrepôt ================================================================ */

/* Marchés ================================================================= */
#officialPricesContainer {
  width: 100%;
} 
#blackPricesContainer {
  width: 100%;
} 

/* Système ================================================================= */
#systemDisplay {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  /* padding: 2svh var(--horizontal-padding); */
  min-width: 100%; width: 100%; max-width: 100%;
  min-height: 100%; height: 100%; max-height: 100%;
  gap: 8px;

  #cardContainer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%; max-width: 100%;
    gap: 8px;
    /* border: 1px solid var(--color--fg-default); */
    background-color: var(--color--bg-default);
    padding: 16px;

  }
  
  button {
    width: 100%;
    padding: 8px 16px;
  }
}

#flairContainer {
  width: 100%;

  .flair {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid var(--color--primary); */
    background-size: cover;
    background-position: center;
    background-color: transparent;
    width: 100%;
    aspect-ratio: 4/1;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    /* border-radius: 500px; */
    letter-spacing: 2px;
    position: relative;
  
    &.hidden {
      display: none;
    }

    &.FL_TC_03 {
      background-image: url('../medias/images/FL_TC_03.gif');
      color: hsl(210, 0%, 90%);
      font-weight: 800;
    }

    &.FL_OFF_02 {
      background-image: url('https://images.squarespace-cdn.com/content/v1/551a19f8e4b0e8322a93850a/3fe0ac3c-3143-4945-918f-c93c425aec10/Hyperspace_Beta_Stars_Loop.gif');
      background-image: url('https://i0.wp.com/media2.giphy.com/media/xTiTnkE9isjhcW6DMk/giphy.gif');
      background-image: url('https://i.gifer.com/embedded/download/Icq0.gif');
      background-image: url('https://64.media.tumblr.com/4388a50897cc78d72f5650feb9c401cf/tumblr_n9vufifCjZ1shpedgo1_500.gif');
      color: hsl(35, 100%, 80%);
    }

    &.FL_OFF_04 {
      letter-spacing: 3px;
      font-weight: 100;
      color: hsl(180, 100%, 90%);
      background-image: url('../medias/images/FL_OFF_04.gif');
      background-position-y: 65%;
    }

    &.FL_BLA_02 {
      background-image: url('../medias/images/FL_BLA_02.gif');
      color: hsl(25, 90%, 70%);
      letter-spacing: 3px;
    }

    &.FL_BLA_04 {
      background-image: url('../medias/images/FL_BLA_04.webp');
      color: hsl(0, 100%, 65%);
      background-position-y: 30%;
      letter-spacing: 8px;
      font-weight: 100;
    }
  
    span {
      display: flex;
      justify-content: center;
      align-items: center;
      /* border-radius: 500px; */
      
      width: 100%;
      height: 100%;
  
      background-color: hsla(0, 0%, 0%, 0.5);
    }
  }
}

.fight-container {
  --bar-height: 32px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  .headers {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;

    .header {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      text-align: center;
      width: 50%;
      gap: 8px;

      .header-label {
        width: 80%;
        padding: 4px;
        border: 1px solid var(--color--fg-default);
      }

      #officialReputationCard, #blackReputationCard {
        font-size: 18px;
      }
    }
  }

  .bars {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: fit-content;

    .bar {
      display: flex;
      align-items: center;
      width: 50%;
      min-height: var(--bar-height); height: var(--bar-height); max-height: var(--bar-height);
      border: 1px solid var(--color--fg-default);
      padding: 6px;

      span {
        opacity: 1;
        min-height: 100%; height: 100%; max-height: 100%;
        background: repeating-linear-gradient(
          -45deg, 
          #00000000, 
          #00000000 5px, 
          var(--color--primary) 5px, 
          var(--color--primary) 10px
        );
      }

      &.left {
        justify-content: flex-end;
        border-right: none;
        padding-right: 0;

        #officialBar {
          --width-percentage: 66%;
          min-width: var(--width-percentage);
        }
      }
      &.right {
        justify-content: flex-start;
        border-left: none;
        padding-left: 0;

        #blackBar {
          --width-percentage: 33%;
          min-width: var(--width-percentage);
        }
      }
    }

    .center {
      min-width: calc(var(--bar-height) / 3);
      min-height: calc(var(--bar-height) * 1.5);
      border: 1px solid var(--color--fg-default);
    }
  }
}

/* Aide ==================================================================== */
#helpDisplay {
  width: 100%;

  p {
    margin-bottom: 16px;
  }

  ul {
    margin: 0;
    padding-inline-start: 20px;
    margin-bottom: 16px;
  }

  h3 {
    color: var(--color--primary);
  }
  h4 {
    color: var(--color--primary);
    opacity: .66;
  }
}

/* Paramètres ============================================================== */
#settingsDisplay {
  width: 100%;

  .themes-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    gap: 8px;

    .theme-bloc {
      --bg-color: var(--color--bg-default);
      --fg-color: var(--color--fg-default);
      --primary-color: var(--color--fg-default);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      width: calc(50% - 4px);
      padding: 16px;
      background-color: var(--bg-color);
      border: 16px solid var(--color--bg-alt);
      outline: 4px solid var(--color--bg-alt);

      &.selected {
        outline: 3px solid var(--color--outline--primary);
      }

      &.light {
        --bg-color:      hsl(0, 0%, 85%);
        --primary-color: hsl(25, 100%, 40%);
        --fg-color:      hsl(0, 0%, 15%);
      }

      &.dark {
        --bg-color:      hsl(0, 0%, 15%);
        --primary-color: hsl(19, 99%, 67%);
        --fg-color:      hsl(0, 0%, 85%);
      }

      &.official {
        --bg-color:      hsl(40, 20%, 85%);
        --primary-color: hsl(180, 70%, 20%);
        --fg-color:      hsl(40, 20%, 15%);
      }

      &.unofficial {
        --bg-color:      hsl(220, 10%, 15%);
        --primary-color: hsl(0, 100%, 65%);
        --fg-color:      hsl(330, 10%, 85%);
      }

      .title {
        min-width: 100%;
        min-height: 16px;
        background-color: var(--primary-color);
        margin-bottom: 16px;
      }

      .bloc {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        min-width: 100%;

        .bloc-title {
          min-width: 100%;
          min-height: 8px;
          background-color: var(--primary-color);
          margin-bottom: 8px;
        }

        .bloc-text {
          min-width: 100%;
          min-height: 4px;
          background-color: var(--fg-color);
          margin-bottom: 4px;
        }
      }
    }
  }
}

/* Stockage ================================================================ */
#storageDisplay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* padding: 2svh var(--horizontal-padding); */
  min-width: 100%; width: 100%; max-width: 100%;
  min-height: 100%; height: 100%; max-height: 100%;
  /* gap: 2svh; */

  /* h1 {
    color: var(--color--fg-80);
    font-size: 2.5svh;
  } */

  .storage-option-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%; max-width: 100%;
    /* border: 1px solid black; */
    gap: 16px;

    button {
      width: 100%;
      height: 80px;
    }

    &.export {
      height: 35%; 
      /* background-color: white; */
    }
    &.import {
      height: 65%;
      /* background-color: var(--color--primary); */
    }
  }
}

/*
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Main page
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

/* 1. Déploiement ========================================================== */
#availableOfficialMissionsContainer,
#availableOfficialBlackContainer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}
.mission-bloc-container.new-mission {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;

  .mission-bloc.new-mission {
    --width: if(
      /* PHONE */ media(width < 767px):  calc((100svw - var(--horizontal-padding) - var(--horizontal-padding) - 16px - 26px) / 2);
      /* TABLET */media(width < 1280px): calc((50svw - var(--horizontal-padding) - 13px - 13px - 16px - calc(var(--horizontal-padding) / 4)) / 2);
      /* LAPTOP */media(width < 1920px): calc((50svw - var(--horizontal-padding) - 13px - 13px - 16px - 16px - calc(var(--horizontal-padding) / 4)) / 3);
      /* DESKTOP */ else:                calc((50svw - var(--horizontal-padding) - 13px - 13px - 16px - 16px - 16px - calc(var(--horizontal-padding) / 4)) / 4);
    );
    min-width: var(--width); width: var(--width); max-width: var(--width);

    .mission-sub-bloc.new-mission {
      flex-direction: row;
      align-items: center;
      gap: 8px;
    }
  }
}

/* 2. Transit ============================================================== */
#eventsContainer {
  --bloc-width: if(
    /* calc((100svw - var(--horizontal-padding) - var(--horizontal-padding) - 13px - 13px - 16px) / 2) */
    /* PHONE */ media(width < 767px):  100%;
    /* TABLET */media(width < 1280px): calc((100svw - var(--horizontal-padding) - var(--horizontal-padding) - 16px) / 2);
    /* LAPTOP */media(width < 1920px): calc((100svw - var(--horizontal-padding) - var(--horizontal-padding) - 16px - 16px) / 3);
    /* DESKTOP */ else:                calc((100svw - var(--horizontal-padding) - var(--horizontal-padding) - 16px - 16px - 16px) / 4);
  );

  display: flex;
  flex-direction: if((media(width > 766px)): row); else: column;);
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%; max-width: 100%;
  gap: 16px;

  .event-bloc {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: var(--bloc-width); width: var(--bloc-width); max-width: var(--bloc-width);
    padding: 8px 16px;
    background-color: var(--color--bg-default);
    gap: 8px;

    .crt {
      position: relative;
      background-color: hsl(159, 10%, 30%);
      color: hsl(159, 95%, 90%);
      border: 1px solid hsl(159, 10%, 50%);
      padding: 8px 16px;
      width: 100%;
      border-radius: 6px;

      .negative {
        color: hsl(0, 100%, 80%);
      }
      .positive {
        color: hsl(120, 100%, 80%);
      }
    }
  }
}

/* 3. Rapatriement ========================================================= */
#returnedOfficialMissions,
#returnedBlackMissions {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}
.mission-bloc-container {
  display: flex;
  flex-direction: row;
  min-width: 100%;
  height: fit-content;
  flex-wrap: wrap;
  gap: 24px;

  .mission-bloc {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    min-width: 100%; width: 100%; max-width: 100%;
    border: 1px dashed var(--color--fg-default);
    padding: 8px;
  
    &.assigned {
      filter: grayscale(.66);
      justify-content: center;
      align-items: center;
      opacity: .33;
    }
  
    &.returned {
      background-color: var(--color--bg-default);
      border: none;
    }
  
    .mission-sub-bloc {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      width: 100%;
  
      .title {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        /* background-color: var(--color--default-light); */
        font-weight: 600;
        margin-bottom: 8px;
        /* padding: 8px; */
        text-align: center;
      }
  
      .mini-header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        gap: 8px;
  
        .spaceship-img-container {
          --width: 25%;
        }
      }
  
      .spaceship-img-container {
        --width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: var(--width); width: var(--width); max-width: var(--width);
        aspect-ratio: 4.5/3;
        background-position: center;
        background-size: cover;
      }
  
      .slots-label {
        margin: 0 auto;
      }
    }
  }
}

/* 4. Vente ================================================================ */

/* 5. Revenus passifs ====================================================== */

/* 6. Recrutement ========================================================== */
#recruitableCrewsContainer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

/* 7. Investissements ====================================================== */

/* 8. Réajustements ===================================================)==== */
#officialUpdatedPricesContainer {
  width: 100%;
}
#blackUpdatedPricesContainer {
  width: 100%;
}

/*
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Divers
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/











#pricesCentralContainer,
#officialUpdatedPricesContainer ,
#blackUpdatedPricesContainer {
  
  .price-cell {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    text-align: end;
    white-space: nowrap;
    gap: 4px;
    height: 36px;
  }

  .up, .equal, .down {
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 16px;
    text-align: center;
  }

  .up {
    color: yellowgreen;
  }
  .equal {
    color: var(--color--fg-70);
  }
  .down {
    color: red;
  }
}




.ressources-prices-table {
  font-size: var(--font-size--default);
  width: 100%;
  border-collapse: collapse;

  th {
    border-bottom: 1px solid var(--color--fg-default);
    padding: 8px 0;
  }

  td {
    padding: 8px 0;
  }

  tr:not(:last-of-type) {
    border-bottom: 1px solid var(--color--fg-60);
  }
}



#officialWarehouseList, #officialSellableList,
#blackWarehouseList, #blackSellableList {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%; max-width: 100%;

  .warehouse-list {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%; max-width: 100%;
    flex-wrap: wrap;
    gap: 16px;

    .warehouse-slot-bloc {
      --bloc-size: if(
        /* calc((100svw - var(--horizontal-padding) - var(--horizontal-padding) - 13px - 13px - 16px) / 2) */
        /* PHONE */ media(width < 767px):  calc((100svw - var(--horizontal-padding) - var(--horizontal-padding) - 13px - 13px - 16px) / 2);
        /* TABLET */media(width < 1280px): calc((50svw - var(--horizontal-padding) - 13px - 13px - 16px - calc(var(--horizontal-padding) / 4)) / 2);
        /* LAPTOP */media(width < 1920px): calc((50svw - var(--horizontal-padding) - 13px - 13px - 16px - 16px - calc(var(--horizontal-padding) / 4)) / 3);
        /* DESKTOP */ else:                calc((50svw - var(--horizontal-padding) - 13px - 13px - 16px - 16px - 16px - calc(var(--horizontal-padding) / 4)) / 4);
      );
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 4px;
      min-width: var(--bloc-size); width: var(--bloc-size); max-width: var(--bloc-size);

      min-height: if(
        /* PHONE */ media(width < 767px): var(--bloc-size);
        /* TABLET */media(width < 1280px): calc(var(--bloc-size) / 1);
        /* LAPTOP */media(width < 1920px): calc(var(--bloc-size) / 1);
        /* DESKTOP */ else: calc(var(--bloc-size) / 1);
      );

      height: if(
        /* PHONE */ media(width < 767px): var(--bloc-size);
        /* TABLET */media(width < 1280px): calc(var(--bloc-size) / 2);
        /* LAPTOP */media(width < 1920px): calc(var(--bloc-size) / 2);
        /* DESKTOP */ else: calc(var(--bloc-size) / 2);
      );

      max-height: if(
        /* PHONE */ media(width < 767px): var(--bloc-size);
        /* TABLET */media(width < 1280px): calc(var(--bloc-size) / 2);
        /* LAPTOP */media(width < 1920px): calc(var(--bloc-size) / 2);
        /* DESKTOP */ else: calc(var(--bloc-size) / 2);
      );



      border: 1px solid;
      padding: 8px;

      &.Commun {
        border-color: var(--color--common);
      }
      &.Inhabituel {
        border-color: var(--color--uncommon);
      }
      &.Rare {
        border-color: var(--color--rare);
      }
      &.Légendaire {
        border-color: var(--color--legendary);
      }

      &.sellable {
        border-style: dashed;
        &:hover {
          @media (pointer: fine) {
            cursor: pointer;
            background-color: var(--color--bg-default);
          }
        }
      }

      .ask {
        font-size: 12px;
      }

      .up, .equal, .down {
        margin-left: 4px;
      }

      .up {
        color: yellowgreen;
      }
      .equal {
        color: hsl(0, 0%, 30%);
      }
      .down {
        color: red;
      }
    }
  }
}

.warehouse-wrapper {
  display: flex;
  flex-direction: if(media(width < 767px): column; else: row;);
  width: 100%;
  gap: if((media(width > 766px)): calc(var(--horizontal-padding) / 2););

  .warehouse-sub-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  hr {
    display: if((media(width > 766px)): none;);
  }
}

.missions-wrapper {
  display: flex;
  flex-direction: if(media(width < 767px): column; else: row;);
  width: 100%;
  gap: if((media(width > 766px)): calc(var(--horizontal-padding) / 2););

  .missions-sub-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  hr {
    display: if((media(width > 766px)): none;);
  }
}

.market-wrapper {
  display: flex;
  flex-direction: if(media(width < 767px): column; else: row;);
  width: 100%;
  gap: if((media(width > 766px)): calc(var(--horizontal-padding) / 2););

  .market-sub-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  hr {
    display: if((media(width > 766px)): none;);
  }
}

.ressource-image {
  --size: 40%;
  min-width: var(--size); width: var(--size); max-width: var(--size);
  min-height: var(--size); height: var(--size); max-height: var(--size);
  background-size: cover;
  background-position: center;

  &.default {
    filter: var(--filter--fg-default);
  }

  &.Commun {
    filter: var(--filter--common);
  }
  &.Inhabituel {
    filter: var(--filter--uncommon);
  }
  &.Rare {
    filter: var(--filter--rare);
  }
  &.Légendaire {
    filter: var(--filter--legendary);
  }

  &.Minerai {
    background-image: url('../medias/images/icons/minerai.png');
  }
  &.Composants {
    background-image: url('../medias/images/icons/composants.png');
  }
  &.Nanotech {
    background-image: url('../medias/images/icons/nanotech.png');
  }

  &.Armement {
    background-image: url('../medias/images/icons/armement.png');
  }
  &.Narcotix {
    background-image: url('../medias/images/icons/narcotix.png');
  }
  &.Artefact {
    background-image: url('../medias/images/icons/artefact.png');
  }
}



.qty-line {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.qty-bloc {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 8px;
  color: var(--color--fg-default);
  font-size: var(--font-size--default);
  line-height: var(--font-size--default);
  border: 1px solid var(--color--fg-default);

  &.common {
    color: var(--color--common);
    border-color: var(--color--common);
  }
  &.uncommon {
    color: var(--color--uncommon);
    border-color: var(--color--uncommon);
  }
  &.rare {
    color: var(--color--rare);
    border-color: var(--color--rare);
  }
  &.legendary {
    color: var(--color--legendary);
    border-color: var(--color--legendary);
  }
}


.spaced-text {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
}



#popUp {
  position: absolute;
  top: var(--height--header);
  left: var(--horizontal-padding);
  width: calc(100svw - var(--horizontal-padding) - var(--horizontal-padding));
  height: calc(100svh - var(--height--header) - 8px);
  background-color: var(--color--bg-alt);
  border: 1px solid var(--color--fg-default);

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  &.hidden {
    display: none;
  }

  button {
    width: 100%;
  }

  .pop-up-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-width: 100%; width: 100%; max-width: 100%;
    min-height: var(--height--header); height: var(--height--header); max-height: var(--height--header);
    padding: 8px var(--horizontal-padding);
    background-color: var(--color--bg-default);

    .title-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-width: 100%; width: 100%; max-width: 100%;
      min-height:fit-content; height:fit-content; max-height:fit-content;
      margin-bottom: 8px;
      background-color: var(--color--bg-default);
      
      h1, h2, h3 {
        margin: 0;
      }
    }
  }

  .pop-up-body {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 100%; width: 100%; max-width: 100%;
    min-height: calc(100% - var(--height--header)); height: calc(100% - var(--height--header)); max-height: calc(100% - var(--height--header));
    padding: 16px var(--horizontal-padding);
    overflow-y: scroll;
    gap: 16px;

    .ressource-image {
      --size: 50svw;
      border: 2px solid;
    }

    .crt {
      position: relative;
      background-color: hsl(159, 10%, 30%);
      color: hsl(159, 95%, 90%);
      border: 1px solid hsl(159, 10%, 50%);
      padding: 8px 16px;
      width: 100%;
      border-radius: 6px;
    }
  }
}



#investmentsContainer, 
#passiveInfrasContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;

  .infra-path-bloc {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;

  }
}
.infra-bloc {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border: 1px solid white;
  padding: 8px;

  &.unavailable {
    /* opacity: .66; */
    border-color: var(--color--error);

    &.too-expensive .cost-txt {
      color: var(--color--error);
    }
    &.no-crew .crew-txt {
      color: var(--color--error);
    }
    &.no-rep .rep-txt {
      color: var(--color--error);
    }
  }

  &.hidden {
    opacity: .33;
    position: relative;
    border-color: white;
    color: transparent;
    min-height: 50px;
    background-color: transparent !important;

    &::after {
      content: 'CACHÉ';
      position: absolute;
      top: 0;
      left: 0;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      letter-spacing: 4px;
      font-size: 16px;
    }

    span {
      display: none;
    }
    hr {
      display: none;
    }
    button {
      display: none;
    }
  }

  &.bought {
    border: none;
    background-color: var(--color--bg-default);
  }

  &.updated {
    background-color: var(--color--success--alpha);
  }



  .label {
    margin: 0 auto;
    margin-bottom: 16px;
    font-size: 18px;
  }

  .category-label {
    margin: 0 auto;
    font-size: 16px;
  }

  .lzr-button {
    margin-top: 8px;
    width: 100%;
  }
}



input[type=file] {
  position: relative;
  border-radius: var(--border-radius--button);
  min-width: 100%; width: 100%; width: 100%;
  min-height: 80px; height: 80px; max-height: 80px;
}


input[type=file]::file-selector-button {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  min-height: 80px; height: 80px; max-height: 80px;
}

.error-bloc {
  width: 100%;
  /* padding: 8px 12px; */
  color: var(--color--error);
}

.cycle-display {
  margin: 0 auto; 
  padding: 0 8px 2px 8px; 
  border: 1px solid var(--color--fg-default);
}




#gameOverContainer {
  position: fixed;
  top: 0;
  left: 0;
  background-color: black;
  width: 100svw;
  height: 100svh;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px var(--horizontal-padding);
  gap: 16px;

  &.hidden {
    display: none;
  }

  .crt {
    position: relative;
    background-color: hsl(159, 10%, 30%);
    color: hsl(159, 95%, 90%);
    border: 1px solid hsl(159, 10%, 50%);
    padding: 8px 16px;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    
    .negative {
      color: hsl(0, 100%, 80%);
    }
    .positive {
      color: hsl(120, 100%, 80%);
    }
}

  button {
    width: 100%;
  }
}

#startGameContainer {
  position: fixed;
  top: 0;
  left: 0;
  background-color: black;
  width: 100svw;
  height: 100svh;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px var(--horizontal-padding);
  gap: 16px;

  &.hidden {
    display: none;
  }

  .crt {
    position: relative;
    background-color: hsl(159, 10%, 30%);
    color: hsl(159, 95%, 90%);
    border: 1px solid hsl(159, 10%, 50%);
    padding: 8px 16px;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    
    .negative {
      color: hsl(0, 100%, 80%);
    }
    .positive {
      color: hsl(120, 100%, 80%);
    }
}

  button {
    width: 100%;
  }
}






























































/* CRT */
@keyframes textShadow {
  0%   { text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  5%   { text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  10%  { text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  15%  { text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  20%  { text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  25%  { text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  30%  { text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  35%  { text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  40%  { text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  45%  { text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  50%  { text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  55%  { text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  60%  { text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  65%  { text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  70%  { text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  75%  { text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  80%  { text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  85%  { text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  90%  { text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  95%  { text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
  100% { text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px; }
}

@keyframes flicker {
  0%   { opacity: 0.27861; }
  5%   { opacity: 0.34769; }
  10%  { opacity: 0.23604; }
  15%  { opacity: 0.90626; }
  20%  { opacity: 0.18128; }
  25%  { opacity: 0.83891; }
  30%  { opacity: 0.65583; }
  35%  { opacity: 0.67807; }
  40%  { opacity: 0.26559; }
  45%  { opacity: 0.84693; }
  50%  { opacity: 0.96019; }
  55%  { opacity: 0.08594; }
  60%  { opacity: 0.20313; }
  65%  { opacity: 0.71988; }
  70%  { opacity: 0.53455; }
  75%  { opacity: 0.37288; }
  80%  { opacity: 0.71428; }
  85%  { opacity: 0.70419; }
  90%  { opacity: 0.7003; }
  95%  { opacity: 0.36108; }
  100% { opacity: 0.24387; }
}

.crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  /* z-index: 2; */
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  /* z-index: 2; */
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
.crt {
  animation: textShadow 1.6s infinite;
}