body{margin:0;background:#0b0b0b;color:#fff;font-family:system-ui,Arial}
.header{padding:14px;border-bottom:1px solid #222}
.brand{display:flex;gap:12px;align-items:center}
.logo-img{width:48px;height:48px;border-radius:12px}
.container{max-width:600px;margin:auto;padding:16px 16px 90px}
.card{background:#141414;padding:18px;border-radius:18px}
.hidden{display:none}
.artwork{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:22px;background:#0f0f0f}
.now{margin-top:12px}
.song{text-align:center;font-weight:800;font-size:14px;line-height:1.25;word-break:break-word;padding:0 6px}
.listeners{text-align:center;font-size:14px;opacity:.8;margin-top:6px;word-break:break-word;padding:0 6px}
.controls{display:flex;gap:10px;justify-content:center;margin:14px 0}
.btn{padding:14px;border-radius:16px;border:none;background:#222;color:#fff;font-weight:700}
.primary{background:#fff;color:#000}

/* --- Volumen universal y accesible --- */
.volume{margin-top:10px}
.volume-row{display:flex;justify-content:space-between;align-items:center;margin:0 2px 8px}
.volume-label{font-size:13px;opacity:.9}
.volume-value{font-size:13px;color:#dcdcdc;min-width:44px;text-align:right}
.volume-slider{width:100%;height:6px;border-radius:6px}

/* Flash-like volume actions */
.volume-actions{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:8px}
.btn.small{padding:8px 10px;font-size:14px;line-height:1}


/* Solo para lectores de pantalla */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;background:#111;border-top:1px solid #222;display:flex}
.bottom-nav button{flex:1;padding:14px;background:none;border:none;color:#aaa;font-weight:700}
.bottom-nav button.active{color:#fff}


/* Fallback colorido cuando no hay carátula */
.artwork.fallback{
  /* Placeholder alegre y llamativo si no hay carátula */
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.18) 0 18%, rgba(255,255,255,0) 19% 100%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.14) 0 14%, rgba(255,255,255,0) 15% 100%),
    radial-gradient(circle at 35% 85%, rgba(255,255,255,.10) 0 16%, rgba(255,255,255,0) 17% 100%),
    conic-gradient(from 180deg at 50% 50%,
      #ff4d6d, #ffb703, #8ecae6, #219ebc, #a8dadc, #b5179e, #ff4d6d);
  background-size: 120% 120%, 140% 140%, 160% 160%, 220% 220%;
  background-position: 0% 0%, 100% 20%, 20% 100%, 50% 50%;
  animation: artPulse 3.6s ease-in-out infinite, artHue 4.8s linear infinite;
  filter: saturate(1.8) contrast(1.15) brightness(1.05);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 28px rgba(255, 0, 140, .18),
    0 0 34px rgba(0, 200, 255, .16),
    0 0 40px rgba(255, 190, 0, .14);
}
@keyframes artPulse{
  0%   {background-position: 0% 0%, 100% 20%, 20% 100%, 50% 50%; transform: scale(1);}
  33%  {background-position: 70% 35%, 10% 85%, 55% 10%, 40% 60%; transform: scale(1.012);}
  66%  {background-position: 25% 85%, 85% 15%, 10% 55%, 60% 40%; transform: scale(1.018);}
  100% {background-position: 0% 0%, 100% 20%, 20% 100%, 50% 50%; transform: scale(1);}
}
@keyframes artHue{
  0%{filter: hue-rotate(0deg) saturate(1.8) contrast(1.15) brightness(1.05);}
  100%{filter: hue-rotate(360deg) saturate(1.8) contrast(1.15) brightness(1.05);}
}

@keyframes radioGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}


/* Install gate eliminado: no se bloquea la app */