/* 🎵 Pet Detective Music: every song, playlists, my playlist */
.mu { width: min(1180px, 100% - 2 * var(--m, 16px)); margin: 0 auto; padding: 24px 0 140px; }
.mu-hero { margin: 8px 0 18px; }
.mu-lead { max-width: 60ch; margin-top: 8px; }
.mu-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.mu-filters button { min-height: 44px; padding: 0 16px; border: 2px solid var(--accent); border-radius: 999px; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.mu-filters button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.mu-filters small { opacity: .75; margin-left: 4px; }
.mu-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.mu-card { background: var(--surface); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; border: 2px solid transparent; }
.mu-card.is-now { border-color: var(--accent); }
/* ✨ NEW songs: a glowing, slowly breathing gold border + a ribbon */
.mu-card { position: relative; }
.mu-card.is-new { border-color: #ffd84a; box-shadow: 0 0 0 2px #ffd84a55, 0 0 22px 4px #ffd84a66, 0 0 48px 8px #ff9fd855; animation: munew 2.4s ease-in-out infinite alternate; }
@keyframes munew { to { box-shadow: 0 0 0 2px #ffd84a99, 0 0 30px 8px #ffd84a99, 0 0 64px 14px #ff9fd877; } }
.mu-new { align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: #ffd84a; color: #1a1300; font-weight: 700; font-size: var(--step-small); box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
@media (prefers-reduced-motion: reduce) { .mu-card.is-new { animation: none; } }
.mu-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.mu-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mu-body h3 { font-size: 1.05rem; line-height: 1.25; margin: 0; }
.mu-tag { font-size: var(--step-small); color: var(--accent); margin: 0; }
.mu-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding-top: 6px; }
.mu-btns button, .mu-btns a { min-height: 40px; padding: 0 12px; border-radius: 999px; border: 0; background: #ffffff14; color: var(--ink); font: inherit; font-size: var(--step-small); cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.mu-btns .mu-play { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.mu-btns [aria-pressed="true"] { background: var(--accent-2, #ffd84a); color: var(--accent-ink); }
.mu-none { padding: 18px; }
.mu-mine { margin-top: 36px; padding: 18px; border-radius: 22px; background: var(--surface); }
.mu-mine h2 { margin: 0 0 4px; }
.mu-note { font-size: var(--step-small); opacity: .85; margin: 0 0 12px; }
.mu-name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.mu-name input { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--accent); background: var(--bg); color: var(--ink); font: inherit; width: min(320px, 100%); }
.mu-list { list-style: decimal inside; padding: 0; margin: 0; display: grid; gap: 8px; }
.mu-list li { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 14px; background: #ffffff0d; }
.mu-list img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.mu-list span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-list button { min-width: 40px; min-height: 40px; border: 0; border-radius: 999px; background: #ffffff14; color: var(--ink); cursor: pointer; font-size: 16px; }
.mu-list button:disabled { opacity: .35; cursor: default; }
.mu-mine-btns { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mu-mine-btns button:disabled { opacity: .5; cursor: default; }
.mu-pangels { margin-top: 24px; padding: 18px; border-radius: 22px; border: 2px solid var(--accent-2, #ffd84a); background: var(--surface); }
.mu-pangels h2 { margin: 0 0 6px; }
.mu-pangels ul { margin: 10px 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.mu-pg-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; }
.mu-pg-btns span { font-size: var(--step-small); opacity: .85; }
.mu-btns .mu-like { gap: 6px; }
.mu-btns .mu-like[aria-pressed="true"] { background: #ffd84a; color: #1a1300; cursor: default; }
.mu-btns .mu-like[aria-pressed="true"] b::after { content: " · Thanks!"; font-weight: 600; }

/* 🎤 KARAOKE band across the bottom (the radio tucks into its tab while it's open) */
.mu-btns .mu-kara { background: #ff9fd8; color: #2a0a1e; font-weight: 600; }
.kara { position: fixed; left: 12px; right: 12px; bottom: 76px; z-index: 59; max-width: 980px; margin: 0 auto; padding: 10px 18px 14px;
  border-radius: 22px; background: rgba(5, 12, 22, .94); border: 2px solid #ffd84a; box-shadow: 0 12px 36px rgba(0, 0, 0, .6), 0 0 26px #ffd84a44; text-align: center; }
.kara[hidden] { display: none; }
.kara-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; font-size: var(--step-small); color: #ffd84a; }
.kara-x { width: 36px; height: 36px; border: 0; border-radius: 999px; background: #ffffff14; color: var(--ink); cursor: pointer; }
.kara-stage { position: relative; padding-top: 26px; min-height: 2.6em; overflow: hidden; }
.kara-line { margin: 0; font-size: clamp(1.15rem, 3.4vw, 2rem); font-weight: 800; line-height: 1.3; color: #ffffffa6; }
.kara-line span { transition: color .15s; }
.kara-line .sung { color: #5ec8ff; }
.kara-line .now { color: #fff; text-shadow: 0 0 14px #ffd84a; }
.kara-gap { color: #ffd84a; letter-spacing: .4em; }
.kara-in { animation: karain .35s ease-out; }
@keyframes karain { from { opacity: 0; transform: translateX(60px); } }
.kara-dot { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: #ffd84a; box-shadow: 0 0 12px #ffd84a, 0 0 4px #fff inset; opacity: 0; will-change: transform; }
.kara-next { margin: 6px 0 0; font-size: var(--step-small); color: #ffffff80; min-height: 1.3em; }
html.kara-on .mu { padding-bottom: 260px; }
@media (prefers-reduced-motion: reduce) { .kara-in { animation: none; } }

/* 😈 a villain's song: his face on the corner of the cover, with an evil red glow */
.mu-cover { position: relative; }
.mu-villain { position: absolute; right: 8px; top: 8px; width: 30% !important; height: auto !important; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #3a0008 0%, #120004 70%); border: 2px solid #ff3344; box-shadow: 0 0 16px #ff2233cc, 0 0 32px #ff223366;
  animation: muevil 1.8s ease-in-out infinite alternate; }
@keyframes muevil { to { box-shadow: 0 0 24px #ff2233, 0 0 48px #ff2233aa; } }
.mu-tag-evil { color: #ff5566; }
@media (prefers-reduced-motion: reduce) { .mu-villain { animation: none; } }