/* ------------------------------------------------------------------
   Mango Radio - dunkel, warm, reagiert auf den Bass. Keine CDN, keine Fonts.
   --bass (0..1) und --farbe (rgb des aktuellen videobilds) setzt radio.js.
   ------------------------------------------------------------------ */

:root{
  --bg:#07060a;
  --text:#f5f2f8;
  --muted:#958ea3;
  --mango:#ffb44a;
  --rot:#ff2d55;
  --verlauf:linear-gradient(135deg,#ffb44a 0%,#ff7a45 50%,#ff2d55 100%);
  --farbe:255,122,69;
  --bass:0;
  color-scheme:dark;
}
*{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{
  background:var(--bg); color:var(--text); overflow:hidden;
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- hintergrund ---------- */
.hinter{
  position:fixed; inset:-10%; width:120%; height:120%; z-index:-3;
  filter:blur(60px) saturate(1.5) brightness(.55); object-fit:cover;
  transform:scale(calc(1.05 + var(--bass) * .06)); transition:transform .12s;
}
.schein{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60vmax 50vmax at 50% 55%, rgba(var(--farbe), calc(.18 + var(--bass) * .22)), transparent 70%),
    radial-gradient(120vmax 80vmax at 50% 50%, transparent 40%, rgba(0,0,0,.75));
  transition:background .4s;
}
.koernung{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- live-punkt ---------- */
.live{
  display:inline-flex; align-items:center; gap:7px;
  font:800 11px/1 system-ui,sans-serif; letter-spacing:.16em; color:#fff;
  background:rgba(255,45,85,.16); border:1px solid rgba(255,45,85,.55);
  padding:6px 10px 6px 8px; border-radius:999px; backdrop-filter:blur(8px);
}
.punkt{
  width:9px; height:9px; border-radius:50%; background:var(--rot); flex:none;
  box-shadow:0 0 0 0 rgba(255,45,85,.8), 0 0 10px var(--rot);
  animation:puls 1.6s infinite;
}
@keyframes puls{
  0%{ box-shadow:0 0 0 0 rgba(255,45,85,.75), 0 0 10px var(--rot); }
  70%{ box-shadow:0 0 0 12px rgba(255,45,85,0), 0 0 10px var(--rot); }
  100%{ box-shadow:0 0 0 0 rgba(255,45,85,0), 0 0 10px var(--rot); }
}
.live.gross{ font-size:12px; padding:8px 14px 8px 11px; }

/* ---------- kopf ---------- */
.kopf{
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:max(16px, env(safe-area-inset-top)) 20px 16px;
}
.sender{ display:flex; align-items:center; gap:12px; }
.name{ font-weight:800; font-size:19px; letter-spacing:-.3px; text-shadow:0 2px 12px rgba(0,0,0,.5); }
.name b, h1 b{ background:var(--verlauf); -webkit-background-clip:text; background-clip:text; color:transparent; margin-left:1px; }
.regler{ display:flex; align-items:center; gap:8px; }
.rund{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.35); color:#fff; cursor:pointer; backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; transition:background .15s, transform .1s;
}
.rund:hover{ background:rgba(255,255,255,.14); }
.rund:active{ transform:scale(.94); }
#lautstaerke{ width:96px; accent-color:var(--mango); cursor:pointer; }

/* ---------- buehne ---------- */
.buehne{
  height:100%; display:flex; align-items:center; justify-content:center; gap:44px;
  padding:76px 24px 28px;
}
.rahmen{
  position:relative; height:100%; max-height:920px; aspect-ratio:9/16; max-width:100%;
  border-radius:28px;
  transform:scale(calc(1 + var(--bass) * .012)); transition:transform .1s;
}
/* farbiger ring, der mit dem bass aufleuchtet */
.ring{
  position:absolute; inset:-3px; border-radius:31px; z-index:0;
  background:conic-gradient(from var(--drehung, 0deg), #ffb44a, #ff2d55, #a855f7, #25f4ee, #ffb44a);
  opacity:calc(.35 + var(--bass) * .65);
  filter:blur(calc(6px + var(--bass) * 18px));
  animation:drehen 8s linear infinite;
}
@property --drehung{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes drehen{ to{ --drehung:360deg; } }
.bild{
  position:absolute; inset:0; border-radius:28px; overflow:hidden; background:#000; z-index:1;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 40px 100px -20px rgba(0,0,0,.9);
}
.bild video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s ease;
}
.bild video.an{ opacity:1; }

/* lade-punkte, wenn das netz hinterherhinkt */
.laedt{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; gap:8px; z-index:3; }
.laedt span{ width:10px; height:10px; border-radius:50%; background:#fff; animation:huepf 1s infinite ease-in-out; }
.laedt span:nth-child(2){ animation-delay:.15s; } .laedt span:nth-child(3){ animation-delay:.3s; }
@keyframes huepf{ 0%,80%,100%{ transform:scale(.5); opacity:.4; } 40%{ transform:scale(1); opacity:1; } }

/* info unten im video */
.unten{
  position:absolute; left:0; right:0; bottom:0; z-index:2; border-radius:0 0 28px 28px;
  padding:60px 20px 18px;
  background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.4) 60%, transparent);
}
.jetzt{ display:flex; flex-direction:column; line-height:1.25; margin-bottom:12px; }
.etikett{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--mango); margin-bottom:4px; }
#titel{ font-size:20px; font-weight:800; letter-spacing:-.3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#kuenstler{ color:rgba(255,255,255,.75); font-size:14px; }
.zeit{ display:flex; align-items:center; gap:10px; font-size:12px; color:rgba(255,255,255,.7); font-variant-numeric:tabular-nums; }
.leiste{ flex:1; height:4px; border-radius:99px; background:rgba(255,255,255,.18); overflow:hidden; }
.leiste div{ height:100%; width:0; background:var(--verlauf); border-radius:99px; box-shadow:0 0 12px rgba(255,122,69,.8); }

.eq{ display:flex; align-items:flex-end; gap:3px; height:26px; margin-top:12px; }
.eq i{
  flex:1; height:100%; border-radius:2px; background:var(--verlauf);
  transform-origin:bottom; transform:scaleY(.06); opacity:.85;
}

/* ---------- seitenleiste ---------- */
.seite{ width:300px; max-height:100%; display:flex; flex-direction:column; gap:14px; }
.seite h2{ font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.warteschlange{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.warteschlange li{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); backdrop-filter:blur(12px);
  animation:rein .4s ease both;
}
.warteschlange li:nth-child(2){ animation-delay:.06s; } .warteschlange li:nth-child(3){ animation-delay:.12s; } .warteschlange li:nth-child(4){ animation-delay:.18s; }
@keyframes rein{ from{ opacity:0; transform:translateX(12px); } }
.nr{
  width:30px; height:30px; flex:none; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; background:rgba(255,255,255,.07); color:var(--muted);
}
.warteschlange li:first-child .nr{ background:var(--verlauf); color:#fff; }
.ws-text{ flex:1; min-width:0; line-height:1.3; }
.ws-text strong{ display:block; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-text span{ font-size:12.5px; color:var(--muted); }
.ws-zeit{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.hinweis{ font-size:12.5px; color:var(--muted); line-height:1.55; margin-top:6px; }

/* ---------- startbildschirm ---------- */
.start{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(70vmax 60vmax at 50% 45%, rgba(255,122,69,.18), transparent 60%), rgba(7,6,10,.82);
  backdrop-filter:blur(18px); transition:opacity .6s ease, visibility .6s;
}
.start.weg{ opacity:0; visibility:hidden; }
.start-inhalt{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px; }
.start h1{ font-size:clamp(44px, 9vw, 76px); font-weight:900; letter-spacing:-2px; margin:18px 0 64px; line-height:1; }
.start-knopf{
  position:relative; width:128px; height:128px; border-radius:50%; border:0; cursor:pointer;
  background:var(--verlauf); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 20px 60px -10px rgba(255,45,85,.7); transition:transform .15s;
}
.start-knopf:hover{ transform:scale(1.05); }
.start-knopf:active{ transform:scale(.96); }
.start-knopf svg{ width:48px; height:48px; fill:#fff; stroke:none; margin-left:6px; position:relative; z-index:1; }
.welle{
  position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,122,69,.7);
  animation:welle 2.4s infinite ease-out;
}
.welle.w2{ animation-delay:.8s; } .welle.w3{ animation-delay:1.6s; }
@keyframes welle{ from{ transform:scale(1); opacity:.9; } to{ transform:scale(1.75); opacity:0; } }
.start-text{ margin-top:64px; font-weight:700; font-size:17px; }
.start-song{ margin-top:6px; color:var(--muted); font-size:14px; min-height:21px; }
.start-eq{ display:flex; align-items:flex-end; gap:4px; height:28px; margin-top:26px; }
.start-eq i{ width:5px; border-radius:3px; background:var(--verlauf); animation:eq 1s infinite ease-in-out alternate; }
.start-eq i:nth-child(1){ animation-delay:-.2s; } .start-eq i:nth-child(2){ animation-delay:-.5s; }
.start-eq i:nth-child(3){ animation-delay:-.1s; } .start-eq i:nth-child(4){ animation-delay:-.7s; }
.start-eq i:nth-child(5){ animation-delay:-.3s; } .start-eq i:nth-child(6){ animation-delay:-.9s; }
.start-eq i:nth-child(7){ animation-delay:-.4s; }
@keyframes eq{ from{ height:15%; } to{ height:100%; } }

.leer{ position:fixed; inset:0; z-index:40; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; padding:24px; background:rgba(7,6,10,.85); }
.leer p{ color:var(--muted); }

/* ---------- handy: video fuellt den ganzen schirm ---------- */
@media (max-width: 860px){
  .seite{ display:none; }
  .buehne{ padding:0; }
  .rahmen{ height:100%; width:100%; max-height:none; aspect-ratio:auto; border-radius:0; transform:none; }
  .ring{ display:none; }
  .bild, .unten{ border-radius:0; }
  .unten{ padding-bottom:max(18px, env(safe-area-inset-bottom)); }
  .kopf{ background:linear-gradient(to bottom, rgba(0,0,0,.55), transparent); }
  #lautstaerke{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .ring, .punkt, .welle, .start-eq i{ animation:none; }
  .hinter, .rahmen{ transition:none; transform:none; }
}