/* Base / tokens */
:root{
  --glass-bg: rgba(255,255,255,.10);
  --glass-border: rgba(255,255,255,.22);
  --glass-text: rgba(255,255,255,.98);
  --muted: rgba(255,255,255,.7);
  --shadow: 0 10px 38px rgba(0,0,0,.36);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#000; color:var(--glass-text);
  font:15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
}

/* Stage */
.bg-stage{ position:fixed; inset:0; overflow:hidden; }
.bg-blur{
  position:absolute; inset:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  filter: blur(40px) saturate(120%) brightness(85%);
  transform: scale(1.1);
  opacity:0; transition: opacity .7s ease;
}
.bg-blur.visible{ opacity:1; }
.fg-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: contain; object-position:center;
  user-select:none; -webkit-user-drag:none; pointer-events:none;
  opacity:0; transition: opacity .7s ease;
}
.fg-img.visible{ opacity:1; }
.bg-vignette{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 120% at 50% 60%, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.65) 100%);
}

/* Glass UI */
.glass{
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  box-shadow: var(--shadow);
  color: var(--glass-text);
}

/* Player */
.bottombar{
  position:fixed; left:0; right:0; bottom:20px;
  display:flex; justify-content:center; padding:0 12px;
}
.player{
  display:flex; align-items:center; gap:10px;
  border-radius:999px; padding:8px 10px; max-width: 100%;
  flex-wrap: wrap; justify-content:center;
}
.icon-btn{
  appearance:none; border:1px solid var(--glass-border);
  background: var(--glass-bg); color:#fff; border-radius:999px;
  padding:8px 10px; cursor:pointer;
}
.icon-btn:hover{ background: rgba(255,255,255,.16); }
.select{
  background:transparent; color:#fff; border:1px solid var(--glass-border);
  border-radius:999px; padding:8px 10px; outline:none;
  max-width: min(56vw, 560px);
}
/* Custom range slider (glass) */
#volume{
  -webkit-appearance: none; appearance: none; width: 140px; height: 10px;
  background: linear-gradient(to right, rgba(255,255,255,.22), rgba(255,255,255,.10));
  border:1px solid var(--glass-border); border-radius:999px; padding:0; margin:0 6px;
}
#volume::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none; width:18px; height:18px; border-radius:50%;
  background: rgba(255,255,255,.95); border:1px solid rgba(0,0,0,.2); box-shadow: 0 3px 18px rgba(0,0,0,.35);
}
#volume::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background: rgba(255,255,255,.95); border:1px solid rgba(0,0,0,.2); box-shadow: 0 3px 18px rgba(0,0,0,.35);
}
#volume::-moz-range-track{
  height:10px; background: linear-gradient(to right, rgba(255,255,255,.22), rgba(255,255,255,.10));
  border:1px solid var(--glass-border); border-radius:999px;
}
/* Hide blue accent */
#volume{ accent-color: transparent; }

/* Source FAB */
.fab{
  position: fixed; right:16px; bottom:20px;
  width:42px; height:42px; display:grid; place-items:center;
  border-radius: 50%; text-decoration:none; font-weight:700;
}
.fab:hover{ background: rgba(255,255,255,.16); }

/* Responsive tweaks */
@media (max-width: 680px){
  .player{ gap:8px; padding:8px; }
  .select{ max-width: 70vw; }
  #volume{ width: 100px; }
}
@media (prefers-reduced-motion: reduce){
  .fg-img, .bg-blur{ transition:none; }
}