/* ==========================================
   MAGIC407 PLAYER V2
========================================== */

#magic-player{
    max-width:1280px;
    margin:30px auto;
    padding:0 20px;
}

/* ---------- PLAYER ---------- */

.magic-player{

    position:relative;

    display:grid;

    grid-template-columns:120px 1fr 170px;

    gap:30px;

    align-items:center;

    overflow:hidden;

    padding:28px;

    border-radius:24px;

    background:rgba(18,18,24,.88);

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

    box-shadow:
        0 15px 45px rgba(0,0,0,.45),
        0 0 40px rgba(123,13,253,.18);

    backdrop-filter:blur(22px);

}

/* ---------- Blur Background ---------- */

.player-bg{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    transform:scale(1.5);

    filter:blur(90px);

    opacity:.45;

    z-index:0;

    transition:background-image .6s;

}

.player-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(10,10,15,.35),
            rgba(10,10,15,.75)
        );

    z-index:1;

}

.player-left,
.player-center,
.player-right{

    position:relative;

    z-index:2;

}

/* ---------- LEFT ---------- */

.player-left{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.player-live{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:14px;

    font-weight:700;

    letter-spacing:2px;

    color:white;

}

.live-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#ff2d55;

    box-shadow:0 0 18px #ff2d55;

    animation:pulse 1.3s infinite;

}

@keyframes pulse{

    0%{transform:scale(1);}
    50%{transform:scale(1.45);opacity:.45;}
    100%{transform:scale(1);}

}

.player-cover{

    width:105px;

    height:105px;

    border-radius:50%;

    object-fit:cover;

    background:#111;

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

    box-shadow:
        0 0 30px rgba(123,13,253,.35);

    transition:.4s;

}

.player-cover.playing{

    animation: spin 12s linear infinite;

}
@keyframes spin{

    from{transform:rotate(0);}
    to{transform:rotate(360deg);}

}

/* ---------- CENTER ---------- */

.player-center{

    overflow:hidden;

}

#playerArtist{

    color:#fff;

    font-size:28px;

    font-weight:700;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

#playerTitle{

    margin-top:6px;

    color:#d7d7d7;

    font-size:18px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

/* ---------- Progress ---------- */

.player-progress{

    margin:18px 0;

    height:6px;

    background:#2d2d2d;

    border-radius:30px;

    overflow:hidden;

}

.player-progress-fill{

    width:0;

    height:100%;

    border-radius:30px;

    background:
        linear-gradient(
            90deg,
            #7B0DFD,
            #FF6A00
        );

    transition:width .8s linear;

}

/* ---------- EQ ---------- */

.equalizer{

    display:flex;

    gap:4px;

    height:24px;

    align-items:flex-end;

    margin-bottom:18px;

}

.equalizer span{

    width:4px;

    height:8px;

    border-radius:20px;

    background:#ff9800;

}

.equalizer.playing span{

    animation:eq .9s infinite alternate;

}

.equalizer.playing span:nth-child(2){animation-delay:.2s;}
.equalizer.playing span:nth-child(3){animation-delay:.4s;}
.equalizer.playing span:nth-child(4){animation-delay:.6s;}
.equalizer.playing span:nth-child(5){animation-delay:.8s;}

@keyframes eq{

    from{height:8px;}
    to{height:24px;}

}

/* ---------- META ---------- */

.player-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:8px;

}

#playerDJ{

    color:#ff9800;

    font-size:14px;

}

#playerListeners{

    color:#8fd9ff;

    font-size:14px;

}

/* ---------- RIGHT ---------- */

.player-right{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:20px;

}

#playerButton{

    width:70px;

    height:70px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:white;

    font-size:28px;

    background:
        linear-gradient(
            135deg,
            #7B0DFD,
            #FF6A00
        );

    box-shadow:
        0 0 30px rgba(123,13,253,.35);

    transition:.25s;

}

#playerButton:hover{

    transform:scale(1.08);

}

.player-volume{

    display:flex;

    align-items:center;

    gap:10px;

}

#playerVolume{

    width:130px;

    accent-color:#7B0DFD;

}

/* ===================== */

@media(max-width:900px){

.magic-player{

    position:relative;

    overflow:hidden;

}
.magic-player::after{

    content:"";

    position:absolute;

    inset:-40px;

    background:inherit;

    z-index:0;

    opacity:.45;

    filter:blur(70px);

    pointer-events:none;

}

.magic-player > *{

    position:relative;

    z-index:2;

}

.player-left,
.player-right{

justify-content:center;

}

.player-volume{

justify-content:center;

}

#playerVolume{

width:100%;

}

}

.equalizer.playing span{

animation:eq .9s infinite alternate;

}

.equalizer.playing span:nth-child(1){animation-delay:0s;}
.equalizer.playing span:nth-child(2){animation-delay:.2s;}
.equalizer.playing span:nth-child(3){animation-delay:.4s;}
.equalizer.playing span:nth-child(4){animation-delay:.6s;}
.equalizer.playing span:nth-child(5){animation-delay:.8s;}

.player-cover{

filter:drop-shadow(0 0 18px rgba(123,13,253,.45));
background:#111;
}
.player-cover::after{

content:"";

position:absolute;

width:14px;

height:14px;

background:#222;

border:3px solid #777;

border-radius:50%;

left:50%;

top:50%;

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

}
.player-cover{
transition:transform .08s linear;
transform-origin:center;
will-change:transform;
    position:relative;

    width:96px;
    height:96px;

    border-radius:50%;

    object-fit:cover;

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

    transition:.4s;

    background:#111;

    box-shadow:0 0 35px rgba(123,13,253,.45);

    filter:drop-shadow(0 0 18px rgba(123,13,253,.45));

}
/* ==========================
   RECENTLY PLAYED
========================== */

.recently-played{

    margin-top:20px;

    padding-top:15px;

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

}

.recently-played h4{

    margin:0 0 10px;

    color:#ff9800;

    font-size:14px;

    letter-spacing:1px;

}

#recentTracks{

    display:flex;

    flex-direction:column;

    gap:6px;

}

.recent-track{

    color:#d0d0d0;

    font-size:13px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    transition:.2s;

}

.recent-track:hover{

    color:#fff;

}
/* Dynamische album glow */

.magic-player{

    overflow:hidden;

}

.player-bg{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    filter:blur(100px);

    transform:scale(1.6);

    opacity:.45;

    transition:background-image .8s ease;

    z-index:0;

}

.player-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(10,10,15,.55),
        rgba(10,10,15,.82)
    );

    z-index:1;

}

.player-left,
.player-center,
.player-right{

    position:relative;

    z-index:2;

}
.player-bg{
    opacity:.28;
    filter:blur(60px);
}
.player-overlay{

    background:linear-gradient(
        135deg,
        rgba(10,10,15,.30),
        rgba(10,10,15,.55)
    );

}
/* ==========================
   UP NEXT
========================== */

.player-next{

    margin-top:20px;

    padding-top:15px;

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

}

.next-label{

    color:#ff9800;

    font-size:13px;

    letter-spacing:2px;

    margin-bottom:10px;

}

.next-track{

    display:flex;

    align-items:center;

    gap:12px;

}

#nextCover{

    width:52px;

    height:52px;

    border-radius:10px;

    object-fit:cover;

}

#nextArtist{

    color:#fff;

    font-weight:600;

    font-size:14px;

}

#nextTitle{

    color:#bdbdbd;

    font-size:13px;

}
/* ==========================================
   UP NEXT
========================================== */

.player-next{

    margin-top:25px;

    padding-top:18px;

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

}

.next-label{

    color:#ff9800;

    font-size:13px;

    letter-spacing:2px;

    margin-bottom:12px;

    font-weight:700;

}

.next-track{

    display:flex;

    align-items:center;

    gap:14px;

}

#nextCover{

    width:60px;

    height:60px;

    border-radius:12px;

    object-fit:cover;

    box-shadow:0 0 15px rgba(123,13,253,.25);

}

.next-info{

    overflow:hidden;

}

#nextArtist{

    color:#fff;

    font-size:15px;

    font-weight:600;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

#nextTitle{

    margin-top:4px;

    color:#bbb;

    font-size:13px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

/* ==========================================
   RECENTLY PLAYED
========================================== */

.recent-box{

    margin-top:25px;

    padding:22px;

    border-radius:22px;

    background:rgba(18,18,24,.88);

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

    backdrop-filter:blur(22px);

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

}

.recent-box h3{

    margin:0 0 18px;

    color:#ff9800;

    font-size:18px;

}

#recentTracks{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));

    gap:14px;

}

.recent-track{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px;

    border-radius:14px;

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

    transition:.25s;

}

.recent-track:hover{

    transform:translateY(-3px);

    background:rgba(123,13,253,.12);

}

.recent-track img{

    width:56px;

    height:56px;

    border-radius:10px;

    object-fit:cover;

}

.recent-text{

    overflow:hidden;

}

.recent-artist{

    color:#fff;

    font-size:14px;

    font-weight:600;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.recent-title{

    margin-top:4px;

    color:#bbb;

    font-size:13px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:900px){

.magic-player{

    grid-template-columns:1fr;

    text-align:center;

}

.player-left,
.player-right{

    justify-content:center;

}

.player-meta{

    flex-direction:column;

    gap:8px;

}

.next-track{

    justify-content:center;

}

.player-volume{

    justify-content:center;

}

#playerVolume{

    width:100%;

}

#recentTracks{

    grid-template-columns:1fr;

}

}
/* ==========================
   REALTIME VISUALIZER
========================== */

#visualizer{

    width:100%;

    height:55px;

    display:block;

    margin:15px 0;

}

.player-popup{

    width:48px;
    height:48px;

    margin-top:10px;

    border:none;

    border-radius:50%;

    background:#7B0DFD;

    color:white;

    font-size:22px;

    cursor:pointer;

    transition:.25s;

}

.player-popup:hover{

    transform:scale(1.08);

}

.dj-photo{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
    margin-right:15px;
    border:2px solid #7B0DFD;
    background:#222;
}

.player-meta{
    display:flex;
    align-items:center;
    gap:15px;
}