/* 引入BrunoAceSC字体 */
@font-face {
    font-family: 'BrunoAceSC';
    src: url('fonts/BrunoAceSC-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* 防止长按选择，优化触控体验 */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #121212;
    color: #ffffff;
    height: 100vh;
    overflow: hidden;
}

/* 开屏广告/加载动画 */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    z-index: 9999;
    /* 移除过渡效果以提高性能 */
    /* 跨设备兼容性 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
    /* 苹果设备兼容性 */
    -webkit-appearance: none;
    appearance: none;
    /* 确保在苹果设备上覆盖整个屏幕 */
    min-height: 100vh;
    min-width: 100vw;
}

.splash-logo {
    width: 30vw;
    max-width: 300px;
    height: auto;
    margin-bottom: 30px;
}

.countdown {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 12px;
    color: #b3b3b3;
}

/* 移动设备上的开屏广告样式 */
@media (max-width: 768px) {
    .splash-logo {
        width: 50vw;
        max-width: 250px;
        margin-bottom: 30px;
    }
    
    .loading-text {
        font-size: 14px;
    }
}

/* 竖屏设备的开屏广告样式 */
@media (orientation: portrait) {
    .splash-logo {
        width: 60vw;
        max-width: 280px;
    }
}



/* 隐藏开屏广告 */
.splash-screen.hidden {
    display: none;
    pointer-events: none;
}

/* 播放器容器 */
.player-container {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    height: 100vh;
}

.top-container {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: transparent;
    height: 100px; /* 调整高度以完全展示图片 */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 10;
    padding-right: 20px;
    position: relative;
    overflow: hidden;
}

/* 当前时间显示 */
.current-time {
    display: none; /* 默认隐藏 */
    font-size: 48px; /* 占top-container高度的60% */
    color: #a35923 !important; /* 金色 */
    z-index: 3;
    margin-right: 20px;
    font-family: 'BrunoAceSC', monospace;
    font-weight: normal;
    line-height: 48px; /* 确保垂直居中 */
}

.top-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/top.png');
    background-size: auto 100%;
    background-position: left center;
    background-repeat: no-repeat;
    z-index: 2;
}

.top-container-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(60px) brightness(0.6);
    -webkit-filter: blur(60px) brightness(0.6);
    z-index: 1;
}

.player-content {
    display: flex;
    display: -webkit-flex;
    flex: 1;
    -webkit-flex: 1;
    overflow: hidden;
}

/* 侧边栏/播放列表 */
.sidebar {
    width: 300px;
    background-color: #181818;
    padding: 0;
    border-right: 1px solid #282828;
    position: relative;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    height: 100%;
}

.sidebar .playlist {
    padding-top: 10px;
    flex: 1;
    overflow-y: auto;
}

.song-count {
    color: #a35923;
    font-size: 14px;
    font-weight: 600;
    margin-right: 20px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 6px 14px;
    border-radius: 18px;
    border: 1px solid #a35923;
}

.sidebar-header {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
    padding: 20px;
    border-bottom: 1px solid #282828;
    position: sticky;
    top: 0;
    background-color: #000000;
    z-index: 5;
}

.sidebar-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    color: #a35923;
}



.search-container {
    flex: 1;
    max-width: 200px;
    margin-left: 20px;
}

#searchInput {
    width: 100%;
    padding: 10.4px 12px; /* 加高30%，从8px变为10.4px */
    background-color: #282828;
    border: 1px solid #383838;
    border-radius: 16px;
    color: #ffffff;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
    min-height: 36px; /* 确保最小高度 */
}

/* 竖屏显示时的样式 */
@media (max-width: 768px) {
    .sidebar-header {
        top: 0;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 15px 20px;
    }
    
    .search-container {
        max-width: none;
        margin-left: 0;
        flex: 1;
    }
    
    #searchInput {
        width: 100%;
    }
}

#searchInput:focus {
    border-color: #a35923;
}

#searchInput::placeholder {
    color: #b3b3b3;
}

.playlist {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 0;
}

.playlist-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    min-height: 56px;
    box-sizing: border-box;
}

.playlist-item.active {
    background-color: rgba(163, 89, 35, 0.3);
    position: relative;
}

.playlist-item.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    z-index: 0;
    pointer-events: none;
}



.playlist-item img {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    object-fit: cover;
    margin-right: 10px;
    border-radius: 4px;
    position: relative;
    z-index: 1;
}

.playlist-item-info {
    flex: 1;
    overflow: hidden;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.playlist-item-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-item-artist {
    font-size: 12px;
    line-height: 1.4;
    color: #b3b3b3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 专辑标题 */
.album-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
    margin-top: 10px;
    border-top: 1px solid #282828;
}

.album-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.album-year {
    font-size: 12px;
    color: #b3b3b3;
}

/* 专辑歌曲列表 */
.album-songs {
    margin-left: 10px;
}

/* 播放列表项封面 */
.playlist-item-cover {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
}

/* 主播放区域 */
.main-content {
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    padding: 40px;
    background-color: transparent;
    /* 桌面设备兼容性 */
    min-height: 0;
}

/* 专辑封面 */
.album-art {
    width: 50vw;
    max-width: 360px;
    height: 50vw;
    max-height: 360px;
    aspect-ratio: 1/1;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #282828;
}

.album-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 移除过渡效果以提高性能 */
    min-width: 100%;
    min-height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1/1;
    opacity: 0;
}

.album-art img.loaded {
    opacity: 1;
}

/* 加载动画 */
.album-art::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #a35923;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1;
    /* 移除过渡效果以提高性能 */
}

.album-art.loaded::before {
    opacity: 0;
    pointer-events: none;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 播放列表项封面 */
.playlist-item-cover {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
    opacity: 0;
}

.playlist-item-cover.loaded {
    opacity: 1;
}

/* 加载中状态 */
.loading {
    padding: 20px;
    text-align: center;
    color: #b3b3b3;
    font-size: 14px;
}

/* 主播放区域 */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(24, 24, 24, 0.9);
    position: relative;
    overflow: hidden;
    --background-image: url('img/no.jpg');
}

/* 背景封面 */
.main-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.5);
    z-index: 0;
    /* 移除过渡效果以提高性能 */
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    opacity: 0.9;
}

.main-content > * {
    position: relative;
    z-index: 1;
}

/* 横屏模式下背景封面显示非模糊状态 */
@media (orientation: landscape) {
    .main-content::before {
        filter: brightness(0.375);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    
    /* 横屏模式下top-container高度矮20% */
    .top-container {
        height: 80px;
    }
    
    /* 横屏模式下显示当前时间 */
    .current-time {
        display: block;
    }
    
    /* 横屏模式下调整布局，让main-content-right占据更大空间 */
    .main-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 30px;
        gap: 40px;
    }
    
    .album-art {
        display: none !important;
    }
    
    .main-content-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 25px;
        max-width: none;
        text-align: center;
    }
    
    .song-info {
        max-width: none;
        text-align: center;
        margin-bottom: 0;
    }
    
    #songTitle {
        font-size: 36px;
        font-weight: 700;
        margin-bottom: 8px;
    }
    
    #songArtist {
        font-size: 22px;
        color: #b3b3b3;
    }
    
    .progress-container {
        max-width: none;
        margin-bottom: 0;
    }
    
    .controls {
        max-width: none;
        gap: 40px;
        justify-content: center;
    }
    
    .controls-left,
    .controls-right {
        gap: 20px;
    }
    
    #playBtn {
        width: 65px;
        height: 65px;
        font-size: 38px;
    }
    
    .controls button {
        font-size: 26px;
    }
}

.album-art.playing img {
    animation: rotate 20s linear infinite;
    -webkit-animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* 歌曲信息 */
.song-info {
    text-align: center;
    margin-bottom: 20px;
    max-width: 500px;
}

#songTitle {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#songArtist {
    font-size: 16px;
    color: #b3b3b3;
}



/* 进度条 */
.progress-container {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 500px;
    margin-bottom: 20px;
    gap: 10px;
}

#progressBar {
    flex: 1;
    height: 4px;
    background-color: #282828;
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
}

#progressBar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #a35923;
    cursor: pointer;
}

#progressBar::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #a35923;
    cursor: pointer;
    border: none;
}

.currentTime, #duration {
    font-size: 12px;
    color: #b3b3b3;
    min-width: 40px;
}

/* 播放控件 */
.controls {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    width: 100%;
    max-width: 500px;
    gap: 40px;
}

.controls-left,
.controls-right {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    gap: 20px;
}

.controls #playBtn {
    z-index: 1;
}

#modeBtn {
    font-size: 28px;
    width: 48px;
    height: 48px;
    /* 移除过渡效果，确保没有任何动画 */
}

/* 按钮基础样式 - 防止其他样式入侵 */
button {
    background: none !important;
    border: none !important;
    color: #ffffff !important;
    cursor: pointer !important;
    /* 移除过渡效果，确保没有任何动画 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    font-family: inherit !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    text-indent: 0 !important;
    text-shadow: none !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -ms-appearance: none !important;
    /* 防止设备默认样式入侵 */
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    user-select: none !important;
    touch-action: manipulation !important;
}

/* 播放控件按钮样式 */
.controls button {
    font-size: 24px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
    user-select: none !important;
    touch-action: manipulation !important;
}

/* 播放按钮特殊样式 */
#playBtn {
    font-size: 36px !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background-color: #a35923 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* 移除所有按钮的悬停和点击样式 */
button:hover,
button:active,
button:focus {
    color: #ffffff !important;
    transform: none !important;
    outline: none !important;
}

/* 确保playBtn在所有状态下保持一致的背景色 */
#playBtn:hover,
#playBtn:active,
#playBtn:focus {
    background-color: #a35923 !important;
}

/* 横屏模式下的按钮样式 */
@media (orientation: landscape) {
    .controls button {
        font-size: 26px !important;
    }
    
    #playBtn {
        width: 65px !important;
        height: 65px !important;
        font-size: 38px !important;
    }
    
    /* 确保横屏模式下按钮也没有悬停样式 */
    button:hover,
    button:active,
    button:focus {
        color: #ffffff !important;
        transform: none !important;
        outline: none !important;
    }
    
    /* 确保横屏模式下playBtn保持一致的背景色 */
    #playBtn:hover,
    #playBtn:active,
    #playBtn:focus {
        background-color: #a35923 !important;
    }
}

/* 版权LOGO */
.copyright {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 1;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    align-items: center;
    -webkit-align-items: center;
}

.logo {
    width: 100px;
    max-width: 100%;
    height: auto;
    opacity: 0.7;
    /* 移除过渡效果以提高性能 */
}

.version {
    color: #b3b3b3;
    font-size: 6px;
    margin-top: 5px;
    text-align: center;
}

.logo:hover {
    opacity: 1;
}

/* 移除重复的playBtn样式定义，已在前面的样式中定义 */

/* 响应式设计 */
@media (max-width: 768px) {
    .player-content {
        flex-direction: column;
        flex: 1;
        overflow: hidden;
    }
    
    .sidebar {
        width: 100%;
        height: 45vh;
        border-right: none;
        border-bottom: 1px solid #282828;
        overflow-y: auto;
    }
    
    .main-content {
        height: 55vh;
        padding: 15px;
        overflow-y: auto;
    }
    
    .album-art {
        width: 48.6vw;
        max-width: 162px;
        height: 48.6vw;
        max-height: 162px;
        aspect-ratio: 1/1;
    }
    
    #songTitle {
        font-size: 18px;
    }
    
    #songArtist {
        font-size: 12px;
    }
    
    .progress-container {
        max-width: 90%;
    }
    
    .controls {
        gap: 30px;
    }
    
    .controls-left,
    .controls-right {
        gap: 15px;
    }
    
    .controls button {
        font-size: 20px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 8px !important;
        user-select: none !important;
        touch-action: manipulation !important;
    }
    
    #playBtn {
        font-size: 30px !important;
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        background-color: #a35923 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }
    
    .top-container {
        height: 80px; /* 在移动设备上增大高度 */
    }
    
    /* 确保移动设备上按钮没有悬停和点击样式 */
    @media (max-width: 768px) {
        button:hover,
        button:active,
        button:focus {
            color: #ffffff !important;
            transform: none !important;
            outline: none !important;
        }
        
        /* 确保移动设备上playBtn保持一致的背景色 */
        #playBtn:hover,
        #playBtn:active,
        #playBtn:focus {
            background-color: #a35923 !important;
        }
    }
}

/* 竖屏设备的响应式设计 */
@media (orientation: portrait) {

    .player-content {
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        position: relative;
    }
    
    .sidebar {
        height: 100%; /* 列表区高度充满屏幕 */
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #282828;
        overflow-y: auto;
        position: relative;
        z-index: 1;
    }
    
    .main-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 25vh;
        flex-direction: row; /* 改为水平布局 */
        -webkit-flex-direction: row;
        align-items: center;
        -webkit-align-items: center;
        padding: 15px;
        margin: 0;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        background-color: rgba(0, 0, 0, 0.9);
        overflow: hidden;
        border: none;
        box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        z-index: 10;
    }
    
    .main-content-right {
        flex: 1;
        -webkit-flex: 1;
        display: flex;
        flex-direction: column;
        -webkit-flex-direction: column;
        justify-content: center;
        -webkit-justify-content: center;
    }
    
    .main-content::before {
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        opacity: 0.9;
    }
    
    .album-art {
        width: 40vw;
        max-width: 150px;
        height: 40vw;
        max-height: 150px;
        aspect-ratio: 1/1;
        margin-right: 15px;
        margin-bottom: 0;
    }
    
    /* 右侧内容容器 */
    .main-content-right {
        flex: 1;
        -webkit-flex: 1;
        height: calc(100% + 50px); /* 以封面高度为基础高出50px */
        display: flex;
        flex-direction: column;
        -webkit-flex-direction: column;
        justify-content: center;
        -webkit-justify-content: center;
    }
    
    .controls {
        gap: 15px;
        max-width: none;
        margin-top: 10px;
    }
    
    .controls-left,
    .controls-right {
        gap: 10px;
    }
    
    #songTitle {
        font-size: 16px;
        margin-bottom: 5px;
    }
    
    #songArtist {
        font-size: 12px;
    }
    
    .progress-container {
        max-width: 100%;
        margin-bottom: 10px;
    }
    
    .top-container {
        height: 132px; /* 竖屏情况下再增加10%，从120px变为132px */
    }
    
    .sidebar-header {
        padding: 12px 18px; /* 增加20%，从10px 15px变为12px 18px */
    }
    
    .sidebar-header h2 {
        font-size: 16px;
    }
    
    #searchInput {
        font-size: 13px;
        padding: 7.8px 10px; /* 加高30%，从6px变为7.8px */
        min-height: 32px; /* 确保最小高度 */
    }
    
    /* 隐藏竖屏下的版权LOGO */
    .copyright {
        display: none;
    }
    
    /* 确保竖屏设备上按钮没有悬停和点击样式 */
    @media (orientation: portrait) {
        button:hover,
        button:active,
        button:focus {
            color: #ffffff !important;
            transform: none !important;
            outline: none !important;
        }
        
        /* 确保竖屏设备上playBtn保持一致的背景色 */
        #playBtn:hover,
        #playBtn:active,
        #playBtn:focus {
            background-color: #a35923 !important;
        }
    }
}

/* 滚动条样式 */
.sidebar .playlist::-webkit-scrollbar {
    width: 6px;
}

.sidebar .playlist::-webkit-scrollbar-track {
    background: #181818;
}

.sidebar .playlist::-webkit-scrollbar-thumb {
    background: #404040;
    border-radius: 3px;
}

.sidebar .playlist::-webkit-scrollbar-thumb:hover {
    background: #555;
}