/* ============================================================
* MindPalace 主题系统 - 四季主题 + 开放接口
* 通过 body[data-theme] 切换，CSS 变量驱动，可扩展自定义主题
* ============================================================ */
/* ---------- 默认主题（经典紫） ---------- */
:root,
body[data-theme="default"] {
--mp-primary: #5a67d8;
--mp-primary-hover: #4c51bf;
--mp-primary-light: #ebf4ff;
--mp-accent: #764ba2;
--mp-bg: #f7f9fc;
--mp-bg-canvas: #f0f2f6;
--mp-bg-card: #ffffff;
--mp-text: #2d3748;
--mp-text-secondary: #718096;
--mp-border: #e2e8f0;
--mp-grid: rgba(90,103,216,.07);
--mp-node-border: #5a67d8;
--mp-node-bg: #ffffff;
--mp-node-title-bg: #f7f9fc;
--mp-header-bg: linear-gradient(90deg, #5a67d8, #764ba2);
--mp-header-text: #ffffff;
--mp-danger: #e53e3e;
--mp-success: #48bb78;
--mp-warning: #ed8936;
}
/* ---------- 春季主题（樱花粉绿） ---------- */
body[data-theme="spring"], body[data-theme="spring-anim"] {
--mp-primary: #38a169;
--mp-primary-hover: #2f855a;
--mp-primary-light: #f0fff4;
--mp-accent: #d53f8c;
--mp-bg: #f0fff4;
--mp-bg-canvas: #e6fffa;
--mp-bg-card: #ffffff;
--mp-text: #22543d;
--mp-text-secondary: #4a7c6f;
--mp-border: #c6f6d5;
--mp-grid: rgba(56,161,105,.08);
--mp-node-border: #38a169;
--mp-node-bg: #ffffff;
--mp-node-title-bg: #f0fff4;
--mp-header-bg: linear-gradient(90deg, #38a169, #d53f8c);
--mp-header-text: #ffffff;
--mp-danger: #e53e3e;
--mp-success: #38a169;
--mp-warning: #dd6b20;
}
/* ---------- 夏季主题（海洋蓝） ---------- */
body[data-theme="summer"], body[data-theme="summer-anim"] {
--mp-primary: #3182ce;
--mp-primary-hover: #2b6cb0;
--mp-primary-light: #ebf8ff;
--mp-accent: #00b5d8;
--mp-bg: #ebf8ff;
--mp-bg-canvas: #e6fffa;
--mp-bg-card: #ffffff;
--mp-text: #2a4365;
--mp-text-secondary: #4a6fa5;
--mp-border: #bee3f8;
--mp-grid: rgba(49,130,206,.08);
--mp-node-border: #3182ce;
--mp-node-bg: #ffffff;
--mp-node-title-bg: #ebf8ff;
--mp-header-bg: linear-gradient(90deg, #3182ce, #00b5d8);
--mp-header-text: #ffffff;
--mp-danger: #e53e3e;
--mp-success: #38b2ac;
--mp-warning: #dd6b20;
}
/* 第一百零五批·二：夏炽全站色差统一——用户拍板以思维导图页为准：非导图页底色与导图画布同款
暖奶油 #fdf5e9（原 --mp-bg 冷蓝 #ebf8ff=「首页和导图页两个颜色」根因；仅动效版 summer-anim 生效） */
body[data-theme="summer-anim"] { --mp-bg: #fdf5e9; --mp-primary-light: #fdf5e9; }
/* ---------- 秋季主题（枫叶橙） ---------- */
body[data-theme="autumn"], body[data-theme="autumn-anim"] {
--mp-primary: #dd6b20;
--mp-primary-hover: #c05621;
--mp-primary-light: #fffaf0;
--mp-accent: #d69e2e;
--mp-bg: #fffaf0;
--mp-bg-canvas: #fefcbf;
--mp-bg-card: #ffffff;
--mp-text: #7b341e;
--mp-text-secondary: #9c6b4a;
--mp-border: #feebc8;
--mp-grid: rgba(221,107,32,.08);
--mp-node-border: #dd6b20;
--mp-node-bg: #ffffff;
--mp-node-title-bg: #fffaf0;
--mp-header-bg: linear-gradient(90deg, #dd6b20, #d69e2e);
--mp-header-text: #ffffff;
--mp-danger: #e53e3e;
--mp-success: #38a169;
--mp-warning: #d69e2e;
}
/* ---------- 冬季主题（冰雪蓝白） ---------- */
body[data-theme="winter"], body[data-theme="winter-anim"] {
--mp-primary: #4a5568;
--mp-primary-hover: #2d3748;
--mp-primary-light: #edf2f7;
--mp-accent: #63b3ed;
--mp-bg: #edf2f7;
--mp-bg-canvas: #e2e8f0;
--mp-bg-card: #ffffff;
--mp-text: #2d3748;
--mp-text-secondary: #718096;
--mp-border: #cbd5e0;
--mp-grid: rgba(74,85,104,.08);
--mp-node-border: #4a5568;
--mp-node-bg: #ffffff;
--mp-node-title-bg: #edf2f7;
--mp-header-bg: linear-gradient(90deg, #4a5568, #63b3ed);
--mp-header-text: #ffffff;
--mp-danger: #e53e3e;
--mp-success: #38a169;
--mp-warning: #dd6b20;
}
/* ---------- 暗色主题（夜间模式） ---------- */
body[data-theme="dark"] {
--mp-primary: #805ad5;
--mp-primary-hover: #6b46c1;
--mp-primary-light: #2d3748;
--mp-accent: #9f7aea;
--mp-bg: #1a202c;
--mp-bg-canvas: #171923;
--mp-bg-card: #2d3748;
--mp-text: #e2e8f0;
--mp-text-secondary: #a0aec0;
--mp-border: #4a5568;
--mp-grid: rgba(128,90,213,.1);
--mp-node-border: #805ad5;
--mp-node-bg: #2d3748;
--mp-node-title-bg: #1a202c;
--mp-header-bg: linear-gradient(90deg, #2d3748, #4a5568);
--mp-header-text: #e2e8f0;
--mp-danger: #fc8181;
--mp-success: #68d391;
--mp-warning: #f6ad55;
}
/* ============================================================
* 开放主题接口说明
* ============================================================
* 第三方开发者可以通过以下方式创建自定义主题：
*
* 1. 定义 CSS 变量覆盖：
* body[data-theme="my-theme"] {
* --mp-primary: #your-color;
* --mp-bg: #your-bg;
* ... (参考上方变量列表)
* }
*
* 2. 在 JS 中注册主题：
* MindPalaceThemes.register('my-theme', '我的主题', '🎨');
*
* 3. 主题即插即用，自动出现在主题选择器中
*
* 变量完整列表（共 22 个）：
* --mp-primary, --mp-primary-hover, --mp-primary-light,
* --mp-accent, --mp-bg, --mp-bg-canvas, --mp-bg-card,
* --mp-text, --mp-text-secondary, --mp-border,
* --mp-grid, --mp-node-border, --mp-node-bg, --mp-node-title-bg,
* --mp-header-bg, --mp-header-text,
* --mp-danger, --mp-success, --mp-warning
* ============================================================ */
/* ============================================================
* 会员专属主题 - 玻璃拟态（Glassmorphism）
* 高不透明度背景 + backdrop-filter: blur + 细腻边框 + 柔和阴影
* （远看玻璃感、近看不透字：文字区背景基本不透，避免透出画布内容影响阅读）
* 对应 mindmap-themes.js 中 member: true 的注册
* ============================================================ */
/* ---------- 雾白玻璃（会员专属） ---------- */
body[data-theme="glass-light"] {
--mp-primary: #4f7cff;
--mp-primary-hover: #3b63d8;
--mp-primary-light: rgba(230,238,255,.88);
--mp-accent: #8b5cf6;
--mp-bg: #eef2f9;
--mp-bg-canvas: #e8edf7;
--mp-bg-card: rgba(255,255,255,.85);
--mp-text: #2b3a55;
--mp-text-secondary: #64748b;
--mp-border: rgba(255,255,255,.35);
--mp-grid: rgba(79,124,255,.08);
--mp-node-border: rgba(255,255,255,.5);
--mp-node-bg: rgba(255,255,255,.82);
--mp-node-title-bg: rgba(255,255,255,.55);
--mp-header-bg: linear-gradient(90deg, rgba(255,255,255,.85), rgba(230,238,255,.8));
--mp-header-text: #2b3a55;
--mp-danger: #e53e3e;
--mp-success: #38a169;
--mp-warning: #dd6b20;
background: #e8edf7;
}
/* ---------- 暗夜琉璃（会员专属） ---------- */
body[data-theme="glass-dark"] {
--mp-primary: #7c9aff;
--mp-primary-hover: #5f7eea;
--mp-primary-light: rgba(60,72,110,.88);
--mp-accent: #a78bfa;
--mp-bg: #10142a;
--mp-bg-canvas: #0d1122;
--mp-bg-card: rgba(24,30,54,.85);
--mp-text: #e6ebf7;
--mp-text-secondary: #94a3c0;
--mp-border: rgba(255,255,255,.14);
--mp-grid: rgba(124,154,255,.09);
--mp-node-border: rgba(255,255,255,.22);
--mp-node-bg: rgba(30,38,66,.85);
--mp-node-title-bg: rgba(255,255,255,.16);
--mp-header-bg: linear-gradient(90deg, rgba(24,30,54,.88), rgba(40,32,80,.82));
--mp-header-text: #e6ebf7;
--mp-danger: #fc8181;
--mp-success: #68d391;
--mp-warning: #f6ad55;
background: #0d1122;
}
/* ---------- 画布背景：装饰性渐变（让毛玻璃有内容可模糊），网格层保留 ---------- */
body[data-theme="glass-light"] #canvasWrap {
background:
radial-gradient(600px 420px at 15% 20%, rgba(79,124,255,.18), transparent 60%),
radial-gradient(720px 520px at 85% 78%, rgba(139,92,246,.16), transparent 60%),
linear-gradient(var(--mp-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--mp-grid) 1px, transparent 1px),
linear-gradient(135deg, #eef2f9, #dfe7f5);
background-size: auto, auto, 24px 24px, 24px 24px, auto;
}
body[data-theme="glass-dark"] #canvasWrap {
background:
radial-gradient(600px 420px at 12% 18%, rgba(124,154,255,.16), transparent 60%),
radial-gradient(720px 520px at 88% 80%, rgba(167,139,250,.14), transparent 60%),
linear-gradient(var(--mp-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--mp-grid) 1px, transparent 1px),
linear-gradient(135deg, #0d1122, #141a33);
background-size: auto, auto, 24px 24px, 24px 24px, auto;
}
/* ---------- 关键组件的毛玻璃效果（背景色由各自 CSS 变量提供高不透明度值，blur 保留玻璃质感） ---------- */
body[data-theme="glass-light"] .node-box,
body[data-theme="glass-dark"] .node-box,
body[data-theme="glass-light"] #appHeader,
body[data-theme="glass-dark"] #appHeader,
body[data-theme="glass-light"] #detailPanel,
body[data-theme="glass-dark"] #detailPanel,
body[data-theme="glass-light"] #chatBar,
body[data-theme="glass-dark"] #chatBar,
body[data-theme="glass-light"] #ctxMenu,
body[data-theme="glass-dark"] #ctxMenu,
body[data-theme="glass-light"] #readingSettings,
body[data-theme="glass-dark"] #readingSettings,
body[data-theme="glass-light"] #multiSelectBar,
body[data-theme="glass-dark"] #multiSelectBar,
body[data-theme="glass-light"] #globalToast,
body[data-theme="glass-dark"] #globalToast,
body[data-theme="glass-light"] #importProgress,
body[data-theme="glass-dark"] #importProgress {
backdrop-filter: blur(14px) saturate(1.2);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
}
/* 细腻边框 + 柔和阴影（节点保留 var(--mp-node-border) 描边，仅调阴影） */
body[data-theme="glass-light"] #appHeader,
body[data-theme="glass-light"] #detailPanel,
body[data-theme="glass-light"] #chatBar,
body[data-theme="glass-light"] #ctxMenu,
body[data-theme="glass-light"] #readingSettings,
body[data-theme="glass-light"] #multiSelectBar,
body[data-theme="glass-light"] #globalToast,
body[data-theme="glass-light"] #importProgress {
border: 1px solid rgba(255,255,255,.3);
box-shadow: 0 8px 32px rgba(31,38,135,.14);
}
body[data-theme="glass-light"] .node-box { box-shadow: 0 8px 24px rgba(31,38,135,.12); }
body[data-theme="glass-light"] .node-box .node-title { border-bottom-color: rgba(255,255,255,.3); }
body[data-theme="glass-dark"] #appHeader,
body[data-theme="glass-dark"] #detailPanel,
body[data-theme="glass-dark"] #chatBar,
body[data-theme="glass-dark"] #ctxMenu,
body[data-theme="glass-dark"] #readingSettings,
body[data-theme="glass-dark"] #multiSelectBar,
body[data-theme="glass-dark"] #globalToast,
body[data-theme="glass-dark"] #importProgress {
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 8px 32px rgba(0,0,0,.45);
}
body[data-theme="glass-dark"] .node-box { box-shadow: 0 8px 24px rgba(0,0,0,.4); }
body[data-theme="glass-dark"] .node-box .node-title { border-bottom-color: rgba(255,255,255,.12); }
/* 雾白玻璃顶栏为浅色：修正内联样式的白色按钮/链接文字，保证可读性 */
body[data-theme="glass-light"] #appHeader button,
body[data-theme="glass-light"] #appHeader a {
color: #2b3a55 !important;
}
body[data-theme="glass-light"] #appHeader input::placeholder { color: rgba(43,58,85,.6); }
body[data-theme="glass-light"] #appHeader input { color: #2b3a55 !important; background: rgba(255,255,255,.35) !important; }
/* 全站统一：body 背景跟随主题变量（theme-global.js 在每个页面设置 body[data-theme]） */
body[data-theme] { background: var(--mp-bg, #f7f9fc); }
/* ============================================================
* 动效主题（会员专属，效果层由 js/theme-fx.js 驱动）：变量在静态四季基础上微调
* ============================================================ */
/* 春漾：比静态春更暖一度 */
body[data-theme="spring-anim"] { --mp-bg-canvas: #e9fbf2; --mp-bg: #f2fbf6; }
/* 夏炽：更亮更清 */
body[data-theme="summer-anim"] { --mp-bg-canvas: #eef9ff; --mp-bg: #fdf5e9; }
/* 秋瑟：比静态秋暗一度的暖黄 */
body[data-theme="autumn-anim"] { --mp-bg-canvas: #f7ead0; --mp-bg: #faf2e0; }
/* 冬凛：更白的雪原 */
body[data-theme="winter-anim"] { --mp-bg-canvas: #f4f7fb; --mp-bg: #fafcfe; }
/* 冬凛·踏雪寻梅：淡墨梅枝底纹（左上/右下各一枝），白雪落在枝梅间才有对比物可辨；
SVG 内联（红/粉五瓣梅+淡褐枝干+花苞，低透明度不抢内容），底色仍走 --mp-bg-canvas */
body.fx-owned[data-theme="winter-anim"] #canvasWrap {
background-image: url("data:image/svg+xml,"),
url("data:image/svg+xml,");
background-repeat: no-repeat, no-repeat;
background-position: 26px 64px, right 34px bottom 96px;
background-size: 330px auto, 260px auto;
}
/* 夏炽相位底色（theme-fx 切 fx-summer-rain 类）：晴相暖白高亮（比春亮一档、页面清晰明亮）/ 雨相压暗蓝灰。
用变量覆盖而非 background-color 直写——ambient css 的 body.fx-owned #canvasWrap 也走同一变量，避免特异性战争 */
body[data-theme="summer-anim"] { --mp-bg-canvas: #fdf5e9; }
body[data-theme="summer-anim"].fx-summer-rain { --mp-bg-canvas: #c8d3e2; }
#canvasWrap { transition: background-color 3s ease; }
/* 夏炽艳阳相（第一百零三批：色彩整体偏暖——奶油暖天底+暖金太阳；特效给足——光柱/云朵/三层浪/碎光见下） */
body[data-theme="summer-anim"] .fx-sun {
width: 22vmax; height: 22vmax;
background: radial-gradient(circle at 50% 50%, rgba(255,241,201,.58), rgba(255,216,138,.3) 45%, transparent 70%);
animation-duration: 52s;
}
/* 玻璃/琉璃的流光带（theme-fx.js 注入 .fx-band 元素时用）：彩虹穿梭 / 流光溢彩 */
.fx-band {
position: absolute;
width: 160%;
height: 220px;
top: 30%;
left: -30%;
border-radius: 50%;
filter: blur(46px);
opacity: .34;
pointer-events: none;
will-change: transform;
overflow: hidden; /* 内部流光 streak 裁进光带圆角轮廓内 */
}
/* 流光 streak（第四十五批）：光带内部持续流动的亮纹——此前只有整条光带缓慢平移，
肉眼几乎读不出「流动」（用户观感=没特效）；streak 用 background-position 无缝循环 */
.fx-flow {
position: absolute;
inset: 0;
background-size: 200% 100%;
animation: fxBandFlow 9s linear infinite;
}
.fx-band.b2 .fx-flow { animation-duration: 14s; animation-direction: reverse; opacity: .8; }
/* 雾白玻璃（浅底）：彩色流光段 */
.fx-band.b-rainbow .fx-flow {
background-image: repeating-linear-gradient(90deg,
transparent 0 60px, rgba(255,90,90,.5) 80px 105px, rgba(255,210,80,.5) 120px 145px,
rgba(90,220,140,.5) 160px 185px, rgba(100,170,255,.5) 200px 225px, transparent 240px 300px);
}
/* 暗夜琉璃（深底）：银白流光段 */
.fx-band.b-stream .fx-flow {
background-image: repeating-linear-gradient(90deg,
transparent 0 70px, rgba(255,255,255,.62) 95px 135px, transparent 160px 230px);
}
@keyframes fxBandFlow { from { background-position: 0 0; } to { background-position: -100% 0; } }
.fx-band.b-rainbow {
background: linear-gradient(90deg, transparent, rgba(255,120,120,.7), rgba(255,220,100,.7), rgba(120,220,140,.7), rgba(110,170,255,.7), rgba(190,130,255,.7), transparent);
animation: fxBandSweep 21s linear infinite;
/* 雾白玻璃（浅底）：不可用 mix-blend-mode:multiply——父层 #themeFxLayer(fixed+z-index) 是隔离
stacking context，multiply 的 backdrop 只剩层内透明内容，彩虹带会整条消失（"流光没特效"根因）。
改直接显示彩色带（normal），浅底上 blur 46px + opacity 已足够柔和。 */
opacity: .5;
}
.fx-band.b-rainbow.b2 { top: 62%; animation-duration: 29s; animation-direction: reverse; opacity: .42; }
.fx-band.b-stream {
background: linear-gradient(90deg, transparent, rgba(92,84,236,.8), rgba(56,189,248,.75), rgba(168,85,247,.8), transparent);
animation: fxBandSweep 17s linear infinite;
opacity: .55; /* 暗夜琉璃深底：提亮让流光带肉眼明确可见（旧 .42 偏淡，用户观感=没特效） */
}
.fx-band.b-stream.b2 { top: 58%; animation-duration: 23s; animation-direction: reverse; opacity: .42;
background: linear-gradient(90deg, transparent, rgba(236,72,153,.7), rgba(250,204,21,.6), transparent); }
@keyframes fxBandSweep {
0% { transform: translateX(-18%) rotate(-6deg); }
50% { transform: translateX(18%) rotate(-2deg); }
100% { transform: translateX(-18%) rotate(-6deg); }
}
/* 暖阳光斑（春漾/夏炽艳阳相）：暖色径向光，缓慢漂移 + 呼吸 */
.fx-sun {
position: absolute;
width: 46vmax;
height: 46vmax;
right: -8vmax;
top: -10vmax;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, rgba(255,236,170,.5), rgba(255,200,90,.22) 45%, transparent 70%);
filter: blur(30px);
pointer-events: none;
animation: fxSunDrift 34s ease-in-out infinite;
will-change: transform, opacity;
}
@keyframes fxSunDrift {
0%, 100% { transform: translate(0,0) scale(1); opacity: .85; }
50% { transform: translate(-9vmax, 5vmax) scale(1.12); opacity: 1; }
}
/* 夏季阴雨相的压暗罩（透明度随状态切换渐变） */
.fx-dim { position: absolute; inset: 0; background: #1a2333; opacity: 0; transition: opacity 4s ease; pointer-events: none; }
.fx-dim.on { opacity: .12; }
/* ===== 夏炽大海+天空组（theme-fx.js 注入 .fx-sea/.fx-clouds/.fx-rays） =====
第一百零一批改「夏日海滩风」，第一百零三批加料：暖碧海+沙滩+白沫；云朵缓漂、太阳光柱旋转、
第三层远浪、海面碎光闪烁（特效给足、色彩偏暖）。 */
.fx-sea {
position: absolute; left: 0; right: 0; bottom: 0; height: 24%;
background: linear-gradient(180deg, rgba(255, 216, 160, .10), rgba(94, 178, 182, .36) 34%, rgba(28, 118, 138, .62));
opacity: 1; transition: opacity 3s ease; pointer-events: none; overflow: hidden;
}
.fx-wave {
position: absolute; left: 0; bottom: 0; width: 200%; height: 46%;
background-repeat: repeat-x; background-size: 50% 100%; opacity: .5;
animation: fxWaveMove 11s linear infinite;
}
.fx-wave.w1 { bottom: 14%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 34 Q75 12 150 32 T300 30 T450 34 T600 30 L600 60 Z' fill='%2386d8de' fill-opacity='.55'/%3E%3C/svg%3E"); }
.fx-wave.w2 { bottom: 0; opacity: .65; animation-duration: 7s; animation-direction: reverse;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 40 Q60 20 120 38 T240 36 T360 40 T480 34 T600 38 L600 60 Z' fill='%2338a4b8' fill-opacity='.7'/%3E%3C/svg%3E"); }
/* 第三层远浪（更远更淡更慢，拉开海的纵深） */
.fx-wave.w3 { bottom: 22%; height: 34%; opacity: .32; animation-duration: 17s;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 38 Q90 20 180 36 T360 34 T540 38 T600 36 L600 60 Z' fill='%23a8e2e4' fill-opacity='.6'/%3E%3C/svg%3E"); }
/* 沙滩（海面底缘）：暖沙色带 + 顶部一条白色浪花泡沫线（海滩的标志性元素） */
.fx-sea::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
background: linear-gradient(180deg, rgba(252, 238, 206, 0), rgba(249, 226, 180, .9) 36%, #f6ddb0);
}
.fx-sea::before {
content: ''; position: absolute; left: 0; right: 0; bottom: 30%; height: 10px; z-index: 1;
background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,0));
filter: blur(2px);
animation: fxBeachFoam 5s ease-in-out infinite;
}
@keyframes fxBeachFoam {
0%, 100% { opacity: .45; transform: translateY(0); }
50% { opacity: .9; transform: translateY(-3px); }
}
.fx-sea-shine {
position: absolute; left: 30%; bottom: 18%; width: 34%; height: 34%;
background: radial-gradient(ellipse at 50% 0%, rgba(255, 240, 196, .46), transparent 70%);
animation: fxSeaShine 5s ease-in-out infinite; pointer-events: none;
}
/* 海面碎光（阳光在浪尖上的三点闪烁） */
.fx-sea-glint {
position: absolute; width: 7%; height: 5px; border-radius: 3px;
background: linear-gradient(90deg, transparent, rgba(255, 240, 190, .9), transparent);
animation: fxGlint 4.5s ease-in-out infinite; pointer-events: none;
}
.fx-sea-glint.g1 { left: 16%; bottom: 40%; }
.fx-sea-glint.g2 { left: 44%; bottom: 32%; animation-delay: -1.6s; }
.fx-sea-glint.g3 { left: 70%; bottom: 44%; animation-delay: -3s; width: 5%; }
@keyframes fxGlint {
0%, 100% { opacity: 0; transform: scaleX(.55); }
40% { opacity: 1; transform: scaleX(1); }
}
/* 太阳光柱（从太阳斜洒的旋转光芒，暖金低透明） */
.fx-rays {
position: absolute; right: -7vmax; top: -12vmax; width: 34vmax; height: 34vmax; pointer-events: none;
border-radius: 50%; filter: blur(6px); opacity: .8;
background: conic-gradient(from 0deg,
rgba(255,216,140,.15) 0 6deg, transparent 6deg 26deg, rgba(255,216,140,.12) 26deg 32deg, transparent 32deg 54deg,
rgba(255,210,130,.10) 54deg 58deg, transparent 58deg 92deg, rgba(255,216,140,.13) 92deg 98deg, transparent 98deg 132deg,
rgba(255,210,130,.11) 132deg 137deg, transparent 137deg 182deg, rgba(255,216,140,.13) 182deg 188deg, transparent 188deg 232deg,
rgba(255,210,130,.10) 232deg 237deg, transparent 237deg 282deg, rgba(255,216,140,.12) 282deg 288deg, transparent 288deg 360deg);
animation: fxRaysSpin 90s linear infinite;
}
@keyframes fxRaysSpin { to { transform: rotate(360deg); } }
/* 暖色云朵（奶油白微染桃色，横跨天空缓漂，三朵错峰） */
.fx-clouds { position: absolute; inset: 0; pointer-events: none; }
.fx-clouds i { position: absolute; display: block; background: #fff5e6; border-radius: 999px; filter: blur(8px); }
.fx-clouds .c1 { width: 26vmin; height: 7vmin; left: -30vmin; top: 12%; opacity: .75; animation: fxCloudDrift 65s linear infinite; }
.fx-clouds .c2 { width: 18vmin; height: 5vmin; left: -20vmin; top: 27%; opacity: .6; animation: fxCloudDrift 85s linear infinite; animation-delay: -30s; }
.fx-clouds .c3 { width: 34vmin; height: 8vmin; left: -38vmin; top: 5%; opacity: .5; animation: fxCloudDrift 105s linear infinite; animation-delay: -62s; }
@keyframes fxCloudDrift { from { transform: translateX(0); } to { transform: translateX(165vmin); } }
/* 雨相：天空组（光柱/云朵/碎光）随太阳淡出（海面留灰蓝雨海） */
body.fx-summer-rain .fx-rays, body.fx-summer-rain .fx-clouds i, body.fx-summer-rain .fx-sea-glint { opacity: 0; transition: opacity 3s ease; }
/* 雨相海面（第四十四批）：不消失，降饱和/亮度/透明度=灰蓝雨海（有海流可看） */
.fx-sea.fx-sea-rain {
opacity: .45; filter: saturate(.3) brightness(.82);
}
.fx-sea.fx-sea-rain .fx-sea-shine { opacity: 0; } /* 雨天没有阳光高光 */
.fx-sea { transition: opacity 3s ease, filter 3s ease; }
@keyframes fxWaveMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fxSeaShine { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) {
.fx-band, .fx-sun, .fx-rays, .fx-clouds i, .fx-sea-glint, .fx-wave { animation: none !important; }
.fx-wave, .fx-sea-shine { animation: none !important; }
.fx-flow { animation: none !important; }
}