/* ============================================================
   MUNHU — Listen section + persistent mini-player + newsletter
   ============================================================ */

/* ---------- Listen track list ---------- */
.track-list { display: grid; gap: var(--sp-3); max-width: 760px; }
.track-row {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: var(--sp-4);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); transition: all var(--dur) var(--ease);
}
.track-row:hover { border-color: var(--accent); transform: translateX(4px); }
.track-row.playing { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.track-row .cover { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; }
.track-row .t-title { font-weight: 700; }
.track-row .t-artist { font-size: var(--fs-sm); color: var(--text-soft); }
.track-row .t-play { width: 42px; height: 42px; border-radius: 50%; background: var(--grad-brand); border: 0; color: #fff; display: grid; place-items: center; }
.track-row .t-links { display: flex; gap: var(--sp-2); }
.track-row .t-links a { font-size: var(--fs-xs); color: var(--text-soft); }

/* ---------- Persistent mini-player ---------- */
.mini-player {
  position: fixed; left: 50%; bottom: var(--sp-4); transform: translate(-50%, 200%);
  width: min(640px, calc(100% - 2rem)); z-index: 150;
  display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: var(--sp-3);
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-3); box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease);
}
.mini-player.show { transform: translate(-50%, 0); }
.mini-player .mp-cover { width: 48px; height: 48px; border-radius: var(--r-sm); object-fit: cover; }
.mini-player .mp-info { min-width: 0; }
.mini-player .mp-title { font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-player .mp-eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.mini-player .mp-eq span { width: 3px; background: var(--gold); height: 100%; animation: eq 1s ease-in-out infinite; }
.mini-player .mp-eq span:nth-child(2) { animation-delay: .2s; } .mini-player .mp-eq span:nth-child(3) { animation-delay: .4s; } .mini-player .mp-eq span:nth-child(4) { animation-delay: .1s; }
.mini-player.paused .mp-eq span { animation-play-state: paused; }
@keyframes eq { 0%,100% { height: 25%; } 50% { height: 100%; } }
.mini-player .mp-controls { display: flex; align-items: center; gap: var(--sp-2); }
.mini-player .mp-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: rgba(255,255,255,.05); color: var(--text); display: grid; place-items: center; }
.mini-player .mp-btn.play { background: var(--grad-brand); border: 0; color: #fff; }
.mini-player .mp-progress { grid-column: 1 / -1; height: 4px; background: var(--border); border-radius: var(--r-pill); overflow: hidden; cursor: pointer; margin-top: 2px; }
.mini-player .mp-bar { height: 100%; width: 0; background: var(--grad-gold); }

@media (max-width: 520px) {
  .track-row { grid-template-columns: 48px 1fr; }
  .track-row .t-links { display: none; }
  .mini-player .mp-controls .mp-btn:not(.play) { display: none; }
}

/* ---------- Newsletter / capture ---------- */
.capture {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-7); text-align: center; position: relative; overflow: hidden;
}
.capture::before { content: ""; position: absolute; inset: 0; background: var(--grad-aurora); opacity: .6; pointer-events: none; }
.capture > * { position: relative; }
.capture h2 { font-size: var(--fs-xl); }
.capture p { color: var(--text-soft); max-width: 48ch; margin: 0 auto var(--sp-5); }
.subscribe-form { display: flex; gap: var(--sp-2); max-width: 480px; margin: 0 auto; flex-wrap: wrap; }
.subscribe-form input { flex: 1; min-width: 200px; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: var(--r-pill); padding: var(--sp-3) var(--sp-5); font-size: var(--fs-base); }
.subscribe-form input:focus { outline: none; border-color: var(--accent); }
.subscribe-msg { margin-top: var(--sp-3); font-size: var(--fs-sm); min-height: 1.2em; }
.subscribe-msg.ok { color: #29d17a; } .subscribe-msg.err { color: #ff6b6b; }

/* support + merch row */
.support-row { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-6); }

/* toast */
.toast { position: fixed; top: 16px; right: 16px; z-index: 400; background: var(--grad-brand); color:#fff; padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md); box-shadow: var(--shadow-md); font-size: var(--fs-sm); transform: translateX(420px); transition: transform var(--dur) var(--ease); }
.toast.show { transform: none; }

/* install prompt */
.install-prompt { display: none; align-items: center; gap: var(--sp-3); }
.install-prompt.show { display: flex; }