/**
 * winter.css — 冬季主题（季节装饰层）
 * ------------------------------------------------------------
 * 定位：与浅/深主题**正交**的第三维装饰。激活方式为 <html data-season="winter">，
 *      不改后台配色方案（theme.css 仍负责主色/强调色），只做三件事：
 *        ① 冷色夜空底（覆盖少量 --color-bg-* 变量，仅冬季模式生效）
 *        ② 纯色夜空底（静态，不含渐变/不含雪花图案，见第 2 节注释）
 *        ③ 逐朵随机的落雪前景（节点由 winter.js 生成，本文件只管样式与动画）
 *
 * ⛔ 加载顺序：必须在 theme.css 之后（base.html 中排在 $theme_css_href 之后），
 *    否则本文件对 --color-bg-* 的覆盖会被后台生成的主题覆盖掉。
 * ⛔ 落雪层用 position:fixed + pointer-events:none，z-index 850：
 *    要低于顶栏（1030）与弹窗（1000+），否则会盖住导航点击与弹层。
 * ⛔ 不要用 filter/backdrop-filter 做雪景 —— 2 核机器上整页合成开销过大。
 *
 * ⚠️ 为什么背景里不再放雪花图案：
 *    background-repeat 的每个 tile 内容完全相同，平铺出来的雪花必然落在同一个网格上，
 *    于是所有雪花「排成整齐的一排、按同一节奏往下掉」。叠多层互质 tile 只能把重复周期
 *    拉长，改变不了「同一时刻落点成网格」这个事实 —— 用户一眼就看出来了。
 *    所以背景只用一张纯色，雪花全部交给 winter.js 逐朵生成。
 */

/* ============================================================
   1. 配色：只在冬季模式下覆盖背景类变量
   ============================================================ */

/* 深色：参考图那种「深夜蓝 + 雪」的基调
   ⛔ 这里必须覆盖**全部**带字面色值的背景变量，不能只改 page/card。
      后台生成的 theme.css 里 `--color-bg-sidebar:#0f172a`、`--color-bg-tag:#1c2733` 等
      都是独立字面量，不会跟着 --color-bg-card 走；漏一个，那一块就停留在原深色主题的
      石板蓝上，与冬季海军蓝并排就是一条突兀的色带（左侧栏 240px 全是这个）。 */
html[data-season="winter"][data-theme="dark"] {
    --color-bg-page: #071625;
    --color-bg-page-soft: #0a1e30;
    --color-bg-card: #0d2135;
    --color-bg-card-2: #10283c;
    --color-bg-header: #0a1b2c;
    --color-bg-footer: #0a1b2c;
    /* 以下 5 个是「一直漏掉」的那批：左侧栏、标签底、会员卡 */
    --color-bg-sidebar: #0a1b2c;
    --color-bg-sidebar-2: #10283c;
    --color-bg-tag: #10283c;
    --color-bg-tag-hover: #16334a;
    --color-lifetime-bg: #0a1b2c;
    --color-lifetime-bg-2: #16334a;
}

/* 浅色：雪天冷白，不要发蓝过头，否则正文对比度下降
   浅色下侧边栏本来就是 #ffffff（白面板落在浅蓝页面上是正常的层级关系），
   只有标签底是中性灰 #e6ecf1，在蓝色系里略脏，统一成冷调。 */
html[data-season="winter"][data-theme="light"] {
    --color-bg-page: #eef4fb;
    --color-bg-page-soft: #e8f0f9;
    --color-bg-card: #ffffff;
    --color-bg-card-2: #f4f8fd;
    --color-bg-header: #ffffff;
    --color-bg-footer: #ffffff;
    --color-bg-tag: #e8eff8;
    --color-bg-tag-hover: #dbe6f3;
}

/* ============================================================
   2. 背景：纯色夜空底（⛔ 不加渐变，见下）
   ============================================================ */

/* 根画布（html）负责背景 —— 见 style.css 第 15 行的注释。
   ⛔ 页面背景必须是**纯色**，不许再上整页径向渐变（2026-11-06 第二次回退，别再加）。
   原因不是渐变难看，而是本站的版面是「多个不透明面板拼在一起」：
   左侧栏 .app-side、主列 .res-page、右侧栏卡片各自都是实色（--color-bg-sidebar /
   --color-bg-card），它们之间的缝/留白才露出页面底色。一旦页面底色是渐变，
   缝里是「会随滚动变亮的渐变」，面板是「固定色」——
   · 渐变比面板亮 → 缝变成一条亮竖条（左侧栏右边一条、主列右边一条，左右都有）
   · 渐变比面板暗 → 缝变成一条暗竖条（换个屏宽/滚动位置就翻面）
   两种都是用户一眼就能看出来的「色带」，且位置随视口宽度漂移，无法用固定值修掉。
   纯色底则天然与任何面板同色系衔接，缝隙永远只是「差一档的暗缝」，不刺眼。
   夜空纵深改用雪花密度与尺寸表达就够了。 */
html[data-season="winter"] {
    background-color: var(--color-bg-page);
    background-image: none;
}

/* 兜底：让「铺页面底色」的容器把背景让给 html 画布。
   现在页面底色是纯色，这几条其实等价（同色不产生缝），保留是为了——
   哪天有人给 html 加了纹理/多层背景，也不会又在面板缝里露出一条带子。
   ⚠️ 别删：.app-main 的 background 在 style.css:59，删了这里就只剩它那层实色。 */
html[data-season="winter"] .app-body,
html[data-season="winter"] .app-main,
html[data-season="winter"] .app-side-col { background: transparent; }

/* 滚动条：style.css 里 `html[data-theme="dark"]` 把 color-scheme 设成 dark，
   浏览器于是画**中性灰**滚动条（轨道 #2c2c2c、滑块 #9f9f9f）—— 那是系统配色，
   不认主题变量，紧贴冬季海军蓝内容区就是一条灰带。
   用 scrollbar-color 直接换成同色系（Chrome 121+ / Firefox 生效），
   深色给蓝灰滑块，浅色给冷灰滑块。 */
html[data-season="winter"][data-theme="dark"] {
    scrollbar-color: #1d3a56 #08192a;
}

html[data-season="winter"][data-theme="light"] {
    scrollbar-color: #a9c0d8 #eef4fb;
}

/* ============================================================
   3. 落雪（节点由 winter.js 逐朵生成）
   ============================================================ */

/* 容器由 JS 在 <body> 末尾注入，退出冬季模式时整个移除。
   每朵雪花是容器下的一个 <i>，各自持有独立的 CSS 变量与 animation。
   ⛔ 数量、位置、尺寸全部来自 JS，本文件不假设任何数量或顺序。 */
.snowfield {
    position: fixed;
    inset: 0;
    z-index: 850;
    pointer-events: none;
    overflow: hidden;
    /* 让雪只出现在可视区，不影响页面滚动高度 */
    contain: strict;
}

.snowfield i {
    position: absolute;
    left: 0;                 /* 实际位置由内联 left: xx vw 覆盖 */
    top: 0;
    width: var(--s, 6px);
    height: var(--s, 6px);
    display: block;
    opacity: var(--op, 0.6);
    background-color: #ffffff;
    /* 用 mask 而不是直接塞 data-uri 背景：形状与颜色解耦，
       浅色模式下只需换 background-color，不必再备一套图案 */
    -webkit-mask-image: var(--shape);
            mask-image: var(--shape);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    /* 只动 transform：走合成线程，不触发布局与重绘 */
    animation: snowDrift var(--dur, 22s) linear var(--delay, 0s) infinite;
}

/* 浅色底上白雪花等于没有，改用冷灰蓝。
   ⛔ 不要再乘一个 <1 的系数：这条折扣是给当年的实心圆点配的，换成细线条雪花后
      线条本身已经比实心块淡得多，再打折会让整屏雪花彻底看不见。 */
html[data-season="winter"][data-theme="light"] .snowfield i {
    background-color: #4f7298;
}

/* --- 形状（mask 里用纯黑即可，只有 alpha 参与裁切）---
   全部 6 折对称：雪花真实的对称阶数是 6，8 折 / 12 折都不像雪。
   ⛔ 2026-11-06 重做，以下形态用户已明确否掉，别退回去：
      · 12 根细枝 + 枝尖圆点   → 放大像「太阳/病毒」，就是被点名丑的那版
      · 6 根枝 + 大圆点 + 中心圆环 → 像「分子结构图」
      · 实心花瓣               → 缩小后就是一个八角星/花朵，不像雪
      · 8 折对称               → 肉眼读作「星芒/齿轮」，不像雪
   共同原则：只用线条，枝尖绝不挂圆点；枝数固定 6；枝上最多两级分叉。

   ⚠️ mask 按元素宽高拉伸，线宽与尺寸同比。9~11px 画任何分叉都会糊成点，
      所以极小尺寸只走 sf-b（粗线、无分叉）。 */

/* 粗线六枝（<12px 专用，最小尺寸下唯一还能看出六角的一档） */
.sf-b {
    --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23000' stroke-width='8.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cg transform='rotate(0 50 50)'%3E%3Cpath d='M50 50V9M50 26L39 16M50 26L61 16'/%3E%3C/g%3E%3Cg transform='rotate(60 50 50)'%3E%3Cpath d='M50 50V9M50 26L39 16M50 26L61 16'/%3E%3C/g%3E%3Cg transform='rotate(120 50 50)'%3E%3Cpath d='M50 50V9M50 26L39 16M50 26L61 16'/%3E%3C/g%3E%3Cg transform='rotate(180 50 50)'%3E%3Cpath d='M50 50V9M50 26L39 16M50 26L61 16'/%3E%3C/g%3E%3Cg transform='rotate(240 50 50)'%3E%3Cpath d='M50 50V9M50 26L39 16M50 26L61 16'/%3E%3C/g%3E%3Cg transform='rotate(300 50 50)'%3E%3Cpath d='M50 50V9M50 26L39 16M50 26L61 16'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* 长枝：分枝靠近枝尖、中间留空，轮廓最接近「❄」的一档 */
.sf-1 {
    --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23000' stroke-width='5.2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cg transform='rotate(0 50 50)'%3E%3Cpath d='M50 50V10M50 20L40 11M50 20L60 11'/%3E%3C/g%3E%3Cg transform='rotate(60 50 50)'%3E%3Cpath d='M50 50V10M50 20L40 11M50 20L60 11'/%3E%3C/g%3E%3Cg transform='rotate(120 50 50)'%3E%3Cpath d='M50 50V10M50 20L40 11M50 20L60 11'/%3E%3C/g%3E%3Cg transform='rotate(180 50 50)'%3E%3Cpath d='M50 50V10M50 20L40 11M50 20L60 11'/%3E%3C/g%3E%3Cg transform='rotate(240 50 50)'%3E%3Cpath d='M50 50V10M50 20L40 11M50 20L60 11'/%3E%3C/g%3E%3Cg transform='rotate(300 50 50)'%3E%3Cpath d='M50 50V10M50 20L40 11M50 20L60 11'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* 双级：两对短枝，结构最接近真实雪晶 */
.sf-2 {
    --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23000' stroke-width='4.8' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cg transform='rotate(0 50 50)'%3E%3Cpath d='M50 50V10M50 20L41 12M50 20L59 12M50 32L43 25M50 32L57 25'/%3E%3C/g%3E%3Cg transform='rotate(60 50 50)'%3E%3Cpath d='M50 50V10M50 20L41 12M50 20L59 12M50 32L43 25M50 32L57 25'/%3E%3C/g%3E%3Cg transform='rotate(120 50 50)'%3E%3Cpath d='M50 50V10M50 20L41 12M50 20L59 12M50 32L43 25M50 32L57 25'/%3E%3C/g%3E%3Cg transform='rotate(180 50 50)'%3E%3Cpath d='M50 50V10M50 20L41 12M50 20L59 12M50 32L43 25M50 32L57 25'/%3E%3C/g%3E%3Cg transform='rotate(240 50 50)'%3E%3Cpath d='M50 50V10M50 20L41 12M50 20L59 12M50 32L43 25M50 32L57 25'/%3E%3C/g%3E%3Cg transform='rotate(300 50 50)'%3E%3Cpath d='M50 50V10M50 20L41 12M50 20L59 12M50 32L43 25M50 32L57 25'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* 羽状：三对细枝，最密的一档，高倍屏上才看得出细节 */
.sf-3 {
    --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23000' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cg transform='rotate(0 50 50)'%3E%3Cpath d='M50 50V8M50 22L38 12M50 22L62 12M50 34L42 26M50 34L58 26'/%3E%3C/g%3E%3Cg transform='rotate(60 50 50)'%3E%3Cpath d='M50 50V8M50 22L38 12M50 22L62 12M50 34L42 26M50 34L58 26'/%3E%3C/g%3E%3Cg transform='rotate(120 50 50)'%3E%3Cpath d='M50 50V8M50 22L38 12M50 22L62 12M50 34L42 26M50 34L58 26'/%3E%3C/g%3E%3Cg transform='rotate(180 50 50)'%3E%3Cpath d='M50 50V8M50 22L38 12M50 22L62 12M50 34L42 26M50 34L58 26'/%3E%3C/g%3E%3Cg transform='rotate(240 50 50)'%3E%3Cpath d='M50 50V8M50 22L38 12M50 22L62 12M50 34L42 26M50 34L58 26'/%3E%3C/g%3E%3Cg transform='rotate(300 50 50)'%3E%3Cpath d='M50 50V8M50 22L38 12M50 22L62 12M50 34L42 26M50 34L58 26'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* 箭头：枝尖一个 V 口，最简洁的一档 */
.sf-4 {
    --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23000' stroke-width='5.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cg transform='rotate(0 50 50)'%3E%3Cpath d='M50 50V13M50 13L41 5M50 13L59 5'/%3E%3C/g%3E%3Cg transform='rotate(60 50 50)'%3E%3Cpath d='M50 50V13M50 13L41 5M50 13L59 5'/%3E%3C/g%3E%3Cg transform='rotate(120 50 50)'%3E%3Cpath d='M50 50V13M50 13L41 5M50 13L59 5'/%3E%3C/g%3E%3Cg transform='rotate(180 50 50)'%3E%3Cpath d='M50 50V13M50 13L41 5M50 13L59 5'/%3E%3C/g%3E%3Cg transform='rotate(240 50 50)'%3E%3Cpath d='M50 50V13M50 13L41 5M50 13L59 5'/%3E%3C/g%3E%3Cg transform='rotate(300 50 50)'%3E%3Cpath d='M50 50V13M50 13L41 5M50 13L59 5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* 少数几片近景大雪花（winter.js 里按屏宽补 2~5 片）。
   ⛔ 不要加 filter: blur()。大雪花是唯一能看清枝杈的一档，虚化会把它糊成
      一团白斑，比不加更难看；景深靠尺寸与速度差表达就够了。 */

/* --- 下落轨迹 ---
   5 个关键帧，水平方向做 +sw / -sw / +0.6sw 的蛇形摆动，
   同时整体沿 --dx 偏移 —— 于是每朵的轨迹倾角、摆幅、节奏都不同。
   ⛔ 100% 停在 103vh（远超视口），配合负的 animation-delay，
      任意时刻向上翻都能接上，不会出现「齐刷刷从顶部出发」的横向队列。 */
@keyframes snowDrift {
    0% {
        transform: translate3d(0, -16vh, 0) rotate(var(--r0, 0deg));
    }
    25% {
        transform: translate3d(calc(var(--dx, 0px) * 0.2 + var(--sw, 0px)), 13vh, 0)
                   rotate(calc(var(--r0, 0deg) + var(--spin, 0deg) * 0.25));
    }
    50% {
        transform: translate3d(calc(var(--dx, 0px) * 0.5 - var(--sw, 0px)), 42vh, 0)
                   rotate(calc(var(--r0, 0deg) + var(--spin, 0deg) * 0.5));
    }
    75% {
        transform: translate3d(calc(var(--dx, 0px) * 0.8 + var(--sw, 0px) * 0.6), 71vh, 0)
                   rotate(calc(var(--r0, 0deg) + var(--spin, 0deg) * 0.75));
    }
    100% {
        transform: translate3d(var(--dx, 0px), 103vh, 0)
                   rotate(calc(var(--r0, 0deg) + var(--spin, 0deg)));
    }
}

/* 尊重系统「减少动态效果」：winter.js 检测到该偏好时根本不会生成节点，
   这里再兜一次底，防止极端情况下残留节点仍在跑动画。 */
@media (prefers-reduced-motion: reduce) {
    .snowfield { display: none; }
}

/* ============================================================
   4. 顶栏季节按钮
   ============================================================ */

/* 激活态：雪花亮起（与主题按钮同尺寸同交互，只是加一个选中底色） */
.app-icon-btn.is-season-on {
    color: var(--color-accent);
    background: var(--color-accent-soft);
}

/* 季节按钮的雪花图标：未激活灰度、激活转正色 */
#seasonIcon svg, #seasonIconMobile svg { transition: transform .45s ease; }
.app-icon-btn.is-season-on #seasonIcon svg,
.app-icon-btn.is-season-on #seasonIconMobile svg { transform: rotate(180deg); }