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

/* 马图标样式 */
.horse-icon {
    vertical-align: middle;
    margin: 0 5px;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.8));
}

.btn-horse-icon {
    vertical-align: middle;
    margin-right: 5px;
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 0 3px rgba(139, 0, 0, 0.5));
}

/* 全局GPU加速 */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: #080810;
    min-height: 100vh;
    font-family: 'Noto Serif SC', 'Microsoft YaHei', sans-serif;
    overflow: hidden;
    position: relative;
    /* 强制GPU渲染整个页面 */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 公司头部 */
.company-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 15px 30px;
    background: linear-gradient(180deg, rgba(139, 0, 0, 0.9) 0%, rgba(139, 0, 0, 0.6) 50%, transparent 100%);
    z-index: 100;
    pointer-events: none;
}

.company-logo {
    width: 50px;
    height: 50px;
    background: linear-gradient(145deg, #ffd700, #ff8c00);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), inset 0 0 15px rgba(255, 255, 255, 0.3);
    animation: logoGlow 3s ease-in-out infinite;
}

.logo-horse {
    font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
    font-size: 32px;
    color: #8b0000;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

@keyframes logoGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), inset 0 0 15px rgba(255, 255, 255, 0.3); }
    50% { box-shadow: 0 0 35px rgba(255, 215, 0, 0.9), inset 0 0 20px rgba(255, 255, 255, 0.5); }
}

.company-name {
    font-family: 'Noto Serif SC', serif;
    font-size: 24px;
    color: #ffd700;
    font-weight: 700;
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 2px 2px 4px rgba(0,0,0,0.5);
}

/* 中国红渐变背景 - 顶部深底部亮 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 50% 80%, rgba(255, 150, 80, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 0% 70%, rgba(220, 80, 40, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 70%, rgba(220, 80, 40, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(180, 50, 30, 0.4) 0%, transparent 60%),
        linear-gradient(180deg, #4a0a08 0%, #6d1510 25%, #8b2018 50%, #a83525 75%, #c04530 100%);
    z-index: 0;
    transform: translateZ(0);
    will-change: transform;
}

/* 动态光晕背景 - 底部金色光晕（降低强度，保持红色主调） */
body::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%) translateZ(0);
    background:
        radial-gradient(circle at 50% 70%, rgba(255, 180, 100, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 30% 60%, rgba(255, 150, 80, 0.1) 0%, transparent 35%),
        radial-gradient(circle at 70% 60%, rgba(255, 150, 80, 0.1) 0%, transparent 35%),
        radial-gradient(circle at 50% 90%, rgba(255, 200, 120, 0.12) 0%, transparent 45%);
    animation: bgPulse 6s ease-in-out infinite;
    z-index: 0;
    will-change: opacity;
}

@keyframes bgPulse {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1) translateZ(0); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) translateZ(0); }
}

/* 背景特效层 */
.effects-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    transform: translateZ(0);
    contain: strict;
    isolation: isolate;
}

/* 星星效果 - 金色更亮 */
.stars {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateZ(0);
    contain: layout style;
}

.star {
    position: absolute;
    background: #ffd700;
    border-radius: 50%;
    animation: twinkle var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
    box-shadow: 0 0 8px rgba(255, 215, 0, 1), 0 0 15px rgba(255, 215, 0, 0.6);
    will-change: opacity, transform;
    transform: translateZ(0);
    contain: layout style;
}

.star.big {
    box-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 40px rgba(255, 215, 0, 0.7), 0 0 60px rgba(255, 200, 0, 0.4);
}

/* 十字星光效果 */
.star.cross::before,
.star.cross::after {
    content: '';
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 1), transparent);
    top: 50%;
    left: 50%;
}

.star.cross::before {
    width: 30px;
    height: 3px;
    transform: translate(-50%, -50%);
}

.star.cross::after {
    width: 3px;
    height: 30px;
    transform: translate(-50%, -50%);
}

@keyframes twinkle {
    0%, 100% { opacity: 0.4; transform: scale(0.8) translateZ(0); }
    50% { opacity: 1; transform: scale(1.5) translateZ(0); }
}

/* 烟花/爆竹效果 */
.meteor {
    position: absolute;
    width: 3px;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255, 215, 0, 1), rgba(255, 50, 50, 0.8), transparent);
    animation: fireworkRise var(--duration) ease-out infinite;
    animation-delay: var(--delay);
    opacity: 0;
    border-radius: 2px;
    transform: translateZ(0);
    will-change: transform, opacity;
}

/* 烟花爆炸粒子 */
.meteor::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 6px;
    height: 6px;
    background: #ffd700;
    border-radius: 50%;
    transform: translateX(-50%) scale(0);
    box-shadow: 0 0 20px #ffd700, 0 0 40px #ff4444;
    animation: meteorBurst var(--duration) ease-out infinite;
    animation-delay: var(--delay);
}

@keyframes fireworkRise {
    0% { transform: translateY(100vh) scale(1) translateZ(0); opacity: 0; }
    20% { opacity: 1; }
    60% { opacity: 1; transform: translateY(20vh) scale(1) translateZ(0); }
    100% { transform: translateY(-10vh) scale(0) translateZ(0); opacity: 0; }
}

@keyframes meteorBurst {
    0%, 60% { transform: translateX(-50%) scale(0); opacity: 0; }
    70% { transform: translateX(-50%) scale(3); opacity: 1; }
    100% { transform: translateX(-50%) scale(0); opacity: 0; }
}

/* 旋转祥云光线（GPU优化） */
.light-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%) translateZ(0);
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 215, 0, 0.06) 15deg,
        transparent 30deg,
        transparent 60deg,
        rgba(255, 50, 50, 0.05) 75deg,
        transparent 90deg,
        transparent 120deg,
        rgba(255, 180, 0, 0.04) 135deg,
        transparent 150deg
    );
    animation: rotateRays 45s linear infinite;
    will-change: transform;
}

/* 第二层光线 - 反向旋转 */
.light-rays::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(
        from 45deg,
        transparent 0deg,
        rgba(255, 100, 50, 0.03) 20deg,
        transparent 40deg,
        transparent 90deg,
        rgba(255, 215, 0, 0.04) 110deg,
        transparent 130deg
    );
    animation: rotateRaysReverse 60s linear infinite;
    transform: translateZ(0);
}

@keyframes rotateRays {
    to { transform: translate(-50%, -50%) rotate(360deg) translateZ(0); }
}

@keyframes rotateRaysReverse {
    to { transform: rotate(-360deg) translateZ(0); }
}

/* 发光球体 - 红金色调（GPU优化） */
.glow-orbs {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateZ(0);
}

.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    animation: orbFloat var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* 脉冲光环 */
.glow-orb::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    background: inherit;
    filter: blur(30px);
    transform: translate(-50%, -50%) scale(0.8);
    animation: orbPulse 4s ease-in-out infinite;
    opacity: 0.5;
}

@keyframes orbFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.5; }
    25% { transform: translate3d(20px, -30px, 0) scale(1.05); opacity: 0.6; }
    50% { transform: translate3d(40px, -50px, 0) scale(1.1); opacity: 0.7; }
    75% { transform: translate3d(20px, -30px, 0) scale(1.05); opacity: 0.6; }
}

@keyframes orbPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }
}

/* 底部红光 - 更亮 */
.bottom-glow {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    width: 120%;
    height: 500px;
    background: radial-gradient(ellipse at center bottom, 
        rgba(255, 80, 80, 0.5) 0%, 
        rgba(255, 180, 0, 0.3) 30%,
        rgba(255, 100, 50, 0.15) 50%,
        transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: bottomGlowPulse 4s ease-in-out infinite;
    will-change: opacity, transform;
}

/* 底部光线扫描 */
.bottom-glow::before {
    content: '';
    position: absolute;
    bottom: 80px;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 215, 0, 0.6) 20%,
        rgba(255, 215, 0, 1) 50%,
        rgba(255, 215, 0, 0.6) 80%,
        transparent 100%);
    animation: scanLine 4s ease-in-out infinite;
    filter: blur(2px);
    transform: translateZ(0);
}

@keyframes bottomGlowPulse {
    0%, 100% { opacity: 0.8; transform: translateX(-50%) scaleX(1) translateZ(0); }
    50% { opacity: 1; transform: translateX(-50%) scaleX(1.2) translateZ(0); }
}

@keyframes scanLine {
    0%, 100% { opacity: 0; transform: scaleX(0.3) translateZ(0); }
    50% { opacity: 1; transform: scaleX(1) translateZ(0); }
}

/* 顶部金光 - 更亮 */
.top-glow {
    position: fixed;
    top: -150px;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    width: 100%;
    height: 500px;
    background: radial-gradient(ellipse at center top, 
        rgba(255, 215, 0, 0.45) 0%, 
        rgba(255, 200, 0, 0.25) 30%,
        rgba(255, 150, 50, 0.1) 50%,
        transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: topGlowPulse 5s ease-in-out infinite;
    will-change: opacity;
}

/* 顶部光芒射线 */
.top-glow::before {
    content: '';
    position: absolute;
    top: 180px;
    left: 50%;
    width: 4px;
    height: 100px;
    background: linear-gradient(to bottom, rgba(255, 215, 0, 0.6), transparent);
    transform: translateX(-50%) translateZ(0);
    filter: blur(3px);
    animation: rayDrop 3s ease-in-out infinite;
}

.top-glow::after {
    content: '';
    position: absolute;
    top: 150px;
    left: 50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, transparent 70%);
    transform: translateX(-50%) translateZ(0);
    animation: centerGlow 4s ease-in-out infinite;
}

@keyframes topGlowPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

@keyframes rayDrop {
    0%, 100% { opacity: 0; height: 50px; }
    50% { opacity: 1; height: 120px; }
}

@keyframes centerGlow {
    0%, 100% { transform: translateX(-50%) scale(0.8) translateZ(0); opacity: 0.5; }
    50% { transform: translateX(-50%) scale(1.2) translateZ(0); opacity: 1; }
}

/* 边框发光效果 - 更亮 */
.border-glow {
    position: fixed;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 215, 0, 0.5) 15%,
        rgba(255, 215, 0, 1) 50%,
        rgba(255, 215, 0, 0.5) 85%,
        transparent 100%);
    z-index: 5;
    transform: translateZ(0);
    will-change: opacity;
}

.border-glow.border-top {
    top: 0;
    animation: borderPulse 3s ease-in-out infinite;
}

.border-glow.border-bottom {
    bottom: 0;
    animation: borderPulse 3s ease-in-out infinite 1.5s;
}

.border-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    filter: blur(12px);
    opacity: 0.8;
}

@keyframes borderPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* 光斑效果 */
.light-spots {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateZ(0);
}

.light-spot {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
    animation: spotFloat var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
    will-change: transform, opacity;
    transform: translateZ(0);
    filter: blur(20px);
}

@keyframes spotFloat {
    0%, 100% { 
        transform: translate(0, 0) scale(1) translateZ(0); 
        opacity: 0.3; 
    }
    50% { 
        transform: translate(var(--tx, 20px), var(--ty, -30px)) scale(1.2) translateZ(0); 
        opacity: 0.6; 
    }
}

/* 祥云装饰 */
.clouds {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.cloud {
    position: absolute;
    opacity: 0.15;
    filter: blur(1px);
    animation: cloudFloat var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
}

.cloud svg {
    fill: #ffd700;
    width: 100%;
    height: 100%;
}

@keyframes cloudFloat {
    0%, 100% { 
        transform: translateX(0) translateY(0); 
        opacity: 0.1;
    }
    50% { 
        transform: translateX(30px) translateY(-20px); 
        opacity: 0.2;
    }
}

/* 烟花爆竹背景效果 */
.fireworks-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.firework-burst {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: fireworkExplode var(--duration) ease-out infinite;
    animation-delay: var(--delay);
}

.firework-burst::before,
.firework-burst::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
}

.firework-burst::before {
    animation: sparkSpread1 var(--duration) ease-out infinite;
    animation-delay: var(--delay);
}

.firework-burst::after {
    animation: sparkSpread2 var(--duration) ease-out infinite;
    animation-delay: var(--delay);
}

@keyframes fireworkExplode {
    0% { transform: scale(0); opacity: 0; }
    10% { transform: scale(1); opacity: 1; }
    50% { transform: scale(3); opacity: 0.8; }
    100% { transform: scale(6); opacity: 0; }
}

@keyframes sparkSpread1 {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(40px, -60px) scale(0.3); opacity: 0; }
}

@keyframes sparkSpread2 {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(-40px, -50px) scale(0.3); opacity: 0; }
}

/* 边框烟花效果 */
.border-fireworks {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.border-spark {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: borderSparkle var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}

@keyframes borderSparkle {
    0%, 100% { 
        transform: scale(0.5); 
        opacity: 0.3;
        box-shadow: 0 0 5px currentColor;
    }
    50% { 
        transform: scale(1.5); 
        opacity: 1;
        box-shadow: 0 0 15px currentColor, 0 0 30px currentColor, 0 0 45px currentColor;
    }
}

/* 爆竹串效果 */
.firecracker {
    position: absolute;
    width: 12px;
    height: 25px;
    background: linear-gradient(90deg, #cc0000, #ff0000, #cc0000);
    border-radius: 3px;
    animation: firecrackerBurst var(--duration) ease-out infinite;
    animation-delay: var(--delay);
}

.firecracker::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 10px;
    background: linear-gradient(to top, #ffd700, #ff6600);
    animation: fuseburn var(--duration) ease-out infinite;
    animation-delay: var(--delay);
}

.firecracker::after {
    content: '💥';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 30px;
    animation: firecrackerPop var(--duration) ease-out infinite;
    animation-delay: calc(var(--delay) + 0.5s);
}

@keyframes firecrackerBurst {
    0%, 40% { opacity: 1; transform: translateY(0); }
    50% { opacity: 0; transform: translateY(-10px) scale(1.2); }
    100% { opacity: 0; }
}

@keyframes fuseburn {
    0%, 30% { height: 10px; background: linear-gradient(to top, #ffd700, #ff6600); }
    40% { height: 0; }
    100% { height: 0; }
}

@keyframes firecrackerPop {
    0%, 40% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
    70% { transform: translate(-50%, -50%) scale(2); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}

/* 烟花火花粒子 */
.spark-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: sparkFly var(--duration) ease-out infinite;
    animation-delay: var(--delay);
}

@keyframes sparkFly {
    0% { 
        transform: translate(0, 0) scale(1); 
        opacity: 1; 
    }
    100% { 
        transform: translate(var(--tx), var(--ty)) scale(0); 
        opacity: 0; 
    }
}

/* 鉴权弹窗 */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(139, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.98) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(20px);
}

.auth-overlay.hidden {
    display: none;
}

.auth-modal {
    background: linear-gradient(145deg, rgba(139, 0, 0, 0.4), rgba(20, 10, 10, 0.95));
    border-radius: 24px;
    padding: 50px 40px;
    text-align: center;
    border: 2px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), 0 0 100px rgba(255, 215, 0, 0.15);
    animation: modalIn 0.5s ease;
}

@keyframes modalIn {
    from { transform: scale(0.8) translateY(30px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.auth-header {
    margin-bottom: 30px;
}

.auth-icon {
    margin-bottom: 15px;
    animation: float 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-icon::before {
    content: '🐴';
    font-size: 48px;
}

.auth-icon svg {
    display: none;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.auth-header h2 {
    font-family: 'Noto Serif SC', serif;
    color: #ffd700;
    font-size: 28px;
    margin-bottom: 8px;
}

.auth-header p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.auth-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.auth-input {
    padding: 16px 24px;
    font-size: 18px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    text-align: center;
    outline: none;
    transition: all 0.3s ease;
}

.auth-input:focus {
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.auth-btn {
    padding: 16px 40px;
    font-size: 18px;
    font-family: 'Noto Serif SC', serif;
    background: linear-gradient(145deg, #ffd700, #ff8c00);
    color: #8b0000;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

.auth-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.5);
}

.auth-error {
    color: #ff6b6b;
    font-size: 14px;
    min-height: 20px;
}

/* 算法公平性说明样式 */
.algorithm-info {
    margin-top: 25px;
    border-top: 1px solid rgba(255, 215, 0, 0.2);
    padding-top: 20px;
}

.algorithm-toggle {
    width: 100%;
    padding: 12px 20px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    color: #ffd700;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.algorithm-toggle:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.5);
}

.toggle-icon {
    font-size: 16px;
}

.toggle-arrow {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.algorithm-toggle.active .toggle-arrow {
    transform: rotate(180deg);
}

.algorithm-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    text-align: left;
}

.algorithm-details.show {
    max-height: 600px;
    padding-top: 20px;
}

.algorithm-section {
    margin-bottom: 18px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border-left: 3px solid #ffd700;
}

.algorithm-section h4 {
    color: #ffd700;
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: 600;
}

.algorithm-section p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.algorithm-section strong {
    color: #ffd700;
}

.algorithm-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.algorithm-section li {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    line-height: 1.8;
    padding-left: 5px;
}

.algorithm-formula {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 140, 0, 0.1));
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
}

.algorithm-formula p {
    color: #fff;
    font-size: 13px;
    margin: 0;
}

.algorithm-formula strong {
    color: #ffd700;
}

.formula-example {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 11px !important;
    margin-top: 8px !important;
    font-style: italic;
}

/* 主标题 - 中国风 */
.main-title {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    text-align: center;
    z-index: 60;
    pointer-events: none;
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.title-content {
    position: relative;
    padding: 20px 40px;
}

/* 标题背景光晕 */
.title-content::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: 180%;
    transform: translate(-50%, -50%) translateZ(0);
    background: radial-gradient(ellipse, rgba(139, 0, 0, 0.3) 0%, rgba(255, 215, 0, 0.1) 40%, transparent 70%);
    animation: titleBgPulse 4s ease-in-out infinite;
    z-index: -1;
}

@keyframes titleBgPulse {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1) translateZ(0); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) translateZ(0); }
}

/* 年份徽章 */
.year-badge {
    display: inline-block;
    background: linear-gradient(145deg, #ffd700, #ff8c00);
    color: #8b0000;
    font-size: 20px;
    font-weight: bold;
    padding: 8px 30px;
    border-radius: 30px;
    margin-bottom: 15px;
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.5);
    animation: badgePulse 2s ease-in-out infinite;
    font-family: 'Noto Serif SC', serif;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.main-title h1 {
    font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
    font-size: 72px;
    color: #ffd700;
    text-shadow: 
        0 0 10px rgba(255, 215, 0, 0.8),
        0 0 20px rgba(255, 215, 0, 0.6),
        0 0 40px rgba(255, 215, 0, 0.4),
        0 0 60px rgba(255, 100, 50, 0.3),
        4px 4px 8px rgba(0, 0, 0, 0.9);
    font-weight: bold;
    letter-spacing: 8px;
    animation: titleGlow 3s ease-in-out infinite;
    -webkit-text-stroke: 1px rgba(255, 150, 0, 0.3);
    margin-bottom: 10px;
}

@keyframes titleGlow {
    0%, 100% { 
        text-shadow: 
            0 0 10px rgba(255, 215, 0, 0.8),
            0 0 20px rgba(255, 215, 0, 0.6),
            0 0 40px rgba(255, 215, 0, 0.4),
            4px 4px 8px rgba(0, 0, 0, 0.9);
        filter: brightness(1);
    }
    50% { 
        text-shadow: 
            0 0 15px rgba(255, 215, 0, 1),
            0 0 30px rgba(255, 215, 0, 0.8),
            0 0 60px rgba(255, 215, 0, 0.6),
            0 0 80px rgba(255, 100, 50, 0.4),
            4px 4px 8px rgba(0, 0, 0, 0.9);
        filter: brightness(1.15);
    }
}

.main-title .subtitle {
    font-family: 'Noto Serif SC', serif;
    color: #ffcc00;
    font-size: 32px;
    margin-top: 8px;
    letter-spacing: 20px;
    text-shadow: 0 0 15px rgba(255, 200, 0, 0.7);
    animation: subtitlePulse 2s ease-in-out infinite;
}

@keyframes subtitlePulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

/* 标题装饰线 */
.title-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.deco-line {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
}

.deco-text {
    font-family: 'Noto Serif SC', serif;
    color: rgba(255, 215, 0, 0.7);
    font-size: 16px;
    letter-spacing: 6px;
    white-space: nowrap;
}

/* 真实灯笼样式 */
.lantern-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: lanternSwing 4s ease-in-out infinite;
    transform-origin: top center;
}

.lantern-container.left {
    animation-delay: 0s;
}

.lantern-container.right {
    animation-delay: 2s;
}

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

.lantern-string {
    width: 3px;
    height: 30px;
    background: linear-gradient(180deg, #ffd700, #8b4513);
}

.lantern {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(0 0 20px rgba(255, 50, 50, 0.8));
}

.lantern-top {
    width: 35px;
    height: 12px;
    background: linear-gradient(180deg, #ffd700, #daa520);
    border-radius: 5px 5px 0 0;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.lantern-body {
    width: 70px;
    height: 85px;
    background: linear-gradient(180deg, #ff2020, #cc0000, #8b0000);
    border-radius: 35px / 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 
        inset 0 0 30px rgba(255, 100, 50, 0.5),
        0 0 30px rgba(255, 50, 50, 0.6);
}

.lantern-body::before,
.lantern-body::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
}

.lantern-body::before { top: 15px; }
.lantern-body::after { bottom: 15px; }

.lantern-text {
    font-family: 'Ma Shan Zheng', serif;
    font-size: 36px;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    animation: lanternTextGlow 2s ease-in-out infinite;
}

@keyframes lanternTextGlow {
    0%, 100% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.8); }
    50% { text-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 30px rgba(255, 200, 0, 0.6); }
}

.lantern-bottom {
    width: 35px;
    height: 12px;
    background: linear-gradient(180deg, #daa520, #ffd700);
    border-radius: 0 0 5px 5px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.lantern-tassel {
    width: 4px;
    height: 40px;
    background: linear-gradient(180deg, #ffd700, #ff6600, #ffd700);
    position: relative;
    animation: tasselSway 2s ease-in-out infinite;
}

.lantern-tassel::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 25px;
    background: linear-gradient(180deg, #ffd700, #ff8c00);
    clip-path: polygon(50% 0%, 100% 30%, 80% 100%, 20% 100%, 0% 30%);
}

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

/* 装饰粒子（优化） */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
    transform: translateZ(0);
    contain: layout style paint;
}

.particle {
    position: absolute;
    border-radius: 50%;
    animation: particleRise var(--duration) ease-out infinite;
    animation-delay: var(--delay);
    opacity: 0;
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* 粒子拖尾效果 */
.particle::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 15px;
    background: linear-gradient(to bottom, currentColor, transparent);
    transform: translateX(-50%);
    opacity: 0.6;
}

@keyframes particleRise {
    0% { transform: translate3d(0, 100vh, 0) scale(0) rotate(0deg); opacity: 0; }
    15% { opacity: 0.9; transform: translate3d(10px, 70vh, 0) scale(1) rotate(90deg); }
    50% { transform: translate3d(-10px, 40vh, 0) scale(1.1) rotate(180deg); }
    85% { opacity: 0.9; transform: translate3d(10px, 10vh, 0) scale(0.9) rotate(270deg); }
    100% { transform: translate3d(0, -10vh, 0) scale(0.5) rotate(360deg); opacity: 0; }
}

.particle.sparkle {
    box-shadow: 0 0 8px currentColor;
}

.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 图片墙 - 随机飘动 */
.photo-wall {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    transform: translateZ(0);
    contain: strict;
    isolation: isolate;
}

.photo-item {
    position: absolute;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid rgba(255, 215, 0, 0.25);
    filter: brightness(0.85) saturate(1.1);
    cursor: pointer;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 215, 0, 0.1);
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    contain: layout style;
    transition: filter 0.3s ease, box-shadow 0.3s ease;
    contain: layout style;
}

.photo-item:hover {
    filter: brightness(1.15);
    z-index: 20;
    border-color: rgba(255, 215, 0, 0.7);
    box-shadow:
        0 8px 30px rgba(255, 215, 0, 0.35),
        0 0 20px rgba(255, 215, 0, 0.2);
}

/* 鼠标悬停高亮效果 - 3倍放大 */
.photo-item.hover-highlight {
    border-color: #ffd700 !important;
    /* 保持 border-width 不变，使用 outline 替代 */
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.9),
        0 0 60px rgba(255, 215, 0, 0.5),
        0 0 90px rgba(255, 50, 50, 0.3) !important;
    z-index: 50 !important;
    filter: brightness(1.3) saturate(1.2) !important;
    outline: 1px solid #ffd700;
    outline-offset: -1px;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.photo-item.highlight {
    border-color: #ffd700 !important;
    /* 保持 border-width 不变，避免布局偏移 */
    box-shadow:
        0 0 40px rgba(255, 215, 0, 1),
        0 0 80px rgba(255, 215, 0, 0.6),
        0 0 120px rgba(255, 50, 50, 0.4),
        inset 0 0 20px rgba(255, 215, 0, 0.3) !important;
    z-index: 100 !important;
    filter: brightness(1.4) saturate(1.3) !important;
    /* 使用 outline 替代 border-width 变化，不影响布局 */
    outline: 2px solid #ffd700;
    outline-offset: -2px;
    /* scale 由 JavaScript 在 transform 中设置，避免与 translate3d 冲突 */
    /* 性能优化：使用 opacity 动画替代 box-shadow 动画，减少重绘 */
    animation: highlightPulse 0.5s ease-in-out infinite;
    /* 隔离布局影响 */
    contain: layout style paint;
}

/* 高亮脉冲效果 - 性能优化：使用 opacity 替代 box-shadow 动画 */
@keyframes highlightPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

/* 中奖展示 - 全新喜庆版 */
.winner-display {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(180, 20, 20, 0.97) 0%, rgba(100, 10, 10, 0.98) 40%, rgba(30, 5, 5, 0.99) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: winnerFadeIn 0.6s ease;
    overflow: hidden;
    contain: strict;
    transform: translateZ(0);
}

.winner-display.hidden {
    display: none;
}

body.winner-open .effects-layer,
body.winner-open .top-glow,
body.winner-open .border-glow,
body.winner-open .light-rays,
body.winner-open .photo-wall,
body.winner-open .particles,
body.winner-open .clouds,
body.winner-open .fireworks-bg,
body.winner-open .border-fireworks,
body.winner-open .red-packets,
body.winner-open .gold-coins,
body.winner-open .fu-decorations {
    display: none !important;
}

body.winner-open .winner-rays {
    animation-duration: 10s !important;
}

body.winner-open:not(.winner-anim-on) .winner-rays,
body.winner-open:not(.winner-anim-on) .winner-photo-frame,
body.winner-open:not(.winner-anim-on) .winner-badge,
body.winner-open:not(.winner-anim-on) .winner-crown,
body.winner-open:not(.winner-anim-on) .badge-star {
    animation-play-state: paused !important;
}

@keyframes winnerFadeIn {
    from { opacity: 0; transform: scale(1.1); }
    to { opacity: 1; transform: scale(1); }
}
body.winner-open:not(.winner-anim-on) .badge-star {
    animation-play-state: paused !important;
}

@keyframes winnerFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 背景烟花层 */
.winner-fireworks-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* 金光四射效果 */
.winner-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 215, 0, 0.5) 10deg,
        transparent 20deg,
        rgba(255, 100, 50, 0.4) 30deg,
        transparent 40deg,
        rgba(255, 215, 0, 0.5) 50deg,
        transparent 60deg,
        rgba(255, 100, 50, 0.4) 70deg,
        transparent 80deg,
        rgba(255, 215, 0, 0.5) 90deg,
        transparent 100deg
    );
    animation: raysRotate 4s linear infinite;
    z-index: 2;
}

.winner-rays::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 60%);
    animation: raysPulse 2s ease-in-out infinite;
}

@keyframes raysRotate {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes raysPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

/* 彩带飘落容器 */
.winner-confetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    width: 12px;
    height: 20px;
    animation: confettiFall var(--duration) linear forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0.8;
    }
}

/* 中奖卡片 */
.winner-card {
    text-align: center;
    animation: cardPopIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    z-index: 10;
    padding: 30px;
}

@keyframes cardPopIn {
    0% { transform: scale(0.3) rotate(-15deg); opacity: 0; }
    60% { transform: scale(1.1) rotate(3deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* 皇冠 */
.winner-crown {
    font-size: 60px;
    animation: crownBounce 1s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
    margin-bottom: 10px;
}

@keyframes crownBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-15px) scale(1.1); }
}

/* 恭喜中奖徽章 */
.winner-badge {
    font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
    font-size: 42px;
    color: #ffd700;
    margin-bottom: 25px;
    text-shadow: 0 0 30px rgba(255, 215, 0, 1), 0 0 60px rgba(255, 150, 0, 0.8);
    animation: badgeGlow 1.5s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.badge-star {
    animation: starSpin 2s linear infinite;
    display: inline-block;
}

@keyframes starSpin {
    to { transform: rotate(360deg); }
}

@keyframes badgeGlow {
    0%, 100% { 
        text-shadow: 0 0 30px rgba(255, 215, 0, 1), 0 0 60px rgba(255, 150, 0, 0.8);
        transform: scale(1);
    }
    50% { 
        text-shadow: 0 0 50px rgba(255, 215, 0, 1), 0 0 80px rgba(255, 150, 0, 1), 0 0 100px rgba(255, 100, 50, 0.6);
        transform: scale(1.05);
    }
}

/* 照片边框 */
.winner-photo-frame {
    position: relative;
    display: inline-block;
    padding: 15px;
    background: linear-gradient(135deg, #ffd700 0%, #ff8c00 50%, #ffd700 100%);
    border-radius: 25px;
    box-shadow: 
        0 0 60px rgba(255, 215, 0, 0.8),
        0 0 120px rgba(255, 150, 0, 0.5),
        inset 0 0 30px rgba(255, 255, 255, 0.3);
    animation: framePulse 2s ease-in-out infinite;
}

@keyframes framePulse {
    0%, 100% {
        box-shadow: 0 0 60px rgba(255, 215, 0, 0.8), 0 0 120px rgba(255, 150, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 80px rgba(255, 215, 0, 1), 0 0 150px rgba(255, 150, 0, 0.7), 0 0 200px rgba(255, 100, 50, 0.4);
    }
}

/* 边框角装饰 */
.frame-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 4px solid #fff;
    z-index: 5;
}

.frame-corner.top-left {
    top: 5px;
    left: 5px;
    border-right: none;
    border-bottom: none;
    border-radius: 10px 0 0 0;
}

.frame-corner.top-right {
    top: 5px;
    right: 5px;
    border-left: none;
    border-bottom: none;
    border-radius: 0 10px 0 0;
}

.frame-corner.bottom-left {
    bottom: 5px;
    left: 5px;
    border-right: none;
    border-top: none;
    border-radius: 0 0 0 10px;
}

.frame-corner.bottom-right {
    bottom: 5px;
    right: 5px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 10px 0;
}

.winner-card img {
    width: 350px;
    height: 350px;
    object-fit: cover;
    border-radius: 15px;
    display: block;
}

/* 中奖者名字容器 */
.winner-name-container {
    margin-top: 30px;
}

.winner-text {
    font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
    font-size: 56px;
    color: #ffd700;
    text-shadow: 
        0 0 20px rgba(255, 215, 0, 0.8),
        0 0 40px rgba(255, 215, 0, 0.6),
        3px 3px 6px rgba(0, 0, 0, 0.5);
    animation: textPulse 1.5s ease-in-out infinite;
}

@keyframes textPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* 奖项名称 */
.winner-prize-name {
    font-family: 'Noto Serif SC', serif;
    font-size: 32px;
    color: #ff6b6b;
    margin-top: 10px;
    text-shadow: 0 0 20px rgba(255, 100, 100, 0.8);
    animation: prizeGlow 2s ease-in-out infinite;
}

@keyframes prizeGlow {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; text-shadow: 0 0 30px rgba(255, 100, 100, 1); }
}

.winner-company {
    font-family: 'Noto Serif SC', serif;
    font-size: 18px;
    color: rgba(255, 215, 0, 0.7);
    margin-top: 25px;
    letter-spacing: 4px;
}

/* 底部装饰 */
.winner-decorations {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 30px;
    font-size: 40px;
}

.deco-lantern {
    animation: lanternSwing 2s ease-in-out infinite;
}

.deco-packet {
    animation: packetBounce 1.5s ease-in-out infinite;
}

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

@keyframes packetBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.1); }
}


/* 控制按钮 */
.controls {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}

.controls-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
}

.single-prize-select {
    padding: 12px 40px 12px 20px;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Noto Serif SC', serif;
    background: linear-gradient(145deg, rgba(139, 0, 0, 0.95), rgba(100, 0, 0, 0.95));
    color: #ffd700;
    border: 2px solid rgba(255, 215, 0, 0.6);
    border-radius: 25px;
    cursor: pointer;
    outline: none;
    min-width: 160px;
    transition: all 0.3s ease;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    /* 自定义下拉箭头 */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffd700' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    text-align: center;
    text-align-last: center;
}

.single-prize-select:hover {
    border-color: #ffd700;
    box-shadow:
        0 6px 20px rgba(255, 215, 0, 0.3),
        0 4px 15px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.single-prize-select:focus {
    border-color: #ffd700;
    box-shadow:
        0 0 0 3px rgba(255, 215, 0, 0.2),
        0 6px 20px rgba(255, 215, 0, 0.3),
        0 4px 15px rgba(0, 0, 0, 0.4);
}

.single-prize-select option {
    background: linear-gradient(180deg, #2a0a0a, #1a0505);
    color: #ffd700;
    padding: 12px 20px;
    font-size: 16px;
}

.single-prize-select option:disabled {
    color: #888;
    background: #333;
}

.btn-lottery {
    padding: 20px 88px;
    font-size: 26px;
    font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
    background: linear-gradient(145deg, #ff3030, #dd0000, #aa0000, #880000);
    color: #ffd700;
    border: 3px solid #ffd700;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 
        0 20px 60px rgba(255, 50, 50, 0.6), 
        inset 0 -6px 0 rgba(0,0,0,0.25), 
        0 0 80px rgba(255, 215, 0, 0.5),
        inset 0 3px 0 rgba(255, 255, 255, 0.15),
        0 0 0 8px rgba(255, 215, 0, 0.15);
    transition: all 0.3s ease;
    font-weight: bold;
    letter-spacing: 8px;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.5);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 360px;
    animation: btnBreathing 3s ease-in-out infinite;
}

@keyframes btnBreathing {
    0%, 100% {
        box-shadow: 
            0 20px 60px rgba(255, 50, 50, 0.6), 
            inset 0 -6px 0 rgba(0,0,0,0.25), 
            0 0 80px rgba(255, 215, 0, 0.5),
            0 0 0 8px rgba(255, 215, 0, 0.15);
    }
    50% {
        box-shadow: 
            0 25px 70px rgba(255, 50, 50, 0.8), 
            inset 0 -6px 0 rgba(0,0,0,0.25), 
            0 0 120px rgba(255, 215, 0, 0.7),
            0 0 0 12px rgba(255, 215, 0, 0.25);
    }
}

/* 按钮喜庆装饰 */
.btn-lottery::after {
    content: '🎊';
    position: absolute;
    right: 16px;
    font-size: 20px;
    opacity: 0.5;
    animation: celebrateFloat 2s ease-in-out infinite;
}

.btn-lottery::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

@keyframes celebrateFloat {
    0%, 100% { transform: translateY(0) scale(1) rotate(-5deg); }
    50% { transform: translateY(-8px) scale(1.15) rotate(5deg); }
}

.btn-lottery:hover::before {
    left: 100%;
}

.btn-lottery:hover {
    transform: translateY(-8px) translateZ(0);
    box-shadow: 
        0 30px 80px rgba(255, 50, 50, 0.7), 
        0 0 100px rgba(255, 215, 0, 0.7),
        inset 0 -6px 0 rgba(0,0,0,0.25),
        0 0 0 15px rgba(255, 215, 0, 0.2);
    border-color: #fff;
}

.btn-lottery:active {
    transform: translateY(-3px) translateZ(0);
}

/* 禁用状态 - 奖品已抽完 */
.btn-lottery.disabled,
.btn-lottery:disabled {
    background: linear-gradient(145deg, #666, #444, #333);
    color: #999;
    border-color: #666;
    cursor: not-allowed;
    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.3),
        inset 0 -2px 0 rgba(0,0,0,0.2);
    opacity: 0.7;
    animation: none;
}

.btn-lottery.disabled:hover,
.btn-lottery:disabled:hover {
    transform: none;
    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.3),
        inset 0 -2px 0 rgba(0,0,0,0.2);
}

.btn-lottery.running {
    background: linear-gradient(145deg, #ffd700, #ffb800, #ff9500, #ff7700);
    color: #8b0000;
    border-color: #ff3333;
    box-shadow: 
        0 20px 60px rgba(255, 215, 0, 0.8), 
        0 0 100px rgba(255, 215, 0, 0.7),
        inset 0 -6px 0 rgba(0,0,0,0.15),
        0 0 0 10px rgba(255, 100, 50, 0.3);
    animation: btnRunningGlow 0.5s ease infinite;
    letter-spacing: 15px;
}

@keyframes btnRunningGlow {
    0%, 100% { 
        box-shadow: 
            0 20px 60px rgba(255, 215, 0, 0.8), 
            0 0 80px rgba(255, 215, 0, 0.6),
            0 0 0 10px rgba(255, 100, 50, 0.3);
        transform: scale(1);
    }
    50% { 
        box-shadow: 
            0 25px 80px rgba(255, 215, 0, 1), 
            0 0 140px rgba(255, 215, 0, 0.9),
            0 0 0 15px rgba(255, 100, 50, 0.5);
        transform: scale(1.02);
    }
}

/* 二维码区域 - 透明小巧 */
.qr-section {
    position: fixed;
    bottom: 15px;
    right: 15px;
    text-align: center;
    z-index: 50;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 14px;
    backdrop-filter: blur(6px);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.qr-section:hover {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 215, 0, 0.3);
}

.qr-section.hidden {
    transform: translateX(200px);
    opacity: 0;
    pointer-events: none;
}

.qr-code {
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.qr-code:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.qr-section p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    margin-top: 6px;
}

.upload-count {
    color: #ffd700;
    font-size: 12px;
    font-weight: bold;
    margin-top: 3px;
}

.btn-qr-toggle {
    margin-top: 6px;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-qr-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

/* 二维码放大弹窗 */
.qr-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.qr-modal.show {
    opacity: 1;
    visibility: visible;
}

.qr-modal-content {
    background: linear-gradient(145deg, #1e1e3f, #151530);
    border-radius: 30px;
    padding: 40px;
    text-align: center;
    border: 2px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5), 0 0 100px rgba(255, 215, 0, 0.1);
    transform: scale(0.8);
    transition: all 0.3s ease;
}

.qr-modal.show .qr-modal-content {
    transform: scale(1);
}

.qr-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.qr-modal-header h3 {
    color: #ffd700;
    font-size: 24px;
    margin: 0;
}

.btn-close-qr {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close-qr:hover {
    background: rgba(255, 65, 108, 0.8);
    transform: rotate(90deg);
}

.qr-code-large {
    width: 280px;
    height: 280px;
    background: white;
    border-radius: 20px;
    padding: 15px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.qr-modal-hint {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    margin-bottom: 10px;
}

.qr-modal-url {
    color: rgba(255, 215, 0, 0.6);
    font-size: 12px;
    word-break: break-all;
    max-width: 300px;
    margin: 0 auto;
}

/* 显示二维码按钮 */
.btn-qr-show {
    position: fixed;
    bottom: 25px;
    right: 25px;
    padding: 12px 20px;
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: #ffd700;
    border-radius: 25px;
    cursor: pointer;
    z-index: 50;
    font-size: 14px;
    transition: all 0.3s ease;
    display: none;
}

.btn-qr-show:hover {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.3), rgba(255, 215, 0, 0.2));
    transform: scale(1.05);
}

/* 后台管理面板 */
.admin-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 580px;
    max-height: 90vh;
    background: linear-gradient(145deg, #1a0a0a 0%, #0d0505 100%);
    border-radius: 24px;
    z-index: 200;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    overflow: hidden;
    border: 3px solid #ffd700;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.9), 0 0 80px rgba(255, 215, 0, 0.3), inset 0 0 60px rgba(139, 0, 0, 0.2);
}

.admin-panel.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    background: linear-gradient(90deg, #8b0000, #5a0000);
    border-bottom: 3px solid #ffd700;
}

.admin-header h3 {
    font-family: 'Ma Shan Zheng', serif;
    color: #ffd700;
    font-size: 26px;
    letter-spacing: 4px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.btn-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(45deg, #ff416c, #ff4b2b);
    color: white;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close:hover {
    transform: rotate(90deg) scale(1.1);
}

.admin-content {
    padding: 25px;
    max-height: 65vh;
    overflow-y: auto;
}

.admin-content::-webkit-scrollbar {
    width: 6px;
}

.admin-content::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.3);
    border-radius: 3px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: linear-gradient(145deg, rgba(139, 0, 0, 0.4), rgba(80, 0, 0, 0.6));
    border-radius: 16px;
    margin-bottom: 20px;
    border: 2px solid rgba(255, 215, 0, 0.3);
}

.stat-label {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
}

.stat-value {
    color: #ffd700;
    font-size: 42px;
    font-weight: bold;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

.photo-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    max-height: 200px;
    overflow-y: auto;
    padding: 15px;
    background: rgba(139, 0, 0, 0.3);
    border-radius: 16px;
    border: 2px solid rgba(255, 215, 0, 0.2);
}

.participant-list {
    max-height: 150px;
    overflow-y: auto;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(139, 0, 0, 0.3);
    border-radius: 12px;
    border: 2px solid rgba(255, 215, 0, 0.2);
}

.participant-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 14px;
    border: 1px solid rgba(255, 215, 0, 0.15);
}

.participant-item:last-child {
    margin-bottom: 0;
}

.participant-name {
    color: #ffd700;
    font-weight: 500;
}

.participant-id {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.photo-list::-webkit-scrollbar {
    width: 4px;
}

.photo-list::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.3);
    border-radius: 2px;
}

.photo-list-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
}

.photo-list-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.photo-list-item:hover img {
    transform: scale(1.1);
}

.photo-list-item .delete-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 65, 108, 0.9);
    color: white;
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-list-item:hover .delete-btn {
    opacity: 1;
}

.photo-list-item .delete-btn:hover {
    transform: scale(1.2);
    background: #ff416c;
}

.admin-actions {
    display: flex;
    gap: 15px;
}

.btn-admin {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(45deg, #cc0000, #8b0000);
    color: #ffd700;
    font-weight: 600;
    border: 2px solid rgba(255, 215, 0, 0.3);
}

.btn-admin:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 65, 108, 0.4);
}

.btn-admin.btn-export {
    background: linear-gradient(45deg, #11998e, #38ef7d);
}

.btn-admin.btn-export:hover {
    box-shadow: 0 10px 25px rgba(56, 239, 125, 0.4);
}

.btn-admin.btn-warning {
    background: linear-gradient(45deg, #f093fb, #f5576c);
}

.btn-admin.btn-warning:hover {
    box-shadow: 0 10px 25px rgba(245, 87, 108, 0.4);
}

.btn-admin.btn-test {
    background: linear-gradient(45deg, #667eea, #764ba2);
}

.btn-admin.btn-test:hover {
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

/* 后台入口按钮 */
.btn-admin-toggle {
    position: fixed;
    top: 25px;
    right: 25px;
    padding: 12px 24px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    border-radius: 30px;
    cursor: pointer;
    z-index: 50;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.btn-admin-toggle:hover {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
    border-color: rgba(255, 215, 0, 0.3);
    transform: translateY(-2px);
}

/* 音效控制按钮 */
.btn-sound-toggle {
    position: fixed;
    top: 25px;
    right: 100px;
    width: 45px;
    height: 45px;
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: #ffd700;
    border-radius: 50%;
    cursor: pointer;
    z-index: 50;
    transition: all 0.3s ease;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.btn-sound-toggle:hover {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.3), rgba(255, 215, 0, 0.2));
    transform: scale(1.1);
}

.btn-sound-toggle.muted {
    background: linear-gradient(145deg, rgba(255, 100, 100, 0.2), rgba(255, 100, 100, 0.1));
    border-color: rgba(255, 100, 100, 0.3);
    color: #ff6666;
}

/* 滚动高亮效果 */
.photo-item.rolling {
    animation: rollHighlight 0.1s ease;
}

@keyframes rollHighlight {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
    100% { filter: brightness(1); }
}

/* 烟花效果 */
.fireworks {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99;
}


/* Toast 通知 */
.toast-container {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.toast {
    padding: 16px 28px;
    border-radius: 16px;
    color: white;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: toastIn 0.4s ease;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(10px);
    max-width: 400px;
}

.toast.toast-out {
    animation: toastOut 0.3s ease forwards;
}

@keyframes toastIn {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes toastOut {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-30px); opacity: 0; }
}

.toast-success {
    background: linear-gradient(135deg, rgba(56, 239, 125, 0.95), rgba(17, 153, 142, 0.95));
}

.toast-error {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.95), rgba(238, 90, 36, 0.95));
}

.toast-warning {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.95), rgba(255, 152, 0, 0.95));
    color: #333;
}

.toast-info {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.95), rgba(118, 75, 162, 0.95));
}

.toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 确认弹窗 */
.confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.confirm-modal.show {
    opacity: 1;
    visibility: visible;
}

.confirm-content {
    background: linear-gradient(145deg, #1e1e3f, #151530);
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    border: 2px solid rgba(255, 215, 0, 0.2);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    transform: scale(0.8);
    transition: all 0.3s ease;
    min-width: 320px;
    max-width: 420px;
}

.confirm-modal.show .confirm-content {
    transform: scale(1);
}

.confirm-icon {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-message {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.confirm-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.confirm-btn {
    padding: 14px 36px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.confirm-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.confirm-cancel:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.confirm-ok {
    background: linear-gradient(45deg, #ff416c, #ff4b2b);
    color: white;
}

.confirm-ok:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 65, 108, 0.4);
}


/* 抽奖进行中特效（GPU优化） */
body.lottery-active .light-rays {
    animation-duration: 3s;
}

body.lottery-active .light-rays::before {
    animation-duration: 4s;
}

body.lottery-active .bottom-glow {
    animation: bottomGlowFast 0.6s ease-in-out infinite;
}

body.lottery-active .bottom-glow::before {
    animation: scanLineFast 1s ease-in-out infinite;
}

@keyframes bottomGlowFast {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

@keyframes scanLineFast {
    0%, 100% { opacity: 0.5; transform: scaleX(0.5) translateZ(0); }
    50% { opacity: 1; transform: scaleX(1.2) translateZ(0); }
}

body.lottery-active .glow-orb {
    animation-duration: 2s !important;
}

body.lottery-active .lantern {
    animation-duration: 0.5s !important;
}

body.lottery-active .star {
    animation-duration: 0.8s !important;
}

body.lottery-active .particle {
    animation-duration: 6s !important;
}

/* 抽奖时光标样式 - 防止用户误点击 */
body.lottery-active {
    cursor: default !important;
}

body.lottery-active .photo-item {
    cursor: default !important;
    pointer-events: none;
}

body.lottery-active .photo-wall {
    pointer-events: none;
}

/* 抽奖时边框闪烁 */
body.lottery-active::after {
    animation: bgPulseFast 1s ease-in-out infinite;
}

@keyframes bgPulseFast {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* 中奖烟花效果（GPU优化） */
.winner-display .firework {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: fireworkBurst 0.8s ease-out forwards;
    will-change: transform, opacity;
    transform: translateZ(0);
}

@keyframes fireworkBurst {
    0% { transform: scale(0) translateZ(0); opacity: 1; }
    50% { opacity: 1; }
    100% { transform: scale(20) translateZ(0); opacity: 0; }
}

/* 中奖时的光芒 - GPU优化 */
.winner-display::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 700px;
    height: 700px;
    transform: translate(-50%, -50%) translateZ(0);
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(255, 215, 0, 0.4),
        transparent,
        rgba(255, 50, 50, 0.3),
        transparent,
        rgba(255, 215, 0, 0.4),
        transparent,
        rgba(255, 50, 50, 0.3),
        transparent
    );
    animation: winnerSpin 2s linear infinite;
    opacity: 0.8;
    will-change: transform;
}

/* 第二层光芒 */
.winner-display::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    transform: translate(-50%, -50%) translateZ(0);
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    animation: winnerPulse 1.5s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes winnerSpin {
    to { transform: translate(-50%, -50%) rotate(360deg) translateZ(0); }
}

@keyframes winnerPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(0.8) translateZ(0); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.3) translateZ(0); opacity: 1; }
}

/* 中奖卡片 - 中国风边框 */
.winner-card {
    position: relative;
    z-index: 10;
}

.winner-card::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    background: linear-gradient(45deg, #ffd700, #ff4444, #ffd700, #ff4444, #ffd700);
    background-size: 400% 400%;
    border-radius: 40px;
    z-index: -1;
    animation: gradientBorder 1.5s ease infinite;
    filter: blur(30px);
    opacity: 0.9;
}

/* 卡片光晕 */
.winner-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%) translateZ(0);
    background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 60%);
    animation: cardGlow 2s ease-in-out infinite;
    z-index: -1;
}

@keyframes gradientBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes cardGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(1) translateZ(0); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.1) translateZ(0); opacity: 1; }
}

.winner-card img {
    width: 480px;
    height: 480px;
    object-fit: cover;
    border-radius: 30px;
    border: 10px solid #ffd700;
    box-shadow:
        0 0 80px rgba(255, 215, 0, 0.8),
        0 0 150px rgba(255, 215, 0, 0.5),
        0 0 220px rgba(255, 100, 50, 0.3);
    animation: winnerImgPulse 2s ease-in-out infinite;
}

@keyframes winnerImgPulse {
    0%, 100% {
        box-shadow:
            0 0 80px rgba(255, 215, 0, 0.8),
            0 0 150px rgba(255, 215, 0, 0.5);
    }
    50% {
        box-shadow:
            0 0 100px rgba(255, 215, 0, 1),
            0 0 180px rgba(255, 215, 0, 0.7),
            0 0 250px rgba(255, 100, 50, 0.4);
    }
}

.winner-text {
    font-size: 72px;
    color: #ffd700;
    margin-top: 50px;
    text-shadow: 
        0 0 20px rgba(255, 215, 0, 0.8),
        0 0 40px rgba(255, 215, 0, 0.6),
        0 0 60px rgba(255, 100, 50, 0.4);
    animation: pulse 1s ease infinite, textGlow 2s ease-in-out infinite;
}

@keyframes textGlow {
    0%, 100% {
        text-shadow:
            0 0 20px rgba(255, 215, 0, 0.8),
            0 0 40px rgba(255, 215, 0, 0.6);
    }
    50% {
        text-shadow:
            0 0 30px rgba(255, 215, 0, 1),
            0 0 60px rgba(255, 215, 0, 0.8),
            0 0 80px rgba(255, 100, 50, 0.5);
    }
}

/* 抽奖时居中放大显示样式 - 随机抽取框 */
.zoom-center-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    width: 420px;
    height: 420px;
    z-index: 9000; /* 确保在照片墙和高亮照片之上 */
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    pointer-events: none;
    /* 性能优化：隔离布局影响 */
    contain: strict;
    will-change: transform, opacity;
    /* 添加背景遮罩增强视觉效果 */
    background: radial-gradient(circle, rgba(139, 0, 0, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    padding: 20px;
}

.zoom-center-container.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: none;
}

/* 抽奖框外圈装饰 */
.zoom-center-container::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    border: 4px solid rgba(255, 215, 0, 0.6);
    border-radius: 50%;
    animation: zoomRingPulse 0.8s ease-in-out infinite;
}

.zoom-center-container::after {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    border: 2px dashed rgba(255, 215, 0, 0.4);
    border-radius: 50%;
    animation: zoomRingSpin 8s linear infinite;
}

@keyframes zoomRingPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
        border-color: rgba(255, 215, 0, 0.6);
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
        border-color: rgba(255, 100, 50, 0.8);
    }
}

@keyframes zoomRingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.zoom-center-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    border: 8px solid #ffd700;
    box-shadow:
        0 0 60px rgba(255, 215, 0, 1),
        0 0 120px rgba(255, 100, 50, 0.8),
        0 0 180px rgba(255, 50, 50, 0.5),
        inset 0 0 50px rgba(255, 215, 0, 0.4);
    animation: zoomPhotoGlow 0.4s ease-in-out infinite alternate;
    position: relative;
    z-index: 10001;
}

@keyframes zoomPhotoGlow {
    0% {
        box-shadow:
            0 0 60px rgba(255, 215, 0, 1),
            0 0 120px rgba(255, 100, 50, 0.8),
            0 0 180px rgba(255, 50, 50, 0.5);
        border-color: #ffd700;
        transform: scale(1);
    }
    100% {
        box-shadow:
            0 0 100px rgba(255, 215, 0, 1),
            0 0 160px rgba(255, 100, 50, 1),
            0 0 220px rgba(255, 50, 50, 0.7);
        border-color: #ff8c00;
        transform: scale(1.02);
    }
}

/* ========== 喜庆过年装饰 ========== */

/* 鞭炮容器 */
.firecrackers {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* 单个鞭炮串 */
.firecracker-string {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: firecrackerSwing 2s ease-in-out infinite;
}

.firecracker-string.left { left: 2%; }
.firecracker-string.right { right: 2%; }

/* 鞭炮绳子 */
.firecracker-rope {
    width: 3px;
    height: 30px;
    background: linear-gradient(180deg, #8b4513, #d2691e);
}

/* 单个鞭炮 */
.firecracker-item {
    width: 18px;
    height: 35px;
    background: linear-gradient(90deg, #cc0000 0%, #ff3333 50%, #cc0000 100%);
    border-radius: 3px;
    position: relative;
    margin: 2px 0;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.firecracker-item::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 10px;
    background: linear-gradient(180deg, #ffd700, #ff8c00);
    border-radius: 2px;
}

.firecracker-item::after {
    content: '喜';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: #ffd700;
    font-weight: bold;
}

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

/* 鞭炮火花 */
.firecracker-spark {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #ffd700;
    border-radius: 50%;
    animation: sparkle 0.5s ease-out infinite;
    box-shadow: 0 0 10px #ffd700, 0 0 20px #ff6600;
}

@keyframes sparkle {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

/* 红包容器 */
.red-packets {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

/* 单个红包 */
.red-packet {
    position: absolute;
    width: 40px;
    height: 50px;
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 50%, #aa0000 100%);
    border-radius: 5px 5px 8px 8px;
    animation: redPacketFall var(--duration) linear infinite;
    animation-delay: var(--delay);
    box-shadow: 2px 4px 8px rgba(0,0,0,0.3);
}

.red-packet::before {
    content: '福';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #ffd700;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.red-packet::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    background: radial-gradient(circle, #ffd700 30%, transparent 70%);
    border-radius: 50%;
    opacity: 0.8;
}

@keyframes redPacketFall {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* 福字装饰 */
.fu-decorations {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.fu-character {
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ff3333 0%, #cc0000 100%);
    border: 3px solid #ffd700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #ffd700;
    font-weight: bold;
    font-family: 'Ma Shan Zheng', serif;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 3px 3px 10px rgba(0,0,0,0.3);
    animation: fuFloat var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
    transform: rotate(var(--rotation));
}

@keyframes fuFloat {
    0%, 100% { transform: rotate(var(--rotation)) translateY(0); }
    50% { transform: rotate(var(--rotation)) translateY(-15px); }
}

/* 金币装饰 */
.gold-coins {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.gold-coin {
    position: absolute;
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at 30% 30%, #fff5cc, #ffd700 40%, #cc9900 100%);
    border-radius: 50%;
    border: 2px solid #b8860b;
    animation: coinFall var(--duration) linear infinite;
    animation-delay: var(--delay);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6), inset 0 0 10px rgba(255,255,255,0.3);
}

.gold-coin::before {
    content: '¥';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #8b4513;
    font-weight: bold;
}

@keyframes coinFall {
    0% {
        transform: translateY(-50px) rotateY(0deg);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(100vh) rotateY(720deg);
        opacity: 0;
    }
}

/* 春联装饰 */
.spring-couplet {
    position: fixed;
    width: 45px;
    background: linear-gradient(180deg, #cc0000 0%, #aa0000 100%);
    border: 2px solid #ffd700;
    border-radius: 5px;
    padding: 10px 5px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: 'Ma Shan Zheng', serif;
    font-size: 24px;
    color: #ffd700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
    z-index: 50;
    letter-spacing: 8px;
}

.spring-couplet.left {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.spring-couplet.right {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* 横批 */
.spring-couplet-top {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #cc0000 0%, #aa0000 100%);
    border: 2px solid #ffd700;
    border-radius: 5px;
    padding: 8px 20px;
    font-family: 'Ma Shan Zheng', serif;
    font-size: 28px;
    color: #ffd700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
    z-index: 50;
    letter-spacing: 10px;
}

/* 烟花绽放效果 */
.firework-bloom {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: fireworkBloom 1.5s ease-out forwards;
}

@keyframes fireworkBloom {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* 烟花粒子轨迹 */
.firework-trail {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: fireworkTrail 1s ease-out forwards;
}

@keyframes fireworkTrail {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

/* ========== 批量抽奖按钮 ========== */
.btn-batch-lottery {
    padding: 18px 50px;
    font-size: 22px;
    font-family: 'Noto Serif SC', serif;
    background: linear-gradient(145deg, #ffd700, #ff8c00);
    color: #8b0000;
    border: 3px solid #ff4444;
    border-radius: 40px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
    transition: all 0.3s ease;
    font-weight: bold;
    letter-spacing: 4px;
    margin-left: 20px;
}

.btn-batch-lottery:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.6);
}

/* 批量抽奖弹窗 */
.batch-lottery-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.batch-lottery-modal.show {
    opacity: 1;
    visibility: visible;
}

.batch-lottery-content {
    background: linear-gradient(145deg, rgba(139, 0, 0, 0.3), rgba(10, 5, 5, 0.98));
    border-radius: 24px;
    padding: 0;
    width: 420px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5);
    transform: scale(0.8);
    transition: all 0.3s ease;
}

.batch-lottery-modal.show .batch-lottery-content {
    transform: scale(1);
}

.batch-lottery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    background: linear-gradient(90deg, rgba(139, 0, 0, 0.4), rgba(255, 215, 0, 0.1));
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 24px 24px 0 0;
}

.batch-lottery-header h3 {
    font-family: 'Noto Serif SC', serif;
    color: #ffd700;
    font-size: 22px;
    margin: 0;
}

.batch-lottery-body {
    padding: 30px;
}

.batch-input-group {
    margin-bottom: 25px;
}

.batch-input-group label {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-bottom: 10px;
}

.batch-input-group select {
    width: 100%;
    padding: 14px 18px;
    font-size: 16px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    outline: none;
    cursor: pointer;
}

.batch-input-group select:focus {
    border-color: #ffd700;
}

.batch-number-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

.batch-number-input button {
    width: 50px;
    height: 50px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    background: rgba(255, 215, 0, 0.1);
    color: #ffd700;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.batch-number-input button:hover {
    background: rgba(255, 215, 0, 0.2);
}

.batch-number-input input {
    flex: 1;
    padding: 14px;
    font-size: 24px;
    text-align: center;
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.4);
    color: #ffd700;
    outline: none;
}

.batch-hint {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin-top: 10px;
    text-align: center;
}

.btn-start-batch {
    width: 100%;
    padding: 18px;
    font-size: 20px;
    font-family: 'Noto Serif SC', serif;
    background: linear-gradient(145deg, #ff2020, #cc0000);
    color: #ffd700;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-weight: bold;
    letter-spacing: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(255, 50, 50, 0.4);
}

.btn-start-batch:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255, 50, 50, 0.6);
}

/* 奖项设置区域 */
.prize-settings {
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(145deg, rgba(139, 0, 0, 0.4), rgba(80, 0, 0, 0.5));
    border-radius: 16px;
    border: 2px solid rgba(255, 215, 0, 0.3);
}

.prize-settings h4 {
    color: #ffd700;
    font-size: 18px;
    margin-bottom: 15px;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.prize-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.prize-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.prize-item .prize-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.prize-item .prize-name {
    color: #ffd700;
    font-weight: 600;
    font-size: 15px;
}

.prize-item .prize-count {
    color: #ffffff;
    font-size: 13px;
}

.prize-item .prize-won {
    color: #38ef7d;
    font-size: 12px;
    font-weight: 500;
}

.prize-item .btn-delete-prize {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 65, 108, 0.8);
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.prize-item .btn-delete-prize:hover {
    background: #ff416c;
    transform: scale(1.1);
}

.prize-add {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.prize-add input[type="text"] {
    flex: 2;
    padding: 10px 15px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 14px;
    outline: none;
}

.prize-add input[type="number"] {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 14px;
    outline: none;
    text-align: center;
}

.prize-add button {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.prize-add button:hover {
    transform: translateY(-2px);
}

.prize-actions {
    display: flex;
    justify-content: center;
}

/* 中奖历史 */
.winner-history {
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(145deg, rgba(139, 0, 0, 0.4), rgba(80, 0, 0, 0.5));
    border-radius: 16px;
    border: 2px solid rgba(255, 215, 0, 0.3);
}

.winner-history h4 {
    color: #ffd700;
    font-size: 18px;
    margin-bottom: 15px;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.winner-history-list {
    max-height: 200px;
    overflow-y: auto;
}

.winner-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 13px;
}

.winner-history-item .winner-name {
    color: #ffd700;
}

.winner-history-item .winner-prize {
    color: #38ef7d;
    font-size: 12px;
}

.winner-history-item .winner-time {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
}

/* 轮播设置 */
.slideshow-settings {
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(145deg, rgba(139, 0, 0, 0.4), rgba(80, 0, 0, 0.5));
    border-radius: 16px;
    border: 2px solid rgba(255, 215, 0, 0.3);
}

.slideshow-settings h4 {
    color: #ffd700;
    font-size: 18px;
    margin-bottom: 15px;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.slideshow-setting-item {
    margin-bottom: 10px;
}

.slideshow-setting-item label {
    display: block;
    color: #fff;
    font-size: 14px;
    margin-bottom: 10px;
}

.slideshow-input-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.slideshow-input-row input[type="range"] {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 215, 0, 0.2);
    outline: none;
    -webkit-appearance: none;
}

.slideshow-input-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffd700, #ff8c00);
    cursor: pointer;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    border: 2px solid #fff;
}

.slideshow-value {
    color: #ffd700;
    font-size: 24px;
    font-weight: bold;
    min-width: 30px;
    text-align: center;
}

/* ========== 首页抽奖规则展示 ========== */
.rules-display {
    position: fixed;
    top: 250px;
    left: 20px;
    z-index: 60;
    max-width: 280px;
}

.rules-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 20px;
    background: linear-gradient(145deg, rgba(139, 0, 0, 0.8), rgba(0, 0, 0, 0.7));
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 30px;
    color: #ffd700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.rules-toggle-btn:hover {
    background: linear-gradient(145deg, rgba(139, 0, 0, 0.9), rgba(0, 0, 0, 0.8));
    border-color: rgba(255, 215, 0, 0.6);
}

.rules-toggle-btn .toggle-icon {
    transition: transform 0.3s ease;
}

.rules-display.expanded .toggle-icon {
    transform: rotate(180deg);
}

.rules-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
}

.rules-display.expanded .rules-panel {
    max-height: 400px;
    opacity: 1;
}

.rules-content-box {
    margin-top: 10px;
    padding: 20px;
    background: linear-gradient(145deg, rgba(139, 0, 0, 0.85), rgba(0, 0, 0, 0.9));
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 20px;
    backdrop-filter: blur(15px);
}

.rules-section {
    margin-bottom: 15px;
}

.rules-section:last-child {
    margin-bottom: 0;
}

.rules-section h4 {
    color: #ffd700;
    font-size: 14px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.rules-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rules-section li {
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    line-height: 1.8;
    padding-left: 18px;
    position: relative;
}

.rules-section li::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: #ffd700;
    font-size: 10px;
}

.prizes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prize-display-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.prize-display-item .name {
    color: #ffd700;
    font-size: 13px;
}

.prize-display-item .count {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

.prize-display-item .remaining {
    color: #38ef7d;
    font-size: 11px;
}

.no-prizes {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    text-align: center;
    padding: 10px;
}

/* ==================== 新增喜庆动画效果 ==================== */

/* 飘落的樱花/花瓣效果 */
.sakura-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.sakura {
    position: absolute;
    top: -50px;
    width: 15px;
    height: 15px;
    background: radial-gradient(ellipse at center, #ffb7c5 0%, #ff69b4 50%, transparent 70%);
    border-radius: 50% 0 50% 50%;
    opacity: 0.8;
    animation: sakuraFall var(--duration, 10s) linear infinite;
    animation-delay: var(--delay, 0s);
    transform-origin: center;
    will-change: transform;
}

.sakura::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    transform: rotate(90deg);
}

@keyframes sakuraFall {
    0% {
        transform: translateY(-50px) rotate(0deg) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) rotate(720deg) translateX(var(--drift, 100px));
        opacity: 0;
    }
}

/* 金元宝飘落 */
.ingot-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.ingot {
    position: absolute;
    top: -60px;
    font-size: 30px;
    animation: ingotFall var(--duration, 8s) ease-in infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
}

@keyframes ingotFall {
    0% {
        transform: translateY(-60px) rotate(0deg) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(10vh) rotate(30deg) scale(1);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg) scale(0.8);
        opacity: 0;
    }
}

/* 闪烁的霓虹灯边框 */
.neon-border {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 3;
    border: 4px solid transparent;
    animation: neonBorderGlow 3s ease-in-out infinite;
}

@keyframes neonBorderGlow {
    0%, 100% {
        box-shadow:
            inset 0 0 20px rgba(255, 215, 0, 0.3),
            inset 0 0 40px rgba(255, 0, 0, 0.2),
            0 0 20px rgba(255, 215, 0, 0.3),
            0 0 40px rgba(255, 0, 0, 0.2);
    }
    50% {
        box-shadow:
            inset 0 0 40px rgba(255, 215, 0, 0.5),
            inset 0 0 80px rgba(255, 0, 0, 0.3),
            0 0 40px rgba(255, 215, 0, 0.5),
            0 0 80px rgba(255, 0, 0, 0.3);
    }
}

/* 旋转的福字 */
.spinning-fu {
    position: fixed;
    font-family: 'Ma Shan Zheng', serif;
    font-size: 80px;
    color: #ffd700;
    text-shadow:
        0 0 20px rgba(255, 215, 0, 0.8),
        0 0 40px rgba(255, 0, 0, 0.5);
    animation: spinFu 20s linear infinite;
    opacity: 0.15;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
}

.spinning-fu.left {
    left: 5%;
    top: 50%;
}

.spinning-fu.right {
    right: 5%;
    top: 50%;
    animation-direction: reverse;
}

@keyframes spinFu {
    from { transform: translateY(-50%) rotate(0deg); }
    to { transform: translateY(-50%) rotate(360deg); }
}

/* 跳动的灯笼串 */
.lantern-string {
    position: fixed;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 4;
    pointer-events: none;
}

.lantern-string.left {
    left: 20px;
}

.lantern-string.right {
    right: 20px;
}

.lantern-item {
    font-size: 40px;
    animation: lanternBounce 2s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(255, 100, 0, 0.8));
    will-change: transform;
}

.lantern-item:nth-child(1) { animation-delay: 0s; }
.lantern-item:nth-child(2) { animation-delay: 0.2s; }
.lantern-item:nth-child(3) { animation-delay: 0.4s; }
.lantern-item:nth-child(4) { animation-delay: 0.6s; }

@keyframes lanternBounce {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
}

/* 流光溢彩效果 */
.shimmer-overlay {
    position: fixed;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 215, 0, 0.1),
        rgba(255, 255, 255, 0.2),
        rgba(255, 215, 0, 0.1),
        transparent
    );
    animation: shimmerMove 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 5;
    will-change: transform;
}

@keyframes shimmerMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(400%); }
}

/* 彩带飘动 */
.ribbon-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.ribbon {
    position: absolute;
    width: 8px;
    height: 80px;
    border-radius: 4px;
    animation: ribbonFall var(--duration, 6s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform;
    opacity: 0.9;
}

.ribbon.red { background: linear-gradient(180deg, #ff0000, #cc0000); }
.ribbon.gold { background: linear-gradient(180deg, #ffd700, #ffaa00); }
.ribbon.pink { background: linear-gradient(180deg, #ff69b4, #ff1493); }
.ribbon.orange { background: linear-gradient(180deg, #ff8c00, #ff6600); }

@keyframes ribbonFall {
    0% {
        transform: translateY(-100px) rotate(0deg) scaleY(1);
        opacity: 0;
    }
    10% {
        opacity: 0.9;
    }
    50% {
        transform: translateY(50vh) rotate(180deg) scaleY(1.5);
    }
    90% {
        opacity: 0.9;
    }
    100% {
        transform: translateY(100vh) rotate(360deg) scaleY(1);
        opacity: 0;
    }
}

/* 脉冲光环 - 抽奖按钮周围 */
.pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: inherit;
    border: 3px solid rgba(255, 215, 0, 0.6);
    animation: pulseRing 2s ease-out infinite;
    pointer-events: none;
}

@keyframes pulseRing {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

/* 抽奖按钮增强发光 */
#lottery-btn {
    position: relative;
    overflow: visible;
}

#lottery-btn::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(45deg, #ff0000, #ffd700, #ff0000, #ffd700);
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    animation: gradientShift 3s ease infinite;
    filter: blur(15px);
    opacity: 0.7;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 中奖时的金光四射 */
.winner-display .golden-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 215, 0, 0.4) 10deg,
        transparent 20deg
    );
    animation: goldenRaysSpin 4s linear infinite;
    pointer-events: none;
    will-change: transform;
}

@keyframes goldenRaysSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 喜庆文字闪烁 */
.festive-text {
    animation: festiveGlow 1.5s ease-in-out infinite alternate;
}

@keyframes festiveGlow {
    from {
        text-shadow:
            0 0 10px rgba(255, 215, 0, 0.8),
            0 0 20px rgba(255, 215, 0, 0.6),
            0 0 30px rgba(255, 0, 0, 0.4);
    }
    to {
        text-shadow:
            0 0 20px rgba(255, 215, 0, 1),
            0 0 40px rgba(255, 215, 0, 0.8),
            0 0 60px rgba(255, 0, 0, 0.6),
            0 0 80px rgba(255, 215, 0, 0.4);
    }
}

/* 鞭炮爆炸粒子增强 */
.firecracker-explosion {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: firecrackerExplode 0.8s ease-out forwards;
    will-change: transform, opacity;
}

@keyframes firecrackerExplode {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx, 50px), var(--ty, -50px)) scale(0);
        opacity: 0;
    }
}

/* 波浪光效 */
.wave-light {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 150px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(255, 215, 0, 0.1),
        rgba(255, 100, 0, 0.15),
        rgba(255, 215, 0, 0.2)
    );
    animation: waveMove 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
}

@keyframes waveMove {
    0%, 100% { transform: translateX(0) scaleY(1); }
    50% { transform: translateX(-25%) scaleY(1.2); }
}

/* 角落装饰 - 中国结 */
.chinese-knot {
    position: fixed;
    font-size: 60px;
    opacity: 0.8;
    animation: knotSway 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 4;
    filter: drop-shadow(0 5px 15px rgba(200, 0, 0, 0.5));
}

.chinese-knot.top-left {
    top: 80px;
    left: 30px;
}

.chinese-knot.top-right {
    top: 80px;
    right: 30px;
    animation-delay: -2s;
}

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

/* ========== 并行抽奖样式 ========== */

/* 并行抽奖容器 */
.parallel-lottery-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(139, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.98) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.parallel-lottery-container.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* 并行抽奖标题 */
.parallel-lottery-title {
    font-family: 'Ma Shan Zheng', serif;
    font-size: 52px;
    color: #ffd700;
    text-shadow:
        0 0 30px rgba(255, 215, 0, 0.8),
        0 0 60px rgba(255, 100, 50, 0.5);
    margin-bottom: 50px;
    animation: titlePulse 2s ease-in-out infinite;
}

@keyframes titlePulse {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 100, 50, 0.5);
    }
    50% {
        transform: scale(1.05);
        text-shadow: 0 0 50px rgba(255, 215, 0, 1), 0 0 100px rgba(255, 100, 50, 0.8);
    }
}

/* 并行抽奖网格 */
.parallel-lottery-grid {
    display: grid;
    gap: 40px;
    padding: 30px;
    max-width: 95vw;
    max-height: 70vh;
}

/* 少量人数布局 (1-3人) */
.parallel-lottery-grid.grid-few {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    max-width: 1000px;
}

/* 中等人数布局 (4-6人) */
.parallel-lottery-grid.grid-medium {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
}

/* 大量人数布局 (7+人) */
.parallel-lottery-grid.grid-many {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1400px;
    gap: 25px;
}

.parallel-lottery-grid.grid-many .parallel-slot {
    transform: scale(0.85);
}

/* 单个抽奖槽位 */
.parallel-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: slotAppear 0.5s ease backwards;
}

.parallel-slot:nth-child(1) { animation-delay: 0s; }
.parallel-slot:nth-child(2) { animation-delay: 0.1s; }
.parallel-slot:nth-child(3) { animation-delay: 0.2s; }
.parallel-slot:nth-child(4) { animation-delay: 0.3s; }
.parallel-slot:nth-child(5) { animation-delay: 0.4s; }
.parallel-slot:nth-child(6) { animation-delay: 0.5s; }
.parallel-slot:nth-child(7) { animation-delay: 0.6s; }
.parallel-slot:nth-child(8) { animation-delay: 0.7s; }
.parallel-slot:nth-child(9) { animation-delay: 0.8s; }
.parallel-slot:nth-child(10) { animation-delay: 0.9s; }

@keyframes slotAppear {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 槽位框架 */
.slot-frame {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.6), rgba(139, 0, 0, 0.4));
    border: 4px solid rgba(255, 215, 0, 0.5);
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.3),
        inset 0 0 30px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

/* 滚动中的槽位 */
.parallel-slot:not(.winner) .slot-frame {
    animation: slotRolling 0.15s ease-in-out infinite;
}

@keyframes slotRolling {
    0%, 100% {
        border-color: rgba(255, 215, 0, 0.5);
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.3), inset 0 0 30px rgba(0, 0, 0, 0.5);
    }
    50% {
        border-color: rgba(255, 100, 50, 0.8);
        box-shadow: 0 0 50px rgba(255, 100, 50, 0.5), inset 0 0 30px rgba(0, 0, 0, 0.5);
    }
}

/* 中奖槽位 */
.parallel-slot.winner .slot-frame {
    border-color: #ffd700;
    border-width: 6px;
    box-shadow:
        0 0 50px rgba(255, 215, 0, 0.8),
        0 0 100px rgba(255, 215, 0, 0.5),
        0 0 150px rgba(255, 100, 50, 0.3),
        inset 0 0 30px rgba(255, 215, 0, 0.2);
    animation: winnerGlow 1s ease-in-out infinite;
}

@keyframes winnerGlow {
    0%, 100% {
        box-shadow:
            0 0 50px rgba(255, 215, 0, 0.8),
            0 0 100px rgba(255, 215, 0, 0.5);
    }
    50% {
        box-shadow:
            0 0 80px rgba(255, 215, 0, 1),
            0 0 150px rgba(255, 215, 0, 0.7),
            0 0 200px rgba(255, 100, 50, 0.4);
    }
}

/* 槽位照片 */
.slot-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.1s ease;
}

.parallel-slot:not(.winner) .slot-photo {
    animation: photoShake 0.1s ease-in-out infinite;
}

@keyframes photoShake {
    0%, 100% { transform: scale(1.02); }
    50% { transform: scale(1); }
}

.parallel-slot.winner .slot-photo {
    animation: winnerPhotoZoom 0.5s ease forwards;
}

@keyframes winnerPhotoZoom {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

/* 槽位名字 */
.slot-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    color: white;
    font-family: 'Ma Shan Zheng', serif;
    font-size: 24px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
}

.parallel-slot.winner .slot-name {
    color: #ffd700;
    font-size: 28px;
    text-shadow:
        0 0 10px rgba(255, 215, 0, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.8);
    animation: winnerNamePop 0.5s ease;
}

@keyframes winnerNamePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* 槽位光晕 */
.slot-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 250px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.parallel-slot.winner .slot-glow {
    opacity: 1;
    animation: glowPulse 1.5s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

/* 并行抽奖状态文字 */
.parallel-lottery-status {
    font-family: 'Noto Serif SC', serif;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 40px;
    animation: statusBlink 0.8s ease-in-out infinite;
}

@keyframes statusBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 并行抽奖关闭按钮 */
.parallel-lottery-close {
    margin-top: 40px;
    padding: 18px 60px;
    font-size: 22px;
    font-family: 'Noto Serif SC', serif;
    background: linear-gradient(145deg, #ffd700, #ff8c00);
    color: #8b0000;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    font-weight: bold;
    letter-spacing: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(255, 215, 0, 0.5);
    animation: closeButtonAppear 0.5s ease 0.5s backwards;
    position: relative;
    z-index: 10;
}

@keyframes closeButtonAppear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.parallel-lottery-close:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(255, 215, 0, 0.7);
}

/* 并行抽奖背景装饰 */
.parallel-lottery-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(255, 215, 0, 0.1),
        transparent,
        rgba(255, 100, 50, 0.1),
        transparent
    );
    animation: bgRotate 20s linear infinite;
    pointer-events: none;
}

@keyframes bgRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .parallel-lottery-grid.grid-many {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .parallel-lottery-grid.grid-medium,
    .parallel-lottery-grid.grid-many {
        grid-template-columns: repeat(2, 1fr);
    }

    .slot-frame {
        width: 160px;
        height: 160px;
    }

    .slot-name {
        font-size: 20px;
    }
}

@media (max-width: 600px) {
    .parallel-lottery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .slot-frame {
        width: 130px;
        height: 130px;
    }

    .parallel-lottery-title {
        font-size: 36px;
    }
}


/* ========== 增强喜庆效果 ========== */

/* 1. 标题呼吸发光效果 */
.main-title h1 {
    animation: titleGlowLottery 2s ease-in-out infinite;
}

@keyframes titleGlowLottery {
    0%, 100% { 
        text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 2px 2px 4px rgba(0,0,0,0.5);
        filter: brightness(1);
    }
    50% { 
        text-shadow: 0 0 40px rgba(255, 215, 0, 1), 0 0 60px rgba(255, 150, 0, 0.8), 2px 2px 4px rgba(0,0,0,0.5);
        filter: brightness(1.15);
    }
}

/* 2. 霓虹边框效果 */
.neon-border-effect {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1000;
    border: 4px solid transparent;
    animation: neonPulseLottery 2s ease-in-out infinite;
}

@keyframes neonPulseLottery {
    0%, 100% {
        box-shadow: inset 0 0 30px rgba(255, 215, 0, 0.3), inset 0 0 60px rgba(255, 50, 50, 0.2);
    }
    50% {
        box-shadow: inset 0 0 50px rgba(255, 215, 0, 0.5), inset 0 0 100px rgba(255, 50, 50, 0.3);
    }
}

/* 3. 底部波浪光效 */
.wave-light-effect {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(0deg, rgba(255, 215, 0, 0.25) 0%, transparent 100%);
    pointer-events: none;
    z-index: 5;
    animation: waveMoveEffect 4s ease-in-out infinite;
}

.wave-light-effect::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: radial-gradient(ellipse at center bottom, rgba(255, 150, 0, 0.35) 0%, transparent 70%);
    animation: waveSweepEffect 6s ease-in-out infinite;
}

@keyframes waveMoveEffect {
    0%, 100% { opacity: 0.6; height: 120px; }
    50% { opacity: 1; height: 150px; }
}

@keyframes waveSweepEffect {
    0%, 100% { transform: translateX(-25%); }
    50% { transform: translateX(25%); }
}

/* 4. 金元宝/铜钱飘落 */
.coin-rain-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 60;
    overflow: hidden;
}

.falling-coin {
    position: absolute;
    font-size: 28px;
    animation: coinFallEffect var(--duration) linear infinite;
    animation-delay: var(--delay);
    opacity: 0.85;
}

@keyframes coinFallEffect {
    0% {
        transform: translateY(-50px) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 0.85; }
    90% { opacity: 0.85; }
    100% {
        transform: translateY(calc(100vh + 50px)) rotate(720deg);
        opacity: 0;
    }
}

/* 5. 红包雨增强 */
.red-packet-rain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 55;
    overflow: hidden;
}

.falling-packet {
    position: absolute;
    width: 36px;
    height: 50px;
    background: linear-gradient(180deg, #ff4444 0%, #cc0000 50%, #990000 100%);
    border-radius: 4px;
    animation: packetFallEffect var(--duration) linear infinite;
    animation-delay: var(--delay);
    box-shadow: 2px 4px 8px rgba(0,0,0,0.3);
}

.falling-packet::before {
    content: '福';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffd700;
    font-size: 18px;
    font-weight: bold;
}

.falling-packet::after {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 2px;
    background: #ffd700;
    border-radius: 1px;
}

@keyframes packetFallEffect {
    0% {
        transform: translateY(-70px) rotate(-10deg);
        opacity: 0;
    }
    10% { opacity: 0.9; }
    90% { opacity: 0.9; }
    100% {
        transform: translateY(calc(100vh + 70px)) rotate(10deg);
        opacity: 0;
    }
}

/* 6. 中国结装饰 */
.chinese-knot-deco {
    position: fixed;
    font-size: 55px;
    z-index: 50;
    animation: knotSwingEffect 4s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 50, 50, 0.5));
}

.chinese-knot-deco.top-left { left: 15px; top: 80px; }
.chinese-knot-deco.top-right { right: 15px; top: 80px; animation-delay: 2s; }

@keyframes knotSwingEffect {
    0%, 100% { transform: rotate(-5deg) scale(1); }
    50% { transform: rotate(5deg) scale(1.05); }
}

/* 7. 大型烟花爆炸效果 */
.firework-explosion-big {
    position: fixed;
    pointer-events: none;
    z-index: 200;
}

.firework-center-big {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    animation: fireworkExplodeBig 1.5s ease-out forwards;
}

.firework-spark-big {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: sparkFlyBig 1.2s ease-out forwards;
}

@keyframes fireworkExplodeBig {
    0% { transform: scale(0); opacity: 1; }
    50% { transform: scale(3); opacity: 1; }
    100% { transform: scale(5); opacity: 0; }
}

@keyframes sparkFlyBig {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* 8. 闪光扫过效果 */
.shimmer-sweep-effect {
    position: fixed;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), rgba(255, 215, 0, 0.15), rgba(255, 255, 255, 0.08), transparent);
    pointer-events: none;
    z-index: 1001;
    animation: shimmerSweepEffect 10s ease-in-out infinite;
}

@keyframes shimmerSweepEffect {
    0%, 100% { left: -100%; }
    50% { left: 150%; }
}

/* 9. 照片墙金色光晕 - GPU 加速版 */
.photo-wall .photo-item {
    animation: photoGlowEffect 3s ease-in-out infinite;
    will-change: box-shadow, border-color;
}

@keyframes photoGlowEffect {
    0%, 100% { 
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
        border-color: rgba(255, 215, 0, 0.6);
    }
    50% { 
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.7), 0 0 45px rgba(255, 150, 0, 0.3);
        border-color: rgba(255, 215, 0, 0.9);
    }
}

/* 10. 更密集的金色粒子 */
.extra-gold-particle {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
    background: #ffd700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.9);
    animation: extraParticleFloat var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes extraParticleFloat {
    0%, 100% { 
        transform: translateY(0) scale(1); 
        opacity: 0.7; 
    }
    50% { 
        transform: translateY(-25px) scale(1.3); 
        opacity: 1; 
    }
}


/* ========== 中奖烟花动画 ========== */
@keyframes winnerFireworkCenter {
    0% { transform: scale(0); opacity: 1; }
    50% { transform: scale(2); opacity: 1; }
    100% { transform: scale(3); opacity: 0; }
}

@keyframes winnerFireworkSpark {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* 中奖展示响应式 */
@media (max-width: 768px) {
    .winner-card img {
        width: 280px;
        height: 280px;
    }
    
    .winner-text {
        font-size: 40px;
    }
    
    .winner-badge {
        font-size: 32px;
    }
    
    .winner-crown {
        font-size: 45px;
    }
    
    .winner-photo-frame {
        padding: 10px;
    }
    
    .winner-rays {
        width: 500px;
        height: 500px;
    }
}

/* =========================
   性能模式（抽奖现场低配/投屏优化）
   - URL: ?perf=lite  或 localStorage: perfMode=lite
   - 自动：prefers-reduced-motion / 低核数/低内存
========================= */
html.perf-lite body {
    /* 避免整页强制合成层带来的大纹理开销 */
    transform: none !important;
    perspective: none !important;
}

html.perf-lite body::before {
    /* 降低多层 radial-gradient 的重绘/合成压力 */
    background: linear-gradient(180deg, #4a0a08 0%, #6d1510 25%, #8b2018 50%, #a83525 75%, #c04530 100%) !important;
}

html.perf-lite body::after {
    display: none !important;
}

html.perf-lite .effects-layer,
html.perf-lite .top-glow,
html.perf-lite .border-glow,
html.perf-lite .light-rays,
html.perf-lite .winner-rays,
html.perf-lite .shimmer-overlay,
html.perf-lite .neon-border,
html.perf-lite .wave-light,
html.perf-lite .sakura-container,
html.perf-lite .ingot-container,
html.perf-lite .ribbon-container {
    display: none !important;
}

html.perf-lite .company-logo {
    animation: none !important;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.35), inset 0 0 8px rgba(255, 255, 255, 0.18) !important;
}

html.perf-lite .auth-modal,
html.perf-lite .batch-lottery-content,
html.perf-lite .confirm-content,
html.perf-lite .winner-card {
    /* blur/backdrop-filter 在投屏和集显上很容易成为瓶颈 */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .effects-layer,
    .top-glow,
    .border-glow,
    .light-rays,
    .winner-rays,
    .shimmer-overlay,
    .neon-border,
    .wave-light {
        display: none !important;
    }
}

/* ========== 抽奖页面美化增强 ========== */

/* 抽奖时的背景脉冲效果 */
body.lottery-active::before {
    animation: lotteryBgPulse 1.5s ease-in-out infinite !important;
}

@keyframes lotteryBgPulse {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.15);
    }
}

/* 抽奖时标题闪烁 */
body.lottery-active .main-title h1 {
    animation: lotteryTitleFlash 0.8s ease-in-out infinite !important;
}

@keyframes lotteryTitleFlash {
    0%, 100% {
        text-shadow: 
            0 0 20px rgba(255, 215, 0, 1),
            0 0 40px rgba(255, 215, 0, 0.8),
            4px 4px 8px rgba(0, 0, 0, 0.9);
        filter: brightness(1);
    }
    50% {
        text-shadow: 
            0 0 40px rgba(255, 215, 0, 1),
            0 0 80px rgba(255, 215, 0, 1),
            0 0 120px rgba(255, 100, 50, 0.8),
            4px 4px 8px rgba(0, 0, 0, 0.9);
        filter: brightness(1.3);
    }
}

/* 抽奖时灯笼加速摇摆 */
body.lottery-active .lantern-container {
    animation: lanternFastSwing 0.6s ease-in-out infinite !important;
}

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

/* 抽奖时边框闪烁增强 */
body.lottery-active .border-glow {
    animation: lotteryBorderFlash 0.4s ease-in-out infinite !important;
}

@keyframes lotteryBorderFlash {
    0%, 100% {
        opacity: 0.6;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(255, 215, 0, 0.6) 15%,
            rgba(255, 215, 0, 1) 50%,
            rgba(255, 215, 0, 0.6) 85%,
            transparent 100%);
    }
    50% {
        opacity: 1;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(255, 100, 50, 0.8) 15%,
            rgba(255, 215, 0, 1) 50%,
            rgba(255, 100, 50, 0.8) 85%,
            transparent 100%);
    }
}

/* 中奖卡片增强 */
.winner-card {
    background: linear-gradient(145deg, rgba(139, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
    border-radius: 30px;
    padding: 40px;
    backdrop-filter: blur(10px);
}

/* 中奖照片边框增强 */
.winner-photo-frame {
    position: relative;
    display: inline-block;
    padding: 18px;
    background: linear-gradient(135deg, #ffd700 0%, #ff8c00 30%, #ffd700 50%, #ff8c00 70%, #ffd700 100%);
    background-size: 200% 200%;
    border-radius: 28px;
    box-shadow: 
        0 0 80px rgba(255, 215, 0, 1),
        0 0 160px rgba(255, 150, 0, 0.7),
        inset 0 0 40px rgba(255, 255, 255, 0.4);
    animation: frameGradientMove 2s ease-in-out infinite, framePulseEnhanced 2s ease-in-out infinite;
}

@keyframes frameGradientMove {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes framePulseEnhanced {
    0%, 100% {
        box-shadow: 0 0 80px rgba(255, 215, 0, 1), 0 0 160px rgba(255, 150, 0, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 120px rgba(255, 215, 0, 1), 0 0 200px rgba(255, 150, 0, 0.9), 0 0 280px rgba(255, 100, 50, 0.5);
        transform: scale(1.02);
    }
}

/* 中奖徽章增强 */
.winner-badge {
    font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
    font-size: 48px;
    color: #ffd700;
    margin-bottom: 30px;
    text-shadow: 
        0 0 40px rgba(255, 215, 0, 1), 
        0 0 80px rgba(255, 150, 0, 1),
        0 0 120px rgba(255, 100, 50, 0.6);
    animation: badgeGlowEnhanced 1.2s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

@keyframes badgeGlowEnhanced {
    0%, 100% { 
        text-shadow: 0 0 40px rgba(255, 215, 0, 1), 0 0 80px rgba(255, 150, 0, 1);
        transform: scale(1);
    }
    50% { 
        text-shadow: 0 0 60px rgba(255, 215, 0, 1), 0 0 120px rgba(255, 150, 0, 1), 0 0 160px rgba(255, 100, 50, 0.8);
        transform: scale(1.08);
    }
}

/* 皇冠增强 */
.winner-crown {
    font-size: 70px;
    animation: crownBounceEnhanced 0.8s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1));
    margin-bottom: 15px;
}

@keyframes crownBounceEnhanced {
    0%, 100% { transform: translateY(0) scale(1) rotate(-3deg); }
    50% { transform: translateY(-20px) scale(1.15) rotate(3deg); }
}

/* 中奖者名字增强 */
.winner-text {
    font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
    font-size: 80px;
    color: #ffd700;
    margin-top: 35px;
    text-shadow: 
        0 0 30px rgba(255, 215, 0, 1),
        0 0 60px rgba(255, 215, 0, 0.8),
        0 0 90px rgba(255, 100, 50, 0.6),
        4px 4px 8px rgba(0, 0, 0, 0.8);
    animation: winnerTextPulse 1.5s ease-in-out infinite;
}

@keyframes winnerTextPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* 奖项名称增强 */
.winner-prize-name {
    font-family: 'Noto Serif SC', serif;
    font-size: 36px;
    color: #ff6b6b;
    margin-top: 15px;
    text-shadow: 0 0 30px rgba(255, 100, 100, 1);
    animation: prizeGlowEnhanced 1.5s ease-in-out infinite;
}

@keyframes prizeGlowEnhanced {
    0%, 100% { 
        opacity: 0.9; 
        text-shadow: 0 0 30px rgba(255, 100, 100, 1);
    }
    50% { 
        opacity: 1; 
        text-shadow: 0 0 50px rgba(255, 100, 100, 1), 0 0 80px rgba(255, 150, 150, 0.8);
    }
}

/* 底部装饰增强 */
.winner-decorations {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 40px;
    font-size: 50px;
}

.deco-lantern {
    animation: lanternSwingDeco 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(255, 100, 0, 0.8));
}

.deco-packet {
    animation: packetBounceDeco 1.2s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(255, 50, 50, 0.8));
}

@keyframes lanternSwingDeco {
    0%, 100% { transform: rotate(-15deg) scale(1); }
    50% { transform: rotate(15deg) scale(1.1); }
}

@keyframes packetBounceDeco {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-15px) scale(1.15); }
}

/* 金光四射效果增强 */
.winner-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1000px;
    height: 1000px;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 215, 0, 0.6) 8deg,
        transparent 16deg,
        rgba(255, 100, 50, 0.5) 24deg,
        transparent 32deg,
        rgba(255, 215, 0, 0.6) 40deg,
        transparent 48deg,
        rgba(255, 100, 50, 0.5) 56deg,
        transparent 64deg,
        rgba(255, 215, 0, 0.6) 72deg,
        transparent 80deg,
        rgba(255, 100, 50, 0.5) 88deg,
        transparent 96deg
    );
    animation: raysRotateEnhanced 6s linear infinite;
    z-index: 2;
}

@keyframes raysRotateEnhanced {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 公司名称增强 */
.winner-company {
    font-family: 'Noto Serif SC', serif;
    font-size: 20px;
    color: rgba(255, 215, 0, 0.8);
    margin-top: 30px;
    letter-spacing: 6px;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}