/**
 * 主题样式文件 - 抽奖系统主题样式
 * 包含不同用户状态对应的主题风格
 * 优先级：中等，可覆盖基础样式，但低于状态专用样式
 */

/* ===== 正常用户主题 - 橙色风格 ===== */
.user-theme .mask {
    background: rgba(255, 123, 84, 0.8); /* 橙色半透明背景 */
}

.user-theme .result-modal {
    background: linear-gradient(135deg, #ffffff 0%, #fff5f0 100%);
    border: 3px solid #ff7b54;
    box-shadow: 0 20px 60px rgba(255, 123, 84, 0.4);
}

.user-theme .modal-content h3 {
    color: #ff7b54;
    background: linear-gradient(135deg, #ff7b54, #ff625b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.user-theme #closeModal {
    background: linear-gradient(270deg, #FF7B54, #FF625B);
    box-shadow: 0 4px 15px rgba(255, 123, 84, 0.3);
}

/* ===== 积分不足用户主题 - 橙色警告风格 ===== */
.insufficient-points-theme .mask {
    background: rgba(255, 165, 0, 0.8); /* 橙色警告半透明背景 */
}

.insufficient-points-theme .result-modal {
    background: linear-gradient(135deg, #fffaf0 0%, #ffe8cc 100%);
    border: 3px solid #ffa500;
    box-shadow: 0 20px 60px rgba(255, 165, 0, 0.4);
}

.insufficient-points-theme .modal-content h3 {
    color: #ffa500;
    background: linear-gradient(135deg, #ffa500, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.insufficient-points-theme .modal-content p {
    color: #d2691e;
}

.insufficient-points-theme #closeModal {
    background: linear-gradient(270deg, #FFA500, #FF8C00);
    box-shadow: 0 4px 15px rgba(255, 165, 0, 0.3);
}

/* ===== 未登录用户主题 - 灰色风格 ===== */
.guest-theme .mask {
    background: rgba(108, 117, 125, 0.8); /* 灰色半透明背景 */
}

.guest-theme .result-modal {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 3px solid #adb5bd;
    box-shadow: 0 20px 60px rgba(108, 117, 125, 0.4);
}

.guest-theme .modal-content h3 {
    color: #6c757d;
    background: linear-gradient(135deg, #6c757d, #adb5bd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.guest-theme .modal-content p {
    color: #495057;
}

.guest-theme #closeModal {
    background: linear-gradient(270deg, #6C757D, #ADB5BD);
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

/* ===== 抽奖成功主题 - 金色庆祝风格 ===== */
.success-theme .mask {
    background: rgba(255, 215, 0, 0.8); /* 金色半透明背景 */
}

.success-theme .result-modal {
    background: linear-gradient(135deg, #fff9e6 0%, #ffecb3 100%);
    border: 3px solid #ffd700;
    box-shadow: 0 20px 60px rgba(255, 215, 0, 0.4);
}

.success-theme .modal-content h3 {
    color: #ffd700;
    background: linear-gradient(135deg, #ffd700, #ffc107);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.success-theme .modal-content p {
    color: #b8860b;
}

.success-theme #closeModal {
    background: linear-gradient(270deg, #FFD700, #FFC107);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .user-theme .result-modal,
    .insufficient-points-theme .result-modal,
    .guest-theme .result-modal,
    .success-theme .result-modal {
        max-width: 80%;
        width: 80%;
        height: 70%;
        padding: 30px 20px;
    }
}

@media (max-width: 480px) {
    .user-theme .result-modal,
    .insufficient-points-theme .result-modal,
    .guest-theme .result-modal,
    .success-theme .result-modal {
        max-width: 90%;
        width: 90%;
        height: 80%;
        padding: 20px 15px;
    }
}