.bmp-player {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
}
.bmp-bottom-right { right: 20px; bottom: 20px; }
.bmp-bottom-left { left: 20px; bottom: 20px; }
.bmp-top-right { right: 20px; top: 20px; }
.bmp-top-left { left: 20px; top: 20px; }
.bmp-toggle {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    padding: 10px 14px;
    background: rgba(20,20,20,.88);
    color: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,.18);
    cursor: pointer;
    font: inherit;
    line-height: 1;
    backdrop-filter: blur(8px);
}
.bmp-toggle:hover { transform: translateY(-1px); }
.bmp-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.bmp-icon { width: 1em; text-align: center; }
.bmp-toggle.is-playing .bmp-icon { font-size: .78em; }
@media (max-width: 600px) {
    .bmp-bottom-right { right: 12px; bottom: 12px; }
    .bmp-bottom-left { left: 12px; bottom: 12px; }
    .bmp-top-right { right: 12px; top: 12px; }
    .bmp-top-left { left: 12px; top: 12px; }
    .bmp-toggle { padding: 9px 12px; }
}