/* =========================================================
   V1.1 · 背景音乐 UI
   独立于主 style.css，避免继续增加主样式层叠负担
========================================================= */

.music-ui {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 1800;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;

    pointer-events: none;
}


/* =========================================================
   音乐开关
========================================================= */

.music-toggle-button {
    position: relative;

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    padding: 0;

    border:
        1px solid
        rgba(198, 160, 98, .58);

    border-radius: 50%;

    outline: none;

    cursor: pointer;

    color:
        #e2d0ac;

    background:
        radial-gradient(
            circle at 40% 34%,
            rgba(84, 63, 37, .34),
            rgba(6, 10, 12, .94) 56%
        );

    box-shadow:
        inset 0 0 0 2px rgba(226, 204, 158, .035),
        inset 0 0 16px rgba(184, 142, 76, .09),
        0 5px 22px rgba(0, 0, 0, .42);

    pointer-events: auto;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        border-color .18s ease,
        color .18s ease,
        opacity .18s ease,
        box-shadow .18s ease,
        transform .12s ease;
}


.music-toggle-button::before {
    content: "";

    position: absolute;
    inset: 4px;

    border:
        1px solid
        rgba(229, 213, 179, .09);

    border-radius: 50%;

    pointer-events: none;
}


.music-toggle-button:hover {
    color: #f0dfbb;

    border-color:
        rgba(218, 178, 107, .82);

    box-shadow:
        inset 0 0 16px rgba(184, 142, 76, .14),
        0 5px 24px rgba(0, 0, 0, .48),
        0 0 12px rgba(191, 145, 78, .13);
}


.music-toggle-button:active {
    transform:
        scale(.94);
}


.music-toggle-button:focus-visible {
    box-shadow:
        0 0 0 2px rgba(4, 8, 10, .95),
        0 0 0 4px rgba(210, 171, 105, .62);
}


.music-toggle-note {
    position: relative;

    display: inline-grid;
    place-items: center;

    width: 22px;
    height: 22px;

    font:
        23px/1
        Georgia,
        "Times New Roman",
        serif;

    transform:
        translateY(-1px);

    text-shadow:
        0 0 8px
        rgba(215, 181, 119, .18);
}


/* 用户主动关闭音乐 */

.music-toggle-button.is-muted {
    color:
        rgba(194, 187, 172, .55);

    border-color:
        rgba(176, 166, 146, .26);

    background:
        rgba(4, 8, 10, .84);

    box-shadow:
        inset 0 0 10px rgba(255, 255, 255, .018),
        0 4px 18px rgba(0, 0, 0, .34);
}


.music-toggle-button.is-muted
.music-toggle-note::after {
    content: "";

    position: absolute;

    width: 24px;
    height: 1px;

    background:
        rgba(204, 190, 164, .72);

    box-shadow:
        0 0 4px
        rgba(185, 160, 115, .18);

    transform:
        rotate(-48deg);
}


/* 系统 / 后台自动暂停 */

.music-toggle-button.is-auto-paused {
    opacity: .58;
}


.music-toggle-button.is-auto-paused::after {
    content: "Ⅱ";

    position: absolute;

    right: -2px;
    bottom: -2px;

    display: grid;
    place-items: center;

    width: 15px;
    height: 15px;

    border:
        1px solid
        rgba(194, 164, 112, .44);

    border-radius: 50%;

    color:
        #c9b38b;

    background:
        #06090a;

    font:
        7px/1
        Arial,
        sans-serif;

    letter-spacing:
        -1px;
}


/* =========================================================
   当前曲目浮标
========================================================= */

.music-track-toast {
    display: flex;
    align-items: center;
    gap: 9px;

    max-width: min(230px, calc(100vw - 78px));

    padding:
        8px
        13px
        8px
        11px;

    border:
        1px solid
        rgba(190, 153, 92, .34);

    border-radius: 2px;

    color:
        #ddd4c4;

    background:
        linear-gradient(
            100deg,
            rgba(5, 9, 11, .94),
            rgba(9, 13, 14, .88)
        );

    box-shadow:
        inset 0 0 22px rgba(167, 126, 68, .025),
        0 7px 26px rgba(0, 0, 0, .38);

    opacity: 0;

    transform:
        translateX(8px)
        scale(.985);

    transform-origin:
        right center;

    transition:
        opacity .24s ease,
        transform .24s ease;

    pointer-events: none;
}


.music-track-toast::before,
.music-track-toast::after {
    content: "";

    position: absolute;

    width: 10px;
    height: 10px;

    pointer-events: none;
}


.music-track-toast::before {
    left: 3px;
    top: 3px;

    border-left:
        1px solid
        rgba(218, 176, 104, .42);

    border-top:
        1px solid
        rgba(218, 176, 104, .42);
}


.music-track-toast::after {
    right: 3px;
    bottom: 3px;

    border-right:
        1px solid
        rgba(218, 176, 104, .42);

    border-bottom:
        1px solid
        rgba(218, 176, 104, .42);
}


.music-track-toast.is-visible {
    opacity: 1;

    transform:
        translateX(0)
        scale(1);
}


.music-track-toast-note {
    flex: 0 0 auto;

    color:
        #d7b873;

    font:
        18px/1
        Georgia,
        "Times New Roman",
        serif;

    text-shadow:
        0 0 8px
        rgba(216, 178, 106, .2);
}


.music-track-toast-copy {
    display: grid;

    min-width: 0;
}


.music-track-toast-copy small {
    margin-bottom: 1px;

    color:
        rgba(189, 185, 174, .58);

    font:
        8px/1.2
        "Microsoft YaHei",
        "PingFang SC",
        sans-serif;

    letter-spacing:
        .16em;
}


.music-track-toast-copy strong {
    overflow: hidden;

    color:
        #e7ddcc;

    font:
        13px/1.3
        "STKaiti",
        "KaiTi",
        "Noto Serif SC",
        serif;

    font-weight: 500;

    letter-spacing:
        .08em;

    white-space: nowrap;

    text-overflow:
        ellipsis;
}


/* =========================================================
   手机适配
========================================================= */

@media (max-width: 600px) {

    .music-ui {
        top:
            max(
                8px,
                env(safe-area-inset-top)
            );

        right:
            max(
                8px,
                env(safe-area-inset-right)
            );

        gap: 7px;
    }


    .music-toggle-button {
        width: 36px;
        height: 36px;

        flex-basis: 36px;
    }


    .music-toggle-note {
        width: 19px;
        height: 19px;

        font-size: 20px;
    }


    .music-track-toast {
        max-width:
            min(
                190px,
                calc(100vw - 60px)
            );

        padding:
            7px
            10px
            7px
            9px;
    }


    .music-track-toast-copy small {
        font-size: 7px;
    }


    .music-track-toast-copy strong {
        font-size: 12px;
    }

}


/* =========================================================
   减少动画偏好
========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    .music-toggle-button,
    .music-track-toast {
        transition: none;
    }

}