:root{
  --g:linear-gradient(135deg,#ff8ec7 0%,#ffc5ff 100%);
  --txt:#fff;--sub:#f8d8f3;--ic:22px;
  --clr-progress:linear-gradient(135deg,#ff8ec7 0%,#ffc5ff 100%);
  --clr-volume:linear-gradient(135deg,#79ffe0 0%,#b6ffce 100%);
}
.mp{position:fixed;right:22px;bottom:22px;z-index:9999;width:340px;max-width:92vw;
    padding:18px;border-radius:14px;background:rgba(50,26,64,.32);
    backdrop-filter:blur(10px);box-shadow:0 0 12px rgba(255,170,225,.45);
    display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--txt);}
@media(max-width:480px){.mp{width:260px;}}
.mp::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;background:var(--g);
            -webkit-mask:linear-gradient(#000 0 0)content-box,linear-gradient(#000 0 0);
            -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
.mp-disc{width:140px;height:140px;border-radius:50%;overflow:hidden;flex-shrink:0;
         box-shadow:0 0 6px 2px rgba(255,170,225,.6);animation:spin 12s linear infinite paused;}
.mp.playing .mp-disc{animation-play-state:running;}@keyframes spin{to{transform:rotate(360deg)}}
.cover{width:100%;height:100%;border-radius:50%;background-size:cover;background-position:center;}
.mp-meta{text-align:center;height:40px;}
.title{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.artist{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mp-bar{width:88%;height:14px;}
.mp-bar .tracker,.mp-bar .volume{width:100%;height:6px;border-radius:3px;background:#252525;cursor:pointer;}
.mp-bar .ui-slider-range{height:100%;border-radius:3px;background:var(--clr-progress);
                         animation:pulse 2s ease-in-out infinite alternate;}
@keyframes pulse{from{filter:brightness(.75)}to{filter:brightness(1.3)}}
.mp-ctrl{display:flex;gap:22px;margin-top:6px;}
.btn{width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
     background:var(--g);filter:drop-shadow(0 0 4px rgba(255,170,225,.65));transition:transform .25s;}
.btn:hover{transform:scale(1.15);} .btn svg{width:var(--ic);height:var(--ic);fill:#fff}
.pause{display:none}
.btn.list{width:40px;height:40px;}
.btn.list::before{content:"";width:18px;height:2px;background:#fff;
                  box-shadow:0 6px 0 #fff,0 -6px 0 #fff;}
.mp-list{
  position:absolute;inset:0;padding:90px 16px 20px;background:rgba(35,16,55,.92);
  backdrop-filter:blur(8px);border-radius:12px;box-shadow:0 0 10px rgba(255,170,225,.35);
  overflow:auto;transform:translateY(100%);opacity:0;visibility:hidden;transition:.35s;z-index:5;}
.mp.show-list .mp-list{transform:translateY(0);opacity:1;visibility:visible;}
.mp-list li{padding:10px 0;border-bottom:1px solid rgba(120,255,200,.15);
           font-size:14px;color:#e9e0ff;letter-spacing:.2px;cursor:pointer;transition:color .25s;}
.mp-list li:hover,.mp-list li.active{color:#ff9acb;}
.plist-close{position:absolute;top:70px;right:18px;z-index:7;width:30px;height:30px;border:0;border-radius:50%;
             cursor:pointer;font-size:20px;line-height:28px;font-weight:700;color:#fff;background:var(--g);
             filter:drop-shadow(0 0 4px rgba(255,170,225,.6));opacity:0;pointer-events:none;transition:.25s;}
.mp.show-list .plist-close{opacity:1;pointer-events:auto;} .plist-close:hover{transform:scale(1.15);}
#mp-toggle{position:fixed;right:35px;bottom:42px;z-index:10010;width:42px;height:42px;border-radius:50%;border:0;
           cursor:pointer;font-size:20px;line-height:38px;background:linear-gradient(135deg,#ff8ec7,#ffc5ff);
           color:#fff;filter:drop-shadow(0 0 4px rgba(255,170,225,.6));transition:transform .25s;}
#mp-toggle:hover{transform:scale(1.15);}
.mp.collapsed{transform:translateY(140%) scale(.8);opacity:0;pointer-events:none;transition:.35s ease-in-out;}
@media(max-width:600px){
  .mp{width:96vw;right:2vw;bottom:12px;padding:12px;backdrop-filter:blur(6px);}
  .mp-ctrl .btn{width:36px;height:36px;} .mp-bar{width:92%;}
  canvas#spiritsCanvas{display:none!important}
}