/* Puja 2026 music bar: Phosphor icons in place of emoji, one row at any phone width, a light-theme bar.
   Every control is a 44 px tall hit box; the round face drawn inside it (::before) stays small so the title keeps room.
   Loaded after the page's own <style> and css/light.css, so equal selectors here win. */

#musicbar{flex-wrap:nowrap;gap:4px;padding:6px}
#musicbar .mmeta{flex:1 1 0;min-width:0;padding-left:2px}
#musicbar .mctrls{gap:0}
#musicbar .myt .ytplayovl{font-size:.8rem}

/* the control: a transparent hit box with a drawn face */
#musicbar .mctrls button,#musicbar #volClose{position:relative;width:34px;height:44px;padding:0;border:0;border-radius:12px;background:none;
  color:var(--ink);font-size:1.05rem;display:grid;place-items:center;cursor:pointer;isolation:isolate}
#musicbar .mctrls button::before,#musicbar #volClose::before{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;translate:-50% -50%;
  border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.08);z-index:-1;transition:background .15s,scale .15s}
/* the hero photos also use .ph: reset it for every icon in the bar and the panel, as the page does for .snd */
#musicbar .ph,#mPanel .ph{position:static;inset:auto;display:inline-block;border-radius:0;opacity:1;transition:none;line-height:1;width:auto;height:auto}
#musicbar .mctrls button:hover::before,#musicbar #volClose:hover::before{background:rgba(255,255,255,.16)}
#musicbar .mctrls button:active::before{scale:.88}
#musicbar .mctrls button:focus-visible,#musicbar #volClose:focus-visible,#musicbar .snd:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
#musicbar #mPlay{width:38px;height:44px;background:none;color:#3a0512;font-size:1.05rem}
#musicbar #mPlay::before{width:36px;height:36px;border:0;background:linear-gradient(135deg,#ffe9b0,#ffb347)}
#musicbar #mVol,#musicbar #mListBtn{width:34px;height:44px;font-size:1.05rem}
#musicbar #mVol:active{transform:none}
#musicbar .snd{flex:0 0 44px}

/* volume row */
#musicbar .volpopup{gap:4px;min-width:0}
#musicbar.vol-open .mctrls{flex:1 1 0;min-width:0}   /* the slider row takes the freed space and keeps চণ্ডীপাঠ on screen */
#musicbar .voltag{display:grid;place-items:center;font-size:1rem;opacity:1;color:var(--ink)}
#musicbar #volClose{flex:0 0 auto;font-size:.95rem}

/* panel head */
#mPanel .mpanelhead h3{display:flex;align-items:center;gap:8px}
#mPanel .mpanelhead button{width:44px;height:44px;display:grid;place-items:center;font-size:1.1rem}

/* ---------- light theme: a cream bar and panel, so the maroon ink reads (the dark bar hid it) ---------- */
:where(html[data-theme="light"]) #musicbar{background:rgba(255,250,242,.96);border-color:var(--line);box-shadow:0 8px 24px rgba(120,50,20,.18)}
:where(html[data-theme="light"]) #musicbar .martist{color:var(--ink2);opacity:1}
:where(html[data-theme="light"]) #musicbar .mctrls button::before,
:where(html[data-theme="light"]) #musicbar #volClose::before{background:rgba(94,11,28,.06)}
:where(html[data-theme="light"]) #musicbar .mctrls button:hover::before,
:where(html[data-theme="light"]) #musicbar #volClose:hover::before{background:rgba(94,11,28,.12)}
:where(html[data-theme="light"]) #musicbar #mPlay::before{background:linear-gradient(135deg,#ffe9b0,#ffb347)}
:where(html[data-theme="light"]) #musicbar .snd{background:rgba(94,11,28,.06)}
:where(html[data-theme="light"]) #musicbar .volpopup input[type=range]{background:linear-gradient(to right,#f5a000 0%,#ffc94a var(--pct,100%),rgba(94,11,28,.14) var(--pct,100%));box-shadow:none}
:where(html[data-theme="light"]) #mPanel{background:rgba(255,250,242,.98);box-shadow:0 -12px 40px rgba(120,50,20,.22)}
:where(html[data-theme="light"]) #mPanel .mtab{background:var(--white,#fff)}
:where(html[data-theme="light"]) #mPanel .mrow:hover{background:rgba(94,11,28,.05)}
:where(html[data-theme="light"]) #mPanel .mrow.cur{background:rgba(245,160,0,.18)}
:where(html[data-theme="light"]) #mPanel .mrow .mn,
:where(html[data-theme="light"]) #mPanel .mrow .mrt small,
:where(html[data-theme="light"]) #mPanel .mrow .md{color:var(--ink2);opacity:1}