/* ===== 皮肤（换装）=====
   现在一共 20 套皮肤：10 套免费 + 10 套收费（后端 /api/game/config 的 skins 字段为准）。
   做法：给 <body> 挂一个 data-skin 属性，这里用属性选择器覆盖配色变量与背景，
   再叠一层装饰粒子（#skin-fx，由 js/skins.js 生成），不动任何页面结构。

   【变量驱动的通用层】—— 以前每套皮肤都要把 cover-page / hub-card / game-title /
   mario-app …… 这 8 个选择器抄一遍，20 套就是 160 条重复规则，改一次要改 20 处。
   现在抽成一个通用块 body[data-skin] …，它只认下面这 17 个自定义属性：
       13 个调色板变量（页面各处复用）：
         --green-dark / --green-mid / --green-light / --brown / --brown-light /
         --gold / --gold-light / --blue / --white / --gray / --dark / --card-bg / --shadow
       4 个皮肤专属变量：
         --skin-bg      页面底色（linear-gradient）
         --skin-glow    ::before 装饰光晕（radial-gradient，可以写 none）
         --skin-border  卡片描边色（rgba）
         --skin-title   大标题文字渐变（text-clip 用的 linear-gradient）
   于是每套皮肤只剩一个「只管赋值」的小块，新加皮肤 = 加 17 行。
   注意：body[data-skin="moon"]::before 比 body[data-skin]::before 更具体（多一个属性值），
   所以月亮那轮实心圆依然压过通用光晕层，中秋望月的观感不变。 */

/* ---------- 装饰粒子层（所有皮肤共用） ---------- */
#skin-fx {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;   /* 只是装饰，绝不能挡住点击 */
    z-index: 9300;          /* 在普通内容之上、弹窗(9900+)与防蓝光层之下 */
}
#skin-fx span {
    position: absolute;
    top: -8vh;
    display: block;
    line-height: 1;
    opacity: 0;
    animation-name: skin-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform, opacity;
}
@keyframes skin-fall {
    0%   { transform: translateY(0) rotate(0deg);      opacity: 0; }
    8%   { opacity: .55; }
    85%  { opacity: .5; }
    100% { transform: translateY(118vh) rotate(320deg); opacity: 0; }
}

/* ================= 通用层（只写一次，所有皮肤共用） =================
   全部靠自定义属性取值；某个变量没定义就退回继承来的默认值，不会报错。 */
/* 兜底值不是可有可无的：如果 data-skin 是个 css 里没登记的值
   （最常见的是浏览器 localStorage 里存着旧版本的皮肤名），
   var() 取不到又没兜底 → 整条声明失效 → 页面底色变成白的。
   宁可退回经典配色，也不能白屏。 */
body[data-skin] { background: var(--skin-bg, linear-gradient(135deg, #0a0a1a 0%, #1a3a1a 50%, #0a0a1a 100%)); }
/* 装饰层：固定铺满、不吃点击、z-index:0（内容层之下，粒子层 9300 之上） */
body[data-skin]::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: var(--skin-glow);
}
body[data-skin] .cover-page,
body[data-skin] .maintenance-page {
    background: var(--skin-bg);
}
body[data-skin] .hub-card,
body[data-skin] .modal-box,
body[data-skin] .auth-box,
body[data-skin] .mario-theme-card {
    border-color: var(--skin-border);
}
/* 这个兜底是关键，别删：
   标题是"把渐变当背景、再裁进文字里、同时把文字本身涂成透明"画出来的。
   一旦 --skin-title 取不到值，背景没了、字又是透明的 —— 标题会**整个消失**，
   页面看起来就是一片空白，比配色不对严重得多。
   兜底用 currentColor：渐变没了就退回"用文字本来的颜色"，至少看得见。 */
body[data-skin] .game-title,
body[data-skin] .cover-title {
    background: var(--skin-title, currentColor);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* 马里奥页的底色也跟着换，不然两个页面像两个平台 */
body[data-skin] #mario-app { color: var(--white); }
body[data-skin] .mario-map,
body[data-skin] .mario-loading {
    background: var(--skin-bg);
}

/* ==================== 免费皮肤（10 套） ==================== */

/* ---------- 春意盎然 🌸 ----------
   初春的嫩绿 + 桃花粉，明快不发闷。 */
body[data-skin="spring"] {
    --green-dark: #146b3a;
    --green-mid: #29C46A;
    --green-light: #7CF29B;
    --brown: #B5457E;
    --brown-light: #FF9AD5;
    --gold: #FFE066;
    --gold-light: #FFF3B0;
    --blue: #59C2FF;
    --white: #F2FFF7;
    --gray: #86A894;
    --dark: #0A3A22;
    --card-bg: rgba(9,52,32,0.62);
    --shadow: 0 4px 20px rgba(9,80,45,0.45);
    --skin-bg: linear-gradient(155deg, #0b3320 0%, #1f8f52 55%, #0b3320 100%);
    --skin-glow: radial-gradient(circle at 20% 12%, rgba(255,154,213,0.28), transparent 55%),
                 radial-gradient(circle at 82% 86%, rgba(124,242,155,0.20), transparent 52%);
    --skin-border: rgba(124,242,155,0.30);
    --skin-title: linear-gradient(135deg, #FFF3B0, #7CF29B, #FF9AD5, #FFF3B0);
}

/* ---------- 盛夏海滨 🏖️ ----------
   海水青 + 阳光金 + 沙滩黄，晒得发亮的夏天。 */
body[data-skin="summer"] {
    --green-dark: #0A5E6E;
    --green-mid: #14B6C4;
    --green-light: #6BE8E0;
    --brown: #C2761F;
    --brown-light: #F5B942;
    --gold: #FFD84D;
    --gold-light: #FFF0A8;
    --blue: #2E9BFF;
    --white: #F2FFFF;
    --gray: #7FA6A8;
    --dark: #063A45;
    --card-bg: rgba(6,58,69,0.62);
    --shadow: 0 4px 20px rgba(0,60,80,0.45);
    --skin-bg: linear-gradient(160deg, #062f3a 0%, #0f8f9e 55%, #062f3a 100%);
    --skin-glow: radial-gradient(circle at 78% 6%, rgba(255,216,77,0.30), transparent 56%),
                 radial-gradient(circle at 14% 90%, rgba(46,155,255,0.22), transparent 52%);
    --skin-border: rgba(107,232,224,0.30);
    --skin-title: linear-gradient(135deg, #FFF0A8, #6BE8E0, #2E9BFF, #FFF0A8);
}

/* ---------- 金秋送爽 🍁 ----------
   暖金 + 落叶。整体偏琥珀色，秋天晒谷场那种暖。（原始配色，勿改） */
body[data-skin="autumn"] {
    --green-dark: #3a2606;
    --green-mid: #8a5a14;
    --green-light: #d9962e;
    --brown: #7a4410;
    --brown-light: #b06a1e;
    --gold: #FFC94D;
    --gold-light: #FFE08A;
    --blue: #C97B2E;
    --white: #FFF6E6;
    --gray: #8a7a5e;
    --dark: #2a1c08;
    --card-bg: rgba(46,28,8,0.66);
    --shadow: 0 4px 20px rgba(80,44,0,0.45);
    --skin-bg: linear-gradient(160deg, #2a1a06 0%, #6b4410 55%, #1e1204 100%);
    /* 顶部一层暖光，像下午的阳光斜进来 */
    --skin-glow: radial-gradient(circle at 78% 8%, rgba(255,201,77,0.28), transparent 58%),
                 radial-gradient(circle at 12% 92%, rgba(217,150,46,0.18), transparent 52%);
    --skin-border: rgba(255,201,77,0.28);
    --skin-title: linear-gradient(135deg, #FFE08A, #FFC94D, #E88B26, #FFE08A);
}

/* ---------- 中秋望月 🌕 ----------
   夜色靛蓝 + 一轮明月 + 桂花。比金秋更静、更冷。（原始配色，勿改） */
body[data-skin="moon"] {
    --green-dark: #0e1038;
    --green-mid: #2b2f78;
    --green-light: #5a62c4;
    --brown: #3a2a5e;
    --brown-light: #5a4488;
    --gold: #FFE9A8;
    --gold-light: #FFF6D6;
    --blue: #7C86E8;
    --white: #EFF3FF;
    --gray: #7a7fa8;
    --dark: #080a24;
    --card-bg: rgba(10,12,40,0.66);
    --shadow: 0 4px 22px rgba(0,0,20,0.5);
    --skin-bg: linear-gradient(165deg, #05071c 0%, #181d4e 55%, #05071c 100%);
    --skin-glow: none;   /* 月亮那层 ::before 被下面更具体的规则整个接管了 */
    --skin-border: rgba(255,233,168,0.28);
    --skin-title: linear-gradient(135deg, #FFF6D6, #FFE9A8, #9AA6FF, #FFF6D6);
}
/* 右上角一轮明月：两层光晕 + 一个实心圆。
   选择器比通用层多一个属性值，所以整块规则压过 body[data-skin]::before。
   通用层留了 inset:0（等价 left/bottom 为 0），这里必须把 left/bottom 收回 auto，
   否则固定定位在 over-constrained 时按「left+width 优先」把月亮甩到左上角去。 */
body[data-skin="moon"]::before {
    content: '';
    position: fixed;
    top: 5vh;
    right: 8vw;
    left: auto;
    bottom: auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle at 38% 34%, #FFFDF2, #FFE9A8 62%, #E8D48A 100%);
    box-shadow: 0 0 60px 22px rgba(255,233,168,0.30),
                0 0 160px 70px rgba(255,233,168,0.12);
}
/* 星空 */
body[data-skin="moon"]::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,255,255,0.75), transparent),
        radial-gradient(1.4px 1.4px at 32% 42%, rgba(255,255,255,0.55), transparent),
        radial-gradient(1.8px 1.8px at 58% 12%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.3px 1.3px at 76% 56%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1.6px 1.6px at 88% 30%, rgba(255,255,255,0.65), transparent),
        radial-gradient(1.2px 1.2px at 22% 72%, rgba(255,255,255,0.45), transparent),
        radial-gradient(1.5px 1.5px at 46% 86%, rgba(255,255,255,0.55), transparent),
        radial-gradient(1.4px 1.4px at 68% 74%, rgba(255,255,255,0.5), transparent);
}

/* ---------- 冬日初雪 ❄️ ----------
   冰蓝 + 雪白，冷得透亮，留一点暖阳做点缀。 */
body[data-skin="snow"] {
    --green-dark: #2A5A8A;
    --green-mid: #4FA8E0;
    --green-light: #A9E4FF;
    --brown: #6E7F99;
    --brown-light: #9FB6CC;
    --gold: #FFE28A;
    --gold-light: #FFF6D6;
    --blue: #7FD4FF;
    --white: #F6FCFF;
    --gray: #8FA6B8;
    --dark: #0C2A45;
    --card-bg: rgba(12,42,69,0.60);
    --shadow: 0 4px 20px rgba(10,50,90,0.45);
    --skin-bg: linear-gradient(165deg, #0b2036 0%, #3f7fb5 55%, #0b2036 100%);
    --skin-glow: radial-gradient(circle at 50% 0%, rgba(169,228,255,0.30), transparent 60%),
                 radial-gradient(circle at 85% 88%, rgba(255,246,214,0.14), transparent 52%);
    --skin-border: rgba(169,228,255,0.34);
    --skin-title: linear-gradient(135deg, #F6FCFF, #A9E4FF, #4FA8E0, #F6FCFF);
}

/* ---------- 幽林秘境 🌲 ----------
   深林绿 + 穿过树梢的金色光斑。 */
body[data-skin="forest"] {
    --green-dark: #0C4A22;
    --green-mid: #1E9E4E;
    --green-light: #6FE08C;
    --brown: #6B4A1E;
    --brown-light: #A8762F;
    --gold: #FFD24D;
    --gold-light: #FFF0A8;
    --blue: #4FB0C6;
    --white: #EEFFF2;
    --gray: #79A386;
    --dark: #062B14;
    --card-bg: rgba(6,43,20,0.64);
    --shadow: 0 4px 20px rgba(4,40,18,0.5);
    --skin-bg: linear-gradient(160deg, #05230f 0%, #17753c 55%, #05230f 100%);
    --skin-glow: radial-gradient(circle at 70% 10%, rgba(255,210,77,0.22), transparent 55%),
                 radial-gradient(circle at 18% 88%, rgba(111,224,140,0.18), transparent 52%);
    --skin-border: rgba(111,224,140,0.28);
    --skin-title: linear-gradient(135deg, #FFF0A8, #6FE08C, #1E9E4E, #FFF0A8);
}

/* ---------- 糖果甜心 🍬 ----------
   泡泡糖粉 + 葡萄糖果紫，甜到发亮。 */
body[data-skin="candy"] {
    --green-dark: #7A2E86;
    --green-mid: #E055C0;
    --green-light: #FF9AE0;
    --brown: #B5457E;
    --brown-light: #FF7FB8;
    --gold: #FFE066;
    --gold-light: #FFF3B0;
    --blue: #8FA8FF;
    --white: #FFF2FB;
    --gray: #A88AA6;
    --dark: #3D1140;
    --card-bg: rgba(61,17,64,0.62);
    --shadow: 0 4px 20px rgba(90,20,90,0.45);
    --skin-bg: linear-gradient(155deg, #3a0f3f 0%, #b03a9e 55%, #3a0f3f 100%);
    --skin-glow: radial-gradient(circle at 25% 12%, rgba(255,154,224,0.30), transparent 55%),
                 radial-gradient(circle at 80% 85%, rgba(143,168,255,0.22), transparent 52%);
    --skin-border: rgba(255,154,224,0.32);
    --skin-title: linear-gradient(135deg, #FFF3B0, #FF9AE0, #8FA8FF, #FFF3B0);
}

/* ---------- 深海蔚蓝 🐳 ----------
   越往下越深的蓝，鲸鱼背脊上那一道青。 */
body[data-skin="ocean"] {
    --green-dark: #063A7A;
    --green-mid: #0E86D6;
    --green-light: #5BD6FF;
    --brown: #2A5A8A;
    --brown-light: #4F86B8;
    --gold: #FFD84D;
    --gold-light: #FFF0A8;
    --blue: #2EC5FF;
    --white: #EAF7FF;
    --gray: #7A97B0;
    --dark: #04203F;
    --card-bg: rgba(4,32,63,0.66);
    --shadow: 0 4px 22px rgba(2,30,70,0.5);
    --skin-bg: linear-gradient(165deg, #031a33 0%, #0a5f9e 55%, #031a33 100%);
    --skin-glow: radial-gradient(circle at 50% 100%, rgba(46,197,255,0.26), transparent 58%),
                 radial-gradient(circle at 80% 8%, rgba(91,214,255,0.16), transparent 50%);
    --skin-border: rgba(91,214,255,0.30);
    --skin-title: linear-gradient(135deg, #EAF7FF, #5BD6FF, #0E86D6, #EAF7FF);
}

/* ---------- 落日熔金 🌇 ----------
   晚霞从橙烧到紫，地平线上一团熔金。 */
body[data-skin="sunset"] {
    --green-dark: #7A2A5A;
    --green-mid: #E05A3A;
    --green-light: #FFA35C;
    --brown: #8A3A20;
    --brown-light: #C25A2E;
    --gold: #FFC24D;
    --gold-light: #FFE9A8;
    --blue: #8A5AE0;
    --white: #FFF3E6;
    --gray: #A8836E;
    --dark: #3A1030;
    --card-bg: rgba(58,16,48,0.62);
    --shadow: 0 4px 20px rgba(90,30,10,0.45);
    --skin-bg: linear-gradient(160deg, #3a1230 0%, #c2502a 55%, #3a1230 100%);
    --skin-glow: radial-gradient(circle at 50% 92%, rgba(255,194,77,0.34), transparent 58%),
                 radial-gradient(circle at 82% 10%, rgba(138,90,224,0.24), transparent 55%);
    --skin-border: rgba(255,163,92,0.32);
    --skin-title: linear-gradient(135deg, #FFE9A8, #FFA35C, #E05A3A, #FFE9A8);
}

/* ---------- 薄荷清风 🍃 ----------
   薄荷叶背面的青，配一点点柠檬黄。 */
body[data-skin="mint"] {
    --green-dark: #0C6B55;
    --green-mid: #22C9A0;
    --green-light: #8CF2D2;
    --brown: #3A7A6A;
    --brown-light: #5FA894;
    --gold: #FFE07A;
    --gold-light: #FFF6C6;
    --blue: #4FD6E8;
    --white: #F0FFFA;
    --gray: #7FA99C;
    --dark: #053A2E;
    --card-bg: rgba(5,58,46,0.60);
    --shadow: 0 4px 20px rgba(4,60,48,0.42);
    --skin-bg: linear-gradient(155deg, #04302a 0%, #16a184 55%, #04302a 100%);
    --skin-glow: radial-gradient(circle at 22% 10%, rgba(140,242,210,0.28), transparent 55%),
                 radial-gradient(circle at 82% 88%, rgba(255,224,122,0.16), transparent 52%);
    --skin-border: rgba(140,242,210,0.32);
    --skin-title: linear-gradient(135deg, #F0FFFA, #8CF2D2, #22C9A0, #F0FFFA);
}

/* ==================== 收费皮肤（10 套） ====================
   付费的可以更张扬一点：撞色、发光、字面就是「好看」。 */

/* ---------- 樱花纷飞 🌺 ----------
   满树绯樱，粉到透光，风里带一点紫。 */
body[data-skin="sakura"] {
    --green-dark: #8A2A5A;
    --green-mid: #F062A0;
    --green-light: #FFB3D9;
    --brown: #A84A6E;
    --brown-light: #E07AA8;
    --gold: #FFE08A;
    --gold-light: #FFF6D6;
    --blue: #B59AFF;
    --white: #FFF5FA;
    --gray: #C09AAC;
    --dark: #4A1030;
    --card-bg: rgba(74,16,48,0.60);
    --shadow: 0 4px 22px rgba(120,20,70,0.45);
    --skin-bg: linear-gradient(155deg, #4a1030 0%, #d94f92 55%, #4a1030 100%);
    --skin-glow: radial-gradient(circle at 30% 8%, rgba(255,179,217,0.34), transparent 58%),
                 radial-gradient(circle at 78% 86%, rgba(181,154,255,0.22), transparent 54%);
    --skin-border: rgba(255,179,217,0.36);
    --skin-title: linear-gradient(135deg, #FFF6D6, #FFB3D9, #F062A0, #FFF6D6);
}

/* ---------- 星河漫游 🌌 ----------
   紫到发黑的宇宙，青色星云，洋红星核。 */
body[data-skin="galaxy"] {
    --green-dark: #3A1E7A;
    --green-mid: #7A4FE0;
    --green-light: #C0A6FF;
    --brown: #4A2E8A;
    --brown-light: #7A5AB8;
    --gold: #FFD84D;
    --gold-light: #FFF0A8;
    --blue: #35E0FF;
    --white: #F2F0FF;
    --gray: #8F8AB8;
    --dark: #12063A;
    --card-bg: rgba(18,6,58,0.68);
    --shadow: 0 4px 24px rgba(20,6,70,0.55);
    --skin-bg: linear-gradient(165deg, #0d0429 0%, #4a1f9e 50%, #0d0429 100%);
    --skin-glow: radial-gradient(circle at 22% 18%, rgba(53,224,255,0.28), transparent 52%),
                 radial-gradient(circle at 76% 78%, rgba(255,79,216,0.24), transparent 52%),
                 radial-gradient(circle at 50% 50%, rgba(192,166,255,0.10), transparent 60%);
    --skin-border: rgba(192,166,255,0.34);
    --skin-title: linear-gradient(135deg, #F2F0FF, #35E0FF, #C0A6FF, #FF4FD8, #F2F0FF);
}

/* ---------- 霓虹赛博 🎆 ----------
   赛博霓虹：电光青 + 荧光洋红，暗底才衬得出亮。 */
body[data-skin="neon"] {
    --green-dark: #103A5A;
    --green-mid: #00E5FF;
    --green-light: #9BFBFF;
    --brown: #5A1070;
    --brown-light: #B01BE0;
    --gold: #FFE94D;
    --gold-light: #FFF9B0;
    --blue: #3AA0FF;
    --white: #EAFFFF;
    --gray: #7F9AAA;
    --dark: #0A0A1E;
    --card-bg: rgba(10,10,30,0.72);
    --shadow: 0 4px 24px rgba(0,220,255,0.28);
    --skin-bg: linear-gradient(160deg, #06060f 0%, #23124a 55%, #06060f 100%);
    --skin-glow: radial-gradient(circle at 18% 20%, rgba(0,229,255,0.26), transparent 55%),
                 radial-gradient(circle at 82% 76%, rgba(255,43,214,0.26), transparent 55%);
    --skin-border: rgba(0,229,255,0.40);
    --skin-title: linear-gradient(135deg, #9BFBFF, #00E5FF, #FF2BD6, #9BFBFF);
}

/* ---------- 极光之夜 🌠 ----------
   极地的绿帘子，边上晕开蓝和紫。 */
body[data-skin="aurora"] {
    --green-dark: #0A5A5A;
    --green-mid: #22E0A0;
    --green-light: #9BFFE0;
    --brown: #3A2A7A;
    --brown-light: #6A4FC0;
    --gold: #FFE066;
    --gold-light: #FFF6B0;
    --blue: #4FC0FF;
    --white: #ECFFFA;
    --gray: #86A8B0;
    --dark: #061A2E;
    --card-bg: rgba(6,26,46,0.66);
    --shadow: 0 4px 24px rgba(0,60,80,0.5);
    --skin-bg: linear-gradient(170deg, #041626 0%, #0f6a63 48%, #2b1f6b 100%);
    --skin-glow: radial-gradient(circle at 28% 6%, rgba(34,224,160,0.30), transparent 55%),
                 radial-gradient(circle at 62% 14%, rgba(79,192,255,0.22), transparent 52%),
                 radial-gradient(circle at 84% 30%, rgba(180,110,255,0.24), transparent 52%);
    --skin-border: rgba(155,255,224,0.34);
    --skin-title: linear-gradient(135deg, #ECFFFA, #9BFFE0, #22E0A0, #6A4FC0, #ECFFFA);
}

/* ---------- 熔岩烈焰 🌋 ----------
   岩浆红一路烧到橙黄，山口的颜色。 */
body[data-skin="lava"] {
    --green-dark: #7A1400;
    --green-mid: #E0330A;
    --green-light: #FF7A33;
    --brown: #8A2A00;
    --brown-light: #B83A00;
    --gold: #FFD24D;
    --gold-light: #FFF0A8;
    --blue: #FF3D7F;
    --white: #FFF0E6;
    --gray: #B08070;
    --dark: #2A0800;
    --card-bg: rgba(42,8,0,0.66);
    --shadow: 0 4px 24px rgba(120,20,0,0.5);
    --skin-bg: linear-gradient(160deg, #240500 0%, #a8280a 55%, #240500 100%);
    --skin-glow: radial-gradient(circle at 50% 100%, rgba(255,122,51,0.36), transparent 58%),
                 radial-gradient(circle at 20% 10%, rgba(255,210,77,0.18), transparent 52%);
    --skin-border: rgba(255,122,51,0.38);
    --skin-title: linear-gradient(135deg, #FFF0A8, #FF7A33, #E0330A, #FFF0A8);
}

/* ---------- 水晶幻境 💎 ----------
   冰晶的通透蓝白，切面里折出一道紫。 */
body[data-skin="crystal"] {
    --green-dark: #2A6A9A;
    --green-mid: #5FC8F0;
    --green-light: #C6F0FF;
    --brown: #5A5A9A;
    --brown-light: #8A8AD0;
    --gold: #FFE9A8;
    --gold-light: #FFF9E0;
    --blue: #8AD8FF;
    --white: #F8FDFF;
    --gray: #9AB4C8;
    --dark: #12304F;
    --card-bg: rgba(18,48,79,0.58);
    --shadow: 0 4px 22px rgba(30,90,140,0.42);
    --skin-bg: linear-gradient(160deg, #0f2c4a 0%, #3f8fc4 52%, #6a4fb0 100%);
    --skin-glow: radial-gradient(circle at 30% 12%, rgba(198,240,255,0.30), transparent 56%),
                 radial-gradient(circle at 80% 82%, rgba(138,138,208,0.24), transparent 54%);
    --skin-border: rgba(198,240,255,0.40);
    --skin-title: linear-gradient(135deg, #FFFFFF, #C6F0FF, #8A8AD0, #FFFFFF);
}

/* ---------- 雷霆万钧 ⚡ ----------
   暴雨云里的紫，撕开一道电光黄。 */
body[data-skin="thunder"] {
    --green-dark: #2A1A6A;
    --green-mid: #6A4FE0;
    --green-light: #B0A0FF;
    --brown: #4A3A1A;
    --brown-light: #7A6428;
    --gold: #FFE94D;
    --gold-light: #FFF9B0;
    --blue: #4FD8FF;
    --white: #F0F0FF;
    --gray: #8A88A8;
    --dark: #0A0A20;
    --card-bg: rgba(10,10,32,0.70);
    --shadow: 0 4px 24px rgba(80,60,200,0.40);
    --skin-bg: linear-gradient(165deg, #08081c 0%, #2f2580 55%, #08081c 100%);
    --skin-glow: radial-gradient(circle at 68% 8%, rgba(255,233,77,0.30), transparent 52%),
                 radial-gradient(circle at 22% 84%, rgba(106,79,224,0.26), transparent 55%);
    --skin-border: rgba(176,160,255,0.36);
    --skin-title: linear-gradient(135deg, #FFF9B0, #FFE94D, #B0A0FF, #FFF9B0);
}

/* ---------- 凤凰涅槃 🔥 ----------
   火焰的赤红 + 尾羽上的金。 */
body[data-skin="phoenix"] {
    --green-dark: #8A0E1E;
    --green-mid: #E0243A;
    --green-light: #FF6A5A;
    --brown: #8A4A0E;
    --brown-light: #C2761F;
    --gold: #FFD24D;
    --gold-light: #FFF0A8;
    --blue: #FFB300;
    --white: #FFF0EC;
    --gray: #B08078;
    --dark: #30040A;
    --card-bg: rgba(48,4,10,0.66);
    --shadow: 0 4px 24px rgba(140,10,20,0.5);
    --skin-bg: linear-gradient(160deg, #2c0308 0%, #a81a22 50%, #6a2a05 100%);
    --skin-glow: radial-gradient(circle at 50% 8%, rgba(255,210,77,0.30), transparent 55%),
                 radial-gradient(circle at 24% 86%, rgba(224,36,58,0.28), transparent 56%);
    --skin-border: rgba(255,210,77,0.34);
    --skin-title: linear-gradient(135deg, #FFF0A8, #FF6A5A, #E0243A, #FFD24D, #FFF0A8);
}

/* ---------- 彩虹糖霜 🌈 ----------
   一整个光谱铺在天上，再撒一层糖霜。 */
body[data-skin="rainbow"] {
    --green-dark: #1A7A5A;
    --green-mid: #22C97A;
    --green-light: #8CF2B0;
    --brown: #8A3A7A;
    --brown-light: #D04FB0;
    --gold: #FFD84D;
    --gold-light: #FFF6B0;
    --blue: #3A9BFF;
    --white: #FFF8FF;
    --gray: #A08AB0;
    --dark: #1A0A3A;
    --card-bg: rgba(26,10,58,0.60);
    --shadow: 0 4px 22px rgba(90,40,160,0.42);
    --skin-bg: linear-gradient(140deg, #2a0a4a 0%, #1f7ab8 30%, #1aa06a 58%, #c04a9a 100%);
    --skin-glow: radial-gradient(circle at 16% 18%, rgba(255,120,120,0.22), transparent 48%),
                 radial-gradient(circle at 50% 8%, rgba(255,216,77,0.20), transparent 48%),
                 radial-gradient(circle at 84% 22%, rgba(58,155,255,0.22), transparent 48%),
                 radial-gradient(circle at 40% 90%, rgba(140,242,176,0.18), transparent 50%);
    --skin-border: rgba(255,255,255,0.34);
    --skin-title: linear-gradient(135deg, #FF7A7A, #FFD84D, #8CF2B0, #3A9BFF, #D04FB0, #FF7A7A);
}

/* ---------- 龙腾四海 🐉 ----------
   青龙的碧 + 御用的金，末梢一抹朱。 */
body[data-skin="dragon"] {
    --green-dark: #0A5A3A;
    --green-mid: #14B87A;
    --green-light: #6BE8B0;
    --brown: #7A2A0E;
    --brown-light: #B8401E;
    --gold: #FFCF3D;
    --gold-light: #FFF3A8;
    --blue: #2A9BE0;
    --white: #F0FFF8;
    --gray: #7FA89A;
    --dark: #03301F;
    --card-bg: rgba(3,48,31,0.66);
    --shadow: 0 4px 24px rgba(0,70,40,0.5);
    --skin-bg: linear-gradient(160deg, #032a1c 0%, #0f8a5c 52%, #7a2a0e 100%);
    --skin-glow: radial-gradient(circle at 72% 10%, rgba(255,207,61,0.30), transparent 55%),
                 radial-gradient(circle at 20% 88%, rgba(20,184,122,0.24), transparent 55%);
    --skin-border: rgba(255,207,61,0.34);
    --skin-title: linear-gradient(135deg, #FFF3A8, #FFCF3D, #14B87A, #FFF3A8);
}

/* 竖屏手机上月亮别占太大地方 */
@media (max-width: 640px) {
    body[data-skin="moon"]::before { width: 78px; height: 78px; top: 3vh; right: 9vw; }
}

/* ---------- 个人中心里的皮肤选择器 ---------- */
.skin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.skin-item {
    position: relative;
    border: 2px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    padding: 8px 6px;
    cursor: pointer;
    text-align: center;
    font-size: 11.5px;
    color: rgba(240,255,240,0.8);
    transition: all .18s;
    background: rgba(0,0,0,0.25);
}
.skin-item:hover { border-color: rgba(255,255,255,0.32); transform: translateY(-2px); }
.skin-item.active { border-color: #FFD700; box-shadow: 0 0 0 2px rgba(255,215,0,0.22); }
/* 没解锁的皮肤：压暗一点点，但仍然可点（点了会去弹充值/提示） */
.skin-item.locked { filter: saturate(.55) brightness(.85); }
.skin-item.locked:hover { filter: saturate(.8) brightness(.95); }
/* 右上角的锁 */
.skin-item .skin-lock {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 12px;
    line-height: 1;
    opacity: .9;
    pointer-events: none;
}
/* 售价一行（金币价） */
.skin-price {
    font-size: 10.5px;
    color: #FFD54A;
    margin-top: 2px;
}
/* 「已拥有」小标签 */
.skin-own-tag {
    font-size: 9.5px;
    color: rgba(122,214,150,0.78);
    margin-top: 2px;
}
.skin-item .skin-swatch {
    height: 34px;
    border-radius: 7px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
/* 每个 id 一个色卡：取该皮肤最有代表性的深、亮两色拉一道斜渐变 */
.skin-swatch-classic { background: linear-gradient(135deg, #1a3a1a, #4a8c4a); }
.skin-swatch-spring  { background: linear-gradient(135deg, #1f8f52, #FF9AD5); }
.skin-swatch-summer  { background: linear-gradient(135deg, #0f8f9e, #FFF0A8); }
.skin-swatch-autumn  { background: linear-gradient(135deg, #6b4410, #FFC94D); }
.skin-swatch-moon    { background: linear-gradient(135deg, #181d4e, #FFE9A8); }
.skin-swatch-snow    { background: linear-gradient(135deg, #3f7fb5, #F6FCFF); }
.skin-swatch-forest  { background: linear-gradient(135deg, #17753c, #6FE08C); }
.skin-swatch-candy   { background: linear-gradient(135deg, #b03a9e, #FF9AE0); }
.skin-swatch-ocean   { background: linear-gradient(135deg, #0a5f9e, #5BD6FF); }
.skin-swatch-sunset  { background: linear-gradient(135deg, #c2502a, #FFC24D); }
.skin-swatch-mint    { background: linear-gradient(135deg, #16a184, #8CF2D2); }
.skin-swatch-sakura  { background: linear-gradient(135deg, #d94f92, #FFB3D9); }
.skin-swatch-galaxy  { background: linear-gradient(135deg, #4a1f9e, #35E0FF); }
.skin-swatch-neon    { background: linear-gradient(135deg, #23124a, #00E5FF); }
.skin-swatch-aurora  { background: linear-gradient(135deg, #2b1f6b, #22E0A0); }
.skin-swatch-lava    { background: linear-gradient(135deg, #a8280a, #FF7A33); }
.skin-swatch-crystal { background: linear-gradient(135deg, #3f8fc4, #C6F0FF); }
.skin-swatch-thunder { background: linear-gradient(135deg, #2f2580, #FFE94D); }
.skin-swatch-phoenix { background: linear-gradient(135deg, #a81a22, #FFD24D); }
.skin-swatch-rainbow { background: linear-gradient(135deg, #1f7ab8, #FF7A7A); }
.skin-swatch-dragon  { background: linear-gradient(135deg, #0f8a5c, #FFCF3D); }