/* =========================
      MUSIC ISLAND (Dynamic Island style)
========================= */
.music-island{
    position:fixed;
    top:24px;
    left:50%;
    transform:translateX(-50%);

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

    padding:12px 20px;
    border-radius:999px;

    background:rgba(20,20,20,.55);
    backdrop-filter:blur(30px) saturate(180%);
    -webkit-backdrop-filter:blur(30px) saturate(180%);

    border:1px solid rgba(255,255,255,.15);
    box-shadow:
        0 10px 35px rgba(0,0,0,.5),
        inset 0 1px rgba(255,255,255,.12);

    cursor:pointer;
    overflow:hidden;
    max-width:92vw;

    transition:all .45s cubic-bezier(.4,0,.2,1);
    z-index:500;
}

/* свернутое состояние — просто эквалайзер + имя трека */
.music-island .eq{
    display:flex;
    align-items:flex-end;
    gap:3px;
    height:16px;
    flex-shrink:0;
}

.music-island .eq span{
    width:3px;
    border-radius:2px;
    background:linear-gradient(180deg,#fff,rgba(255,255,255,.4));
    animation:eq 1s ease-in-out infinite;
}

.music-island .eq span:nth-child(1){ animation-delay:0s; }
.music-island .eq span:nth-child(2){ animation-delay:.2s; }
.music-island .eq span:nth-child(3){ animation-delay:.4s; }
.music-island .eq span:nth-child(4){ animation-delay:.1s; }

@keyframes eq{
    0%,100%{ height:4px; }
    50%{ height:16px; }
}

.music-island .song-name{
    color:white;
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:160px;
}

/* =========================
      РАЗВЁРНУТОЕ СОСТОЯНИЕ
========================= */
.music-island.expanded{
    flex-direction:column;
    align-items:stretch;
    width:340px;
    max-width:92vw;
    padding:18px 22px;
    border-radius:26px;
    cursor:default;
}

.music-island.expanded .song-name{
    max-width:100%;
    margin-bottom:14px;
    text-align:center;
    font-size:16px;
}

/* прогресс-бар, тайминги и кнопка скрыты пока не развернуто */
.music-island .progress-wrap,
.music-island .times,
.music-island #music-btn{
    display:none;
}

.music-island.expanded .progress-wrap,
.music-island.expanded .times,
.music-island.expanded #music-btn{
    display:block;
}

.music-island.expanded .eq{
    display:none;
}

/* =========================
      TIMES
========================= */
.music-island .times{
    display:flex;
    justify-content:space-between;
    color:rgba(255,255,255,.75);
    font-size:12px;
    margin-bottom:10px;
}

/* =========================
      PROGRESS BAR
========================= */
#progress{
    width:100%;
    height:5px;
    appearance:none;
    -webkit-appearance:none;
    border-radius:999px;
    background:rgba(255,255,255,.15);
    outline:none;
    cursor:pointer;
}

#progress::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:13px;
    height:13px;
    border-radius:50%;
    background:white;
    box-shadow:0 0 12px rgba(255,255,255,.8);
}

#progress::-moz-range-thumb{
    width:13px;
    height:13px;
    border:none;
    border-radius:50%;
    background:white;
}

/* =========================
      PLAY BUTTON
========================= */
#music-btn{
    margin-top:14px;
    width:100%;
    height:40px;
    border:none;
    border-radius:14px;
    background:rgba(255,255,255,.10);
    color:white;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    backdrop-filter:blur(15px);
    transition:.25s;
}

#music-btn:hover{
    background:rgba(255,255,255,.18);
    transform:scale(1.02);
}

#music-btn:active{
    transform:scale(.98);
}

/* =========================
      PHONE
========================= */
@media(max-width:520px){
.music-island{
    top:14px;
}
.music-island.expanded{
    width:90vw;
}
.music-island .song-name{
    max-width:120px;
    font-size:13px;
}
.music-island.expanded .song-name{
    max-width:100%;
}
}