/* === 全局变量定义 === */
:root {
    --primary-red: #8B0000;
    --accent-gold: #FFD700;
    --deep-gold: #FF8C00;
    --glass-bg: rgba(0, 0, 0, 0.6);
}

/* === 基础设置 === */
body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden; background-color: var(--primary-red);
    font-family: "STKaiti", "KaiTi", serif;
    -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
}

/* === 烟花特效层 === */
#fireworks-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1;
}
.firework-particle {
    position: absolute; width: 4px; height: 4px; border-radius: 50%;
    /* 使用 CSS 变量接收 JS 计算的位移值 */
    transform: translate(var(--tx), var(--ty));
    opacity: 0;
    animation: explode 1.2s ease-out forwards;
}
@keyframes explode {
    0% { transform: translate(0, 0); opacity: 1; }
    50% { opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)); opacity: 0; }
}

/* === 主界面卡片 === */
.lottery-wrapper {
    position: relative; z-index: 2;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    width: 100vw; height: 100dvh;
}

.main-card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--accent-gold);
    border-radius: 24px;
    padding: 40px 20px;
    width: 85%; max-width: 400px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.title-gold {
    font-size: 2.2rem; margin: 10px 0;
    background: linear-gradient(to bottom, #FFF720, var(--accent-gold), var(--deep-gold));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* 金色渐变文字 */
}

.draw-btn {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #8B0000; border: none;
    padding: 16px 45px; border-radius: 50px;
    font-size: 1.4rem; font-weight: bold;
    cursor: pointer; transition: 0.3s; 
    animation: pulse 2s infinite; /* 呼吸动画 */
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}
.draw-btn:disabled { opacity: 0.6; animation: none; filter: grayscale(0.5); }

@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,215,0,0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(255,215,0,0); }
    100% { transform: scale(1); }
}

/* === 弹窗区域 === */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    display: none; /* 默认隐藏 */
    justify-content: center; align-items: center;
    z-index: 1000;
}
/* JS 添加此 active 类后显示弹窗 */
.modal-overlay.active { display: flex !important; }

/* === style.css 中找到此处进行替换 === */

/* 截图卡片样式 - 已加宽 */
#captureArea {
    background: linear-gradient(145deg, #9b0000, #600000);
    border: 3px solid var(--accent-gold);
    border-radius: 24px; /*稍微增大圆角*/
    
    /* 修改点 A: 调整内边距 */
    /* 上下减少到 30px，左右增加到 40px，让视觉更横向 */
    padding: 30px 40px; 
    
    /* 修改点 B: 调整宽度限制 */
    /* 宽度占比提高到 92%，最大宽度增加到 450px */
    width: 92%; 
    max-width: 450px;
    
    text-align: center;
    position: relative;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.25); /* 增强一点光晕 */
    
    /* 确保截图时背景不透明 */
    background-clip: padding-box;
}
/* 右下角 2026 水印 */
#captureArea::after {
    content: "2026";
    position: absolute; bottom: 10px; right: 15px;
    color: rgba(255,255,255,0.1);
    font-size: 3rem; font-weight: bold; font-style: italic;
    pointer-events: none;
}

.modal-content-wrapper {
    transform: scale(0.8); opacity: 0;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 弹性弹出动画 */
}
.modal-overlay.active .modal-content-wrapper { transform: scale(1); opacity: 1; }

/* === style.css 中找到此处进行替换 === */

.prize-title { 
    color: #fff; 
    font-size: 1.1rem; /* 稍微加大一点称呼 */
    margin-bottom: 2px; /* 减少与奖品的间距 */
    opacity: 0.9; 
    display: block; 
}

.prize-text {
    font-size: 2.2rem; /* 稍微加大奖品文字 */
    color: var(--accent-gold);
    
    /* 修改点 C: 减少奖品文字上下的边距 */
    margin: 10px 0 15px 0; 
    
    display: block; font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    min-height: 50px; /* 稍微减小最小高度 */
    display: flex; align-items: center; justify-content: center;
}
/* === 弹窗按钮组 === */
.btn-group { display: flex; gap: 10px; justify-content: center; margin-top: 25px; }
.action-btn { border: none; padding: 10px 20px; border-radius: 20px; font-size: 0.9rem; cursor: pointer; font-weight: bold; }
.close-btn { background: rgba(255,255,255,0.2); color: #fff; }
.save-btn { background: var(--accent-gold); color: #8B0000; display: flex; align-items: center; gap: 5px;}

/* === 音乐按钮 === */
#musicBtn {
    position: fixed; top: 20px; right: 20px; z-index: 100;
    border: 1px solid var(--accent-gold); border-radius: 50%;
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.3); color: var(--accent-gold);
}
@keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }