html,body{margin:0;height:100%;background:#000;overflow:hidden;color:#dff7ff}
#ui{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none}
#playBtn{pointer-events:auto;width:170px;height:170px;border-radius:999px;border:2px solid #55dbc4;background:radial-gradient(120px 120px at 50% 50%, #55dbc422, #2aa59211 60%, transparent 100%);color:#aef7ea;font:800 32px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;letter-spacing:.7px;text-shadow:0 0 10px #7cf3de66; box-shadow:inset 0 0 40px #9ff3e022,0 0 60px #3cd0b666;cursor:pointer; transition:opacity .5s ease, transform .1s ease, background .2s ease;display:flex;align-items:center;justify-content:center}
#playBtn:active{transform:scale(.98)}
#playBtn.fade{opacity:0;pointer-events:none}
/* Hint removido para interface más limpia */
#songbar{position:fixed; top:14px; left:50%; transform:translateX(-50%);display:flex; gap:8px; pointer-events:auto; z-index:10;background:#0a0a0f80; border:1px solid #ffffff22; border-radius:999px; padding:6px 10px;backdrop-filter: blur(6px); align-items:center;font:13px system-ui,-apple-system,Segoe UI,Roboto,sans-serif;}
#songSelect{appearance:none; border:0; background:#00000033; color:#dff7ff; padding:6px 10px; border-radius:999px; cursor:pointer;}
#bpmBadge{opacity:.8}
.nav-btn {appearance:none; border:1px solid #ffffff22; background:#00000033; color:#dff7ff; cursor:pointer;width:32px; height:32px; border-radius:50%;display:grid; place-items:center; font-size:16px; font-weight:600; line-height:1;transition:background-color 0.2s ease, transform 0.1s ease;}
.nav-btn:hover {background-color:#ffffff18;}
.nav-btn:active {transform:scale(0.95);background-color:#ffffff22;}
/* --- Songbar en Grid: prev | select | next | BPM --- */
#songbar{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  display:grid;
  grid-template-columns: auto minmax(120px, 36vw) auto auto; /* prev | select flexible | next | BPM */
  align-items:center;
  gap: 8px;
  pointer-events:auto; z-index:10;
  background:#0a0a0f80; border:1px solid #ffffff22; border-radius:999px; 
  padding:6px 10px;
  backdrop-filter: blur(6px);
  font:13px system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  /* safe-area + ancho máximo */
  max-width: min(760px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
}

/* El select crece, los botones quedan pegados a sus lados */
#songSelect{
  min-width: 140px;
  max-width: 100%;
}

/* BPM a la derecha en una sola línea */
#bpmBadge{
  white-space: nowrap;
}

/* Compacto en pantallas estrechas: BPM baja a 2ª fila, prev|select|next siguen juntos */
@media (max-width: 520px){
  #songbar{
    grid-template-columns: auto minmax(120px, 1fr) auto; /* sin la col del BPM */
    grid-auto-rows: auto;
    row-gap: 6px;
  }
  #bpmBadge{
    grid-column: 1 / -1;      /* ocupa todo el ancho en la fila 2 */
    justify-self: end;         /* alineado a la derecha */
    opacity: .8;
  }
  .nav-btn{ width: 28px; height: 28px; font-size: 14px; }
  #songSelect{ font-size: 12px; padding: 4px 8px; }
}

/* Ultra-chico: que la “píldora” respire y no se salga */
@media (max-width: 360px){
  #songbar{
    left: 0; transform: none; right: 0; margin: 0 8px;
    max-width: none;
    border-radius: 16px;
    padding: 4px 8px;
  }
}
/* En móviles: prev | select | next en la fila 1, y BPM centrado debajo */
@media (max-width: 680px){
  #songbar{
    grid-template-columns: auto minmax(140px, 1fr) auto;
    grid-template-areas:
      "prev select next"
      ".    bpm    .";
    row-gap: 6px;
  }
  #prevSong  { grid-area: prev; }
  #songSelect{ grid-area: select; }
  #nextSong  { grid-area: next; }
  #bpmBadge  { 
    grid-area: bpm; 
    justify-self: center;   /* centrado */
    white-space: nowrap;
    margin-left: 0;         /* por si lo tenías auto */
  }
}