/* RESET BASE */
*,
::after,
::before {
  box-sizing: border-box;
}

/* BODY */
body {
  color: black;
  font-size: 13px;   /* era 27px */
  line-height: 25px; /* era 50px */
  font-weight: 400;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  word-break: break-word;
  font-family: Harrington;
  margin: 0;
  background: url("3.jpg") center center / cover no-repeat #1a1a1a;
  background-attachment: fixed;
  min-height: 125vh; /* era 250vh */
  height: auto;
  box-shadow:
    0 0 3px gold inset,
    0 0 3px gold inset,
    0 0 3px gold inset,
    0 0 3px gold inset;
}

/* MONDO CHE GIRA */
.grid-center {
  display: grid;
  justify-items: center;
  align-items: start;
  margin-top: 5px; /* era 10px */
}

/* MOBILE RESPONSIVE */
@media screen and (max-width: 768px) {
  .titolo {
    width: 104px; /* era 288px */
  }
  .iframe4.visible { opacity: 1; transform: scale(0.5); }
  body {
    font-size: 1.1rem; /* era 2.2rem */
  }
  /* IFRAME */
}




/* ANIMAZIONI */
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

/* IFRAME */
.iframe4 {
  opacity: 0;
  
  transform: scale(0.3);
  transition: opacity 0.6s ease, transform 0.4s ease;
  font-size: 1.0rem; /* era 2.4rem */
  margin-top: 20px;  /* era 40px */
}
.iframe4.visible { opacity: 1; transform: scale(1); }

/* OMINO */
#omino-wrapper {
  min-height: 1vh; /* era 2vh */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PULSANTE */
.pulsante-oro {
  color: black;
  font-family: 'Cormorant Garamond', serif;
  animation: pulse 2s infinite;
  transition: transform 0.8s ease;
  display: inline-block;
}

/* SERVIZI */
.servizi-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px; /* era 16px */
  padding: 8px; /* era 16px */
  max-width: 100%;
}
.servizio {
  flex: 0 1 60px; /* era 120px */
  text-align: center;
  padding: 4px; /* era 8px */
  border-radius: 3px; /* era 6px */
  color: black;
  font-size: 1.15rem; /* era 2.3rem */
  text-shadow: 0 0 3px #ffffff; /* era 6px */
}
.servizio img {
  display: block;
  margin: 0 auto 3px; /* era 6px */
  width: 118px; /* era 237px */
  height: auto;
}

/* VETRO */
.vetro1 {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.6s ease, transform 0.4s ease;
  margin-left: 10px; /* era 20px */
  margin-right: 10px; /* era 20px */
  font-size: 1.1rem; /* era 2.2rem */
}
.vetro1.visible { opacity: 1; transform: translateY(0); }

.vetro2 {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.6s ease, transform 0.4s ease;
  font-size: 1.2rem; /* era 2.4rem */
  margin-top: 60px;  /* era 120px */
}
.vetro2.visible { opacity: 1; transform: scale(1); }

.vetro3 {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.6s ease, transform 0.4s ease;
  font-size: 1.1rem; /* era 2.2rem */
  margin-top: 5px;   /* era 10px */
}
.vetro3.visible { opacity: 1; transform: scale(1); }

.vetro4 {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.6s ease, transform 0.4s ease;
  font-size: 1.1rem; /* era 2.2rem */
  margin-top: 5px;   /* era 10px */
}
.vetro4.visible { opacity: 1; transform: scale(1); }

/* VISITARE */
.visitare {
  display: block;
  margin: 0 auto;
  animation: pulse 1.5s infinite;
}

/* GAME SECTION */
.game-section {
  padding: 30px 25px; /* era 60px 50px */
}
.game-section .item {
  margin: 0 8px 30px; /* era 0 15px 60px */
  width: 160px;       /* era 320px */
  height: 200px;      /* era 400px */
}
.game-section .item.active {
  width: 250px;       /* era 500px */
  box-shadow: 6px 20px 20px rgba(0,0,0,0.25);
}
.game-section .item-desc {
  padding: 0 12px 6px; /* era 24px 12px */
  transform: translateY(calc(100% - 27px)); /* era 54px */
}
.game-section .item.active .item-desc { transform: none; }
.game-section .item-desc p {
  opacity: 0;
  transform: translateY(16px); /* era 32px */
}
.game-section .item.active .item-desc p {
  opacity: 1;
  transform: translateY(0);
}

/* CONTAINER & SLIDER */
.container {
  width: 80%;
  height: 800px; /* era 800px */
  margin: auto;
  position: relative;
}
.slider {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px; /* era 15px */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* era 0 4px 8px */
  position: relative;
  overflow: hidden;
}
.slider img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}
.slider img.active { opacity: 1; transform: translateX(0); }
.slider img.previous { transform: translateX(-100%); }

.navigation-button {
  position: absolute;
  bottom: 10px; /* era 20px */
  width: 100%;
  text-align: center;
}
.line {
  cursor: pointer;
  height: 5px; /* era 10px */
  width: 5px;  /* era 10px */
  margin: 0 3px; /* era 5px */
  background-color: #777;
  border-radius: 50%;
}
.line.active { background-color: #ffffff; transform: scale(1.2); }

.nav-button {
  position: absolute;
  top: 50%;
  background-color: rgba(134,129,129,0.5);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px; /* era 24px */
  padding: 7px;    /* era 15px */
  z-index: 10;
  transform: translateY(-50%);
}
.nav-button:hover { background-color: rgba(0,0,0,0.5); }
.prev { left: 8px; } /* era 15px */
.next { right: 8px; } /* era 15px */




       #form1 {
            background: transparent;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            width: 90%;
            text-align: center;
            
        }
        pre {
            text-align: center;
            background: #eee;
            
            white-space: pre-wrap;
            word-wrap: break-word;
        }
   #chatBox {
  padding: 10px;
  box-sizing: border-box;
  overflow-wrap: break-word;   /* forza l'andare a capo */
  word-wrap: break-word;       /* compatibilità */
  white-space: normal;         /* permette il ritorno a capo */
}

pre {
  text-align: center;
  background: #eee;
  white-space: pre-wrap;       /* mantiene gli spazi ma va a capo */
  word-wrap: break-word;       /* compatibilità */
  overflow-wrap: break-word;   /* forza l'andare a capo */
  padding: 10px;
  margin: 0;
}



@media screen and (max-width: 768px) {
  .container {
    width: 95%;              /* da 80% → più largo su mobile */
    height: 500px;           /* da 800px → dimezzato */
    margin: auto;
    position: relative;
  }

  .slider {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 26px;      /* da 8px → leggermente ridotto */
    box-shadow: 0 1px 2px rgba(0,0,0,0.15); /* da 0 2px 4px → più leggero */
    position: relative;
    overflow: hidden;
  }

 .slider img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;   /* elimina spazi inline */
  margin: 0;        /* nessun margine */
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

}