html, body {
  margin:0;
  padding:0;
  height:100%;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#0f1115;
  color:#eaeef2;
  overflow:hidden;
}

.container {
  max-width:720px;
  margin:0 auto;

  /* CAMBIO: menos padding para aprovechar mejor la pantalla */
  padding:6px 10px;

  /* CAMBIO: 100dvh funciona mejor en móviles que 100vh */
  height:100dvh;
  max-height:100dvh;

  display:flex;
  flex-direction:column;

  box-sizing:border-box;

  /* CAMBIO: evita que algo empuje el reproductor fuera de pantalla */
  overflow:hidden;
}

h1 {
  margin:0 0 4px;
  font-size:1.4rem;
}

p {
  margin:0 0 16px;
  opacity:0.9;
}

.controls {
  display:flex;
  gap:4px;
  margin:4px 0;
  flex-wrap:wrap;

  /* CAMBIO: evita que los controles se estiren innecesariamente */
  flex-shrink:0;
}

button {
  background:#1f2530;
  color:#eaeef2;
  border:1px solid #2c3442;
  padding:5px 8px;
  border-radius:10px;
  cursor:pointer;
  font-size:0.95rem;
}

button[disabled] {
  opacity:0.5;
  cursor:not-allowed;
}

#nowPlaying {
  margin:4px 0 6px;
  font-weight:600;
  font-size:0.95rem;
  line-height:1.2;

  /* CAMBIO: evita que ocupe demasiada altura */
  flex-shrink:0;
}

/* ===================================================== */
/* CAMBIO: la lista ocupa el espacio libre y hace scroll */
/* ===================================================== */
#trackList {
  flex:1;

  /* CAMBIO CLAVE: permite que la lista se achique
     sin empujar el audio fuera de pantalla */
  min-height:0;

  overflow-y:auto;
  padding-left:20px;
  margin:0;
}

#trackList li {
  margin:2px 0;
  line-height:1.15;
  cursor:pointer;
}

#trackList li.active {
  color:#9ad;
  font-weight:700;
}

/* ===================================================== */
/* CAMBIO: reproductor fijo al pie */
/* ===================================================== */
audio {
  width:100%;
  margin-top:3px;
  margin-bottom:env(safe-area-inset-bottom, 0);
  border-radius:10px;
  background:#141923;
  flex-shrink:0;
}

/* ===================================================== */
/* Código */
/* ===================================================== */
code {
  background:#141923;
  padding:2px 6px;
  border-radius:6px;
}

/* ===================================================== */
/* SCROLL MAS ESTETICO EN PC */
/* ===================================================== */

@media (pointer:fine) {

  #trackList::-webkit-scrollbar {
    width:8px;
  }

  #trackList::-webkit-scrollbar-track {
    background:#141923;
    border-radius:10px;
  }

  #trackList::-webkit-scrollbar-thumb {
    background:#3c4a63;
    border-radius:10px;
  }

  #trackList::-webkit-scrollbar-thumb:hover {
    background:#5872a0;
  }

}

/* ===================================================== */
/* OPTIMIZACION EXTRA PARA CELULARES Y TABLETS */
/* ===================================================== */

@media (max-width:768px) {

  .container {
    padding:4px 8px;
  }

  .controls {
    gap:4px;
    margin:3px 0;
  }

  button {
    padding:5px 7px;
    font-size:0.9rem;
  }

  #nowPlaying {
    margin:3px 0 5px;
    font-size:0.9rem;
  }

  #trackList {
    padding-left:18px;
  }

  #trackList li {
    margin:2px 0;
    line-height:1.12;
  }

  audio {
    margin-top:3px;
    max-height:44px;
  }

}