:root{--bgm-bg:#f7f3ea;--bgm-fg:#24344b}

.bgm-widget{position:fixed;left:18px;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:1000;max-width:calc(100vw - 36px);font-family:Arial,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif}
.music-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;min-width:44px;padding:10px 14px;border:1px solid currentColor;border-radius:24px;background:var(--bgm-bg);color:var(--bgm-fg);font:13px/1.5 Arial,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;white-space:nowrap;cursor:pointer;box-shadow:0 3px 14px #0002}
.music-toggle[hidden],.music-status[hidden]{display:none}
.music-toggle svg{width:15px;height:15px;flex-shrink:0}
.music-toggle .music-pause{display:none}
.music-toggle[aria-pressed="true"] .music-play{display:none}
.music-toggle[aria-pressed="true"] .music-pause{display:block}
.music-toggle:focus-visible{outline:3px solid var(--bgm-fg);outline-offset:3px}
.music-label-ja{display:none}html:lang(ja) .music-label-en{display:none}html:lang(ja) .music-label-ja{display:inline}
.music-status{display:block;max-width:min(290px,85vw);padding:10px 12px;background:var(--bgm-bg);color:var(--bgm-fg);border:1px solid currentColor;border-radius:8px;font:12px/1.5 Arial,sans-serif;margin-top:7px}
@media(max-width:600px){.bgm-widget{left:12px;bottom:calc(64px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 24px)}}

/* Music button glow — 11 October 2026 */
.music-toggle{--music-ring:#b69a5a;--music-halo:rgba(187,156,84,.36);border-color:var(--music-ring);box-shadow:0 0 0 1px var(--music-halo),0 0 18px 3px var(--music-halo),inset 0 0 8px var(--music-halo);transition:box-shadow .18s ease,border-color .18s ease}
.music-toggle:hover,.music-toggle:focus-visible{border-color:var(--music-ring);box-shadow:0 0 0 2px var(--music-halo),0 0 24px 5px var(--music-halo),inset 0 0 10px var(--music-halo)}
@media(prefers-reduced-motion:reduce){.music-toggle{transition:none}}