:root{--neon1:#00e5ff;--neon2:#ff2dff;--text:#eaf2ff;--muted:#9fb2d3;--good:#33ff88;}
  *{box-sizing:border-box}
  body{
    margin:0;min-height:100vh;display:grid;place-items:center;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    color:var(--text);
    background:
      radial-gradient(1200px 800px at 15% 10%, #131b3a 0%, transparent 55%),
      radial-gradient(900px 700px at 85% 25%, #2a0f3d 0%, transparent 50%),
      radial-gradient(1200px 900px at 50% 100%, #041a2a 0%, transparent 55%),
      linear-gradient(180deg, #04050a 0%, #05060a 100%);
    overflow-x:hidden;
  }
  .wrap{width:min(550px,92vw);padding:10px}
  .player{
    display:grid;grid-template-columns:1fr;gap:12px;
    border:1px solid #20315f;
    background:linear-gradient(145deg, rgba(10,16,34,.85), rgba(8,10,18,.75));
    border-radius:20px;padding:12px;box-shadow:0 18px 50px rgba(0,0,0,.55);
    position:relative;overflow:hidden;
  }
  .player::before{
    content:"";position:absolute;inset:-2px;
    background:conic-gradient(from 230deg, transparent 0 25%, rgba(0,229,255,.35), rgba(255,45,255,.25), transparent 75% 100%);
    filter:blur(16px);opacity:.9;z-index:0;
  }
  .player>*{position:relative;z-index:1}

  /* verhindert, dass sehr lange Texte Grid/Flex-Layouts auseinanderziehen */
  .player, .left, .right, .song, .controls, .pill, .marquee{min-width:0}
  .right, .left{overflow:hidden}
  .left,.right{
    border:1px solid #1c2c55;border-radius:18px;
    background:rgba(7,10,18,.55);
  }
  .left{padding:10px}
  .right{padding:12px 12px 10px;display:flex;flex-direction:column;gap:14px;background:rgba(7,10,18,.45)}
  .avatarWrap{display:grid;place-items:center;padding:6px 6px 2px}
  .avatar{
    width:80px;height:80px;border-radius:50%;object-fit:cover;
    border:2px solid rgba(0,229,255,.55);
    box-shadow:0 0 0 6px rgba(0,229,255,.08),0 0 24px rgba(0,229,255,.18),0 0 40px rgba(255,45,255,.12);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .avatar.playing{
    transform:scale(1.02);
    box-shadow:0 0 0 6px rgba(255,45,255,.10),0 0 28px rgba(255,45,255,.22),0 0 48px rgba(0,229,255,.16);
  }
  .tagline{text-align:center;font-size:16px;color:red;margin-top:8px;letter-spacing:.12em;text-transform:uppercase}
  .eq{display:flex;justify-content:center;align-items:flex-end;gap:5px;height:22px;margin:6px 0 4px;opacity:.9}
  .bar{width:6px;height:8px;border-radius:6px;background:linear-gradient(180deg,var(--neon2),var(--neon1));box-shadow:0 0 12px rgba(0,229,255,.20);transform-origin:bottom;animation:none}
  .eq.playing .bar{animation:bounce 850ms ease-in-out infinite}
  .eq.playing .bar:nth-child(2){animation-delay:-120ms}
  .eq.playing .bar:nth-child(3){animation-delay:-260ms}
  .eq.playing .bar:nth-child(4){animation-delay:-390ms}
  .eq.playing .bar:nth-child(5){animation-delay:-520ms}
  @keyframes bounce{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1.9)}}

  .stats{display:grid;gap:8px;margin-top:6px}
  .pill{display:grid;grid-template-columns:1fr minmax(90px,210px);align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:rgba(8,12,22,.65);border:1px solid #1b2a52;font-size:13px}
  .pill b{font-weight:800}
  .pill span{color:var(--muted)}

/* Pills: rechte Werte nicht umbrechen (… statt Layout sprengen) */
.pill > span{
  justify-self:end;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  font-size:16px;
  font-weight: bold;
  color: red;
}
.pill .liveDot{min-width:0}

  .liveDot{display:inline-flex;align-items:center;gap:8px}
  .dot{width:8px;height:8px;border-radius:50%;background:#666}
  .dot.on{background:var(--good);box-shadow:0 0 14px rgba(51,255,136,.35)}

  .brand h1{margin:0;font-size:22px;letter-spacing:.02em}
  .brand p{margin:6px 0 0;color:var(--muted);font-size:13px}
  .song{padding:10px;border-radius:16px;border:1px solid #1b2a52;background:rgba(5,8,14,.6)}
  .song .label{font-size:12px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
  .song .now{margin-top:6px;font-size:14px;font-weight:900;text-shadow:0 0 16px rgba(0,229,255,.12);line-height:1.4;min-height:1.6em;padding:2px 0 4px;overflow:hidden}

  .controls{
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
    padding:8px 10px;border:1px solid #1b2a52;border-radius:16px;background:rgba(5,8,14,.55);
  }
  .btn{
    border:none;cursor:pointer;border-radius:999px;padding:12px 14px;font-weight:900;color:var(--text);
    background:linear-gradient(135deg, rgba(0,229,255,.18), rgba(255,45,255,.14));
    box-shadow:inset 0 0 0 1px rgba(0,229,255,.25),0 10px 24px rgba(0,0,0,.35);
    transition:transform .08s ease, filter .2s ease;display:flex;align-items:center;gap:10px;user-select:none;white-space:nowrap;
  }
  .btn:hover{filter:brightness(1.08)}
  .btn:active{transform:translateY(1px)}
  .btn .icon{
    width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:rgba(0,0,0,.25);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);font-size:16px;
  }
  .vol{display:flex;align-items:center;gap:10px;padding:6px 0}
  input[type="range"]{width:100%;accent-color:var(--neon1)}
  .mini{border:none;cursor:pointer;border-radius:12px;padding:10px 12px;color:var(--text);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);transition:.2s}
  .mini:hover{background:rgba(255,255,255,.09)}
  .actions{display:flex;flex-wrap:wrap;gap:10px}
  .action{
    flex:1 1 160px;text-decoration:none;text-align:center;padding:10px;border-radius:14px;
    border:1px solid rgba(0,229,255,.18);
    background:linear-gradient(135deg, rgba(0,229,255,.10), rgba(255,45,255,.06));
    color:var(--text);font-weight:900;
  }
  .action:hover{filter:brightness(1.08)}
  .foot{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px;opacity:.95}
  @media (max-width: 860px){.player{grid-template-columns:1fr}}

/* Lauftext (Songtitel) – Animation wird per JS (px-genau) gesteuert */
.marquee{
  overflow:hidden;
  white-space:nowrap;
  position:relative;
  width:100%;
}

.marquee__inner{
  display:inline-block;
  white-space:nowrap;
  width:max-content;          /* wichtig: echte Textbreite */
  will-change: transform;
}

/* Wenn Text kurz ist: bleibt stehen */
.marquee__inner.pause{
  transform: translateX(0) !important;
}



/* ✅ Marquee für Titel (immer laufen – auch kurze Titel) */
.marquee.active .pc-now{
  display:inline-block;
  padding-left:100%;
  will-change:transform;
  animation-name: pcMarqueeMove;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration:12s;
}

@keyframes pcMarqueeMove{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
}

/* === Lauftext (Ticker) ===
   JS steuert px-genau: erst komplett links raus, dann wieder rechts rein.
*/
.ticker{
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 12px;
}
.ticker__inner{
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}
.ticker__text{
  display: inline-block;
  font-size: inherit;
  font-weight: inherit;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ticker__inner{ transform: translateX(0) !important; }
}



.srOnly{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}