/* =====================================================================
   全屏高端流光特效（金光 / 一束光划过）
   - 全玩法通用，纯 CSS 实现，不依赖 JS、不参与任何抽奖逻辑
   - 固定层 + pointer-events:none，绝不拦截点击/刮奖/按钮
   - z-index 8888：压在页面内容之上，但在弹窗(9999)之下，不影响弹窗阅读
   - 后台「外观配置 → 全屏流光特效」可切换：gold 金光 / white 银白光束 / off 关闭
   ===================================================================== */
.fx-light{
    position: fixed; inset: 0; z-index: 8888;
    pointer-events: none; overflow: hidden;
    /* 主题色变量：gold 暖金 / white 冷银，由 .fx-gold / .fx-white 覆盖 */
    --fx-c1:   rgba(255,231,168,.72);   /* 光束主体 */
    --fx-c2:   rgba(255,238,198,.22);   /* 光束外晕 */
    --fx-core: rgba(255,255,255,.95);   /* 光束高光芯 */
    --fx-glow: rgba(255,214,140,.55);   /* 顶部柔光 */
    --fx-dot:  rgba(255,226,158,.95);   /* 金色微尘 */
}
.fx-light.fx-white{
    --fx-c1:   rgba(255,255,255,.52);
    --fx-c2:   rgba(255,255,255,.16);
    --fx-core: rgba(255,255,255,1);
    --fx-glow: rgba(255,255,255,.42);
    --fx-dot:  rgba(255,255,255,.92);
}
.fx-light i{ position: absolute; display: block; }

/* ---------- 顶部金色柔光（缓慢呼吸，营造贵气氛围） ---------- */
.fx-glow{
    left: 50%; top: -26%; width: 150%; height: 56%;
    transform: translateX(-50%);
    background: radial-gradient(50% 62% at 50% 50%,
                var(--fx-glow) 0%, rgba(255,214,140,.14) 46%, rgba(255,214,140,0) 74%);
    filter: blur(12px);
    animation: fxGlow 5.6s ease-in-out infinite;
}
.fx-white .fx-glow{
    background: radial-gradient(50% 62% at 50% 50%,
                var(--fx-glow) 0%, rgba(255,255,255,.12) 46%, rgba(255,255,255,0) 74%);
}
@keyframes fxGlow{
    0%,100% { opacity: .30; }
    50%     { opacity: .85; }
}

/* ---------- 主光束：斜向划过整屏 ---------- */
.fx-beam{
    top: -42%; left: 0; width: 38%; height: 184%;
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        var(--fx-c2) 30%,
        var(--fx-c1) 46%,
        var(--fx-core) 50%,
        var(--fx-c1) 54%,
        var(--fx-c2) 70%,
        rgba(255,255,255,0) 100%);
    filter: blur(14px);
    opacity: 0;
    will-change: transform, opacity;
    animation: fxSweep 7s cubic-bezier(.42,0,.24,1) infinite;
}
/* 第二条细光束，错峰出现，层次更丰富 */
.fx-beam.b2{
    width: 15%; filter: blur(9px);
    animation-duration: 7s; animation-delay: 3.4s;
}
@keyframes fxSweep{
    0%   { opacity: 0; transform: translateX(-72%) rotate(16deg); }
    7%   { opacity: 1; }
    60%  { opacity: 1; }
    74%  { opacity: 0; transform: translateX(330%) rotate(16deg); }
    100% { opacity: 0; transform: translateX(330%) rotate(16deg); }
}

/* ---------- 金色微尘：缓慢上浮，增强质感 ---------- */
.fx-dust{
    inset: 0;
    background-image:
        radial-gradient(1.8px 1.8px at 11% 94%, var(--fx-dot), transparent 62%),
        radial-gradient(2.2px 2.2px at 27% 86%, var(--fx-dot), transparent 62%),
        radial-gradient(1.5px 1.5px at 42% 97%, var(--fx-dot), transparent 62%),
        radial-gradient(2.4px 2.4px at 58% 90%, var(--fx-dot), transparent 62%),
        radial-gradient(1.6px 1.6px at 71% 96%, var(--fx-dot), transparent 62%),
        radial-gradient(2.0px 2.0px at 84% 88%, var(--fx-dot), transparent 62%),
        radial-gradient(1.4px 1.4px at 35% 68%, var(--fx-dot), transparent 62%),
        radial-gradient(1.8px 1.8px at 66% 74%, var(--fx-dot), transparent 62%);
    background-repeat: no-repeat;
    opacity: 0;
    animation: fxDust 12s linear infinite;
}
@keyframes fxDust{
    0%   { opacity: 0;   transform: translateY(4%); }
    14%  { opacity: .85; }
    80%  { opacity: .55; }
    100% { opacity: 0;   transform: translateY(-20%); }
}

/* ---------- 无障碍：系统开启「减少动态效果」时自动关闭 ---------- */
@media (prefers-reduced-motion: reduce){
    .fx-light{ display: none; }
}