/* ============================================================
   sound.css — floating sound control
   ============================================================ */
#sound-ctl{
  position:fixed;right:20px;bottom:20px;z-index:60;
  display:flex;align-items:center;gap:0;overflow:hidden;
  height:44px;padding:0 6px;border-radius:30px;
  background:rgba(10,16,30,.7);border:1px solid var(--stroke);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:gap .35s var(--ease), padding .35s var(--ease), border-color .3s, background .3s;
}
#sound-ctl:hover{gap:10px;padding:0 14px 0 6px;border-color:var(--stroke-2);background:rgba(10,16,30,.86);}
.sc-toggle{
  width:32px;height:32px;flex:none;border:none;cursor:pointer;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--ink);transition:color .25s, background .25s;
}
.sc-toggle:hover{background:rgba(255,255,255,.06);color:#fff;}
#sound-ctl.muted .sc-toggle{color:var(--ink-dim);}

/* volume slider — collapsed until hover */
.sc-vol{
  -webkit-appearance:none;appearance:none;height:4px;border-radius:4px;cursor:pointer;
  width:0;opacity:0;transition:width .35s var(--ease), opacity .35s var(--ease);
  background:linear-gradient(90deg, var(--c2), var(--c3));
}
#sound-ctl:hover .sc-vol{width:88px;opacity:1;}
.sc-vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;
  background:#eaf0ff;box-shadow:0 0 8px rgba(34,131,198,.9);cursor:pointer;}
.sc-vol::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;
  background:#eaf0ff;box-shadow:0 0 8px rgba(34,131,198,.9);cursor:pointer;}

/* hidden while the entry overlays are up */
body.preloading #sound-ctl, body.gating #sound-ctl{opacity:0;pointer-events:none;}

@media (max-width:560px){
  #sound-ctl{right:14px;bottom:14px;}
  #sound-ctl:hover .sc-vol{width:70px;}
}