/* Calming-music toggle: one small music-note icon in the header, top right.
   Slash through the note = off; note with a soft pulse = playing. */
.bgm{
  width:34px;height:34px;border-radius:50%;padding:0;display:grid;place-items:center;cursor:pointer;flex:none;
  color:var(--ink,#241d15);background:rgba(251,247,238,.55);border:1px solid rgba(217,205,180,.8);
  transition:background .25s ease,transform .25s ease
}
.bgm:hover{background:rgba(251,247,238,.95);transform:translateY(-1px)}
.bgm:focus-visible{outline:2px solid #8a5a2b;outline-offset:2px}
.bgm svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bgm .bgm-slash{opacity:1}
.bgm.on .bgm-slash{opacity:0}
.bgm.on{background:var(--ink,#241d15);color:var(--cream,#f6efe1);border-color:var(--ink,#241d15)}
.bgm-float{position:fixed;right:14px;top:14px;z-index:60}

/* one-time hint, hangs under the header at the right */
.bgm-hint{
  position:fixed;right:14px;top:62px;z-index:60;max-width:min(70vw,250px);
  padding:9px 14px;border-radius:12px;font-size:.92rem;line-height:1.3;color:#3d2208;
  background:rgba(251,247,238,.96);border:1px solid rgba(185,138,75,.45);
  box-shadow:0 10px 30px -10px rgba(40,25,5,.45);
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .5s ease,transform .5s ease
}
.bgm-hint::before{content:"";position:absolute;right:92px;top:-6px;width:10px;height:10px;transform:rotate(45deg);
  background:rgba(251,247,238,.96);border-left:1px solid rgba(185,138,75,.45);border-top:1px solid rgba(185,138,75,.45)}
.bgm-hint.show{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.bgm,.bgm-hint{transition:none}}
@media (max-width:520px){ .bgm{width:32px;height:32px} .bgm-hint::before{right:84px} }