/* ==========================================================================
 * 抽奖块配色主题引擎（皮肤层，全部玩法通用）
 *  原理：后台活动配置 theme 写入 config JSON → index.php 给 body 挂 class
 *       theme-festive / theme-gold / theme-ocean / theme-violet / theme-sakura / theme-jade
 *       （theme=classic 时不挂任何 class → 保留各模板原配色）
 *  作用范围：抽奖舞台主体（.X-stage）、标题横幅（.game-title）、
 *           「再玩一次」按钮（.X-again）、网格/扭蛋中心大按钮（*cell-center）、提示文字
 *  仅改「抽奖板块 + 文字」配色，不动玩法内道具（盒身/蛋/气球等），避免误伤原有设计。
 *  新增皮肤只需：复制一份 :root 变量组 + 在下方下拉列表补一个选项即可。
 * ========================================================================== */

/* ---------- 各皮肤变量组 ---------- */

/* ① festive 全局喜庆红（默认，与历史版本视觉完全一致） */
body.theme-festive {
    --sk-text:        #FFF3E6;
    --sk-gold:        #FFD66E;
    --sk-title-bg:    linear-gradient(180deg, #FF6F63 0%, #E8443A 48%, #C2241C 100%);
    --sk-title-sh:    0 6px 18px rgba(194,36,28,.42), inset 0 1px 0 rgba(255,255,255,.32);
    --sk-orb:         radial-gradient(circle at .35 .3, #FFF6DC, #FFD66E 55%, #E8901E);
    --sk-stage-bg:    linear-gradient(150deg, #E8443A 0%, #C2241C 52%, #8E0F06 100%);
    --sk-stage-sh:    0 16px 44px rgba(142,15,6,.45);
    --sk-stage-in:    inset 0 0 0 1px rgba(255,246,220,.26), inset 0 0 36px rgba(255,214,110,.22);
    --sk-line:        rgba(255,214,110,.6);
    --sk-btn-bg:      linear-gradient(180deg, #FF6F63, #C2241C);
    --sk-btn-text:    #FFF6DC;
    --sk-btn-sh:      0 6px 16px rgba(194,36,28,.45);
    --sk-center-bg:   radial-gradient(circle at 42% 32%, #FF9A8A 0%, #F04A32 38%, #C2241C 72%, #8E0F06 100%);
}

/* ② gold 黑金轻奢 */
body.theme-gold {
    --sk-text:        #F5E7C8;
    --sk-gold:        #F2D488;
    --sk-page:        radial-gradient(ellipse at 50% 22%, #3A3A40 0%, #232327 42%, #101013 74%, #0A0A0C 100%);
    --sk-deep:        linear-gradient(160deg, #3A3A40 0%, #232327 55%, #141416 100%);
    --sk-title-bg:    linear-gradient(180deg, #4A4A50 0%, #2A2A2E 48%, #141416 100%);
    --sk-title-sh:    0 6px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(242,212,136,.35);
    --sk-orb:         radial-gradient(circle at .35 .3, #FFF6DC, #F2D488 55%, #B9832F);
    --sk-stage-bg:    linear-gradient(150deg, #34343A 0%, #1E1E22 52%, #101013 100%);
    --sk-stage-sh:    0 16px 44px rgba(0,0,0,.5);
    --sk-stage-in:    inset 0 0 0 1px rgba(242,212,136,.2), inset 0 0 36px rgba(242,212,136,.14);
    --sk-line:        rgba(242,212,136,.55);
    --sk-btn-bg:      linear-gradient(180deg, #E8C575, #B9832F);
    --sk-btn-text:    #2A2008;
    --sk-btn-sh:      0 6px 16px rgba(0,0,0,.45);
    --sk-center-bg:   radial-gradient(circle at 42% 32%, #F7E3A1 0%, #E0B45C 38%, #B9832F 72%, #6E4E14 100%);
}

/* ③ ocean 海洋蓝 */
body.theme-ocean {
    --sk-text:        #EAF6FF;
    --sk-gold:        #A8E0FF;
    --sk-page:        radial-gradient(ellipse at 50% 22%, #14406E 0%, #0C2C52 42%, #071A34 74%, #041022 100%);
    --sk-deep:        linear-gradient(160deg, #1B5FA8 0%, #123E74 55%, #0C2A50 100%);
    --sk-title-bg:    linear-gradient(180deg, #57B8F0 0%, #2E8FD8 48%, #1B5FA8 100%);
    --sk-title-sh:    0 6px 18px rgba(27,95,168,.42), inset 0 1px 0 rgba(255,255,255,.35);
    --sk-orb:         radial-gradient(circle at .35 .3, #FFFFFF, #BEE9FF 55%, #4E9FD8);
    --sk-stage-bg:    linear-gradient(150deg, #2E8FD8 0%, #1B5FA8 52%, #0C3866 100%);
    --sk-stage-sh:    0 16px 44px rgba(12,56,102,.45);
    --sk-stage-in:    inset 0 0 0 1px rgba(234,246,255,.26), inset 0 0 36px rgba(168,224,255,.22);
    --sk-line:        rgba(168,224,255,.6);
    --sk-btn-bg:      linear-gradient(180deg, #57B8F0, #1B5FA8);
    --sk-btn-text:    #F0FAFF;
    --sk-btn-sh:      0 6px 16px rgba(27,95,168,.45);
    --sk-center-bg:   radial-gradient(circle at 42% 32%, #9FDFFF 0%, #57B8F0 38%, #2E8FD8 72%, #123E74 100%);
}

/* ④ violet 梦幻紫 */
body.theme-violet {
    --sk-text:        #F6EEFF;
    --sk-gold:        #E3C8FF;
    --sk-page:        radial-gradient(ellipse at 50% 22%, #3A1668 0%, #2A1050 42%, #1A0A34 74%, #10061F 100%);
    --sk-deep:        linear-gradient(160deg, #5F2BB8 0%, #3A1680 55%, #240A54 100%);
    --sk-title-bg:    linear-gradient(180deg, #B57BF0 0%, #8F4FE0 48%, #5F2BB8 100%);
    --sk-title-sh:    0 6px 18px rgba(95,43,184,.42), inset 0 1px 0 rgba(255,255,255,.32);
    --sk-orb:         radial-gradient(circle at .35 .3, #FBF3FF, #E3C8FF 55%, #9F6FE0);
    --sk-stage-bg:    linear-gradient(150deg, #8F4FE0 0%, #5F2BB8 52%, #37146E 100%);
    --sk-stage-sh:    0 16px 44px rgba(55,20,110,.45);
    --sk-stage-in:    inset 0 0 0 1px rgba(246,238,255,.26), inset 0 0 36px rgba(227,200,255,.22);
    --sk-line:        rgba(227,200,255,.6);
    --sk-btn-bg:      linear-gradient(180deg, #B57BF0, #5F2BB8);
    --sk-btn-text:    #FBF6FF;
    --sk-btn-sh:      0 6px 16px rgba(95,43,184,.45);
    --sk-center-bg:   radial-gradient(circle at 42% 32%, #E9D4FF 0%, #B57BF0 38%, #8F4FE0 72%, #3A1680 100%);
}

/* ⑤ sakura 樱花粉 */
body.theme-sakura {
    --sk-text:        #FFF5F9;
    --sk-gold:        #FFC9DC;
    --sk-page:        radial-gradient(ellipse at 50% 22%, #8E2A52 0%, #6E1C40 42%, #4E122C 74%, #330A1C 100%);
    --sk-deep:        linear-gradient(160deg, #C2467A 0%, #98204A 55%, #6E1436 100%);
    --sk-title-bg:    linear-gradient(180deg, #FFA3C0 0%, #F26B93 48%, #D84370 100%);
    --sk-title-sh:    0 6px 18px rgba(216,67,112,.4), inset 0 1px 0 rgba(255,255,255,.38);
    --sk-orb:         radial-gradient(circle at .35 .3, #FFF0F6, #FFC9DC 55%, #F08FAF);
    --sk-stage-bg:    linear-gradient(150deg, #F26B93 0%, #D84370 52%, #A82450 100%);
    --sk-stage-sh:    0 16px 44px rgba(168,36,80,.4);
    --sk-stage-in:    inset 0 0 0 1px rgba(255,240,246,.3), inset 0 0 36px rgba(255,201,220,.25);
    --sk-line:        rgba(255,201,220,.65);
    --sk-btn-bg:      linear-gradient(180deg, #FFA3C0, #D84370);
    --sk-btn-text:    #FFF5F9;
    --sk-btn-sh:      0 6px 16px rgba(216,67,112,.45);
    --sk-center-bg:   radial-gradient(circle at 42% 32%, #FFD9E6 0%, #FFA3C0 38%, #F26B93 72%, #98204A 100%);
}

/* ⑥ jade 翡翠绿 */
body.theme-jade {
    --sk-text:        #EAFFF4;
    --sk-gold:        #9FE8C0;
    --sk-page:        radial-gradient(ellipse at 50% 22%, #0E4E30 0%, #0A3A24 42%, #062818 74%, #041A10 100%);
    --sk-deep:        linear-gradient(160deg, #177A4A 0%, #0C5A36 55%, #063E24 100%);
    --sk-title-bg:    linear-gradient(180deg, #4ECB8F 0%, #2AA66C 48%, #177A4A 100%);
    --sk-title-sh:    0 6px 18px rgba(23,122,74,.42), inset 0 1px 0 rgba(255,255,255,.32);
    --sk-orb:         radial-gradient(circle at .35 .3, #F0FFF6, #9FE8C0 55%, #3FBF84);
    --sk-stage-bg:    linear-gradient(150deg, #2AA66C 0%, #177A4A 52%, #0B4E2E 100%);
    --sk-stage-sh:    0 16px 44px rgba(11,78,46,.45);
    --sk-stage-in:    inset 0 0 0 1px rgba(234,255,244,.26), inset 0 0 36px rgba(159,232,192,.22);
    --sk-line:        rgba(159,232,192,.6);
    --sk-btn-bg:      linear-gradient(180deg, #4ECB8F, #177A4A);
    --sk-btn-text:    #F0FFF8;
    --sk-btn-sh:      0 6px 16px rgba(23,122,74,.45);
    --sk-center-bg:   radial-gradient(circle at 42% 32%, #BFF4D8 0%, #4ECB8F 38%, #2AA66C 72%, #0C5A36 100%);
}

/* ==========================================================================
 * 以下为统一渲染规则（所有皮肤共用，颜色全部来自上方变量）
 * ========================================================================== */

/* 整体文字基调 */
body[class*="theme-"] { color: var(--sk-text, #FFF3E6); }

/* ---------- 标题横幅 ---------- */
body[class*="theme-"] .game-title {
    background: var(--sk-title-bg);
    border-color: var(--sk-gold);
    box-shadow: var(--sk-title-sh);
}
body[class*="theme-"] .game-title::before,
body[class*="theme-"] .game-title::after {
    background: var(--sk-orb);
}

/* ---------- 抽奖舞台主体 ---------- */
/* 用 [class*="-stage"] 而非 [class$="-stage"]：舞台在抽奖中会追加 running 等类，
   $= 按 class 属性整值结尾匹配会失配导致颜色闪烁/回退 */
body[class*="theme-"] [class*="-stage"] {
    background: var(--sk-stage-bg);
    border-color: var(--sk-gold);
    box-shadow: var(--sk-stage-sh), var(--sk-stage-in);
}
/* 舞台内圈细线 */
body[class*="theme-"] [class*="-stage"]::before {
    border-color: var(--sk-line) !important;
}

/* ---------- 「再玩一次」按钮 ---------- */
body[class*="theme-"] [class$="-again"] {
    background: var(--sk-btn-bg);
    color: var(--sk-btn-text);
    box-shadow: var(--sk-btn-sh);
}

/* ---------- 网格 / 扭蛋等中心抽奖大按钮 ---------- */
body[class*="theme-"] [class*="cell-center"] {
    background: var(--sk-center-bg);
    border-color: var(--sk-gold);
}

/* ---------- 提示文字（非默认皮肤统一柔和着色，默认喜庆红保持历史观感） ---------- */
body[class*="theme-"]:not(.theme-festive) [class$="-tip"] {
    color: var(--sk-gold);
    opacity: .92;
}
body[class*="theme-"]:not(.theme-festive) [class$="-tip"] b {
    color: var(--sk-btn-text);
}

/* ---------- 主题色注入时的标题描边（跟随各皮肤金/亮色边） ---------- */
body[class*="theme-"][style*="--theme-color"] .game-title { border-color: var(--sk-gold); }

/* ==========================================================================
 * 深度重涂层（非默认皮肤生效；festive 保持历史观感不动）
 * 把「整页背景 + 道具主面（牌背等）」一并换色，让换肤效果一眼可见
 * ========================================================================== */

/* 整页背景（游戏 CSS 的 body 深色渐变 → 各皮肤专属底色）；
   后台若显式设置了背景色（body 内联 style），内联优先级更高，不受此处影响 */
body[class*="theme-"]:not(.theme-festive) {
    background: var(--sk-page) fixed;
}

/* 副标题 / 说明文字跟随皮肤文字色 */
body[class*="theme-"]:not(.theme-festive) .game-sub {
    color: var(--sk-text);
    opacity: .85;
}

/* 道具主面：牌背（翻牌 fp-back / 幸运卡 xy-back 等同构面）整体重涂 */
body[class*="theme-"]:not(.theme-festive) [class$="-back"] {
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 6px, transparent 6px 12px),
        var(--sk-deep);
    border-color: var(--sk-gold);
}
body[class*="theme-"]:not(.theme-festive) [class$="-back"]::before {
    border-color: var(--sk-line);
}

/* 舞台四角金饰描边跟随亮色 */
body[class*="theme-"]:not(.theme-festive) [class$="-corner"] {
    border-color: var(--sk-gold);
}

/* 大转盘本体跟随主题轻微着色：转盘为模板内置 SVG，固有色无法改写，
   用主题金/亮色以 mix-blend-mode:color 叠加，让换肤在转盘上也“肉眼可见”。
   仅作用于 #panmian（转盘专属），不影响其他玩法；不拦截点击。 */
body[class*="theme-"]:not(.theme-festive) #panmian::after {
    content:''; position:absolute; inset:0; border-radius:50%; z-index:5;
    background: var(--sk-gold); mix-blend-mode: color; opacity:.22; pointer-events:none;
}