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

body {
    /* 确保字体已导入或为系统字体 */
    font-family: '汉仪尚巍手书', 'Microsoft YaHei', sans-serif;
    /* 动态渐变背景 */
    background: linear-gradient(135deg, #c70012 0%, #DB2A2D 50%, #c70012 100%);
    background-size: 400% 400%;
    animation: gradientShift 8s ease-in-out infinite;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    perspective: 1000px;
    overflow: hidden;
    position: relative;
}

/* 星空背景效果 */
.starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.starfield::before,
.starfield::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 
        100px 100px rgba(255, 255, 255, 0.6),
        200px 150px rgba(255, 255, 255, 0.4),
        300px 80px rgba(255, 255, 255, 0.7),
        400px 200px rgba(255, 255, 255, 0.5),
        500px 120px rgba(255, 255, 255, 0.8),
        150px 300px rgba(255, 255, 255, 0.6),
        250px 350px rgba(255, 255, 255, 0.4),
        350px 250px rgba(255, 255, 255, 0.7),
        450px 400px rgba(255, 255, 255, 0.5),
        50px 400px rgba(255, 255, 255, 0.8);
    animation: starField 20s linear infinite;
}

.starfield::after {
    top: -100vh;
    animation-delay: 10s;
}

/* 光线扫过效果 */
.light-sweep {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.light-sweep::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 30%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 215, 0, 0.3) 50%,
        transparent 70%
    );
    animation: lightSweep 6s ease-in-out infinite;
    animation-delay: 2s;
}

.container {
    text-align: center;
    padding: 3rem; /* 增加内边距 */
    background-color: rgba(10, 10, 26, 0.7); /* 稍微增加背景透明度 */
    border-radius: 20px;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.3); /* 调整阴影效果 */
    backdrop-filter: blur(15px); /* 增加模糊度 */
    transform-style: preserve-3d;
    animation: hologram 3s infinite;
    border: 2px solid rgba(255, 215, 0, 0.5); /* 添加金色边框 */
}

.title {
    font-size: 3rem; /* 增加标题字号 */
    margin-bottom: 2.5rem; /* 调整下边距 */
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4); /* 调整文字阴影 */
    color: #FFD700; /* 设置标题颜色为金色 */
}

.countdown-container {
    display: flex;
    justify-content: center;
    gap: 2rem; /* 增加倒计时项之间的间距 */
    margin-bottom: 3rem; /* 调整下边距 */
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.number {
    font-family: 'D-DIN Exp', sans-serif;
    font-size: 5.5rem; /* 增大字号 */
    font-weight: 900;
    background: linear-gradient(45deg, #FFD700, #FFA500, #FF8C00, #FFD700);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding: 1.8rem 2rem;
    border-radius: 20px;
    min-width: 140px;
    display: inline-block;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-shadow: 
        0 0 40px rgba(255, 215, 0, 0.8),
        0 0 80px rgba(255, 215, 0, 0.4),
        0 0 120px rgba(255, 215, 0, 0.2);
    border: 2px solid rgba(255, 215, 0, 0.4);
    background-color: rgba(0, 0, 0, 0.3);
    
    /* 3D立体效果 */
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(5deg) rotateY(-5deg);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    
    /* 金属质感 */
    background-image: 
        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%),
        linear-gradient(-45deg, transparent 30%, rgba(255, 215, 0, 0.1) 50%, transparent 70%);
    background-size: 20px 20px, 15px 15px;
}

.number:hover {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1.15);
    background-color: rgba(255, 255, 255, 0.15);
    text-shadow: 
        0 0 60px rgba(255, 215, 0, 1),
        0 0 100px rgba(255, 215, 0, 0.6),
        0 0 140px rgba(255, 215, 0, 0.3);
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.4),
        0 0 50px rgba(255, 215, 0, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 215, 0, 0.7);
}

/* 数字更新动画 */
@keyframes numberUpdate {
    0% {
        transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) scale(1);
        filter: brightness(1);
    }
    25% {
        transform: perspective(1000px) rotateX(-10deg) rotateY(10deg) scale(1.05);
        filter: brightness(1.5);
        text-shadow: 0 0 80px rgba(255, 215, 0, 1);
    }
    50% {
        transform: perspective(1000px) rotateX(15deg) rotateY(-15deg) scale(1.1);
        filter: brightness(2);
    }
    75% {
        transform: perspective(1000px) rotateX(-5deg) rotateY(5deg) scale(1.05);
        filter: brightness(1.2);
    }
    100% {
        transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) scale(1);
        filter: brightness(1);
    }
}

.label {
    font-size: 1.5rem; /* 增加标签字号 */
    margin-top: 0.8rem; /* 调整上边距 */
    color: rgba(255, 255, 255, 0.9); /* 调整标签颜色 */
}

.decorations {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem; /* 增加装饰之间的间距 */
    margin-top: 2rem; /* 添加上边距 */
}

.lantern {
    font-size: 4rem; /* 增加灯笼字号 */
    animation: lanternFloat 3s infinite ease-in-out;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.5)); /* 调整阴影效果 */
}

.lantern.left {
    animation-delay: -1s;
}

.message {
    font-size: 3.5rem;
    font-weight: bold;
    background: linear-gradient(45deg, #FFD700, #FFA500, #FF8C00, #FFD700);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 
        0 0 30px rgba(255, 215, 0, 0.9),
        0 0 60px rgba(255, 215, 0, 0.5);
    position: relative;
    z-index: 2;
    animation: glitch 4s infinite;
    transform-style: preserve-3d;
    transform: perspective(500px) rotateX(10deg);
    letter-spacing: 2px;
}

/* 传统装饰元素 */
.traditional-decorations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

/* 福字装饰 */
.fu-symbol {
    position: absolute;
    top: 15%;
    right: 10%;
    font-size: 4rem;
    color: #FFD700;
    font-weight: bold;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    animation: fuFloat 6s ease-in-out infinite;
    transform: rotate(-15deg);
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
}

/* 鞭炮装饰 */
.firecrackers {
    position: absolute;
    top: 25%;
    left: 8%;
    font-size: 3rem;
    animation: firecrackerBounce 2s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 100, 0, 0.7));
}

/* 桃花装饰 */
.peach-blossoms {
    position: absolute;
    bottom: 20%;
    left: 15%;
    font-size: 2.5rem;
    animation: blossomSway 4s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(255, 182, 193, 0.8));
}

/* 红包装饰 */
.red-envelope {
    position: absolute;
    bottom: 15%;
    right: 12%;
    font-size: 3rem;
    animation: envelopeFloat 5s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.6));
}

@keyframes swing {
    0%, 100% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
}

@media (max-width: 768px) {
    .container {
        padding: 1.5rem;
        margin: 1rem;
        border-radius: 15px;
    }

    .title {
        font-size: 2.2rem;
        margin-bottom: 1.5rem;
    }

    .countdown-container {
        flex-wrap: wrap;
        gap: 0.8rem;
        margin-bottom: 1.5rem;
    }

    .countdown-item {
        flex-basis: 45%;
    }
    
    .number {
        font-size: 3rem;
        min-width: unset;
        padding: 1rem;
        border-radius: 12px;
        transform: perspective(800px) rotateX(3deg) rotateY(-3deg);
    }
    
    .label {
        font-size: 1.1rem;
        margin-top: 0.4rem;
    }

    .decorations {
        gap: 1rem;
        margin-top: 1rem;
    }

    .lantern {
        font-size: 2.5rem;
    }

    .message {
        font-size: 1.8rem;
        letter-spacing: 1px;
    }
    
    /* 移动端隐藏部分装饰元素以提升性能 */
    .traditional-decorations {
        opacity: 0.7;
    }
    
    .fu-symbol {
        font-size: 3rem;
        top: 10%;
        right: 5%;
    }
    
    .firecrackers {
        font-size: 2.2rem;
        top: 20%;
        left: 3%;
    }
    
    .peach-blossoms {
        font-size: 2rem;
        bottom: 15%;
        left: 8%;
    }
    
    .red-envelope {
        font-size: 2.2rem;
        bottom: 10%;
        right: 5%;
    }
    
    /* 移动端减少动画复杂度 */
    .starfield::before,
    .starfield::after {
        box-shadow: 
            50px 50px rgba(255, 255, 255, 0.6),
            100px 75px rgba(255, 255, 255, 0.4),
            150px 40px rgba(255, 255, 255, 0.7),
            200px 100px rgba(255, 255, 255, 0.5);
    }
}

@media (max-width: 480px) {
    .container {
        padding: 1rem;
        margin: 0.5rem;
    }
    
    .title {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }
    
    .countdown-item {
        flex-basis: 40%;
    }
    
    .number {
        font-size: 2.5rem;
        padding: 0.8rem;
    }
    
    .label {
        font-size: 1rem;
    }
    
    .message {
        font-size: 1.5rem;
    }
    
    .lantern {
        font-size: 2rem;
    }
    
    /* 超小屏幕简化装饰 */
    .traditional-decorations {
        opacity: 0.5;
    }
}