:root{
  --bg:#000;
  --muted:#9aa6b2;
  --accent:#a78bfa;
  --card-bg: rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);font-family:Inter, "Segoe UI", Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial;color:#e6edf3;}
body{overflow:hidden}

/* WebGL canvas */
#glcanvas{position:fixed;inset:0;z-index:0;display:block;}

/* Fallback pill (CSS) - visible if WebGL fails */
#fallback-pill{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:360px;height:160px;border-radius:80px;background:linear-gradient(90deg,#080808 0%, #111111 40%, #06060a 60%, #040306 100%);box-shadow:0 20px 80px rgba(120,60,200,0.06), inset 0 2px 8px rgba(255,255,255,0.02);opacity:0.9;z-index:0;}

/* UI overlay */
#ui{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:24px}
/* Player card */
.card{padding:14px 18px;border-radius:12px;background:var(--card-bg);border:1px solid rgba(255,255,255,0.02);min-width:320px;display:flex;flex-direction:column;gap:8px;align-items:center;backdrop-filter: blur(6px)}
#track-list{display:flex;flex-direction:column;gap:6px;width:100%}
.track{padding:8px 10px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.02);cursor:pointer;text-align:left}
.track.active{outline:2px solid rgba(167,139,250,0.12);box-shadow:0 8px 18px rgba(167,139,250,0.04) inset}

#controls{display:flex;gap:10px;align-items:center}
#controls button{padding:8px 12px;border-radius:10px;border:0;background:transparent;color:inherit;cursor:pointer;font-size:18px}

/* iframe wrap (YT player is injected) */
#iframe-wrap{width:100%;max-width:640px;display:flex;justify-content:center}
#yt-player iframe{width:100%;height:200px;border-radius:10px;overflow:hidden;border:0;background:#000}

/* Links */
#links{display:flex;gap:12px;flex-direction:column}
#links a{color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.02);background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00))}
#links a:hover{color:var(--accent)}

/* Responsive */
@media (max-width:640px){
  .card{width:100%}
  #iframe-wrap{max-width:420px}
  #yt-player iframe{height:180px}
}