/* ================== C端展示样式 ================== */
        html, body {
            margin: 0; padding: 0; width: 100%; height: 100%;
            overflow: hidden; touch-action: none; 
            background-color: #05050b; 
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
            position: relative;
        }

        /* 暗度调节遮罩层 */
        .bg-darkness-overlay {
            position: absolute; inset: 0; background: #000; z-index: 1; pointer-events: none;
            transition: opacity 0.2s ease;
        }

        /* 宇宙星光图层 */
        .stars-overlay {
            position: absolute; inset: 0; pointer-events: none; z-index: 2;
            background-image: 
                radial-gradient(2px 2px at 20px 30px, #ffffff, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), rgba(0,0,0,0)),
                radial-gradient(2px 2px at 50px 160px, rgba(255,255,255,0.9), rgba(0,0,0,0)),
                radial-gradient(2px 2px at 90px 40px, #ffffff, rgba(0,0,0,0)),
                radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.7), rgba(0,0,0,0)),
                radial-gradient(2px 2px at 160px 120px, #ffffff, rgba(0,0,0,0)),
                radial-gradient(circle at 20% 60%, rgba(76, 29, 149, 0.35), transparent 50%),
                radial-gradient(circle at 80% 30%, rgba(25, 118, 210, 0.35), transparent 50%);
            background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat;
            background-size: 200px 200px, 250px 250px, 300px 300px, 150px 150px, 220px 220px, 280px 280px, 100% 100%, 100% 100%;
        }

        /* 飘动的文字 */
        .floating-word {
            position: absolute; bottom: -50px; font-weight: bold;
            cursor: pointer; pointer-events: auto; white-space: nowrap; 
            /* 基础发光效果 */
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
            animation: floatUp linear forwards; transition: transform 0.1s;
            z-index: 5;
            font-family: 'Ma Shan Zheng', 'Long Cang', 'ZCOOL QingKe HuangYou', 'ZCOOL XiaoWei', cursive;
            /* 字体渲染优化 */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            /* 提升低端设备性能 */
            will-change: transform;
            transform: translateZ(0);
        }
        
        /* 高清屏优化（iPhone、旗舰安卓） */
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
            .floating-word {
                text-shadow: 0 0 10px rgba(255, 255, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
            }
        }
        
        /* 普通屏优化（中低端安卓） */
        @media (-webkit-min-device-pixel-ratio: 1) and (-webkit-max-device-pixel-ratio: 1.99), 
               (max-resolution: 191dpi) {
            .floating-word {
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            }
        }
        
        .floating-word:active { transform: scale(0.9) !important; }

        /* 动画：文字逐渐放大 */
        @keyframes floatUp {
            0% { transform: translateY(0) scale(0.1) rotate(-5deg); opacity: 0; }
            15% { opacity: 1; transform: translateY(-15vh) scale(0.8) rotate(-3deg); }
            85% { opacity: 1; transform: translateY(-85vh) scale(1.8) rotate(5deg); }
            100% { transform: translateY(-110vh) scale(2.3) rotate(10deg); opacity: 0; }
        }

        /* 动画：文字大小固定 */
        @keyframes floatUpFixed {
            0% { transform: translateY(0) scale(0.1) rotate(-5deg); opacity: 0; }
            15% { opacity: 1; transform: translateY(-15vh) scale(1) rotate(-3deg); }
            85% { opacity: 1; transform: translateY(-85vh) scale(1) rotate(5deg); }
            100% { transform: translateY(-110vh) scale(1) rotate(10deg); opacity: 0; }
        }

        /* 弹窗遮罩 */
        #image-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center;
            opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
        }
        #image-overlay.active { opacity: 1; pointer-events: auto; }

        /* 拍立得相框 */
        .polaroid-frame {
            background-color: #fffafb; 
            background-image: radial-gradient(#ffd1dc 1.5px, transparent 1.5px);
            background-size: 16px 16px; 
            padding: 10px 10px 15px 10px;
            border-radius: 8px; 
            border: 2px solid #fff; 
            box-shadow: 0 15px 35px rgba(255, 105, 180, 0.25), 0 0 20px rgba(255, 182, 193, 0.15);
            transform: scale(0.5) rotate(-15deg); transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);   
            width: 60vw; max-width: 280px; display: flex; flex-direction: column; align-items: center; position: relative; 
            min-height: 120px; 
            justify-content: center;
        }
        .polaroid-frame::before {
            content: ''; position: absolute; top: -15px; left: 50%; transform: translateX(-50%) rotate(-2deg);
            width: 120px; height: 35px; background: rgba(255, 192, 203, 0.6); box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            z-index: 10; border-left: 2px dashed rgba(255, 255, 255, 0.6); border-right: 2px dashed rgba(255, 255, 255, 0.6);
        }
        .polaroid-frame::after {
            content: '❤'; position: absolute; bottom: 25px; right: 20px; color: #ff4d6d; font-size: 22px;
            opacity: 0.7; transform: rotate(-15deg); text-shadow: 0 0 8px rgba(255, 77, 109, 0.5); pointer-events: none;
        }
        #image-overlay.active .polaroid-frame { transform: scale(1) rotate(2deg); }
        
        /* 图片容器，确保正方形 */
        .img-container {
            width: 100%;
            position: relative;
            z-index: 2;
            border-radius: 4px;
            overflow: hidden;
            border: 1px solid rgba(0,0,0,0.05);
        }
        
        .img-container::before {
            content: '';
            display: block;
            padding-top: 100%;
        }
        
        .img-container img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
        }

        /* 打字机文字 */
        .typewriter-text {
            margin-top: 15px; color: #d81159; font-size: 1.1rem; text-align: center;
            font-family: "KaiTi", "楷体", serif; font-weight: bold; line-height: 1.6;
            position: relative; z-index: 2; text-shadow: 1px 1px 0px rgba(255,255,255,0.8); 
            padding: 0 10px; min-height: 3.2rem; display: flex; justify-content: center; align-items: center;
        }
        .cursor { display: inline-block; width: 2px; background-color: #d81159; margin-left: 2px; animation: blink 1s infinite; }
        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

        .close-tip {
            margin-top: 35px; color: rgba(255,255,255,0.7); font-size: 1rem; letter-spacing: 2px;
            animation: pulseHint 2s infinite;
        }
        @keyframes pulseHint { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }

        /* ================== 开屏界面样式 ================== */
        #splash-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(ellipse at center, #1a1a2e 0%, #0a0a0f 100%);
            z-index: 99999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: opacity 0.8s ease, visibility 0.8s ease;
        }
        
        #splash-screen.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        
        .splash-gift-icon {
            font-size: 80px;
            margin-bottom: 30px;
            animation: giftBounce 2s ease-in-out infinite;
            filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
        }
        
        @keyframes giftBounce {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-20px) scale(1.1); }
        }
        
        .splash-title {
            font-size: 28px;
            color: #fff;
            font-weight: bold;
            margin-bottom: 10px;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
            letter-spacing: 3px;
            font-family: 'Ma Shan Zheng', 'Long Cang', 'ZCOOL QingKe HuangYou', 'ZCOOL XiaoWei', cursive;
        }
        
        .splash-subtitle {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: 40px;
            letter-spacing: 1px;
            font-family: 'Ma Shan Zheng', 'Long Cang', 'ZCOOL QingKe HuangYou', 'ZCOOL XiaoWei', cursive;
        }
        
        .splash-btn {
            padding: 15px 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            border: none;
            border-radius: 30px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
            transition: all 0.3s ease;
            letter-spacing: 2px;
            font-family: 'Ma Shan Zheng', 'Long Cang', 'ZCOOL QingKe HuangYou', 'ZCOOL XiaoWei', cursive;
        }
        
        .splash-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
        }
        
        .splash-btn:active {
            transform: translateY(-1px);
        }