html, body {
  width:100%; height:100%; overflow:hidden;
  background:#000;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.bg {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:#000;
}

.stage {
  position:fixed; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
}

/* ---------------- MAGLIETTA (immagine, grande, centrata) ---------------- */
.shirt-wrap {
  position:relative; z-index:2;
  height:97vh; max-width:92vw;
  display:flex; align-items:center; justify-content:center;
  transition: transform 0.25s ease-out;
}
.shirt-wrap img,
.shirt-wrap svg { height:100%; width:auto; }

/* ---------------- SLOT DEI DESIGN (sinistra / centro-sopra-maglietta / destra) ----------------
   .slots è annidato dentro .shirt-wrap e usa position:absolute (non più
   fixed): così "top:38%" è relativo all'altezza della maglietta stessa,
   non a quella del viewport. Su mobile la maglietta è dimensionata in base
   alla larghezza (vedi media query sotto) e quindi occupa un'altezza dello
   schermo molto diversa da quella desktop: con top:38% legato al viewport
   il design finiva troppo in alto, vicino al colletto invece che al petto. */
.slots {
  position:absolute; top:41%; left:0; width:100%; z-index:3;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.slot-card {
  position:absolute; top:50%; left:50%;
  height:270px; width:auto;
  display:flex; align-items:center; justify-content:center;
  transition: transform 0.75s cubic-bezier(.16,1,.3,1), opacity 0.6s ease;
}
.slot-card img {
  height:100%; width:auto; display:block;
}

#loading {
  position:fixed; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  background:#000; color:#6c6c72; font-size:0.85rem; letter-spacing:0.08em;
  text-transform:uppercase;
  transition:opacity 0.4s ease;
}

/* ---------------- BOTTONE INVERTI COLORI (in alto a destra) ---------------- */
.toggle-btn {
  position:fixed; top:10px; right:30px; z-index:2100;
  width:80px; height:80px;
  background-image:url('invert_button.png');
  background-size:contain; background-repeat:no-repeat; background-position:center;
  background-color:transparent; border:none; cursor:pointer; padding:0;
  clip-path: inset(2px);
}
.toggle-btn:hover { transform:none; }

html.light-mode { filter:invert(1); transition:filter 0.5s ease; }

/* ---------------- BOTTONE INFO spostato in basso a destra (per il momento) ---------------- */
.info-btn { top:auto; bottom:30px; }

/* ---------------- RESPONSIVE MOBILE ----------------
   Sotto i 768px la maglietta va dimensionata in base alla LARGHEZZA (non
   più all'altezza, vedi .shirt-wrap sopra): su schermi stretti e alti,
   height:97vh avrebbe reso l'immagine molto più larga dello schermo,
   tagliando le maniche ai lati. Anche gli slot dei design e i due bottoni
   in alto/basso a destra si riducono per non affollare lo schermo. */
@media (max-width: 767px) {
  .shirt-wrap {
    height:auto; width:88vw; max-width:88vw;
  }
  .shirt-wrap img,
  .shirt-wrap svg { width:100%; height:auto; }

  /* Altezza E larghezza massima in vw (non px fissi): il design al centro
     viene ingrandito 1.35x da tshirt.js, quindi il limite va calcolato già
     tenendo conto di quel fattore, altrimenti il risultato finale (dopo lo
     scale) sfonda i bordi della maglietta. */
  .slot-card { height:17vw; }
  .slot-card img { max-width:26vw; }

  .toggle-btn {
    top:15px; right:15px; width:56px; height:56px;
  }

  .info-btn { bottom:15px; }
}