:root {
            --primary-gold: #FFD700;
            --shimmer-gold: #FFF8E1;
            --card-width: 360px;
            --card-height: 200px;
            --gap: 40px;
            --text-gold: #ffd700;
        }

        body {
            margin: 0;
            background: linear-gradient(135deg, #4a0000 0%, #2b0505 50%, #1a0000 100%);
            font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
            color: white;
            overflow: hidden;
            height: 100vh;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        /* === 1. 背景层 === */
        #canvas-bg {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: 0; pointer-events: none;
        }

        .spotlight {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at 50% 40%, rgba(255, 50, 50, 0.15), transparent 70%);
            z-index: 1; pointer-events: none;
        }

        /* === 2. 头部样式 === */
        header {
            text-align: center;
            padding: 15px 0 10px;
            z-index: 10;
            background: rgba(0,0,0,0.2);
            border-bottom: 1px solid rgba(255,215,0,0.1);
        }

        /* === 标题动效：呼吸浮动 === */
h1 {
    margin: 0;
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: 4px;
    /* 保持原有的垂直渐变 */
    background: linear-gradient(to bottom, #fff 40%, #FFD700 100%);
    -webkit-background-clip: text;
    color: var(--text-gold);
    /* 执行动画：3秒一次，来回播放 */
    animation: floatGlow 1s ease-in-out infinite alternate;
}

/* 定义浮动和发光动作 */
@keyframes floatGlow {
    0% {
        transform: translateY(0);
        text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
    100% {
        transform: translateY(-5px); /* 向上浮动 */
        /* 金色光晕增强 */
        text-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.3);
    }
}
}

        .menu {
            display: flex;
            justify-content: center;
            gap: 25px;
            margin-top: 15px;
        }

        .btn {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 215, 0, 0.4);
            color: #fff;
            padding: 8px 30px;
            cursor: pointer;
            border-radius: 6px;
            font-size: 1.1rem;
            transition: all 0.3s;
            backdrop-filter: blur(5px);
            font-weight: 500;
            box-shadow: 0 4px 6px rgba(0,0,0,0.2);
        }

        .btn:hover, .btn.active {
            background: var(--primary-gold);
            color: #4a0000;
            border-color: #fff;
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
            font-weight: 800;
            transform: translateY(-2px);
        }

        /* === 3. 舞台区域 === */
        .stage {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            padding: 10px 0;
            position: relative;
            z-index: 5;
            width: 100%;
        }

        .track-wrapper {
            width: 100%;
            overflow: hidden;
            display: flex;
            position: relative;
            mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
        }

        .track {
            display: flex;
            gap: var(--gap);
            width: max-content;
            will-change: transform;
            padding: 10px 0;
        }

        .track-wrapper:hover .track {
            animation-play-state: paused !important;
        }

        /* === 4. 卡片样式 === */
        .card {
            width: var(--card-width);
            height: var(--card-height);
            background: rgba(40, 10, 10, 0.65); 
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 16px;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            backdrop-filter: blur(15px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.6);
            transition: transform 0.3s;
            flex-shrink: 0;
        }

        .card.type-excellence { border-bottom: 4px solid #00f2ff; box-shadow: 0 10px 20px rgba(0, 242, 255, 0.1); }
        .card.type-outstanding { border-bottom: 4px solid #ffd700; box-shadow: 0 10px 20px rgba(255, 215, 0, 0.1); }
        .card.type-fivestar { border-bottom: 4px solid #ff4e50; box-shadow: 0 10px 20px rgba(255, 78, 80, 0.1); }

        .card:hover {
            transform: scale(1.08);
            background: rgba(60, 20, 20, 0.9);
            z-index: 100;
            border-color: #fff;
        }

        .badge {
            position: absolute; top: 15px; left: 20px;
            font-size: 1.1rem; font-weight: bold;
            color: #F9D949;
            text-transform: uppercase; letter-spacing: 1px;
            display: flex; align-items: center; gap: 6px;
        }
        
        .name {
            font-size: 2.6rem; font-weight: 800;
            color: #F9D949; margin-top: 15px; margin-bottom: 10px;
            text-shadow: 0 4px 8px rgba(0,0,0,0.5);
        }

        .meta {
            font-size: 1rem; color: rgba(255,255,255,0.6);
            background: rgba(246, 182, 5, 0.2); padding: 5px 15px;
            border-radius: 20px; display: flex; gap: 10px;
            border: 1px solid rgba(255,255,255,0.1);
        }

        /* === 5. 音乐控制按钮 === */
        .music-control {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: rgba(0, 0, 0, 0.6);
            border: 2px solid var(--primary-gold);
            border-radius: 50%;
            z-index: 1000;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: var(--primary-gold);
            transition: all 0.3s;
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
        }

        .music-control:hover {
            background: var(--primary-gold);
            color: #4a0000;
            transform: scale(1.1);
        }

        /* 播放时的律动动画 */
        .music-control.playing {
            animation: pulse-gold 2s infinite;
        }
        
        .music-control.playing::after {
            content: '';
            position: absolute;
            width: 100%; height: 100%;
            border-radius: 50%;
            border: 1px solid var(--primary-gold);
            animation: ripple 1.5s infinite;
            opacity: 0;
        }

        @keyframes ripple {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(1.8); opacity: 0; }
        }

        @keyframes pulse-gold {
            0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(255, 215, 0, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
        }

        @keyframes scrollLeft {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(-50% - var(--gap)/2)); }
        }
        @keyframes scrollRight {
            0% { transform: translateX(calc(-50% - var(--gap)/2)); }
            100% { transform: translateX(0); }
        }