/* Modern card with blurred background */
.rsp-player{
  --rsp-bg: none;
  position:relative;
  width:100%;
  max-width:420px;
  margin:16px auto;
  padding:20px 18px 28px;
  border-radius:24px;
  overflow:hidden;
  backdrop-filter: blur(8px);
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.2), rgba(0,0,0,.15)),
              #111;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.rsp-player.rsp-modern::before{
  content:"";
  position:absolute; inset:-20%;
  background: var(--rsp-bg, none) center/cover no-repeat;
  filter: blur(30px) brightness(.8);
  opacity:.45;
  z-index:0;
}
.rsp-player *{ position:relative; z-index:1; }

/* Artwork */
.rsp-artwrap{
  display:flex; justify-content:center; margin-top:6px;
}
.rsp-art{
  width:160px; height:160px; border-radius:9999px;
  object-fit:cover;
  box-shadow: 0 8px 20px rgba(0,0,0,.3), inset 0 0 0 8px rgba(255,255,255,.6);
  background:#222;
}

/* Titles */
.rsp-head{ text-align:center; margin-top:12px; }
.rsp-station{ font-size:22px; font-weight:700; color:#111; mix-blend-mode:screen; }
.rsp-track{
  margin-top:6px; height:28px; overflow:hidden; position:relative;
  color:#111; font-size:18px; font-weight:600; letter-spacing:.3px;
}
.rsp-track-inner{
  display:inline-block; white-space:nowrap; padding-left:100%;
  animation: rsp-marquee 12s linear infinite;
}
@keyframes rsp-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

/* Volume row */
.rsp-volume{
  display:flex; align-items:center; gap:10px; margin:12px 4px;
}
.rsp-mute{
  width:28px; height:28px; border:none; background:transparent; cursor:pointer;
}
.rsp-mute::before{ content:"🔇"; font-size:18px; line-height:28px; display:block; }
.rsp-range{ flex:1; accent-color:#111; }
.rsp-vpct{ width:48px; text-align:right; font-variant-numeric: tabular-nums; }
.rsp-vicon::before{ content:"🔊"; margin-left:6px; }

/* Center controls */
.rsp-center{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:8px; }
.rsp-eq{
  width:24px; height:24px; background:
    linear-gradient(to top, #111 50%, transparent 0) 2px 100%/4px 60% no-repeat,
    linear-gradient(to top, #111 50%, transparent 0) 10px 100%/4px 80% no-repeat,
    linear-gradient(to top, #111 50%, transparent 0) 18px 100%/4px 40% no-repeat;
  animation: rsp-eq 1s ease-in-out infinite;
  opacity:.75;
}
@keyframes rsp-eq{
  0%,100%{ transform:scaleY(1); }
  50%{ transform:scaleY(.6); }
}

.rsp-play{
  width:86px; height:86px; border-radius:9999px;
  border:none; background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.3); cursor:pointer;
  transition: transform .15s ease;
}
.rsp-play:hover{ transform:scale(1.03); }
.rsp-icon{
  width:0; height:0; border-style:solid;
  border-width:16px 0 16px 28px;
  border-color:transparent transparent transparent #111;
  margin-left:6px;
}
.rsp-playing .rsp-icon{
  width:22px; height:22px; border:none;
  box-sizing:content-box;
  box-shadow: inset 0 0 0 8px #111, inset 20px 0 0 8px #111;
  margin-left:0;
}

.rsp-live{
  font-size:12px; font-weight:800; color:#fff; background:#111; padding:4px 8px; border-radius:8px;
  letter-spacing:.6px;
}

.rsp-status{
  text-align:center; margin-top:8px; color:#111; font-size:12px; opacity:.85;
}

/* Responsive */
@media (max-width:420px){
  .rsp-art{ width:140px; height:140px; }
  .rsp-play{ width:76px; height:76px; }
}