/* ============================= */
/* AETERNA 背景音樂控制按鈕 */
/* ============================= */

.bgm-toggle {
    position: fixed;

    right: 22px;
    bottom: 22px;

    z-index: 3000;

    padding: 9px 12px;

    border:
        1px solid rgba(
            255,
            255,
            255,
            0.25
        );

    border-radius: 999px;

    color: #ffffff;

    background:
        rgba(
            4,
            14,
            22,
            0.38
        );

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    font-size: 9px;

    letter-spacing: 0.15em;

    cursor: pointer;

    opacity: 0.75;

    transition:
        opacity 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}



/* ============================= */
/* 音樂按鈕 Hover */
/* ============================= */

.bgm-toggle:hover {
    opacity: 1;

    background:
        rgba(
            8,
            30,
            45,
            0.62
        );

    border-color:
        rgba(
            255,
            255,
            255,
            0.4
        );
}



/* ============================= */
/* 靜音狀態 */
/* ============================= */

.bgm-toggle.is-muted {
    opacity: 0.45;
}



/* ============================= */
/* 手機版位置 */
/* 避開 Safari 底部工具列 */
/* ============================= */

@media screen and (max-width: 768px) {

    .bgm-toggle {
        right: 16px;

        bottom:
            calc(
                58px +
                env(
                    safe-area-inset-bottom
                )
            );

        padding:
            8px 10px;

        font-size: 8px;
    }

}