/* ===============================
🎧 GLOBAL PLAYER - DOPE TONE FINAL
=============================== */




.global-player {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  max-width: 900px;
  height: 90px;
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-radius: 22px;
  background: rgba(15, 18, 30, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 0 25px rgba(0,240,255,0.08),
    0 0 40px rgba(255,77,109,0.06);
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
}




/* ===============================
🎯 LEFT - COVER + META
=============================== */




.gp-left {


    display:flex;
    align-items:center;


    gap:14px;


    width:220px;


    height:100%;


    padding-left:8px; /* 🔥 FIX */


    overflow:visible; /* 🔥 FIX */


    flex-shrink:0;
}





#gpCover {


    width:58px;
    height:58px;


    min-width:58px;
    min-height:58px;


    border-radius:16px;


    object-fit:cover;


    display:block;


    flex-shrink:0;


    position:relative;


    z-index:2;


    box-shadow:
    0 0 16px rgba(0,240,255,.18),
    0 0 20px rgba(255,77,109,.10);
}





.gp-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  flex: 1;
}




#gpTitle {
  font-size: 13px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}




#gpArtist {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  display: none;
}




#gpAdd {
  display: none;
}




/* ===============================
🎮 CENTER - CONTROLS + PROGRESS
=============================== */




.gp-center {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-width: 0;
}




.gp-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  position: relative;
}




.gp-controls button {
  background: rgba(255,255,255,0.05);
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: white;
  font-size: 14px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}




.gp-controls button:active {
  transform: scale(0.88);
}




.gp-controls button:hover {
  background: rgba(255,255,255,0.1);
}




#gpPlay {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00f0ff, #ff4d6d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow:
    0 6px 18px rgba(0,240,255,0.4),
    0 0 24px rgba(255,77,109,0.35);
}




body.playing #gpPlay {
  background: linear-gradient(135deg, #00f0ff, #ff4d6d);
  box-shadow:
    0 6px 18px rgba(0,240,255,0.4),
    0 0 24px rgba(255,77,109,0.35);
}




/* ===============================
📊 PROGRESS + TIME
=============================== */




.gp-progress-wrap {
  width: 100%;
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: 8px;
}




#gpProgress {
  flex: 1;
  height: 4px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  cursor: pointer;
}




#gpProgress:hover {
  height: 6px;
}




#gpBar {
  height: 100%;
  width: 0%;
  border-radius: 10px;
  background: linear-gradient(90deg, #ff4d6d, #00f0ff);
  box-shadow:
    0 0 10px rgba(0,240,255,0.4),
    0 0 14px rgba(255,77,109,0.3);
}




#gpCurrent,
#gpDuration {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  min-width: 36px;
  text-align: center;
}




/* ===============================
🔥 RIGHT - APPLE STYLE EQ
=============================== */




.gp-right {
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
}




/* CARD */
#globalPlayerUI .player-cover-wrap {
  position: relative;


  width: 70px;
  height: 70px;


  border-radius: 16px;
  overflow: hidden;


  display: flex;
  align-items: center;
  justify-content: center;


  --cover: none;


  background:
    radial-gradient(
      circle at center,
      rgba(8,10,18,0.95) 0%,
      rgba(4,5,10,0.98) 70%,
      rgba(0,0,0,1) 100%
    );


  border: 1px solid rgba(45,99,255,0.35);


  box-shadow:
    0 0 20px rgba(0,0,0,0.9),
    0 0 35px rgba(26,77,255,0.18),
    inset 0 0 20px rgba(255,255,255,0.03);
}




/* COVER BLEED */
#globalPlayerUI .player-cover-wrap::before {
  content: '';
  position: absolute;
  inset: -30px;


  background-image: var(--cover);
  background-size: cover;
  background-position: center;


  filter: blur(30px) saturate(2) brightness(1.2);


  opacity: 0.5;


  z-index: 0;


  transition: all 0.4s ease;
}




body.playing #globalPlayerUI .player-cover-wrap::before {
  opacity: 0.22;
  filter: blur(32px) saturate(2.4) brightness(1.5);
}




/* METAL TEXTURE */
#globalPlayerUI .player-cover-wrap::after {
  content: '';
  position: absolute;
  inset: 0;


  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.025) 2px,
      rgba(255,255,255,0.025) 4px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.015) 2px,
      rgba(255,255,255,0.015) 4px
    );


  z-index: 3;


  pointer-events: none;


  mix-blend-mode: overlay;
}




/* ===============================
🍎 APPLE CENTERED LIQUID EQ
=============================== */




#globalPlayerUI #liquidEq{
  position: absolute;


  top: 50%;
  left: 50%;


  width: 70px;
  height: 70px;


  transform: translate(-50%, -50%);


  z-index: 2;


  display: block;


  background: transparent;


  mix-blend-mode: screen;


  opacity: 1;


  filter:
    drop-shadow(0 0 18px rgba(45,99,255,.65))
    drop-shadow(0 0 30px rgba(255,45,58,.35));


  pointer-events: none;
}




#globalPlayerUI .mini-wave {
  display: none !important;
}


/* ===============================
🔥 MAKE COVER SAME SIZE AS EQ
Replace ONLY this section
=============================== */


#globalPlayerUI .player-cover-wrap{


    position:relative;


    width:58px;
    height:58px;


    border-radius:16px;


    overflow:hidden;


    display:flex;
    align-items:center;
    justify-content:center;


    flex-shrink:0;


    background:
    linear-gradient(
        145deg,
        rgba(20,24,40,.95),
        rgba(10,12,20,.98)
    );


    border:
    1px solid rgba(255,255,255,.08);


    box-shadow:
    0 8px 20px rgba(0,0,0,.45),
    0 0 18px rgba(0,240,255,.10);
}


/* EQ SAME SIZE */
#globalPlayerUI #liquidEq{


    position:absolute;


    top:50%;
    left:50%;


    width:58px;
    height:58px;


    transform:translate(-50%,-50%);


    z-index:3;


    mix-blend-mode:screen;


    pointer-events:none;
}


/* 📱 MOBILE */
@media(max-width:768px){


    #globalPlayerUI .player-cover-wrap{


        width:52px !important;
        height:52px !important;
    }


    #globalPlayerUI #liquidEq{


        width:52px !important;
        height:52px !important;
    }
}


/* ===============================
🔥 SIDE PLAYER BTNS
=============================== */




/* ⬇ DOWNLOAD */
#gpDownload{
  position:absolute;
  right:-70px;
  top:50%;
  transform:translateY(-50%);
}




/* ⋯ MORE */
#gpMore{
  position:absolute;
  left:-52px;
  top:50%;
  transform:translateY(-50%);


  width:28px !important;
  height:28px !important;


  min-width:28px !important;
  min-height:28px !important;


  border-radius:9px;


  font-size:16px !important;
  padding-bottom:3px;


  display:flex;
  align-items:center;
  justify-content:center;


  background:rgba(255,255,255,.06);
}




/* 🔥 STYLE */
.gp-side{
  width:42px;
  height:42px;


  border:none;
  border-radius:14px;


  background: rgba(255,255,255,.08);


  color:white;


  cursor:pointer;


  backdrop-filter:blur(12px);


  transition:.25s;
}




.gp-side:hover{
  transform:
    translateY(-50%)
    scale(1.08);


  background:
    rgba(255,255,255,.14);
}




@media (max-width: 768px) {


  .global-player {


    height: 92px; /* 🔥 more breathing */


    padding: 12px 16px;


    width: calc(100% - 20px);


    left: 50%;
    transform: translateX(-50%);


    grid-template-columns:
    68px 1fr 68px;


    gap: 14px;


    border-radius: 24px;


    background:
    rgba(15,18,30,.72);


    backdrop-filter: blur(20px);


    box-shadow:
    0 10px 35px rgba(0,0,0,.38),
    0 0 24px rgba(0,240,255,.08);
  }


  /* LEFT */
  .gp-left{


    width:68px;


    display:flex;
    align-items:center;
    justify-content:center;


    overflow:visible;
  }


  /* CENTER */
  .gp-center{


    gap:8px;


    justify-content:center;
  }


  /* CONTROLS */
  .gp-controls{


    gap:16px !important;
  }


  .gp-controls button{


    width:42px !important;
    height:42px !important;


    border-radius:14px !important;
  }


  #gpPlay{


    width:54px !important;
    height:54px !important;
  }


  /* PROGRESS */
  .gp-progress-wrap{


    width:100%;


    padding:0 4px;
  }


  /* RIGHT */
  .gp-right{


    width:68px;


    display:flex;
    align-items:center;
    justify-content:center;
  }


  /* COVER + EQ */
  #globalPlayerUI .player-cover-wrap{


    width:56px !important;
    height:56px !important;


    border-radius:16px;
  }


  #globalPlayerUI #liquidEq{


    width:56px !important;
    height:56px !important;
  }
}
/* ===============================
📱 HIDE SHUFFLE + REPEAT
IN MINI PLAYER ONLY
=============================== */


@media (max-width:768px){


    #gpShuffle,
    #gpRepeat{


        display:none !important;
    }
}




/* ===============================
🧱 SCROLL SPACE FIX
=============================== */




:root {
  --player-height: 100px;
}




body {
  padding-bottom: var(--player-height);
}




@media (max-width: 768px) {
  :root {
    --player-height: 90px;
  }
}




/* =========================================
🔥 PREMIUM CART COUNT
========================================= */




#cartBtn{
    position:relative;
}




/* NUMBER */
.cart-count{


    position:absolute;


    top:-8px;
    right:-8px;


    min-width:24px;
    height:24px;


    padding:0 7px;


    display:flex;
    align-items:center;
    justify-content:center;


    border-radius:999px;


    font-size:12px;
    font-weight:900;


    color:white;


    background:
    linear-gradient(
        135deg,
        #00e0ff,
        #5f6fff,
        #b14dff
    );


    background-size:200% 200%;


    border:
    1px solid rgba(255,255,255,.18);


    box-shadow:
    0 0 12px rgba(0,224,255,.45),
    0 0 24px rgba(95,111,255,.25),
    inset 0 1px rgba(255,255,255,.25);


    backdrop-filter:blur(10px);


    animation:
    cartPulse 2.5s ease infinite;


    z-index:5;


    overflow:hidden;
}
/* 💻 PC MORE PANEL FIX */


@media(min-width:769px){


    /* ❌ REMOVE FULLSCREEN BLUR */
    #proMenuSheet{


        position:fixed;
        inset:auto !important;


        right:18px;
        bottom:95px;


        width:auto;
        height:auto;


        background:none !important;
        backdrop-filter:none !important;


        display:flex;
        justify-content:flex-end;
        align-items:flex-end;


        pointer-events:none;


        z-index:99999;
    }




    /* ❌ REMOVE DARK OVERLAY */
    #proMenuSheet .sheet-backdrop{
        display:none !important;
    }




    /* ✅ SMALL FLOATING PANEL */
    #proMenuSheet .sheet-panel{


        width:220px !important;


        max-width:220px !important;
        min-width:220px !important;


        border-radius:20px !important;


        padding:10px !important;


        background:
        rgba(15,18,30,.88) !important;


        backdrop-filter:blur(18px);


        box-shadow:
        0 10px 40px rgba(0,0,0,.45);


        pointer-events:auto;


        animation:
        pcMoreSlide .22s ease;


        transform-origin:
        bottom right;
    }




    /* 🔥 SLIDE FROM MORE BTN */
    @keyframes pcMoreSlide{


        from{
            opacity:0;
            transform:
            translateX(25px)
            translateY(12px)
            scale(.92);
        }


        to{
            opacity:1;
            transform:
            translateX(0)
            translateY(0)
            scale(1);
        }
    }


}
/* 💻 PC MORE PANEL FIX */


@media(min-width:769px){


    /* MAIN WRAPPER */
    #proMenuSheet{


        position:fixed;


        right:18px;
        bottom:95px;


        width:auto;
        height:auto;


        background:none !important;
        backdrop-filter:none !important;


        display:flex;
        justify-content:flex-end;
        align-items:flex-end;


        z-index:99999;
    }




    /* REMOVE MOBILE OVERLAY */
    #proMenuSheet .sheet-backdrop{
        display:none !important;
    }




    /* FLOATING PANEL */
    #proMenuSheet .sheet-panel{


        width:220px !important;


        max-width:220px !important;
        min-width:220px !important;


        padding:10px !important;


        border-radius:20px !important;


        background:
        rgba(15,18,30,.88) !important;


        backdrop-filter:blur(18px);


        box-shadow:
        0 10px 40px rgba(0,0,0,.45);


        animation:
        pcMoreSlide .22s ease;


        transform-origin:
        bottom right;


        display:flex;
        flex-direction:column;


        gap:6px;
    }




    /* BUTTONS */
    #proMenuSheet .sheet-item{


        height:38px !important;


        border-radius:12px !important;


        font-size:13px !important;


        padding:0 12px !important;
    }




    /* TITLE */
    #proMenuSheet .sheet-title{


        font-size:14px !important;


        margin-bottom:4px !important;


        text-align:center;
    }




    /* SLIDE ANIMATION */
    @keyframes pcMoreSlide{


        from{
            opacity:0;


            transform:
            translateX(25px)
            translateY(12px)
            scale(.92);
        }


        to{
            opacity:1;


            transform:
            translateX(0)
            translateY(0)
            scale(1);
        }
    }


}
/* ===============================
💻 PC MORE PANEL FIX
=============================== */


@media (min-width: 769px){


    #proMenuSheet{


        position: fixed !important;


        bottom: 110px !important;
        left: 50% !important;


        transform:
        translateX(-50%) !important;


        width: 320px !important;


        display: flex !important;
        justify-content: center !important;
        align-items: flex-end !important;


        pointer-events: none;
        z-index: 999999;
    }


    #proMenuSheet .sheet-backdrop{
        display:none !important;
    }


    #proMenuSheet .sheet-panel{


        width: 320px !important;
        max-width: 320px !important;


        border-radius: 24px !important;


        animation:
        pcMoreSlide .28s ease;


        pointer-events:auto;
    }
}




/* 🔥 SLIDE */
@keyframes pcMoreSlide{


    from{
        opacity:0;
        transform:
        translateY(20px)
        scale(.95);
    }


    to{
        opacity:1;
        transform:
        translateY(0)
        scale(1);
    }
}
@keyframes pcMoreClose{


    from{
        opacity:1;
        transform:
        translateY(0)
        scale(1);
    }


    to{
        opacity:0;
        transform:
        translateY(20px)
        scale(.92);
    }
}
/* ===============================
🔥 BIGGER SIDE BTNS
=============================== */


#gpMore,
#gpDownload{


    width: 42px !important;
    height: 42px !important;


    min-width: 42px !important;
    min-height: 42px !important;


    border-radius: 14px !important;


    font-size: 20px !important;
}




/* ⋯ MORE */
#gpMore{


    left: -72px !important;


    padding-bottom: 5px !important;
}




/* ⬇ DOWNLOAD */
#gpDownload{


    right: -72px !important;
}
/* ===============================
📱 HIDE ONLY MINI PLAYER BTNS
=============================== */


@media (max-width:768px){


    .global-player #gpMore,
    .global-player #gpDownload{


        display:none !important;
    }


}
/* ===============================
❤️ LOVE TRACK
=============================== */


.gp-right{


    display:flex;
    align-items:center;
    gap:16px;
}


.love-track-btn{


    display:flex;
    align-items:center;
    gap:7px;


    background:none;
    border:none;


    color:#fff;


    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;


    opacity:.82;


    cursor:pointer;


    transition:
    opacity .25s ease,
    transform .25s ease;
}


.love-track-btn:hover{


    opacity:1;


    transform:translateY(-1px);
}


.love-text{


    color:#fff;
}


.love-heart{


    font-size:18px;


    color:#fff;


    transition:
    color .28s ease,
    transform .28s ease;
}


.love-track-btn.active
.love-heart{


    color:#ff003c;


    transform:scale(1.14);
}
/* ❌ HIDE LOVE BUTTON COMPLETELY ON MOBILE */
@media (max-width:768px){


    #loveTrackBtn{
        display:none !important;
    }
}
/* ===============================
   🔥 DELETE CONFIRM PANEL
=============================== */


#deletePlaylistConfirm{
    position: fixed;
    inset: 0;
    z-index: 999999;
}


.delete-confirm-backdrop{
    position: absolute;
    inset: 0;
    background:
    rgba(0,0,0,.72);
    backdrop-filter:
    blur(10px);
}


.delete-confirm-panel{


    position: absolute;


    left: 50%;
    top: 50%;


    transform:
    translate(-50%,-50%)
    scale(.92);


    width: 92%;
    max-width: 360px;


    border-radius: 30px;


    background:
    linear-gradient(
        145deg,
        rgba(15,18,30,.96),
        rgba(5,7,15,.98)
    );


    border:
    1px solid
    rgba(255,255,255,.08);


    overflow: hidden;


    padding:
    32px 24px;


    animation:
    deletePop .28s ease forwards;


    box-shadow:
    0 30px 90px
    rgba(0,0,0,.55);
}


.delete-confirm-glow{


    position: absolute;


    width: 220px;
    height: 220px;


    background:
    radial-gradient(
        circle,
        rgba(255,0,80,.25),
        transparent 70%
    );


    top: -120px;
    right: -80px;


    pointer-events: none;
}


.delete-confirm-icon{


    font-size: 54px;
    text-align: center;
    margin-bottom: 14px;
}


.delete-confirm-title{


    text-align: center;


    font-size: 24px;
    font-weight: 800;


    color: white;


    margin-bottom: 12px;
}


.delete-confirm-text{


    text-align: center;


    color:
    rgba(255,255,255,.68);


    line-height: 1.6;


    font-size: 14px;


    margin-bottom: 28px;
}


.delete-confirm-actions{


    display: flex;
    gap: 12px;
}


.delete-confirm-actions button{


    flex: 1;


    border: none;


    height: 52px;


    border-radius: 18px;


    font-size: 15px;
    font-weight: 700;


    cursor: pointer;


    transition:
    .22s ease;
}


.delete-cancel-btn{


    background:
    rgba(255,255,255,.06);


    color: white;
}


.delete-cancel-btn:hover{


    background:
    rgba(255,255,255,.12);
}


.delete-confirm-btn{


    background:
    linear-gradient(
        135deg,
        #ff003c,
        #ff335f
    );


    color: white;


    box-shadow:
    0 10px 30px
    rgba(255,0,70,.35);
}


.delete-confirm-btn:hover{


    transform:
    translateY(-2px);


    box-shadow:
    0 16px 40px
    rgba(255,0,70,.45);
}


@keyframes deletePop{


    to{


        transform:
        translate(-50%,-50%)
        scale(1);
    }
}
#mobilePlayer{
    touch-action: pan-y;
    overscroll-behavior: contain;
}
#mpLike .love-heart{


    font-size: 28px;
    color: rgb(228, 11, 11);
    transition: .25s ease;
}


#mpLike .love-heart.liked{


    color: #ffffff;
}
/* 🔥 MOBILE WAVE STRETCH FIX */
@media (max-width:768px){


    .playlist-track{
        display:flex;
        align-items:center;
        gap:12px;
    }


    .track-info{
        flex:1;
        min-width:0;
    }


    .wave-row{
        width:100%;
        flex:1;
        margin-left:8px;
    }


    .waveform{
        width:100% !important;
    }


    .playlist-track-right{
        margin-left:8px;
    }


}
/* FIX PLAYER ALIGNMENT + PROGRESS PADDING */
#globalPlayerUI {
  position: relative !important;
  display: flex !important;
  align-items: center !important; /* This centers cover/controls vertically */
  justify-content: space-between !important;
  padding: 16px 15px 20px 20px !important; /* More bottom padding for progress */
  height: 88px !important; /* Fixed height */
}

/* LEFT SECTION - ALIGN TOP */
#globalPlayerUI .gp-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
  height: 48px !important; /* Lock height */
}

#gpCover {
  width: 48px !important;
  height: 48px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  display: block !important; /* Remove img baseline gap */
}

/* CENTER CONTROLS - ALIGN TOP */
#globalPlayerUI .gp-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  height: 48px !important; /* Match cover height */
}

/* RIGHT SECTION - ALIGN TOP */
#globalPlayerUI .gp-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 16px !important;
  flex: 1 !important;
  height: 48px !important; /* Match cover height */
}

/* PROGRESS BAR - CONSTRAINED WIDTH, NOT FULL */
#globalPlayerUI .gp-center-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important; /* Don't stretch */
}

/* PROGRESS WRAPPER - HOLDS BAR + TIME */
#globalPlayerUI .gp-progress-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 420px !important; /* Fixed width - not full */
  max-width: 40vw !important; /* Responsive cap */
}

#globalPlayerUI #gpProgress {
  position: relative !important; /* Not absolute anymore */
  flex: 1 !important; /* Fill space between timestamps */
  height: 4px !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 2px !important;
  cursor: pointer !important;
}

#globalPlayerUI #gpBar {
  height: 100% !important;
  background: linear-gradient(90deg, #ff4d6d, #6c5ce7) !important;
  border-radius: 2px !important;
  transition: width 0.1s linear !important;
}

/* TIME STAMPS - DOCKED TO PROGRESS BAR */
#globalPlayerUI .gp-time {
  position: static !important; /* Not absolute - flows with bar */
  font-size: 11px !important;
  color: rgba(255,255,255,0.6) !important;
  min-width: 35px !important; /* Prevents jumpy width */
  flex-shrink: 0 !important;
}

#gpCurrent { text-align: right !important; }
#gpDuration { text-align: left !important; }

#gpCurrent { left: 24px !important; }
#gpDuration { right: 24px !important; }

/* EQ ICON FIX - ALIGN WITH CONTROLS */
#globalPlayerUI .gp-eq {
  display: flex !important;
  align-items: center !important;
  height: 48px !important;
}
/* ONLY FLOAT - NO REDESIGN */
body.playing #globalPlayerUI {
  transform: translateY(-8px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

#globalPlayerUI {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
/* CENTER + FLOAT */
#globalPlayerUI {
  position: fixed !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

body.playing #globalPlayerUI {
  transform: translateX(-50%) translateY(-8px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4) !important;
}