/* ============================================
   旋转圆盘抽奖样式（8格，45°/格）
   指针在顶部（12点），转盘顺时针旋转
   ============================================ */
.xy-turntable-wrap {
    position: relative;
    width: 420px;
    height: 420px;
    margin: 20px 0;
    user-select: none;
}
/* 转盘"舞台底座"：卡片白底太素，用 :before 铺一层柔和粉紫渐变背景
   (z-index:-1 不会遮挡盘体，也不改动任何布局尺寸) */
.xy-turntable-wrap::before {
    content: '';
    position: absolute;
    inset: -24px;
    z-index: -1;
    border-radius: 30px;
    background: radial-gradient(ellipse at 50% 42%,
        rgba(255,255,255,.55) 0%,
        rgba(255,240,247,.40) 42%,
        rgba(255,183,221,.30) 68%,
        rgba(167,150,255,.32) 100%);
    box-shadow:
        0 14px 44px rgba(231,68,53,.10),
        0 6px 26px rgba(160,120,255,.16);
}
/* 夜间模式：换成深色霓虹紫，避免白亮渐变刺眼 */
.dark-theme .xy-turntable-wrap::before {
    background: radial-gradient(ellipse at 50% 42%,
        rgba(70,48,84,.55) 0%,
        rgba(122,78,150,.35) 60%,
        rgba(64,74,168,.45) 100%);
    box-shadow:
        0 14px 44px rgba(0,0,0,.35),
        inset 0 0 40px rgba(150,90,255,.18);
}
/* 外圈装饰：金色边框 + 双圈霓虹灯管（外面一层大光圈 + 里面一圈流光线条） */
.xy-turntable-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* 基础金色底 */
    background: linear-gradient(145deg, #ffd700, #ff8c00, #ffd700);
    padding: 10px;
    /* 外发光霓虹 + 内反光白色 */
    box-shadow:
        0 0 20px 6px rgba(231,68,53,0.65),
        0 0 42px 14px rgba(255,98,246,0.35),
        0 10px 40px rgba(0,0,0,0.25),
        inset 0 2px 10px rgba(255,255,255,0.5);
    /* 玻璃灯管流光：conic-gradient 一圈粉→紫→青→粉，再用旋转动画 */
}
/* 内层玻璃霓虹：在金色底上铺一层旋转的彩色流光 conic */
.xy-turntable-ring::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(
        from 0deg,
        rgba(255, 69, 165, 0.85)   0deg,
        rgba(255, 126, 234, 0.85)  45deg,
        rgba(155, 109, 255, 0.85)  90deg,
        rgba(94, 234, 255, 0.85)   135deg,
        rgba(99, 255, 176, 0.85)   180deg,
        rgba(255, 241, 118, 0.85)  225deg,
        rgba(255, 169, 64, 0.85)   270deg,
        rgba(255, 69, 165, 0.85)   315deg,
        rgba(255, 69, 165, 0.85)   360deg
    );
    -webkit-mask: radial-gradient(circle, transparent 72%, #000 72.4%, #000 85%, transparent 85.4%);
            mask: radial-gradient(circle, transparent 72%, #000 72.4%, #000 85%, transparent 85.4%);
    mix-blend-mode: screen;
    animation: xytl-neon-rotate 4.5s linear infinite;
    filter: saturate(1.3);
}
/* 外层大霓虹光圈：呼吸式放大缩小，粉→青→紫轮换 */
.xy-turntable-ring::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle,
        rgba(255,98,246,0.05) 60%,
        rgba(255,98,246,0.22) 72%,
        rgba(133,116,255,0.38) 82%,
        rgba(94,234,255,0.30) 92%,
        rgba(94,234,255,0) 99%
    );
    animation: xytl-neon-pulse 5s ease-in-out infinite;
    mix-blend-mode: screen;
}

/* 圣诞树彩灯串：整圈32灯红黄蓝绿排满，分4路控按颜色组轮流闪亮(经典4路线控圣诞灯)
   ⚠️ keyframes 里绝对不能写 transform，会和 PHP inline 的 transform:rotate(Ndeg) 冲突！ */
.xy-turntable-lights {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 6;
}
/* 圣诞灯：默认（idle状态）整圈慢呼吸 + 3 状态联动转盘
   容器状态class: .xy-lights-idle(平时慢4s呼吸)  .xy-lights-spin(抽奖中0.5s超快)  .xy-lights-win(中奖2s庆祝爆闪) */
.xy-tl-bulb {
    position: absolute;
    top: -2px;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 50%;
    transform-origin: 50% 212px;
    border: 1.5px solid rgba(255,255,255,0.45);
    animation-name: xytl-4phase;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
/* 颜色组：每个颜色有自己的玻璃和发光参数；phase顺序统一 R(0)→Y(.25)→B(.5)→G(.75)
   公式：要在 T_peak 达到0%亮峰 → delay = -(duration - T_peak)，不同状态会改 duration，所以这里用百分比 */
@keyframes xytl-4phase {
    /* 4 色轮流整组全亮，每色占 0~25% 窗口，25~100% 为暗带色彩玻璃态
       通过 4 组不同的 delay 把各组的 0% 峰值分别对齐到 0,25%,50%,75% 全局相位 */
    0%   { /* 本组亮峰值 */ animation-timing-function: ease-in; }
    0%   {
        background-image: var(--glass-bright);
        background-color: var(--glow);
        opacity: 1;
        border-color: #ffffff;
        box-shadow:
            0 0 10px 3px var(--glow),
            0 0 26px 10px var(--glow),
            0 0 42px 16px rgba(255,255,255,0.6);
    }
    8%   { /* 亮峰保持 */
        background-image: var(--glass-bright);
        background-color: var(--glow);
        opacity: 1;
        border-color: #ffffff;
        box-shadow: 0 0 9px 3px var(--glow), 0 0 24px 9px var(--glow);
    }
    16%  { /* 过渡回暗态 */
        background-image: var(--glass-bright);
        background-color: var(--glow);
        opacity: 0.97;
        border-color: rgba(255,255,255,0.6);
        box-shadow: 0 0 5px 2px var(--glow), 0 0 12px 4px var(--glow);
    }
    24%  { /* 完全暗态（保持各自的玻璃色，永远红黄蓝绿交替可见） */
        background-image: var(--glass-dim);
        opacity: 0.95;
        border-color: rgba(255,255,255,0.45);
    }
    100% {
        background-image: var(--glass-dim);
        opacity: 0.95;
        border-color: rgba(255,255,255,0.45);
    }
}
/* 颜色组基础样式（各自动画 + 颜色） */
.xy-neon-r {
    --glass-dim:  radial-gradient(circle at 35% 30%, #ffffff 0%, #f3a29f 25%, #d8423f 60%, #a41b19 100%);
    --glass-bright: radial-gradient(circle at 35% 30%, #ffffff 0%, #ff9290 25%, #ff3a37 60%, #ff7875 100%);
    --glow: #ff3355;
    background-image: var(--glass-dim);
    background-color: #c53532;
    box-shadow: 0 0 3px 1px #c53532;
}
.xy-neon-y {
    --glass-dim:  radial-gradient(circle at 35% 30%, #ffffff 0%, #f9e79f 25%, #d7ad20 60%, #9c7a0a 100%);
    --glass-bright: radial-gradient(circle at 35% 30%, #ffffff 0%, #fff3a6 25%, #ffd32a 60%, #fff5b5 100%);
    --glow: #ffd32a;
    background-image: var(--glass-dim);
    background-color: #d4ab1e;
    box-shadow: 0 0 3px 1px #d4ab1e;
}
.xy-neon-b {
    --glass-dim:  radial-gradient(circle at 35% 30%, #ffffff 0%, #a3c9ee 25%, #2a72bf 60%, #0b3666 100%);
    --glass-bright: radial-gradient(circle at 35% 30%, #ffffff 0%, #a9dcff 25%, #2ac4ff 60%, #87d7ff 100%);
    --glow: #2ac4ff;
    background-image: var(--glass-dim);
    background-color: #1f79c4;
    box-shadow: 0 0 3px 1px #1f79c4;
}
.xy-neon-g {
    --glass-dim:  radial-gradient(circle at 35% 30%, #ffffff 0%, #a9ddb9 25%, #2b9a57 60%, #0a4b25 100%);
    --glass-bright: radial-gradient(circle at 35% 30%, #ffffff 0%, #b0f2c9 25%, #33ff88 60%, #7ff3b4 100%);
    --glow: #33ff88;
    background-image: var(--glass-dim);
    background-color: #209954;
    box-shadow: 0 0 3px 1px #209954;
}
/* ===== 状态切换 ===== */
/* 1) 空闲待机：整圈红黄蓝绿暗玻璃色交替，柔和慢呼吸 4s/轮，不刺眼不抢戏 */
.xy-lights-idle .xy-tl-bulb     { animation-duration: 4s; opacity: 0.92; }
.xy-lights-idle .xy-neon-r { animation-delay: 0s; }
.xy-lights-idle .xy-neon-y { animation-delay: -3s; }  /* delay = -(4 - 1) = -3 */
.xy-lights-idle .xy-neon-b { animation-delay: -2s; }  /* delay = -(4 - 2) = -2 */
.xy-lights-idle .xy-neon-g { animation-delay: -1s; }  /* delay = -(4 - 3) = -1 */

/* 2) 抽奖旋转中：整圈红黄蓝绿整组轮流全亮，0.5s/轮超快手感刺激 */
.xy-lights-spin  .xy-tl-bulb     { animation-duration: 0.5s; }
.xy-lights-spin  .xy-neon-r { animation-delay: 0s; }
.xy-lights-spin  .xy-neon-y { animation-delay: -.375s; } /* delay = -(0.5 - 0.125) = -.375 */
.xy-lights-spin  .xy-neon-b { animation-delay: -.25s;  } /* delay = -(0.5 - 0.25)  = -.25 */
.xy-lights-spin  .xy-neon-g { animation-delay: -.125s; } /* delay = -(0.5 - 0.375) = -.125 */

/* 3) 中奖后庆祝（转盘停稳后持续 2s）：0.35s/轮更快 + 更大发光爆闪
   比抽奖中还快一点更有"中了！"的爆感 */
.xy-lights-celebrate .xy-tl-bulb  { animation-duration: 0.35s; }
.xy-lights-celebrate .xy-neon-r { animation-delay: 0s; }
.xy-lights-celebrate .xy-neon-y { animation-delay: -.2625s; } /* delay = -(0.35 - 0.0875) */
.xy-lights-celebrate .xy-neon-b { animation-delay: -.175s;  } /* delay = -(0.35 - 0.175) */
.xy-lights-celebrate .xy-neon-g { animation-delay: -.0875s; } /* delay = -(0.35 - 0.2625) */
/* 庆祝时爆亮发光更强 */
@keyframes xytl-4phase-celebrate {} /* 占位符，复用 xytl-4phase */
.xy-lights-celebrate .xy-tl-bulb {
    /* 关键帧 0% 发光再爆一点（通过 filter 给整体发光加强） */
    filter: brightness(1.15) saturate(1.2);
}

@keyframes xytl-neon-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes xytl-neon-pulse {
    0%   { transform: scale(0.97); opacity: 0.85; }
    50%  { transform: scale(1.06); opacity: 1;    }
    100% { transform: scale(0.97); opacity: 0.85; }
}
/* 转盘主体（会旋转的） —— 初始 rotate(-22.5deg) 让 idx=0 的 conic 中心对准顶部指针 */
.xy-turntable-plate {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 5.5s cubic-bezier(0.12, 0.65, 0.2, 1);
    transform: rotate(-22.5deg);
    overflow: hidden;
}
/* conic 不偏移，边界 0°, 45°, 90°... 扇区中心在 idx*45+22.5°
   plate 初始 -22.5deg 后，idx=0 的扇区中心到达 0°（指针处） */
.xy-turntable-plate.sector-bg {
    background: conic-gradient(
        #fff5e1 0deg 45deg,
        #ffe0b3 45deg 90deg,
        #fff5e1 90deg 135deg,
        #ffe0b3 135deg 180deg,
        #fff5e1 180deg 225deg,
        #ffe0b3 225deg 270deg,
        #fff5e1 270deg 315deg,
        #ffe0b3 315deg 360deg
    );
}
/* 每个扇形的奖品文字 —— 位置由 PHP inline style 的 left/top 绝对定位 */
.xy-turntable-sector {
    position: absolute;
    width: 90px;
    height: 90px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #8b4513;
    line-height: 1.3;
    z-index: 5;
}
/* 奖品数量标签 */
.xy-turntable-sector .xy-cj-num {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--this-bg, var(--theme-color, #ff6b6b));
    border-radius: 10px;
}
.xy-turntable-sector .xy-cj-num.xy-cj-num-infinite {
    background: var(--this-bg, #999);
}
/* 奖品图标 */
.xy-turntable-sector img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 2px;
}
/* 顶部指针 */
.xy-turntable-pointer {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 32px solid #e74435;
    z-index: 10;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.3));
}
.xy-turntable-pointer::after {
    content: '';
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    background: #ffd700;
    border: 2px solid #e74435;
    border-radius: 50%;
}
/* 中心按钮 */
.xy-turntable-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 4px solid #fff;
    background: linear-gradient(145deg, #ff6b6b, #e74435);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 4px 20px rgba(231,68,53,0.5);
    transition: transform 0.15s, box-shadow 0.15s;
    line-height: 1.3;
    padding: 0;
    overflow: hidden;
}
/* 中心按钮底图 = 后台"转盘按钮"图片，铺满圆形按钮，文字叠在其上 */
.xy-turntable-btn .turntable-btn-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.xy-turntable-btn:hover:not(:disabled) {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 6px 24px rgba(231,68,53,0.6);
}
.xy-turntable-btn:active:not(:disabled) {
    transform: translate(-50%, -50%) scale(0.95);
}
.xy-turntable-btn:disabled {
    background: linear-gradient(145deg, #aaa, #888);
    cursor: not-allowed;
    box-shadow: none;
}
.xy-turntable-btn:disabled .turntable-btn-img {
    filter: grayscale(1);
    opacity: 0.7;
}
.xy-turntable-btn .btn-cost {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 23px;
    z-index: 2;
    font-size: 11px;
    opacity: 0.9;
    line-height: 1;
}
/* 旋转/跑马灯 keyframes */
@keyframes xyturntable-spin {
    to { transform: rotate(360deg); }
}

/* 移动端适配 */
@media (max-width: 480px) {
    /* 手机容器内水平居中，避免固定 320px 宽度贴边造成一侧溢出 */
    .xy-turntable-wrap { width: 320px; height: 320px; margin-left: auto; margin-right: auto; }
    /* 手机端底座同步收窄，避免贴屏幕边缘 */
    .xy-turntable-wrap::before { inset: -14px; border-radius: 24px; }
    .xy-turntable-sector { font-size: 11px; width: 70px; height: 70px; }
    .xy-turntable-sector img { width: 30px; height: 30px; }
    .xy-turntable-btn { width: 85px; height: 85px; font-size: 14px; }
    /* 手机按钮更小，扣费文字要更贴底部，不能沿用 PC 的 bottom:20px */
    .xy-turntable-btn .btn-cost { bottom: 16px; font-size: 10px; }
    .xy-tl-bulb {
        width: 10px; height: 10px;
        margin-left: -5px;
        top: -1px;
        transform-origin: 50% 161px;
    }
    /* 移动端 3 状态跟随转盘联动（各状态单独的 duration/delay，避免和旧 1s 周期冲突） */
    /* idle: 3.5s/轮柔和慢呼吸 */
    .xy-lights-idle .xy-tl-bulb { animation-duration: 3.5s; opacity: 0.92; }
    .xy-lights-idle .xy-neon-r { animation-delay: 0s; }
    .xy-lights-idle .xy-neon-y { animation-delay: -2.625s; } /* -(3.5 - 0.875) */
    .xy-lights-idle .xy-neon-b { animation-delay: -1.75s;  } /* -(3.5 - 1.75)  */
    .xy-lights-idle .xy-neon-g { animation-delay: -.875s;  } /* -(3.5 - 2.625) */
    /* spin: 0.45s/轮超快手感 */
    .xy-lights-spin  .xy-tl-bulb { animation-duration: 0.45s; }
    .xy-lights-spin  .xy-neon-r { animation-delay: 0s; }
    .xy-lights-spin  .xy-neon-y { animation-delay: -.3375s; } /* -(0.45 - 0.1125) */
    .xy-lights-spin  .xy-neon-b { animation-delay: -.225s;  } /* -(0.45 - 0.225)  */
    .xy-lights-spin  .xy-neon-g { animation-delay: -.1125s; } /* -(0.45 - 0.3375) */
    /* celebrate: 0.3s/轮庆祝狂闪 */
    .xy-lights-celebrate .xy-tl-bulb { animation-duration: 0.3s; }
    .xy-lights-celebrate .xy-neon-r { animation-delay: 0s; }
    .xy-lights-celebrate .xy-neon-y { animation-delay: -.225s; } /* -(0.3 - 0.075) */
    .xy-lights-celebrate .xy-neon-b { animation-delay: -.15s;  } /* -(0.3 - 0.15)  */
    .xy-lights-celebrate .xy-neon-g { animation-delay: -.075s; } /* -(0.3 - 0.225) */
    .xy-turntable-ring::after { inset: -5px; }
}