#player{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.05rem;
  padding:.95rem 1.05rem;
  border-radius:30px;
  background:
    linear-gradient(135deg,rgba(125,211,252,.18),rgba(99,102,241,.12) 42%,rgba(16,185,129,.12)),
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.07)),
    rgba(10,18,32,.42);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(26px) saturate(155%);
  -webkit-backdrop-filter:blur(26px) saturate(155%);
  min-width:0;
  box-shadow:
    0 18px 42px rgba(0,0,0,.28),
    0 6px 18px rgba(44,125,255,.10),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(255,255,255,.06);
  position:relative;
  overflow:hidden;
  pointer-events:auto;
  z-index:20;
  transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease, padding .26s ease, max-width .26s ease;
}



#player::before{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:29px;
  background:
    radial-gradient(circle at 14% 0%,rgba(255,255,255,.22),transparent 32%),
    radial-gradient(circle at 86% 100%,rgba(74,222,128,.13),transparent 38%);
  pointer-events:none;
}



#player::after{
  content:'';
  position:absolute;
  inset:auto 18% -45% 18%;
  height:80%;
  background:radial-gradient(ellipse at center,var(--mood-glow),transparent 68%);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}



body.music-playing #player::after{
  opacity:.65;
}



#player:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.3);
  box-shadow:
    0 22px 48px rgba(0,0,0,.32),
    0 0 28px rgba(125,211,252,.14),
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(255,255,255,.08);
}



.track-info{
  flex:0 1 210px;
  min-width:0;
  position:relative;
  z-index:1;
}



.song-title{
  font-size:1rem;
  font-weight:800;
  color:var(--mood-text);
  line-height:1.18;
  letter-spacing:.01em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:0 1px 18px rgba(255,255,255,.18);
}


.song-mood{
  opacity:.88;
  margin-top:.26rem;
  color:var(--mood-text-soft);
  font-size:.82rem;
  font-weight:600;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}



.player-controls{
  display:flex;
  align-items:center;
  gap:.65rem;
  position:relative;
  z-index:3;
  flex:none;
  pointer-events:auto;
}



.ctrl-btn:active,
#player-toggle:active{
  transform:scale(.96);
}



#bottom.hidden-player #player{
  display:flex;
  width:max-content;
  max-width:calc(100vw - 2rem);
  margin-left:auto;
  padding:.52rem;
  border-radius:20px;
  gap:.45rem;
}



#bottom.hidden-player .track-info,
#bottom.hidden-player .progress-wrap,
#bottom.hidden-player .ctrl-btn.prev,
#bottom.hidden-player .ctrl-btn.next,
#bottom.hidden-player .ctrl-btn.volume{
  display:none;
}



#bottom.hidden-player .player-controls{
  gap:.45rem;
}



#visualizer{
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
  height:var(--visualizer-h);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:2px;
  padding:0;
  opacity:0;
  transition:.4s;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
  contain:layout paint;
}



.bar{
  flex:1 1 auto;
  min-width:4px;
  max-width:none;
  border-radius:999px 999px 0 0;
  background:linear-gradient(
    to top,
    color-mix(in srgb, var(--mood-accent) 25%, transparent),
    var(--mood-accent)
  );
  box-shadow:0 0 18px var(--mood-glow);
  animation:barDance 1.1s infinite alternate ease-in-out;
  animation-play-state:paused;
}



body.music-playing #visualizer .bar{
  animation-play-state:running;
}



body.soundcloud-mode .song-mood::before{
  content:'Γÿü ';
}



body.soundcloud-mode #visualizer{
  opacity:.35;
}



body.soundcloud-mode #visualizer .bar{
  animation-duration:1.55s;
  filter:drop-shadow(0 0 8px rgba(156,183,255,.5));
}