*{
    box-sizing:border-box;
}


body{

    margin:0;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;


    font-family:

    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Microsoft YaHei",
    sans-serif;


    color:white;


    background:

    linear-gradient(
        135deg,
        #7aa8c7,
        #d8c7a7,
        #555
    );


    overflow-x:hidden;

}




.card{

    width:90%;

    max-width:420px;


    padding:28px;


    border-radius:35px;


    text-align:center;


    background:

    rgba(
        255,
        255,
        255,
        .16
    );


    backdrop-filter:

    blur(30px);


    -webkit-backdrop-filter:

    blur(30px);


    border:

    1px solid

    rgba(
        255,
        255,
        255,
        .25
    );


    box-shadow:

    0 25px 70px

    rgba(
        0,
        0,
        0,
        .35
    );


}





/* 专辑封面 */


#cover{

    width:100%;


    border-radius:28px;


    box-shadow:

    0 20px 50px

    rgba(
        0,
        0,
        0,
        .45
    );


    transition:.5s;


    cursor:pointer;


    -webkit-touch-callout:none;

    -webkit-user-select:none;

    user-select:none;

    -webkit-user-drag:none;


}



#cover.playing{


    animation:

    breathe 3s infinite;


}



@keyframes breathe{


    50%{

        transform:

        scale(1.035);


        box-shadow:

        0 30px 80px

        rgba(
            255,
            255,
            255,
            .35
        );

    }

}





h1{


    margin-top:28px;


    margin-bottom:10px;


    font-size:28px;


}



h2{

    margin:0;

    font-size:20px;

    font-weight:500;

    opacity:.85;

}



p{

    opacity:.7;

}





/* 播放区域 */


.player{


    margin-top:35px;


    display:flex;


    flex-direction:column;


    align-items:center;


}




#playBtn{


    width:90px;


    height:90px;


    border-radius:50%;


    border:none;


    display:flex;


    justify-content:center;


    align-items:center;


    padding-left:6px;


    font-size:42px;


    font-weight:900;


    color:white;


    background:

    rgba(
        255,
        255,
        255,
        .28
    );


    backdrop-filter:

    blur(20px);


    box-shadow:

    0 15px 40px

    rgba(
        0,
        0,
        0,
        .25
    );


    transition:.3s;


}



#playBtn:hover{

    transform:scale(1.08);

}





#speedBtn{


    margin-top:18px;


    width:65px;


    height:38px;


    border-radius:20px;


    border:none;


    color:white;


    font-size:16px;


    font-weight:600;


    background:

    rgba(
        255,
        255,
        255,
        .2
    );


}





/* 时间 */


.time{


    width:100%;


    display:flex;


    justify-content:space-between;


    margin-top:18px;


    font-size:13px;


    opacity:.8;


}





/* 进度条 */


.progress{


    width:100%;


    height:7px;


    margin-top:10px;


    border-radius:20px;


    background:

    rgba(
        255,
        255,
        255,
        .25
    );


    overflow:visible;


    cursor:pointer;


}





.progress-bar{


    height:100%;


    width:0%;


    background:white;


    border-radius:20px;


    position:relative;


    transition:.15s;


}





#progressDot{


    position:absolute;


    right:-7px;


    top:50%;


    transform:

    translateY(-50%);


    width:14px;


    height:14px;


    border-radius:50%;


    background:white;


    box-shadow:

    0 0 12px

    rgba(
        255,
        255,
        255,
        .9
    );


}





/* 信息 */


.info{


    margin-top:30px;


    padding:18px;


    border-radius:25px;


    background:

    rgba(
        255,
        255,
        255,
        .12
    );


    text-align:left;


}





.info div{


    display:flex;


    justify-content:space-between;


    padding:10px 5px;


    border-bottom:

    1px solid

    rgba(
        255,
        255,
        255,
        .12
    );


}




.info div:last-child{


    border:none;


}




.info span{


    opacity:.8;


}





/* 扭蛋 */


#capsuleBtn{


    margin-top:25px;


    width:100%;


    height:48px;


    border:none;


    border-radius:25px;


    color:white;


    font-size:16px;


    background:

    rgba(
        255,
        255,
        255,
        .18
    );


    backdrop-filter:

    blur(20px);


}





#capsuleResult{


    margin-top:15px;


    font-size:17px;


    font-weight:600;


}







/* Toast */


#toast{


    position:fixed;


    left:50%;


    bottom:80px;


    transform:

    translateX(-50%);


    padding:15px 25px;


    border-radius:30px;


    background:

    rgba(
        0,
        0,
        0,
        .65
    );


    backdrop-filter:

    blur(20px);


    opacity:0;


    pointer-events:none;


    transition:.5s;


    font-size:18px;


}




#toast.show{


    opacity:1;


}





.footer{


    margin-top:30px;


    font-size:13px;


    opacity:.65;


}