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

.player-v2{
position:fixed;
left:0;
bottom:0;
width:100%;
z-index:9999;
box-sizing:border-box;

display:grid;
grid-template-columns:minmax(260px,320px) minmax(0,1fr) minmax(130px,180px);
align-items:center;
gap:clamp(12px,1.5vw,22px);

padding:14px 56px 14px 20px;

background:
linear-gradient(180deg,rgba(18,10,3,0.55),rgba(5,5,7,0.75)),
linear-gradient(90deg,rgba(181,140,65,.10),rgba(255,255,255,0));

border-top:1px solid rgba(255,255,255,.08);
box-shadow:0 -10px 35px rgba(0,0,0,.45);

backdrop-filter:blur(22px) saturate(120%);
-webkit-backdrop-filter:blur(22px) saturate(120%);

transition:
box-shadow .25s ease,
background .25s ease,
transform .25s ease,
opacity .25s ease;
}

.player-v2:hover{
box-shadow:
0 -14px 45px rgba(0,0,0,.60),
0 -4px 18px rgba(214,176,92,.18);
}

.player-v2.playing{
box-shadow:
0 -12px 40px rgba(0,0,0,.55),
0 -2px 12px rgba(214,176,92,.15);
}

.player-v2.hidden{
transform:translateY(100%);
opacity:0;
pointer-events:none;
}

/* ================= DISC ================= */

.player-v2__disc{
width:64px;
height:64px;
border-radius:50%;
position:relative;
flex-shrink:0;

background:
radial-gradient(circle at 35% 35%,rgba(255,255,255,.18),transparent 38%),
radial-gradient(circle,#3a3a3a 0%,#141414 52%,#050505 78%,#2a2a2a 100%);

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

box-shadow:
inset 0 0 0 1px rgba(255,255,255,.08),
inset 0 0 18px rgba(0,0,0,.75),
0 0 10px rgba(255,255,255,.08),
0 6px 18px rgba(0,0,0,.6);

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

.player-v2__disc::before{
content:"";
position:absolute;
inset:0;
border-radius:50%;

background:
repeating-radial-gradient(
circle,
rgba(255,255,255,.06) 0px,
rgba(255,255,255,.06) 1px,
transparent 2px,
transparent 4px
),
radial-gradient(circle at 20% 20%, rgba(255,255,255,.25), transparent 40%);

opacity:.65;
}

.player-v2__disc::after{
content:"";
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:#d8c59a;
box-shadow:
0 0 0 2px rgba(0,0,0,.35),
inset 0 0 3px rgba(255,255,255,.18);
}

/* sticker */

.player-v2__cover{
width:26px;
height:26px;
border-radius:50%;
object-fit:cover;
z-index:2;
box-shadow:0 0 6px rgba(255,255,255,.10);
}

/* spin */

.player-v2__disc.is-playing{
animation:discSpin 10s linear infinite;
}

@keyframes discSpin{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}

/* ================= LEFT ================= */

.player-v2__left{
display:flex;
align-items:center;
gap:14px;
min-width:0;
}

.player-v2__meta{
display:flex;
flex-direction:column;
min-width:0;
flex:1;
}

.player-v2__title{
font-size:18px;
font-weight:500;
color:#f6f1e8;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
margin-bottom:4px;
max-width:100%;
}

.player-v2__artist{
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
color:rgba(228,214,190,.7);
}

/* ================= CENTER ================= */

.player-v2__center{
width:100%;
min-width:0;
}

.player-v2__controls-row{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
}

.player-v2__play{
width:56px;
height:56px;
border-radius:50%;
background:linear-gradient(180deg,#ddb866,#be9645);
border:none;
cursor:pointer;
font-size:18px;
box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 18px rgba(214,176,92,.18);
flex-shrink:0;
transition:transform .2s ease, box-shadow .2s ease;
}

.player-v2__play:hover{
transform:scale(1.04);
box-shadow:0 10px 26px rgba(0,0,0,.32),0 0 22px rgba(214,176,92,.24);
}

.player-v2__icon-btn{
width:36px;
height:36px;
border-radius:50%;
border:none;
cursor:pointer;
background:rgba(255,255,255,.06);
color:#fff;
flex-shrink:0;
transition:background .2s ease, transform .2s ease;
}

.player-v2__icon-btn:hover{
background:rgba(255,255,255,.10);
transform:scale(1.05);
}

/* ================= WAVE ================= */

.player-v2__wave-wrap{
width:100%;
min-width:0;
}

#visualizer{
width:100%;
height:34px;
opacity:.95;
display:block;
}

/* ================= PROGRESS ================= */

.player-v2__progress-bar{
position:relative;
width:100%;
height:5px;
border-radius:999px;
background:rgba(255,255,255,.08);
cursor:pointer;
overflow:hidden;
}

.player-v2__progress-fill{
position:absolute;
left:0;
top:0;
height:100%;
width:0;
border-radius:inherit;

background:
linear-gradient(
90deg,
#d8b15c,
#f0d38f,
#d8b15c
);

background-size:200% 100%;
box-shadow:0 0 10px rgba(216,177,92,.28);
}

.player-v2.playing .player-v2__progress-fill{
animation:progressLight 4s linear infinite;
}

@keyframes progressLight{
0%{background-position:0% 0}
100%{background-position:200% 0}
}

.player-v2__progress-thumb{
position:absolute;
top:50%;
left:0;
width:12px;
height:12px;
border-radius:50%;
background:#f1dfb4;
transform:translate(-50%,-50%);
box-shadow:0 0 8px rgba(241,223,180,.35);
}

.player-v2__time{
display:flex;
justify-content:space-between;
font-size:11px;
color:rgba(222,214,197,.72);
margin-top:4px;
}

/* ================= RIGHT ================= */

.player-v2__right{
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
min-width:130px;
}

.player-v2__mute{
width:34px;
height:34px;
border-radius:50%;
border:none;
background:rgba(255,255,255,.05);
cursor:pointer;
flex-shrink:0;
transition:background .2s ease, transform .2s ease;
}

.player-v2__mute:hover{
background:rgba(255,255,255,.10);
transform:scale(1.05);
}

#volumeSlider{
width:clamp(80px,8vw,130px);
accent-color:#d7b15f;
flex-shrink:0;
filter:drop-shadow(0 0 4px rgba(215,177,95,.35));
}

/* ================= CLOSE ================= */

.player-close{
position:absolute;
top:10px;
right:14px;
border:none;
background:none;
color:rgba(255,255,255,.45);
font-size:20px;
cursor:pointer;
z-index:2;
transition:color .2s ease, transform .2s ease;
}

.player-close:hover{
color:#fff;
transform:scale(1.08);
}

/* ================= RESPONSIVE ================= */

@media (max-width:1100px){

.player-v2{
grid-template-columns:minmax(220px,280px) minmax(0,1fr) minmax(120px,150px);
padding:12px 48px 12px 16px;
}

.player-v2__title{
font-size:16px;
}

#volumeSlider{
width:95px;
}
}

@media (max-width:900px){

.player-v2{
grid-template-columns:1fr;
gap:14px;
padding:14px 16px 18px;
}

.player-v2__left,
.player-v2__center,
.player-v2__right{
width:100%;
}

.player-v2__right{
justify-content:flex-start;
}

.player-v2__disc{
width:58px;
height:58px;
}

.player-v2__title{
font-size:16px;
}
}

@media (min-width:2000px){

.player-v2{
padding:18px 80px 18px 28px;
grid-template-columns:minmax(320px,420px) minmax(0,1fr) minmax(160px,220px);
}

.player-v2__disc{
width:72px;
height:72px;
}

.player-v2__title{
font-size:22px;
}

.player-v2__artist{
font-size:12px;
}

.player-v2__play{
width:62px;
height:62px;
}

.player-v2__icon-btn{
width:40px;
height:40px;
}

#visualizer{
height:40px;
}

#volumeSlider{
width:150px;
}
}