/* 更新主题色为 #f46833 */
body {
    font-family: Roboto;
    background: linear-gradient(to bottom right, #ffe6e6, #f4b3c7, #bbd2ff); /* 渐变色效果 */;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
}

.container {
    width: 100%;
    max-width: 550px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player {
    position: relative;
    background-color: #ffffff;
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 550px;
    height: 375px;
    border-radius: 3px;
    border-bottom: 6px solid #f46833; /* 主题色 */
    box-shadow: 0 0 20px 3px rgba(0, 0, 0, .5);
    z-index: 1;
}
.player:hover .mask,
.player.playing .mask {
    background-color: rgba(0, 0, 0, .5); /* 封面颜色变暗 */
    transition: all 1s;
}
.player .like {
    position: absolute;
    width: 35px;
    height: 35px;
    top: 15px;
    right: 20px;
    z-index: 15;
    font-size: 1.5em;
    vertical-align: middle;
    line-height: 38px;
    color: #f2f2f2;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
}
.player .icon-heart {
    display: block;
}
.player .mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* 初始透明背景 */
    z-index: 2;
    transition: all 1s;
}
.player-info {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 4;
    list-style: none;
    color: #262626;
    transform: scale(1);
    padding: 10px;
}
.player-info li {
    margin-bottom: 7px;
}
.player-info li:nth-child(1) {
    font-size: 1.5em;
}
.player-info li:nth-child(2) {
    font-size: 1.2em;
}
.player-info li:nth-child(3) {
    font-size: .9em;
}
.player .info-two {
    left: 0;
    right: 0;
    z-index: 1;
    color: #f2f2f2;
    margin-top: -30px; /* 调整位置 */
}
.player .info-three {
    left: 0;
    right: 0;
    z-index: 1;
    color: #f2f2f2;
    margin-top: 0; /* 调整位置 */
    max-height: 126px; /* 减少到原来的70% */
    overflow-y: hidden; /* 去掉滚动条 */
}
.player .info-three li#lyrics-container {
    white-space: pre-line;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.player .info-three li#lyrics-container span.current-lyric {
    font-size: 1.5em; /* 放大当前歌词字体 */
    font-weight: bold;
    position: relative;
    background: linear-gradient(to right, #ff99cc, #ffcccc); /* 文字渐变色 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    
}
.player .info-three li#lyrics-container span.previous-lyric,
.player .info-three li#lyrics-container span.next-lyric {
    opacity: 0.5;
}
.player #play-button {
    box-sizing: border-box;
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #f46833; /* 主题色 */
    box-shadow: 0 8px 25px 6px rgba(0, 0, 0, .5);
    right: 40px;
    bottom: 90px;
    z-index: 5;
    cursor: pointer;
    transition: all 70ms;
    border: none;
}
.player #play-button:hover {
    width: 70px;
    height: 70px;
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, .5);
    right: 45px;
    bottom: 95px;
    transition: all 70ms;
}
/* 播放按钮 - 播放状态（▶） */
.player #play-button .icon-play::before {
    content: "\25B6"; /* ▶ Unicode 三角形 */
    position: absolute;
    font-size: 1.5em;
    left: 52%;
    top: 50%;
    transform: translate(-48%, -50%);
    transition: all 70ms;
    color: #ffffff;

}

/* 播放按钮 - 移除状态（✖ 或 ⏹） */
.player #play-button .icon-remove::before {
    content: "\2716"; /* ✖ Unicode 叉号 */
    position: absolute;
    font-size: 1.5em;
    left: 52%;
    top: 50%;
    transform: translate(-48%, -50%);
    transition: all 70ms;
    color: #ffffff;

}

.player #play-button:hover .icon-play,
.player #play-button:hover .icon-remove {
    font-size: 1.2em;
    transition: all 70ms;
}
.control-row {
    position: absolute;
    bottom: -1px;
    width: 100%;
    height: 130px;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 3;
}
.control-row #pause-button {
    box-sizing: border-box;
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #f46833; /* 主题色 */
    left: 40px;
    bottom: 25px;
    z-index: 5;
    cursor: pointer;
    border: none;
    transform: scale(0);
    display: none;
    animation: scale-animation .4s;
    animation-fill-mode: forwards;
    animation-delay: .3s;
}
/* 暂停按钮 - 暂停状态（❚❚） */
.control-row #pause-button .icon-pause::before {
    content: "\23F8"; /* ⏸ Unicode 暂停符号 */
    position: absolute;
    font-size: 1.5em;
    left: 52%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all .1s;
    color: #ffffff;
    font-style: normal; /* 确保不是斜体 */
}

/* 暂停按钮 - 播放状态（▶️ 播放） */
.control-row #pause-button .icon-play::before {
    content: "\25B6"; /* ▶ Unicode 播放三角形 */
    position: absolute;
    font-size: 1.5em;
    left: 52%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all .1s;
    color: #ffffff;
    font-style: normal; /* 确保不是斜体 */
}

.control-row .seek-field {
    bottom: 67px;
    left: 148px;
    position: absolute;
    width: 170px;
    z-index: 5;
    transform: scale(0);
    display: none;
    animation: scale-animation .4s;
    animation-fill-mode: forwards;
    animation-delay: .3s;
}
.control-row .volume-field {
    bottom: 67px;
    right: 127px;
    position: absolute;
    width: 50px;
    z-index: 5;
    transform: scale(0);
    display: none;
    animation: scale-animation .4s;
    animation-fill-mode: forwards;
    animation-delay: .3s;
}
.control-row .volume-icon {
    width: 20px;
    height: 20px;
    position: absolute;
    border-radius: 50%;
    bottom: 58px;
    right: 185px;
    z-index: 5;
    font-size: 1.2em;
    display: none;
    transform: scale(0);
    animation: scale-animation .4s;
    animation-fill-mode: forwards;
    animation-delay: .3s;
}
.control-row .volume-icon .icon-volume-up {
    color: #424242;
}
.like-active {
    color: #ef5350;
    animation: scale-animation .4s;
    animation-fill-mode: forwards;
}
@keyframes scale-animation {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
.waves-animation-one {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(to top left, #ffe6e6, #f4b3c7, #bbd2ff); /* 主题色 */
    z-index: 3;
    left: 42.5%;
    bottom: 20%;
    transform: scale(0);
    animation: waves-animation-one .25s;
    animation-fill-mode: forwards;
    animation-delay: .3s;
    display: none;
}
@keyframes waves-animation-one {
    0% {
        transform: scale(1);
    }
    99% {
        transform: scale(7.8);
    }
    100% {
        transform: scale(7.8);
    }
}
.waves-animation-two {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(to top left, #ffe6e6, #f4b3c7, #bbd2ff); /* 主题色 */
    z-index: 3;
    right: 40px;
    bottom: 35px;
    transform: scale(7.8);
    display: none;
    animation: waves-animation-two .2s;
    animation-fill-mode: forwards;
}
@keyframes waves-animation-two {
    to {
        transform: scale(0);
    }
}
.info-active {
    animation: info-active-animation 3s;
    animation-fill-mode: forwards;
    animation-delay: .37s;
}
@keyframes info-active-animation {
    to {
        bottom: 56.5%;
    }
}
.play-active {
    animation: play-animation .3s;
    animation-fill-mode: forwards;
}
@keyframes play-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
    98% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        transform: translate(-200px, 65px);
    }
    99% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        transform: translate(-200px, 65px) scale(0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        transform: translate(0, 65px) scale(1);
    }
}
.play-inactive {
    animation: play-inactive 1s;
    animation-fill-mode: forwards
}
@keyframes play-inactive {
    from {
        transform: translate(0, 65px);
    }
}
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
input[type="range"]:focus {
    outline: none;
}
input[type="range"] + .thumb {
    display: none;
}
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
    background: #f2f2f2;
    border-radius: 0;
    border: 0px solid #000101;
}
input[type="range"]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
    border: 0px solid transparent;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #009688;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -7px;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
    background: #f2f2f2;
}
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
    background: #f2f2f2;
    border-radius: 0;
    border: 0px solid #000101;
}
input[type="range"]::-moz-range-thumb {
    box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
    border: 0px solid transparent;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #009688;
    cursor: pointer;
}
input[type="range"]::-ms-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    border-width: 39px 0;
    color: transparent;
    padding-top: 5px;
}
input[type="range"]::-ms-fill-lower {
    background: #f2f2f2;
    border: 0px solid transparent;
    border-radius: 0;
    box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
}
input[type="range"]::-ms-fill-upper {
    background: #f2f2f2;
    border: 0px solid transparent;
    border-radius: 0px;
    box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
}
input[type="range"]::-ms-thumb {
    box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
    border: 0px solid transparent;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #009688;
    cursor: pointer;
    margin-top: 1px;
}
input[type="range"]::-ms-tooltip {
    display: none;
}
input[type="range"]::-ms-ticks {
    display: none;
}
input[type="range"]:focus::-ms-fill-lower {
    background: #f2f2f2;
}
input[type="range"]:focus::-ms-fill-upper {
    background: #f2f2f2;
}

/* 修改 info-one 中的 song-title 样式 */
.player .info-one li:first-child {
    font-size: 2em; /* 放大字体 */
    font-weight: bold; /* 加粗 */
    background: linear-gradient(to right, #ff99cc, #ffcccc); /* 文字渐变色 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 新增外层容器样式，用于居中显示播放器和文字部分 */
.main-container {
    width: 100%;
    max-width: 550px; /* 与播放器宽度一致 */
    margin: 0 auto; /* 居中显示 */
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 水平居中 */
    justify-content: center; /* 垂直居中 */
    padding: 20px 0; /* 增加上下间距 */
}

/* 调整播放器容器的样式 */
.container {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 文字显示区域样式 */
.text-container {
    width: 100%;
    margin-top: 20px; /* 与播放器的间距 */
    text-align: center;
    overflow: hidden; /* 隐藏超出部分 */
    max-height: 300px; /* 设置最大高度，防止文字过多时撑开页面 */
    overflow-y: auto; /* 如果文字超出容器高度，显示滚动条 */
    padding: 10px; /* 增加内边距 */
    background-color: rgba(255, 255, 255, 0.3); /* 半透明白色背景 */
    border-radius: 10px; /* 圆角 */
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 边框增加层次感 */
}


/* 隐藏滚动条背景 */
.text-container::-webkit-scrollbar {
    width: 8px; /* 滚动条宽度 */
}

.text-container::-webkit-scrollbar-track {
    background: transparent; /* 滚动条轨道背景透明 */
}

.text-container::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3); /* 滚动条滑块颜色 */
    border-radius: 4px; /* 滑块圆角 */
}

.text-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5); /* 滑块悬停颜色 */
}

.text-display {
    width: 100%;
    font-size: 1.5em; /* 文字大小提升到 1.5em */
    font-weight: bold; /* 文字加粗 */
    white-space: pre-line; /* 保留换行符 */
    line-height: 1.5; /* 增加行高，提升可读性 */
    background: linear-gradient(to right, #333333, #333333, #333333); /* 文字渐变色 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 每行文字的样式 */
.text-line {
    opacity: 0; /* 初始状态为透明 */
    transform: translateY(20px); /* 初始位置向下偏移 */
    transition: opacity 0.5s ease, transform 0.5s ease; /* 动画效果 */
    background: linear-gradient(to right, #333333, #333333, #333333); /* 文字渐变色 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 当文字行显示时触发动画 */
.text-line.visible {
    opacity: 1; /* 完全显示 */
    transform: translateY(0); /* 恢复到原始位置 */
}