/* Pildora de musica (js/music-pill.js): arriba al centro del menu, pequena y casi transparente. */
.np-pill{
  position:fixed;top:max(22px,env(safe-area-inset-top));left:50%;z-index:40;
  display:flex;align-items:center;gap:9px;max-width:min(380px,calc(100vw - 32px));
  padding:5px 12px 5px 5px;border-radius:14px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.075);
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 6px 24px rgba(0,0,0,.28);
  color:#eceff1;overflow:hidden;
  transform:translateX(-50%);
  transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1),background .2s,border-color .2s;
  animation:np-pill-in .6s cubic-bezier(.22,1,.36,1) backwards;
}
.np-pill[hidden]{display:none}
.np-pill:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.np-pill.is-last{opacity:.6}
.np-pill.is-last:hover{opacity:.9}

/* fina linea de progreso en el borde inferior */
.np-pill::after{
  content:"";position:absolute;left:12px;right:12px;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(141,207,215,.85) var(--np-progress,0%),rgba(255,255,255,.07) var(--np-progress,0%));
  opacity:0;transition:opacity .3s;
}
.np-pill.is-live::after{opacity:1}

.np-pill-cover{
  position:relative;flex:none;width:26px;height:26px;padding:0;border:0;border-radius:9px;overflow:hidden;
  background:rgba(255,255,255,.08);color:#9fb7bd;cursor:pointer;
}
.np-pill-cover:disabled{cursor:default}
.np-pill-img{display:block;width:100%;height:100%;object-fit:cover}
.np-pill-img[hidden]{display:none}
.np-pill-fallback{position:absolute;inset:0;display:grid;place-items:center}
.np-pill-fallback[hidden]{display:none}
.np-pill-vol{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.55);opacity:0;transition:opacity .15s}
.np-pill-cover:not(:disabled):hover .np-pill-vol,.np-pill-cover:not(:disabled):focus-visible .np-pill-vol,.np-pill.is-muted .np-pill-vol{opacity:1}

.np-pill-text{
  min-width:0;padding:0;border:0;background:none;cursor:pointer;text-align:left;
  font:600 12px/1.2 ui-monospace,SF Mono,Menlo,Consolas,monospace;color:inherit;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.np-pill-title{font-weight:700;color:#f3f4f5}
.np-pill-sep,.np-pill-artist{font-weight:500;color:rgba(236,239,241,.62)}
.np-pill-sep[hidden]{display:none}

/* ecualizador: se mueve solo mientras suena */
.np-eq{display:flex;align-items:flex-end;gap:2px;flex:none;height:11px;margin-left:1px}
.np-eq i{display:block;width:2px;height:3px;border-radius:1px;background:rgba(141,207,215,.85);transform-origin:bottom}
.np-pill.is-live .np-eq i{animation:np-eq 1s ease-in-out infinite;animation-play-state:paused}
.np-pill.is-live.is-playing .np-eq i{animation-play-state:running}
.np-pill.is-live .np-eq i:nth-child(2){animation-delay:-.35s;animation-duration:.8s}
.np-pill.is-live .np-eq i:nth-child(3){animation-delay:-.7s;animation-duration:1.15s}
.np-pill.is-last .np-eq,.np-pill.is-muted .np-eq{display:none}

/* letra: una linea con rebote bajo la pildora */
.np-pill-lyrics{
  position:fixed;top:calc(max(22px,env(safe-area-inset-top)) + 46px);left:50%;z-index:39;transform:translateX(-50%);
  width:min(420px,calc(100vw - 32px));padding:6px 12px;text-align:center;pointer-events:none;
  font:600 13px/1.35 ui-monospace,SF Mono,Menlo,Consolas,monospace;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.np-pill-lyrics[hidden]{display:none}
.np-pill-lyrics .np-line{margin:0}
.np-pill-lyrics .np-line.is-active{font-size:17px;line-height:1.3;animation:np-bounce .6s cubic-bezier(.34,1.56,.64,1) both;text-shadow:0 0 18px rgba(141,207,215,.35),0 1px 10px rgba(0,0,0,.6)}
.np-pill-lyrics .np-line.is-next{margin-top:4px;font-size:12px;color:rgba(255,255,255,.35)}
.np-pill-status{margin:0;color:rgba(255,255,255,.45);font:11px ui-monospace,monospace}

/* reproductor de YouTube: fuera de pantalla */
.np-yt{position:fixed;left:-400px;top:0;width:200px;height:200px;opacity:.01;pointer-events:none;overflow:hidden}

/* en el menu: solo se ve con el menu abierto (no con about me / guestbook / settings abiertos) */
body:has(.home-screen--panel) .np-pill,
body:has(.home-screen--panel) .np-pill-lyrics{opacity:0;pointer-events:none;transform:translate(-50%,-10px)}

/* paginas sin menu (Photos): esquina superior derecha, para no chocar con la barra de arriba */
html[data-np-pos="corner"] .np-pill{left:auto;right:max(18px,env(safe-area-inset-right));transform:none;animation-name:np-pill-in-corner}
html[data-np-pos="corner"] .np-pill-lyrics{left:auto;right:max(18px,env(safe-area-inset-right));transform:none;text-align:right}

@keyframes np-pill-in{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes np-pill-in-corner{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes np-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(3.4)}}
@keyframes np-bounce{
  0%{opacity:0;transform:translateY(14px) scale(.86)}
  45%{opacity:1;transform:translateY(-4px) scale(1.06)}
  70%{transform:translateY(1px) scale(.99)}
  100%{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .np-pill{animation:none}
  .np-pill-lyrics .np-line.is-active{animation:none}
  .np-eq i{animation:none!important}
}
/* celular: el logo "take" y el menu van arriba y al centro; la pildora queda mas pegada al borde y mas pequena */
@media (max-width:768px){
  .np-pill{top:max(10px,env(safe-area-inset-top));max-width:calc(100vw - 24px);padding-right:10px}
  .np-pill-text{font-size:11px}
  .np-pill-lyrics{top:calc(max(10px,env(safe-area-inset-top)) + 42px)}
}