/* Reproductor. Estilos: glass (estilo iPhone) | persona5 (rojo, negro y ángulos) */
body.con-musica { padding-bottom: 110px; }
.np { position: fixed; z-index: 20; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); width: min(420px, calc(100% - 24px));
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: #fff;
  background: rgba(28, 28, 32, .6); border: 1px solid rgba(255, 255, 255, .22); border-radius: 22px;
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .55); transform: translate(-50%, 180%); transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.np.on { transform: translate(-50%, 0); }
.np { transition: transform .8s cubic-bezier(.22, 1, .36, 1), scale .3s cubic-bezier(.22, 1, .36, 1); }
.np:hover { scale: 1.04; } /* crece como los botones (con la propiedad "scale", que no pisa la animación de subida) */
.np-cover { position: relative; flex: none; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent, #9ad7ff), #7b4397); color: #fff; }
.np-cover img { width: 100%; height: 100%; object-fit: cover; }
.np-cover > svg { width: 24px; height: 24px; }
.eq { position: absolute; right: 4px; bottom: 4px; display: none; align-items: flex-end; gap: 2px; height: 12px; }
.np.playing .eq { display: flex; }
.eq i { width: 3px; background: #fff; border-radius: 1px; animation: np-eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes np-eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.np-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.np-info b { font-size: .95rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-info small { font-size: .78rem; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-bar { height: 3px; margin-top: 4px; border-radius: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.np-bar i { display: block; width: 0; height: 100%; background: #fff; }
.np-btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .18); transition: transform .2s, background .2s; }
.np-btn:hover { background: rgba(255, 255, 255, .3); }
.np-btn:active { transform: scale(.92); }
.np-btn svg { width: 20px; height: 20px; stroke: none; }

/* Persona 5 */
.np[data-style="persona5"] { background: #e60012; border: 3px solid #000; border-radius: 0; box-shadow: 6px 6px 0 #000; backdrop-filter: none; -webkit-backdrop-filter: none; font-style: italic; text-transform: uppercase; letter-spacing: .04em; transform: translate(-50%, 180%) skewX(-6deg); }
.np[data-style="persona5"].on { transform: translate(-50%, 0) skewX(-6deg); }
.np[data-style="persona5"] .np-cover { border-radius: 0; background: #000; border: 2px solid #fff; }
.np[data-style="persona5"] .np-info small { color: #fff; opacity: .85; }
.np[data-style="persona5"] .np-bar { border-radius: 0; background: #000; }
.np[data-style="persona5"] .np-btn { border-radius: 0; background: #000; }

/* Pantalla de entrada */
.gate { position: fixed; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center; gap: 14px; border: 0; cursor: pointer; color: #fff; font: inherit;
  background: rgba(10, 10, 14, .55); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); transition: opacity .6s, transform .6s; }
.gate.out { opacity: 0; transform: scale(1.06); pointer-events: none; }
.gate-name { font-size: clamp(2rem, 8vw, 3rem); font-weight: 800; letter-spacing: -.02em; }
.gate-tap { padding: 10px 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); font-size: .95rem; animation: gate-pulso 2s ease-in-out infinite; }
@keyframes gate-pulso { 50% { transform: scale(1.06); background: rgba(255, 255, 255, .2); } }
@media (prefers-reduced-motion: reduce) { .np { transition: none; } .gate-tap, .eq i { animation: none; } }