:root{
  --bg:#050509;--panel:#151520;--muted:#a0a0b5;--accent-glow:rgba(180,120,255,.28);
  --cover-size:min(22vw,80px);--crz-station-color:#b87bff;--crz-aurora-color:#8a3dff;
  --crz-glow:rgba(150,110,220,.35);--crz-glow-strong:rgba(190,150,255,.8);
  --crz-station-glow:#b87bffdd;--crz-container-glow:14px;
}

*{box-sizing:border-box;margin:0}

.chatroomz-player-wrapper{
  display:flex;justify-content:center;align-items:center;width:100%;
}

.chatroomz-player{
  position:relative;width:100%;max-width:360px;padding:14px;border-radius:16px;overflow:hidden;
  background:radial-gradient(circle at 10% 0%,#090914,#050509 55%,#020208);
  box-shadow:0 18px 40px rgba(0,0,0,.7);color:#fff;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  transition:box-shadow .25s,transform .25s;
}

.chatroomz-player::before{
  content:"";position:absolute;inset:-40%;pointer-events:none;opacity:.9;
  mix-blend-mode:screen;
  background:
    radial-gradient(circle at 0 0,rgba(138,61,255,.18),transparent 55%),
    radial-gradient(circle at 100% 20%,rgba(192,107,255,.16),transparent 55%),
    radial-gradient(circle at 20% 100%,rgba(61,246,255,.14),transparent 55%),
    radial-gradient(circle at 80% 100%,rgba(74,157,255,.16),transparent 55%);
  animation:crz-aurora-bg 18s ease-in-out infinite alternate;
}

.chatroomz-player.crz-amplified{
  box-shadow:0 22px 50px rgba(0,0,0,.85),0 0 32px var(--crz-station-glow);
  transform:translateY(-1px);
}

.chatroomz-player.crz-amplified::before{opacity:1;filter:brightness(1.12) saturate(1.08)}
.chatroomz-player>*{position:relative;z-index:1}

@keyframes crz-aurora-bg{
  0%{transform:translate3d(-4%,-2%,0) scale(1.05)}
  50%{transform:translate3d(3%,4%,0) scale(1.08)}
  100%{transform:translate3d(-2%,1%,0) scale(1.03)}
}

.crz-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}

.crz-logo{
  width:40px;height:40px;border-radius:50%;background:#333;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;color:#fff;text-transform:uppercase;
  box-shadow:0 0 12px rgba(0,0,0,.6);
}

.crz-meta{flex:1;overflow:hidden}
.crz-station-name,.crz-now-playing{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crz-station-name{font-size:14px;font-weight:600}
.crz-now-playing{font-size:11px;color:var(--muted)}

.crz-live{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#ff4b4b}
.crz-live-dot{
  width:8px;height:8px;border-radius:50%;background:#ff4b4b;
  box-shadow:0 0 8px rgba(255,75,75,.9);animation:crz-pulse 1.4s infinite;
}

@keyframes crz-pulse{
  0%{transform:scale(1);opacity:1}
  50%{transform:scale(1.4);opacity:.5}
  100%{transform:scale(1);opacity:1}
}

.crz-waveform{
  margin:8px 0 10px;border-radius:10px;overflow:hidden;
  background:transparent;box-shadow:0 0 var(--crz-container-glow) var(--crz-station-color);
  transition:box-shadow .15s,transform .25s;
}

.chatroomz-player.crz-amplified .crz-waveform{transform:scale(1.02)}

#crz-wave-canvas{
  width:100%;height:35vw;max-height:160px;display:block;
  background:transparent;border-radius:10px;
}

.crz-controls{display:flex;align-items:center;gap:10px;margin-bottom:12px}

.crz-btn{
  border:none;background:var(--panel);color:#fff;border-radius:999px;
  padding:6px 10px;cursor:pointer;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s,box-shadow .2s;
}

.crz-btn:hover{background:#26263a;box-shadow:0 0 10px #7878ff66}

.crz-play{
  width:34px;height:34px;border-radius:50%;font-size:15px;
  box-shadow:0 0 12px rgba(180,120,255,.5);
}

input[type=range]{width:100%;background:transparent;-webkit-appearance:none}
input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-moz-range-track{
  height:4px;background:linear-gradient(90deg,#6a3dfc,#b87bff);border-radius:999px
}
input[type=range]::-webkit-slider-thumb,
input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 0 12px #b87bff;margin-top:-5px;-webkit-appearance:none
}

.crz-mode-toggle{
  padding:4px 12px;border-radius:999px;border:none;
  background:rgba(40,20,80,.9);color:#f7f0ff;font-size:12px;
  cursor:pointer;box-shadow:0 0 10px var(--accent-glow);white-space:nowrap;
}

.crz-cover-nav{display:flex;justify-content:center;margin-top:4px}

.crz-coverflow{
  position:relative;width:80%;max-width:260px;aspect-ratio:2/1;
  display:flex;align-items:center;justify-content:center;perspective:900px;
}

.crz-card{
  width:var(--cover-size);height:var(--cover-size);border-radius:14px;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  box-shadow:0 10px 25px rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#fff;position:absolute;text-transform:uppercase;
  transition:transform .35s,opacity .35s,filter .35s,box-shadow .35s;
}

.crz-card-center{
  transform:translateX(0) translateZ(40px);opacity:1;z-index:3;
  box-shadow:0 0 20px var(--crz-glow-strong);
}

.chatroomz-player.crz-amplified .crz-card-center{box-shadow:0 0 32px var(--crz-station-glow)}

.crz-card-left{
  transform:translateX(-110px) rotateY(25deg) translateZ(-20px);
  opacity:.65;filter:blur(1px);z-index:2;
}

.crz-card-right{
  transform:translateX(110px) rotateY(-25deg) translateZ(-20px);
  opacity:.65;filter:blur(1px);z-index:2;
}

.crz-chevron{
  position:absolute;top:50%;transform:translateY(-50%);
  font-size:26px;color:#fff;cursor:pointer;padding:6px 10px;
  user-select:none;z-index:4;text-shadow:0 0 8px rgba(0,0,0,.8);
}

.crz-chevron-left{left:0}
.crz-chevron-right{right:0}

@media(max-width:420px){
  .chatroomz-player{padding:12px}
  .crz-coverflow{width:90%}
  .crz-card-left{transform:translateX(-90px) rotateY(25deg) translateZ(-20px)}
  .crz-card-right{transform:translateX(90px) rotateY(-25deg) translateZ(-20px)}
}