* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", Arial, sans-serif;
}

body {
    background-color: #c70000; /* 改为喜庆大红色 */
    color: #5d0000;
    line-height: 1.6;
    background-image: 
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffd700' fill-opacity='0.2'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(to bottom, #c70000, #a00000); /* 改为大红色渐变 */
    position: relative;
    overflow-x: hidden;
}

/* 添加喜庆装饰元素 */
body::before, body::after {
    content: "";
    position: fixed;
    width: 150px;
    height: 150px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath fill='%23ffd700' fill-opacity='0.2' d='M30 0 L60 30 L30 60 L0 30 Z'/%3E%3C/svg%3E"); /* 金色图案 */
    z-index: -1;
}

body::before {
    top: -30px;
    left: -30px;
    transform: rotate(15deg);
}

body::after {
    bottom: -30px;
    right: -30px;
    transform: rotate(-15deg);
}

.container {
    max-width: 500px;
    margin: 20px auto; /* 修改为水平居中 */
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.6); /* 半透明背景 */
    backdrop-filter: blur(5px);
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

/* 添加容器装饰 */
.container::before, .container::after {
    content: "囍";
    position: absolute;
    font-size: 100px;
    color: rgba(200, 0, 0, 0.05); /* 调整为大红色 */
    font-family: SimSun, serif;
    line-height: 1;
    z-index: 0;
    pointer-events: none;
}

.container::before {
    top: 10px;
    right: -20px;
    transform: rotate(15deg);
}

.container::after {
    bottom: -30px;
    left: -20px;
    transform: rotate(-10deg);
}

/* 标题样式 */
.main-title,
.sub-title {
    color: #d50000; /* 喜庆红色 */
    text-align: center;
    text-shadow: 1px 1px 3px rgba(255, 215, 0, 0.5); /* 加强金色光晕 */
    position: relative;
    z-index: 1;
}

.main-title {
    font-size: 36px;
    margin-bottom: 5px;
    font-weight: bold;
    position: relative;
}

.main-title::before, .main-title::after {
    content: "❀";
    color: rgba(213, 0, 0, 0.2);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
}

.main-title::before {
    left: 15%;
}

.main-title::after {
    right: 15%;
}

.sub-title {
    font-size: 24px;
    margin-bottom: 15px;
}

.slogan {
    color: #c62828;
    text-align: center;
    margin-bottom: 20px;
    font-size: 16px;
    position: relative;
}

/* 统计信息样式 */
.stats {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 25px 0;
    background-color: rgba(255, 255, 255, 0.7); /* 半透明背景 */
    padding: 6px 4px;
    border-radius: 15px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d50000' fill-opacity='0.03'%3E%3Cpath d='M0 0h20v20H0V0zm10 17.5c4.142 0 7.5-3.358 7.5-7.5 0-4.142-3.358-7.5-7.5-7.5-4.142 0-7.5 3.358-7.5 7.5 0 4.142 3.358 7.5 7.5 7.5zM20 20v20h20V20H20zm10 17.5c4.142 0 7.5-3.358 7.5-7.5 0-4.142-3.358-7.5-7.5-7.5-4.142 0-7.5 3.358-7.5 7.5 0 4.142 3.358 7.5 7.5 7.5z'/%3E%3C/g%3E%3C/svg%3E");
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.user-icon, .trophy-icon {
    width: 24px;
    height: 24px;
    background-color: #ffd700;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.user-icon::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M12,12c2.21,0,4-1.79,4-4s-1.79-4-4-4s-4,1.79-4,4S9.79,12,12,12z M12,14c-2.67,0-8,1.34-8,4v2h16v-2C20,15.34,14.67,14,12,14z'/%3E%3C/svg%3E");
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.trophy-icon::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M19,5h-2V3H7v2H5C3.9,5,3,5.9,3,7v1c0,2.55,1.92,4.63,4.39,4.94c0.63,1.5,1.98,2.63,3.61,2.96V19H7v2h10v-2h-4v-3.1c1.63-0.33,2.98-1.46,3.61-2.96C19.08,12.63,21,10.55,21,8V7C21,5.9,20.1,5,19,5z M5,8V7h2v3.82C5.84,10.4,5,9.3,5,8z M19,8c0,1.3-0.84,2.4-2,2.82V7h2V8z'/%3E%3C/svg%3E");
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.stat-value {
    color: #e53935; /* 红色值 */
    font-weight: bold;
    font-size: 16px;
}

.stat-label {
    color: #880e4f;
    font-size: 13px;
}

/* 促销框样式 */
.promo-box {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 240, 240, 0.7)); /* 半透明背景 */
    border: 2px solid #ffd700; /* 金色边框 */
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d50000' fill-opacity='0.05'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* 添加灯笼装饰 🏮*/
.promo-title::before, .promo-title::after {
    content: "";
    position: absolute;
    font-size: 20px;
    top: 0;
}

.promo-title::before {
    left: 10px;
}

.promo-title::after {
    right: 10px;
}

.promo-title {
    font-size: 24px;
    margin-bottom: 15px;
    color: #c70000; /* 喜庆大红 */
    position: relative;
    z-index: 1;
}

.counter-label {
    font-size: 18px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.highlight {
    color: #c70000; /* 喜庆大红 */
    font-size: 36px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.deadline-text {
    color: #880e4f;
    font-size: 14px;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

/* 倒计时样式 */
.countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    position: relative;
    z-index: 1;
}

.time-block {
    text-align: center;
}

.time {
    background: linear-gradient(to bottom, #c70000, #990000); /* 喜庆大红渐变 */
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    padding: 10px;
    min-width: 60px;
    border-radius: 8px;
    border: 2px solid #ffd700; /* 金色边框 */
    position: relative;
    overflow: hidden;
}

.time::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
}

#hours, #minutes, #seconds {
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    position: relative;
}

.time-label {
    font-size: 12px;
    color: #880e4f;
    margin-top: 5px;
    font-weight: bold;
}

.separator {
    font-size: 24px;
    font-weight: bold;
    color: #b71c1c;
}

/* 按钮样式 */
.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.btn {
    border: none;
    border-radius: 15px;
    padding: 15px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(255, 215, 0, 0.5);
    transition: all 0.3s ease;
}

/* 添加按钮纹理 */
.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M0 0h20v20H0V0zm10 17.5c4.142 0 7.5-3.358 7.5-7.5 0-4.142-3.358-7.5-7.5-7.5-4.142 0-7.5 3.358-7.5 7.5 0 4.142 3.358 7.5 7.5 7.5zM20 20v20h20V20H20zm10 17.5c4.142 0 7.5-3.358 7.5-7.5 0-4.142-3.358-7.5-7.5-7.5-4.142 0-7.5 3.358-7.5 7.5 0 4.142 3.358 7.5 7.5 7.5z'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    z-index: 0;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.yellow-btn {
    background: linear-gradient(to bottom, #ffd700, #e0b000); /* 更深的金色 */
    color: #5d0000;
}

.red-btn {
    background: linear-gradient(to bottom, #c70000, #990000); /* 喜庆大红 */
    color: #fff;
}

.btn-subtext {
    font-size: 14px;
    font-weight: normal;
    margin-top: 5px;
    position: relative;
    z-index: 1;
}

.lightning-icon, .gift-icon {
    position: absolute;
    right: 20px;
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 215, 0, 0.5);
    z-index: 1;
}

.lightning-icon::after {
    content: "⚡";
    font-size: 16px;
}

/* .gift-icon::after {
    content: "🎁";
    font-size: 16px;
} */

.gift-icon::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E91E63' d='M20,6h-2.18c0.11-0.31,0.18-0.65,0.18-1c0-1.66-1.34-3-3-3c-1.05,0-1.96,0.54-2.5,1.35L12,4.02l-0.5-0.67 C10.96,2.54,10.05,2,9,2C7.34,2,6,3.34,6,5c0,0.35,0.07,0.69,0.18,1H4C2.9,6,2,6.9,2,8v10c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8 C22,6.9,21.1,6,20,6z M15,4c0.55,0,1,0.45,1,1s-0.45,1-1,1s-1-0.45-1-1S14.45,4,15,4z M9,4c0.55,0,1,0.45,1,1S9.55,6,9,6 S8,5.55,8,5S8.45,4,9,4z M20,18H4v-3h2v1h2v-1h8v1h2v-1h2V18z M20,13h-2v-1h-2v1H8v-1H6v1H4V8h5.08L7,10.83L8.62,12L12,7.4 l3.38,4.6L17,10.83L14.92,8H20V13z'/%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 获奖名单样式 */
.recent-winners {
    background-color: rgba(255, 255, 255, 0.7); /* 半透明背景 */
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ffd700;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.winners-title {
    color: #c70000; /* 喜庆大红 */
    font-size: 20px;
    text-align: center;
    margin-bottom: 15px;
}

.winners-list {
    height: 60px;
    overflow: hidden;
    color: #5d0000;
    text-align: center;
}

/* 页脚样式 */
footer {
    text-align: center;
    color: #880e4f;
    font-size: 12px;
    padding: 10px 0;
}

/* 手机模式响应式样式 */
@media (max-width: 576px) {
    .container {
        margin: 20px 15px; /* 确保手机模式下有左右外边距 */
        width: auto; /* 允许容器适应屏幕宽度 */
        max-width: 100%; /* 防止溢出屏幕 */
    }
}