/* Responsive adjustments for mobile devices (max-width: 600px) */
@media (max-width: 600px) {
  /* Título principal: tamaño y espaciado más pequeño */
  .glitch {
    font-size: 3.2em;
    letter-spacing: 0.18em;
    display: inline-block;
    transform: translateY(-6vh);
    transition: transform 220ms ease, font-size 180ms ease;
  }
  .glitch::before, .glitch::after {
    clip: rect(10px, 9999px, 40px, 0) !important;
  }

  /* Ajustes del contenedor y fondo para evitar recortes indeseados */
  #app {
    min-height: 100vh;
    padding-top: 8vh;
    padding-bottom: 8vh;
    background-position: center top;
  }

  /* Marquee: ancho flexible y texto más pequeño */
  .marquee-container {
    bottom: 6% !important;
  }
  #marquee {
    width: 90% !important;
    max-width: 420px;
    font-size: 13px;
    display: inline-block;
  }

  /* Control de volumen: adaptar ancho y márgenes */
  #volumeControl {
    max-width: 220px;
    width: 90%;
    margin: 12px auto 0;
    padding: 0 8px;
  }
  #volumeSlider {
    width: 100%;
    transform: translateX(0);
  }

  /* Título de pista más compacto */
  .track-title {
    font-size: 0.9em;
    letter-spacing: 0.12em;
    max-width: 95%;
    padding: 0 8px;
  }

  /* Asegurar centrado y que no desborde */
  #wrapper {
    padding: 0 12px;
    box-sizing: border-box;
  }
}

/* Small tweaks for very small devices */
@media (max-width: 360px) {
  .glitch { font-size: 2.8em; transform: translateY(-5.5vh); }
  #marquee { font-size: 12px; }
  #volumeControl { max-width: 180px; }
}