body {
  background: url('assets/sfondo_phone.jpeg') no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* Ottimizzazioni iOS */
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Media queries per aspect ratio specifici */
@media screen and (max-aspect-ratio: 9/16) {
  /* Telefoni molto stretti e lunghi */
  #track-cover {
    width: min(70vw, 50vh) !important;
    height: min(70vw, 50vh) !important;
  }
}

@media screen and (min-aspect-ratio: 3/4) {
  /* Tablet in modalità landscape o telefoni larghi */
  #track-cover {
    width: min(50vw, 70vh) !important;
    height: min(50vw, 70vh) !important;
  }
  
  #track-title {
    font-size: clamp(16px, 3vw, 20px) !important;
  }
}

.hide-on-mobile {
  display: none !important;
}

#track-cover {
  position: fixed !important;
  top: 40%;
  left: 48.5%;
  transform: translate(-50%, -50%) !important;
  /* Mantiene proporzioni quadrate responsive */
  width: min(50vw, 50vh);
  height: min(50vw, 50vh);
  /* Limiti per schermi molto piccoli o molto grandi */
  max-width: min(300px, 80vw);
  max-height: min(300px, 80vh);
  min-width: 120px;
  min-height: 120px;
  display: block;
  object-fit: cover;
  border-radius: clamp(8px, 2vw, 16px);
  box-shadow: 0 clamp(2px, 1vw, 8px) clamp(8px, 3vw, 20px) rgba(0,0,0,0.18);
  z-index: 101;
}

#audio-bar {
  position: fixed !important;
  bottom: clamp(80px, 15vh, 150px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto !important;
  width: 100vw;
  justify-content: center;
  align-items: center;
  display: flex;
  gap: 0;
  z-index: 100;
}

#audio-bar audio {
  width: clamp(250px, 75vw, 350px);
  background: none;
  box-shadow: none;
  border: none;
  /* Ottimizzazioni specifiche iOS */
  -webkit-appearance: none;
  appearance: none;
}

/* Stili specifici per iOS Safari */
@supports (-webkit-touch-callout: none) {
  #track-title {
    font-size: clamp(16px, 4.5vw, 26px) !important;
    -webkit-text-stroke: 0.5px rgba(255,255,255,0.3);
    /* Barra bianca intorno al titolo su iOS */
    background: rgba(255, 255, 255, 0.9) !important;
    padding: clamp(10px, 2.5vw, 18px) clamp(14px, 3.5vw, 26px) !important;
    border-radius: clamp(1000px, 2.5vw, 18px) !important;
    box-shadow: 0 3px 15px rgba(0,0,0,0.18) !important;
    backdrop-filter: blur(6px) !important;
  }
  
  #track-cover {
    /* Compensazione per il rendering iOS */
    width: min(52vw, 52vh) !important;
    height: min(52vw, 52vh) !important;
  }
  
  #audio-bar audio {
    /* Player audio più grande su iOS per compensare touch target */
    width: clamp(280px, 80vw, 380px) !important;
    height: 40px;
  }
}

#track-title {
  position: fixed !important;
  top: calc(41% + min(35vw, 35vh));
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto !important;
  width: 70vw;
  max-width: 280px;
  /* Font size che scala meglio */
  font-size: clamp(14px, 4vw, 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Permanent Marker', cursive;
  font-weight: normal;
  color: #111;
  text-shadow: 0 2px 8px rgba(255,255,255,0.5);
  z-index: 102;
  pointer-events: none;
  /* Box bianco intorno al titolo */
  background: rgba(255, 255, 255, 0.9);
  padding: clamp(8px, 2vw, 16px) clamp(12px, 3vw, 24px);
  border-radius: clamp(1000px, 2vw, 16px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  backdrop-filter: blur(5px);
}


/* Messaggio Spotify finale */
.show-spotify-msg, #spotify-msg {
  position: fixed !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(18px, 6vw, 32px);
  font-family: 'Permanent Marker', cursive;
  color: #111;
  text-shadow: 0 3px 12px rgba(255,255,255,0.7);
  z-index: 200;
  pointer-events: none;
  text-align: center;
  width: 70vw;
  max-width: 280px;
  /* Box bianco intorno al messaggio Spotify */
  background: rgba(255, 255, 255, 0.9);
  padding: clamp(12px, 3vw, 20px) clamp(16px, 4vw, 28px);
  border-radius: clamp(12px, 3vw, 20px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  backdrop-filter: blur(8px);
}

/* Stili per player disabilitato */
audio:disabled,
audio[style*="pointer-events: none"] {
  opacity: 0.3;
  filter: grayscale(100%);
  cursor: not-allowed;
}