@font-face {
  font-family: "Mono";
  src: url("font.ttf") format("truetype");
}
@font-face {
  font-family: "Pixel";
  src: url("pixel.ttf") format("truetype");
}
@font-face {
  font-family: "Geist";
  src: url("geist.ttf") format("truetype");
}

/*MAIN STRUCTURE*/

html {
  font-size: 100%;
  font-family: "Mono", sans-serif;
}
body {
  background-color: #051f39;
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow:hidden;
  
}
.desktop {
  background-color: #051f39;
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: 1fr max-content;
  height: 100vh;
  width: 100vw;
  margin: 0;
}

.windows {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  gap: 100px;
  height: 100%;

  margin: 0;
  align-items: center;
  justify-content: center;
}

.window {
  border: solid 0.1rem #051f39;
  box-shadow: 0.3rem 0.3rem #ee9e94;
  border-radius: 4px;
  flex-shrink: 0;

  background-color: #c53a9d;
  height: fit-content;
}

.btn_macchina {
  border: none;
  background: none;

  cursor: pointer;
  margin: 0;
}

.window_machine {
  visibility: hidden; /*hidden*/
  width: 300px;
}

.main_window {
  border: solid 0.1rem #051f39;
  margin: 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  background-color: #79609d;
  padding: 1.5rem;
}
.main_window_scheda {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  margin: 0.2rem;
  justify-content: center;
  align-items: center;
  border: solid 0.1rem #051f39;
  background-color: #79609d;
}

.window_scheda {
  visibility: hidden; /*hidden*/
  position: relative;
}

.header {
  background-color: #051f39;
  margin: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2rem;
}

.scritta {
  visibility: hidden;
  padding-left: 0.5rem;
  margin-top: 2rem;
  color: #c53a9d;
  border-right: 2px solid #c53a9d;
  white-space: nowrap;
  overflow: hidden;
}

.machine_aperta {
  visibility: visible;
  transform: translateY(-50%);
  animation:
    typewriter 1s steps(17) 1 normal both,
    blinkingCursor 1000ms steps(17) infinite normal;
}

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 17ch;
  }
}
@keyframes blinkingCursor {
  from {
    border-right-color: #c53a9d;
  }
  to {
    border-right-color: transparent;
  }
}
.scritta_scheda {
  visibility: hidden;
  padding-left: 0.5rem;
  margin-top: 2rem;
  color: #ff8e80;
  border-right: 2px solid #ff8e80;
  white-space: nowrap;
  overflow: hidden;
}

.scheda_aperta {
  visibility: visible;
  transform: translateY(-50%);
  animation:
    typewriter_scheda 1s steps(20) 1 normal both,
    blinkingCursor_scheda 1000ms steps(20) infinite normal;
}

@keyframes typewriter_scheda {
  from {
    width: 0;
  }
  to {
    width: 20ch;
  }
}

@keyframes blinkingCursor_scheda {
  from {
    border-right-color: #ff8e80;
  }
  to {
    border-right-color: transparent;
  }
}

.close_window {
  padding: 3px;
  border-color: #c53a9d;
  background-color: #051f39;
  border-radius: 2px;
  margin-right: 3px;
  font-size: 20px;
  text-align: center;
  line-height: 0.8;
  color: #c53a9d;
  cursor: pointer;
}
.controls_scheda {
  padding: 3px;
  border-color: #c53a9d;
  background-color: #051f39;
  border-radius: 2px;
  margin-right: 3px;
  font-size: 20px;
  text-align: center;
  line-height: 0.8;
  color: #ff8e80;
  cursor: pointer;
}

/*ELEMENTI AZIONI*/

.close {
  cursor: pointer;
}

/*STICKY ELEMENTS*/
.cartelle {
  grid-column: 1;
  grid-row: 1;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.btn_saved,
.btn_open_game {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}

.btn_open_game img {
  transform: scale(1);
}

.cartelle p {
  margin: 0;
  color: #ff8e80;
}

footer {
  font-size: 0.8rem;
  padding: 10px 0;
  width: 100%;
  display: flex;
  justify-content: center;
  white-space: nowrap;
  grid-column: 1/3;
  grid-row: 2;
  color: #051f39;
  height: max-content;
  background-color: #79609d;
}

/*LATO SX CONTENUTI*/
.macchina {
  width: 204px;
  height: 256px;
  /*transform: scale(1.3);*/
  background-image: url("assets/gacha_piccola.png");
  background-position: 0px 0px;
}

.macchina.attiva {
  animation: animazioneMacchina 4.3s steps(9) forwards;
}

@keyframes animazioneMacchina {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: -1836px 0px;
  }
}

.btn_pixel {
  width: 127px;
  height: 100px;
  transform: scale(1);
  /* box-shadow: 0.4rem 0.4rem 0.4rem #d97fc0;*/
  background-image: url("assets/pixel-2.png");
  background-position: 0px 0px;
  /*font-size: 1.5rem;
  color: #c53a9d;
  text-shadow:
    0 0 5px #c53a9d,
    0 0 10px #c53a9d,
    0 0 20px #c53a9d,
    0 0 40px #c53a9d,
    0 0 80px #fff,
    0 0 100px #fff;*/
}

.btn_pixel.press {
  animation: animazioneBottone 0.2s steps(7) forwards;
}

@keyframes animazioneBottone {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: -895px 0px;
  }
}

/*LATO DX CONTENUTI*/

.contenitore_scheda {
  visibility: hidden; /*hidden*/
  height: 425px;
  width: 300px;
  perspective: 1000px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: scale(0.1); /*0.1*/
  opacity: 1;
  transform-origin: center center;
  will-change: transform, opacity;
}
.contenitore_scheda.visibile {
  visibility: visible;
  z-index: 1;
  transform: scale(1);
  transition:
    transform 1.4s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
    visibility 0s linear 0s;
  opacity: 1;
}

.contenitore_scheda:hover {
  transform: rotate(-2deg);
}

.scheda {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;

  position: relative;
  color: #051f39;
}

.scheda.flipped {
  transform: rotateY(180deg);
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: solid 0.1rem #051f39;
  border-radius: 20px;
  box-sizing: border-box;
  box-shadow: 5px 5px 15px #051f39;
  background-color: #79609d;
}

.face.front {
  display: flex;
  flex-direction: column;
}

.quote {
  font-size: 18px;
  font-family: "Geist";
  padding: 0.7rem;
  margin: 0;
  text-align: center;
  font-style: italic;
  color: #051f39;
  cursor: pointer;
}

span:hover {
  color: #c53a9d;
  cursor: pointer;
}

.face.back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.titolo {
  font-size: 20px;
  color: #051f39;
  font-weight: bold;
}
.face.back p {
  margin: 0;

  overflow-wrap: break-word;
  word-break: break-word;
  width: 100%;
}

.face.back,
.autore,
.location,
.contenitore_commenti {
  font-size: 12px;
}

.contenitore_descrizione {
  border: solid 0.1rem #051f39;
  height: 100%;

  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.intestazione_descrizione {
  height: 25px;
  background-color: #051f39;
}

.notes {
  color: #ff8e80;
  margin: 0;
  font-size: 13px;
  padding-left: 5px;
  line-height: 1.3;
}

.div_descrizione {
  /*overflow: scroll;
  scrollbar-color: #79609d transparent;
  scrollbar-width: thin;*/
  padding: 8px;
  background-color: #f79fde;
  height: 100%;
}
.div_descrizione p {
  color: #051f39;
  font-family: "Mono";
  line-height: 1;
  text-align: left;
  word-spacing: -3px;
  font-size: 12px;
}

.tags {
  font-size: 12px;
  font-style: italic;
  color: #ff8e80;
}
.contenitore_back_content {
  background-color: #c53a9d;
  margin: 0.6rem;
  border: solid 0.1rem #051f39;
  border-radius: 4px;
  height: 100%;
  padding: 0.5rem;

  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.contenitore_front_content {
  margin: 0.6rem;
  background-color: #c53a9d;
  border: solid 0.1rem #051f39;
  border-radius: 4px;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contenitore_quote {
  display: flex;
  height: 100%;
  padding: 10px;
  flex-direction: column;
  justify-content: center;
}

.save {
  background: none;
  align-self: flex-end;
  border: none;
  padding: 2px;
  cursor: pointer;
  line-height: 1;
  font-size: 30px;
  color: #051f39;
  font-family: "Times New Roman", Times, serif;
}
.download {
  background: none;
  align-self: flex-end;
  letter-spacing: -3px;
  border: none;
  cursor: pointer;
  line-height: 1;
  font-size: 20px;
  color: #051f39;
  font-family: "Times New Roman", Times, serif;
}

.pallina {
  position: absolute;
  display: none; /*none*/
  height: 312px;
  width: 192px;
  background-image: url("assets/pallina.png");
  background-position: 0px 0px;
  margin-bottom: 1rem;
}

.pallina.open {
  display: block;
  animation: animazionePallina 1s steps(5) forwards;
}

@keyframes animazionePallina {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: -960px 0px;
  }
}

/*SALVATI*/

.saved_sezione {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #051f39;
  z-index: 2;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.saved_cards {
  display: flex;
  gap: 35px;
  width: 90%;
  height: 90%;
  overflow-x: scroll;
  justify-items: center;
  align-items: center;
  scrollbar-color: #c53a9d transparent;
  scrollbar-width: thin;
  padding: 1rem;
}
.saved_cards .contenitore_scheda {
  flex-shrink: 0;
}

.close_saved {
  position: fixed;
  top: 0.5rem;
  right: 1rem;
  margin: 0;
  cursor: pointer;
  color: #ff8e80;
}

.panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 600px;
  background-color: #c53a9d;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  padding: 10px;
}

.panel.open {
  transform: translateX(0);
}
.about_container {
  height: 90%;
  overflow-y: scroll;
  scrollbar-color: #051f39 transparent;
  scrollbar-width: thin;
  padding: 10px;
  font-size: 13px;
  text-align: left;
  color: #051f39;
}
.about_container a {
  color: #ff8e80;
}

.about_container h3 {
  font-size: 15px;
  margin: 0;
}


@media screen and (max-width: 768px) {
  
  body {
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
  }


  .desktop {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto max-content;
    height: auto;
    min-height: 100vh;
  }


  .cartelle {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    height: auto;
    margin: 15px 0;
    padding: 0 10px;
  }

  /* 4. FINESTRE (CENTRO):
     Cambiamo da Flex orizzontale a Flex verticale così non escono dallo schermo a destra. 
     Riduciamo il gap da 100px a 30px. */
  .windows {
    grid-column: 1;
    grid-row: 2;
    flex-direction: column;
    gap: 30px;
    padding: 20px 10px;
    height: auto;
  }

  /* 5. OTTIMIZZAZIONE FINESTRE:
     Assicuriamoci che non superino la larghezza dello schermo dello smartphone */
  .window, 
  .window_machine, 
  .contenitore_scheda {
    max-width: 90vw;
    box-sizing: border-box;
  }

  /* Correzione per la macchina per non romperne le proporzioni */
  .window_machine {
    width: 100%;
    max-width: 300px;
  }
  .panel {
    bottom: 100px;
    height: 500px;
  }

  /* 6. FOOTER:
     Lo agganciamo correttamente alla terza riga della nuova griglia mobile */
  footer {
    grid-column: 1;
    grid-row: 3;
    margin-top: 20px;
    white-space: normal; /* Permette al testo del footer di andare a capo se troppo lungo */
    text-align: center;
    font-size: 10px;
  }
}