:root{
  --bg: rgba(10,10,12,0.95);
  --text: #f3f4f6;
  --muted: #b9bdc4;
  --accent: rgba(255,255,255,0.08);
  --player-accent: rgba(255,255,255,0.06); /* new: accent derived from art */
  --player-foreground: #ffffff; /* new: foreground color for controls */
  font-family: "CalSans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  backdrop-filter: blur(6px);
}

#app{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.center{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:32px;
  text-align:center;
  background: linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.00));
  transition: background-color .35s ease, box-shadow .35s ease;
}

/* blurred fullscreen background behind content */
.bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.bg img{
  position:absolute;
  inset:-10%;
  width:120%;
  height:120%;
  object-fit:cover;
  filter:blur(18px) saturate(.9);
  transform:scale(1.02);
  opacity:0;
  transition:opacity .6s ease, filter .6s ease;
}
.bg img.visible{ opacity:1; }

/* new: secondary background layer with stronger blur and semi-transparent feel */
.bg img#bgArt2{
  z-index:0;
  filter:blur(28px) saturate(.7);
  transform:scale(1.05);
  opacity:0;
  transition:opacity .6s ease, transform .6s ease;
  mix-blend-mode: normal;
  pointer-events:none;
}
/* ensure overlay still above bg images */
.bg-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45));
  z-index:1;
  pointer-events:none;
}

/* ensure main content sits above background */
#app, .center{ position:relative; z-index:2; }

.art-wrap{
  width:min(420px, 48vh);
  height:min(420px, 48vh);
  border-radius:12px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  box-shadow:0 10px 40px rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.04);
  z-index:3;
}

.art-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1);
  transition:transform .6s ease;
}

.art-wrap img.loading{
  filter:blur(8px) saturate(.8);
  transform:scale(1.03);
}

.meta{
  max-width:900px;
}

.title{
  font-weight:800;
  font-size:clamp(18px,3.6vw,28px);
}

.sub{
  margin-top:6px;
  color:var(--muted);
  font-weight:600;
}

/* history removed */

.controls{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.btn{
  background: var(--player-accent);
  color: var(--player-foreground);
  border: none;
  width:72px;
  height:72px;
  border-radius:50%;
  font-size:22px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:transform .15s ease, background .25s ease, color .25s ease;
}
.btn:active{ transform:scale(.98) }
.btn.play{ box-shadow: 0 6px 18px rgba(0,0,0,0.45); }

/* replace circular volume control with horizontal bar */
.volume{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px;
  background: var(--player-accent);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  min-width:200px;
  transition: background .25s ease, border-color .25s ease;
}

/* show and style the range as a sleek horizontal bar */
.volume .vol-bar{
  -webkit-appearance:none;
  appearance:none;
  width:140px;
  height:8px;
  background: rgba(255,255,255,0.08);
  border-radius:99px;
  outline:none;
  cursor:pointer;
}
/* change thumb to follow accent color */
.volume .vol-bar::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;
  height:18px;
  background: var(--player-foreground);
  border-radius:50%;
  box-shadow:0 4px 10px rgba(0,0,0,0.4);
  margin-top:-5px;
  transition: background .18s ease;
}
.volume .vol-bar::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--player-foreground);box-shadow:0 4px 10px rgba(0,0,0,0.4);
  transition: background .18s ease;
}

/* percentage label centered */
.volPercent{
  position:relative;
  z-index:2;
  font-weight:700;
  color:var(--text);
  font-size:14px;
  pointer-events:none;
  transition: color .18s ease;
}

/* socials row under controls */
.socials{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  margin-top:8px;
  z-index:3;
}
.social{ 
  width:40px;
  height:40px;
  display:inline-grid;
  place-items:center;
  border-radius:8px;
  color:var(--player-foreground);
  background: transparent;
  transition:background .18s ease, transform .12s ease, color .18s ease;
  text-decoration:none;
  border:1px solid rgba(255,255,255,0.04);
  position:relative;
}
/* small inline marker next to each social icon */
.social .social-icon{
  position:absolute;
  right:6px;
  bottom:4px;
  font-size:9px;
  color:var(--player-accent);
  opacity:0.95;
  pointer-events:none;
}

/* history button style aligns with social buttons but clickable */
.history-btn{ cursor:pointer; border:none; background:var(--player-accent); color:var(--player-foreground); }

/* menu panel */
.menu-panel{
  position:fixed;
  right:18px;
  top:18px;
  width:320px;
  max-width:90%;
  background:linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.6));
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.05);
  padding:14px;
  z-index:999;
  transform:translateY(-8px) scale(.98);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.menu-panel[aria-hidden="false"]{ opacity:1; transform:none; pointer-events:auto; }
.menu-close{
  position:absolute;
  right:8px;
  top:8px;
  background:transparent;
  border:none;
  color:var(--player-foreground);
  font-size:16px;
  cursor:pointer;
}
.menu-content{ display:flex; gap:12px; align-items:center; padding-top:6px; }
.menu-art{ width:84px; height:84px; border-radius:8px; overflow:hidden; flex:0 0 84px; background:rgba(255,255,255,0.02); display:grid; place-items:center; }
.menu-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.menu-meta{ text-align:left; flex:1; color:var(--text); }
.menu-meta h3{ margin:0 0 6px 0; font-size:15px; font-weight:700; }
.menu-sub{ color:var(--muted); font-weight:600; font-size:13px; margin-bottom:8px; }
.menu-stats{ font-size:13px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap; }

/* responsive */
@media (max-width:640px){
  .art-wrap{width:66vw;height:66vw;border-radius:10px}
  .btn{width:64px;height:64px}
  .history{display:none}
}

/* small helper class used when accent is updated to force repaint and give an extra subtle highlight */
.center.accent-updated{
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
  transition: box-shadow .35s ease, background .35s ease;
}

.btn.install{
  width:auto;
  padding:10px 14px;
  height:40px;
  border-radius:10px;
  font-weight:700;
  font-size:13px;
}

.canvas-container, #viz {
  width: min(720px, 86vw);
  max-width: 860px;
  height: 96px;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.04);
  margin-inline: auto;
  z-index:3;
}
/* ensure canvas scales responsively */
#viz { display:block; width:100%; height:96px; mix-blend-mode:screen; pointer-events:none; }
/* subtle bar glow */
.viz-bar {
  /* placeholder class for reference in JS styling comments */
}