* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        @font-face {
            font-family: 'KaiTi';
            src: local('KaiTi'), local('STKaiti'), local('楷体');
        }

        body {
            font-family: 'KaiTi', 'STKaiti', '楷体', serif;
            background: linear-gradient(135deg, #1a2e1a 0%, #0d1f0d 50%, #1a2e1a 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
            color: #d4a85c;
        }

        /* 背景装饰 - 八卦方位 */
        .bg-decoration {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .bagua-circle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 750px;
            height: 750px;
            background: url('../images/tiandi-circle.svg') center / contain no-repeat;
            border-radius: 50%;
            animation: rotate 120s linear infinite;
            filter: drop-shadow(0 0 30px rgba(212, 168, 92, 0.1));
        }

        @keyframes rotate {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /* 底部山脉背景 */
        .mountain-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 280px;
            background: url('../images/mountain-landscape-hd.png') bottom center / 100% auto no-repeat;
            opacity: 0.72;
            pointer-events: none;
            /* 降低阳光亮度，让光晕柔和 */
            filter: brightness(0.85) saturate(0.85);
            /* 上边缘星空部分蒙版透明，与背景自然融合，下半部山脉保持清晰 */
            mask-image: linear-gradient(to bottom, transparent 0%, black 35%, black 100%);
            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 35%, black 100%);
        }

        /* 干支文字背景装饰 */
        .ganzhi-bg {
            position: absolute;
            font-size: 14px;
            color: rgba(212, 168, 92, 0.04);
            white-space: nowrap;
        }

        .ganzhi-bg.top-left { top: 8%; left: 5%; }
        .ganzhi-bg.top-right { top: 12%; right: 5%; }
        .ganzhi-bg.bottom-left { bottom: 10%; left: 8%; }
        .ganzhi-bg.bottom-right { bottom: 8%; right: 6%; }

        /* 光晕效果 */
        .glow {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.15;
        }

        .glow-1 {
            width: 300px;
            height: 300px;
            background: #d4a85c;
            top: 20%;
            left: 20%;
            animation: float 8s ease-in-out infinite;
        }

        .glow-2 {
            width: 250px;
            height: 250px;
            background: #4a7c4a;
            bottom: 20%;
            right: 20%;
            animation: float 10s ease-in-out infinite reverse;
        }

        @keyframes float {
            0%, 100% { transform: translate(0, 0); }
            50% { transform: translate(30px, -30px); }
        }

        /* 主内容容器 */
        .container {
            position: relative;
            z-index: 10;
            text-align: center;
            padding: 40px;
            animation: fadeInUp 1.2s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 顶部装饰线 */
        .top-decoration {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            margin-bottom: 40px;
        }

        .deco-line {
            width: 80px;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(212, 168, 92, 0.6), transparent);
        }

        .deco-diamond {
            width: 8px;
            height: 8px;
            background: #d4a85c;
            transform: rotate(45deg);
            box-shadow: 0 0 10px rgba(212, 168, 92, 0.5);
        }

        /* 主标题 */
        .main-title {
            font-size: 56px;
            font-weight: normal;
            letter-spacing: 12px;
            color: #d4a85c;
            text-shadow: 0 0 30px rgba(212, 168, 92, 0.3);
            margin-bottom: 16px;
            animation: titleGlow 3s ease-in-out infinite alternate;
        }

        @keyframes titleGlow {
            from { text-shadow: 0 0 20px rgba(212, 168, 92, 0.2); }
            to { text-shadow: 0 0 40px rgba(212, 168, 92, 0.5); }
        }

        /* 副标题 */
        .sub-title {
            font-size: 18px;
            letter-spacing: 8px;
            color: rgba(212, 168, 92, 0.7);
            margin-bottom: 50px;
        }

        /* 标语 */
        .slogan {
            font-size: 28px;
            letter-spacing: 10px;
            color: rgba(180, 200, 180, 0.8);
            margin-bottom: 60px;
            position: relative;
        }

        .slogan::before,
        .slogan::after {
            content: '◆';
            font-size: 12px;
            color: rgba(212, 168, 92, 0.4);
            margin: 0 20px;
            vertical-align: middle;
        }

        /* 进入按钮 */
        .enter-btn {
            display: inline-block;
            padding: 16px 60px;
            font-size: 20px;
            font-family: 'KaiTi', 'STKaiti', '楷体', serif;
            letter-spacing: 8px;
            color: #d4a85c;
            background: rgba(13, 31, 13, 0.35);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            border: 1px solid rgba(212, 168, 92, 0.5);
            border-radius: 40px;
            cursor: pointer;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            text-decoration: none;
            text-shadow: 0 0 10px rgba(212, 168, 92, 0.4);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(212, 168, 92, 0.1);
        }

        .enter-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(212, 168, 92, 0.15), transparent);
            transition: left 0.6s ease;
        }

        .enter-btn:hover {
            background: rgba(212, 168, 92, 0.1);
            border-color: #d4a85c;
            box-shadow: 0 0 30px rgba(212, 168, 92, 0.3), inset 0 0 20px rgba(212, 168, 92, 0.05);
            transform: translateY(-2px);
        }

        .enter-btn:hover::before {
            left: 100%;
        }

        .enter-btn:active {
            transform: translateY(0);
        }

        /* 底部信息 */
        .footer {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 13px;
            color: rgba(212, 168, 92, 0.5);
            letter-spacing: 4px;
            z-index: 10;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 12px rgba(13, 31, 13, 0.9);
        }

        .footer span {
            margin: 0 8px;
        }

        /* 版本信息 */
        .version {
            position: fixed;
            bottom: 24px;
            right: 30px;
            font-size: 11px;
            color: rgba(212, 168, 92, 0.35);
            letter-spacing: 2px;
            z-index: 10;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
        }

        /* 主题切换（右下角） */
        .theme-switcher {
            position: fixed;
            bottom: 30px;
            left: 30px;
            display: flex;
            gap: 8px;
            z-index: 10;
        }

        .theme-dot {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.3s ease;
            opacity: 0.6;
        }

        .theme-dot:hover {
            opacity: 1;
            transform: scale(1.1);
        }

        .theme-dot.active {
            border-color: #d4a85c;
            opacity: 1;
            box-shadow: 0 0 10px rgba(212, 168, 92, 0.5);
        }

        .theme-dot.green { background: linear-gradient(135deg, #1a2e1a, #0d1f0d); }
        .theme-dot.dark { background: linear-gradient(135deg, #1a1a2e, #0d0d1f); }
        .theme-dot.gold { background: linear-gradient(135deg, #2e2a1a, #1f1d0d); }

        /* 响应式 */
        @media (max-width: 768px) {
            .main-title {
                font-size: 36px;
                letter-spacing: 8px;
            }
            .sub-title {
                font-size: 14px;
                letter-spacing: 4px;
            }
            .slogan {
                font-size: 22px;
                letter-spacing: 6px;
            }
            .enter-btn {
                padding: 12px 40px;
                font-size: 16px;
                letter-spacing: 4px;
            }
            .bagua-circle {
                width: 400px;
                height: 400px;
            }
        }

        /* 主题二：中午白亮光（白昼）*/
        body.theme-dark {
            background: linear-gradient(135deg, #e8eef2 0%, #d4dde3 50%, #e8eef2 100%);
        }
        body.theme-dark .main-title { color: #2c3e50; text-shadow: 0 0 20px rgba(255,255,255,0.5); }
        body.theme-dark .sub-title { color: rgba(44, 62, 80, 0.7); }
        body.theme-dark .slogan { color: rgba(44, 62, 80, 0.75); }
        body.theme-dark .slogan::before,
        body.theme-dark .slogan::after { color: rgba(44, 62, 80, 0.4); }
        body.theme-dark .enter-btn {
            border-color: rgba(44, 62, 80, 0.4);
            color: #2c3e50;
            background: rgba(255, 255, 255, 0.3);
        }
        body.theme-dark .enter-btn:hover {
            background: rgba(44, 62, 80, 0.1);
            box-shadow: 0 0 20px rgba(44, 62, 80, 0.15);
        }
        body.theme-dark .glow-1 { background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%); }
        body.theme-dark .glow-2 { background: radial-gradient(circle, rgba(200,220,240,0.3) 0%, transparent 70%); }
        body.theme-dark .bagua-circle { filter: invert(0.8) brightness(1.1) contrast(1.1); }
        body.theme-dark .mountain-footer { filter: brightness(0.9) saturate(0.55) hue-rotate(15deg); opacity: 0.55; }
        body.theme-dark .ganzhi-bg { color: rgba(44, 62, 80, 0.05); }
        body.theme-dark .deco-line { background: rgba(44, 62, 80, 0.2); }
        body.theme-dark .deco-diamond { color: rgba(44, 62, 80, 0.4); }
        body.theme-dark .theme-dot.active { border-color: #2c3e50; box-shadow: 0 0 10px rgba(44, 62, 80, 0.3); }
        body.theme-dark footer { color: rgba(44, 62, 80, 0.4); }
        body.theme-dark .version { color: rgba(44, 62, 80, 0.3); }

        /* 主题三：早上微红晨光（晨曦）*/
        body.theme-gold {
            background: linear-gradient(180deg, #f0c9a0 0%, #f5dcc0 30%, #fae8d4 60%, #fdf0e0 100%);
        }
        body.theme-gold .main-title { color: #8b4513; text-shadow: 0 0 20px rgba(255,180,100,0.4); }
        body.theme-gold .sub-title { color: rgba(139, 69, 19, 0.7); }
        body.theme-gold .slogan { color: rgba(160, 82, 45, 0.8); }
        body.theme-gold .slogan::before,
        body.theme-gold .slogan::after { color: rgba(205, 133, 63, 0.5); }
        body.theme-gold .enter-btn {
            border-color: rgba(139, 69, 19, 0.4);
            color: #8b4513;
            background: rgba(255, 240, 220, 0.4);
        }
        body.theme-gold .enter-btn:hover {
            background: rgba(139, 69, 19, 0.1);
            box-shadow: 0 0 20px rgba(255, 160, 80, 0.3);
        }
        body.theme-gold .glow-1 { background: radial-gradient(circle, rgba(255,180,100,0.4) 0%, transparent 70%); }
        body.theme-gold .glow-2 { background: radial-gradient(circle, rgba(255,140,80,0.3) 0%, transparent 70%); }
        body.theme-gold .bagua-circle { filter: hue-rotate(-15deg) saturate(1.3) brightness(1.05); }
        body.theme-gold .mountain-footer { filter: sepia(0.2) saturate(0.85) brightness(0.9); opacity: 0.68; }
        body.theme-gold .ganzhi-bg { color: rgba(139, 69, 19, 0.05); }
        body.theme-gold .deco-line { background: rgba(139, 69, 19, 0.2); }
        body.theme-gold .deco-diamond { color: rgba(205, 133, 63, 0.5); }
        body.theme-gold .theme-dot.active { border-color: #cd853f; box-shadow: 0 0 10px rgba(205, 133, 63, 0.4); }
        body.theme-gold footer { color: rgba(139, 69, 19, 0.4); }
        body.theme-gold .version { color: rgba(139, 69, 19, 0.3); }

        /* 页面转场覆盖层 */
        .transition-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #0d1f0d;
            z-index: 9999;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .transition-overlay.active {
            opacity: 1;
        }

        /* 转场时的圆形扩散效果 */
        .transition-circle {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(212, 168, 92, 0.3) 0%, rgba(212, 168, 92, 0.1) 50%, transparent 70%);
            z-index: 9998;
            pointer-events: none;
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease;
            opacity: 0;
        }

        .transition-circle.active {
            transform: translate(-50%, -50%) scale(30);
            opacity: 1;
        }

        /* 页面内容淡出 */
        body.is-leaving .container,
        body.is-leaving .footer,
        body.is-leaving .version,
        body.is-leaving .theme-switcher,
        body.is-leaving .bg-decoration {
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        body.is-leaving .enter-btn {
            transform: scale(0.9);
            opacity: 0;
        }

/* ========================================
   进入页面 - 完整移动端适配
   ======================================== */
@media (max-width: 768px) {
    /* 容器：减少内边距 */
    .container {
        padding: 20px !important;
        max-width: 100% !important;
    }

    /* 顶部装饰线：缩短 */
    .top-decoration {
        margin-bottom: 24px !important;
        gap: 10px !important;
    }

    .deco-line {
        width: 50px !important;
    }

    /* 主标题：进一步缩小 */
    .main-title {
        font-size: 32px !important;
        letter-spacing: 6px !important;
        margin-bottom: 12px !important;
    }

    /* 副标题 */
    .sub-title {
        font-size: 13px !important;
        letter-spacing: 3px !important;
        margin-bottom: 30px !important;
    }

    /* 标语 */
    .slogan {
        font-size: 18px !important;
        letter-spacing: 4px !important;
        margin-bottom: 40px !important;
    }

    .slogan::before,
    .slogan::after {
        margin: 0 10px !important;
        font-size: 10px !important;
    }

    /* 进入按钮：增大点击区域 */
    .enter-btn {
        padding: 14px 50px !important;
        font-size: 17px !important;
        letter-spacing: 4px !important;
        min-height: 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 八卦圆：进一步缩小 */
    .bagua-circle {
        width: 350px !important;
        height: 350px !important;
    }

    /* 底部山景：降低高度 */
    .mountain-footer {
        height: 180px !important;
    }

    /* 干支背景文字：隐藏（手机上太乱） */
    .ganzhi-bg {
        display: none !important;
    }

    /* 光晕：缩小 */
    .glow-1 {
        width: 200px !important;
        height: 200px !important;
    }

    .glow-2 {
        width: 180px !important;
        height: 180px !important;
    }

    /* 底部信息：调整位置和大小 */
    .footer {
        bottom: 16px !important;
        font-size: 11px !important;
        letter-spacing: 2px !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* 版本号：移到底部信息旁边或隐藏 */
    .version {
        bottom: 16px !important;
        right: 16px !important;
        font-size: 10px !important;
    }

    /* 主题切换器：调整位置和大小 */
    .theme-switcher {
        bottom: 16px !important;
        left: 16px !important;
        gap: 6px !important;
    }

    .theme-dot {
        width: 20px !important;
        height: 20px !important;
    }
}

/* 小屏手机（<=480px）进一步优化 */
@media (max-width: 480px) {
    .main-title {
        font-size: 26px !important;
        letter-spacing: 4px !important;
    }

    .sub-title {
        font-size: 12px !important;
        letter-spacing: 2px !important;
    }

    .slogan {
        font-size: 15px !important;
        letter-spacing: 3px !important;
        margin-bottom: 30px !important;
    }

    .enter-btn {
        padding: 12px 40px !important;
        font-size: 15px !important;
        letter-spacing: 3px !important;
    }

    .bagua-circle {
        width: 280px !important;
        height: 280px !important;
    }

    .mountain-footer {
        height: 140px !important;
    }

    .deco-line {
        width: 35px !important;
    }

    .top-decoration {
        margin-bottom: 20px !important;
    }

    /* 小屏上隐藏版本号，避免和底部信息重叠 */
    .version {
        display: none !important;
    }
}

/* 超小屏（<=360px） */
@media (max-width: 360px) {
    .main-title {
        font-size: 22px !important;
        letter-spacing: 3px !important;
    }

    .slogan {
        font-size: 13px !important;
        letter-spacing: 2px !important;
    }

    .enter-btn {
        padding: 10px 30px !important;
        font-size: 14px !important;
    }

    .bagua-circle {
        width: 240px !important;
        height: 240px !important;
    }
}