:root{
  --bg:#050711;
  --card:rgba(15,18,34,.72);
  --card2:rgba(255,255,255,.06);
  --text:#f6f8ff;
  --muted:#9aa7c7;
  --line:rgba(255,255,255,.12);
  --a:#72e4ff;
  --b:#9b7cff;
  --c:#ff5fd7;
  --d:#77ffb7;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100%;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 20% 10%,rgba(114,228,255,.20),transparent 32%),
    radial-gradient(circle at 90% 25%,rgba(155,124,255,.20),transparent 28%),
    radial-gradient(circle at 50% 95%,rgba(255,95,215,.14),transparent 36%),
    var(--bg);
  overflow-x:hidden;
}

.radio-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.blob{
  position:absolute;
  width:42vmax;
  height:42vmax;
  border-radius:999px;
  filter:blur(70px);
  opacity:.22;
  animation:float 12s ease-in-out infinite alternate;
}
.b1{background:var(--a);left:-14vmax;top:-10vmax}
.b2{background:var(--b);right:-18vmax;top:12vmax;animation-delay:-4s}
.b3{background:var(--c);left:20vmax;bottom:-22vmax;animation-delay:-8s}
@keyframes float{to{transform:translate3d(6vmax,4vmax,0) scale(1.12)}}

.player-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px 16px;
}

.hero-card{
  width:min(680px,100%);
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(20,24,45,.82),rgba(7,9,18,.72));
  border-radius:34px;
  padding:26px;
  box-shadow:0 30px 100px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(22px);
}

.hero-card:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(90deg,transparent,rgba(114,228,255,.22),transparent),
    radial-gradient(circle at 20% 0%,rgba(114,228,255,.18),transparent 28%),
    radial-gradient(circle at 80% 0%,rgba(255,95,215,.14),transparent 28%);
  pointer-events:none;
}

.top-line,.track-info,.controls,.footer-actions{position:relative;z-index:3}
.top-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:48px;height:48px;border-radius:18px;
  display:grid;place-items:center;
  font-weight:900;
  background:linear-gradient(135deg,var(--a),var(--b));
  color:#050711;
  box-shadow:0 12px 30px rgba(114,228,255,.26);
}
.brand strong{display:block;font-size:18px;letter-spacing:-.02em}
.brand span{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.live-pill{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
}
.live-pill span{
  width:8px;height:8px;border-radius:99px;
  background:#ff4b6e;
  box-shadow:0 0 0 0 rgba(255,75,110,.8);
  animation:pulseLive 1.25s infinite;
}
@keyframes pulseLive{
  70%{box-shadow:0 0 0 10px rgba(255,75,110,0)}
  100%{box-shadow:0 0 0 0 rgba(255,75,110,0)}
}

.visual-wrap{
  position:relative;
  z-index:2;
  height:360px;
  border-radius:30px;
  overflow:hidden;
  background:
    radial-gradient(circle at center,rgba(114,228,255,.16),transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

#visualizer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.orb{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.ring{
  position:absolute;
  width:190px;height:190px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 60px rgba(114,228,255,.18), inset 0 0 60px rgba(155,124,255,.12);
  animation:spin 14s linear infinite;
}
.r2{width:250px;height:250px;animation-duration:18s;animation-direction:reverse;border-color:rgba(114,228,255,.22)}
.r3{width:310px;height:310px;animation-duration:24s;border-color:rgba(255,95,215,.16)}
.ring:after{
  content:"";
  position:absolute;
  width:12px;height:12px;border-radius:50%;
  background:var(--a);
  top:22px;left:28px;
  box-shadow:0 0 22px var(--a);
}
@keyframes spin{to{transform:rotate(360deg)}}

.core{
  width:136px;height:136px;border-radius:44px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(114,228,255,.95),rgba(155,124,255,.95));
  color:#050711;
  font-weight:1000;
  letter-spacing:.08em;
  box-shadow:0 24px 70px rgba(114,228,255,.35),0 0 0 12px rgba(255,255,255,.05);
  transform:scale(var(--beat-scale,1));
  transition:transform .08s linear, box-shadow .08s linear;
}
.playing .core{
  box-shadow:0 24px 90px rgba(114,228,255,.50),0 0 0 18px rgba(255,255,255,.06);
}

.track-info{text-align:center;padding:24px 4px 18px}
.eyebrow{
  margin:0 0 8px;
  color:var(--a);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:900;
  font-size:12px;
}
.track-info h1{
  margin:0;
  font-size:clamp(32px,8vw,58px);
  line-height:.94;
  letter-spacing:-.07em;
}
.track-info p:last-child{
  color:var(--muted);
  margin:14px auto 0;
  max-width:460px;
}

.controls{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px;
  border-radius:26px;
  background:rgba(255,255,255,.07);
  border:1px solid var(--line);
}

.play-btn{
  width:72px;height:72px;border:0;border-radius:26px;
  background:linear-gradient(135deg,var(--a),var(--b));
  color:#050711;
  font-size:30px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 16px 38px rgba(114,228,255,.25);
}
.play-btn:active{transform:scale(.97)}
.control-center{flex:1;min-width:0}
.time-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:13px;
  margin-bottom:9px;
}
.meter{
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
}
#meterFill{
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--d),var(--a),var(--b),var(--c));
  box-shadow:0 0 20px rgba(114,228,255,.45);
  transition:width .08s linear;
}
.mini-btn{
  width:48px;height:48px;border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.08);
  color:var(--text);
  font-size:22px;
  cursor:pointer;
}
.footer-actions{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:18px;
}
.footer-actions a{
  color:var(--muted);
  text-decoration:none;
  font-size:13px;
}
.footer-actions a:hover{color:var(--text)}

@media(max-width:560px){
  .hero-card{padding:18px;border-radius:28px}
  .visual-wrap{height:330px}
  .controls{gap:12px;padding:12px}
  .play-btn{width:64px;height:64px;border-radius:22px}
  .top-line{align-items:flex-start}
  .brand strong{font-size:16px}
}

.station-panel{
  position:relative;
  z-index:4;
  margin:0 0 18px;
  padding:14px;
  border-radius:24px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}

.station-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.station-head strong{display:block;font-size:15px}
.station-head span{display:block;color:var(--muted);font-size:12px;margin-top:2px}

#refreshStationsBtn{
  width:40px;
  height:40px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:var(--text);
  border-radius:16px;
  font-size:18px;
}

.station-list{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:2px 2px 8px;
}

.station-chip{
  flex:0 0 auto;
  max-width:240px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:11px 14px;
  background:rgba(255,255,255,.07);
  color:var(--text);
  cursor:pointer;
  text-align:left;
}

.station-chip strong{
  display:block;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.station-chip span{
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.station-chip.active{
  border-color:rgba(114,228,255,.65);
  background:linear-gradient(135deg,rgba(114,228,255,.26),rgba(155,124,255,.22));
}

body.playing .hero-card{
  box-shadow:
    0 35px 120px rgba(0,0,0,.55),
    0 0 calc(40px + 90px * var(--glow-level, .3)) rgba(114,228,255,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

body.playing .visual-wrap{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 calc(25px + 80px * var(--glow-level, .3)) rgba(114,228,255,.22);
}

body.playing .logo,
body.playing .play-btn,
body.playing .core{
  animation: premiumPulse .8s ease-in-out infinite alternate;
}

@keyframes premiumPulse{
  from{
    filter:saturate(1.05) brightness(1);
  }
  to{
    filter:saturate(1.45) brightness(1.12);
  }
}

.core{
  transform:scale(var(--beat-scale,1));
  transition:transform .045s linear, filter .08s linear;
}

.station-chip.active{
  box-shadow:
    0 0 0 1px rgba(114,228,255,.26),
    0 14px 42px rgba(114,228,255,.20),
    inset 0 1px 0 rgba(255,255,255,.14);
}

.meter{
  position:relative;
}

.meter:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-100%);
  animation:meterShine 1.35s linear infinite;
}

@keyframes meterShine{
  to{transform:translateX(100%)}
}

/* Fullscreen visual mode */
.visual-wrap{
  cursor:pointer;
}

.visual-wrap::after{
  content:"Tap for fullscreen visuals";
  position:absolute;
  left:18px;
  bottom:16px;
  z-index:8;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.28);
  color:rgba(255,255,255,.78);
  font-size:12px;
  letter-spacing:.02em;
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  opacity:.75;
  pointer-events:none;
}

body.visual-fullscreen{
  overflow:hidden;
}

body.visual-fullscreen .visual-wrap{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  z-index:99999 !important;
  border-radius:0 !important;
  border:0 !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(114,228,255,.16), transparent 34%),
    radial-gradient(circle at 15% 15%, rgba(155,124,255,.20), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(255,95,215,.18), transparent 38%),
    #030511 !important;
  box-shadow:none !important;
}

body.visual-fullscreen .visual-wrap .orb{
  display:none !important;
}

body.visual-fullscreen .visual-wrap::after{
  content:"Tap again or press back to exit";
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  font-size:13px;
  opacity:.85;
  background:rgba(0,0,0,.38);
}

body.visual-fullscreen .hero-card,
body.visual-fullscreen .player-shell{
  overflow:visible !important;
}

body.visual-fullscreen canvas#visualizer{
  width:100vw !important;
  height:100dvh !important;
}