.bgm-control{position:fixed;right:max(20px,env(safe-area-inset-right));top:max(5px,env(safe-area-inset-top));z-index:75;display:flex;align-items:center;gap:7px;min-height:25px;margin:0;padding:2px 9px;border:1px solid #73856e;border-radius:0;background:#10221fe8;color:#c5d7b2;font:12px/1.5 "Microsoft YaHei",system-ui,sans-serif;letter-spacing:.04em;box-shadow:2px 2px 0 #060d0d;clip-path:polygon(2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px),0 2px,2px 2px);cursor:pointer}
.bgm-control:hover{color:#e7ffd2;background:#263c31;border-color:#a6bf85}
.encounter-controls #town-bgm{position:static;inset:auto;transform:none}
.bgm-control:focus-visible{outline:2px solid #ceeb95;outline-offset:3px}
.bgm-bars{display:flex;align-items:end;gap:2px;height:12px;width:14px;opacity:.55}
.bgm-bars i{display:block;width:2px;height:3px;background:currentColor;transform-origin:bottom}
.bgm-bars i:nth-child(2){height:9px}.bgm-bars i:nth-child(3){height:12px}.bgm-bars i:nth-child(4){height:6px}
.bgm-control[data-playing="true"] .bgm-bars{opacity:1;color:#b8e081}
.bgm-control[data-playing="true"] .bgm-bars i{animation:bgm-meter 1.2s steps(3,end) infinite alternate}
.bgm-control[data-playing="true"] .bgm-bars i:nth-child(2){animation-delay:-.5s}.bgm-control[data-playing="true"] .bgm-bars i:nth-child(3){animation-delay:-.8s}
@keyframes bgm-meter{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
dialog .bgm-control{top:12px;right:16px}
@media(max-width:620px){.bgm-control{right:12px;font-size:11px;min-height:27px}}
@media(prefers-reduced-motion:reduce){.bgm-control .bgm-bars i{animation:none!important}}