/* ============================================================
 * planet.css —— 星球化卡片 + 点击星爆粒子 + .tpl 真·3D 自转球壳按钮（v4）
 * v4 关键升级：
 *   · 球内"表面纹理层" — 多色条纹 / 斑块（用 repeating-linear-gradient +
 *     conic-gradient + radial-gradient 叠加），自转动画驱动
 *   · 真·3D 光照：右上高光 + 左下阴影（径向偏移 30%/70%）
 *   · 极地暗带：球内南北极 shadow inset
 *   · 大气层：5 层辉光（最外 130px+ blur 散射）
 *   · 部分球带行星环（::before）
 * 设计参考：宇宙星图、悬浮星球、星云光环、可点击炸开
 * 配色沿用 cosmic.css 已钉死的「紫主红辅·护眼版」配色变量，
 * 零业务选择器（id/class 全部保留），仅追加新 class。
 * ============================================================ */

/* ==============  .tpl 真·3D 球形按钮（planet-rebuild.js 重排 innerHTML）  ============== */
.tpl{
  /* 按钮本身退化成 1 个圆柱容器（vertical）：上面一颗球 + 下面一段文字 */
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px;
  width:auto!important;
  height:auto!important;
  min-height:auto!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  cursor:pointer;
  position:relative;
  z-index:60; /* 抬到 WebGL 球体画布(z-index:40)之上：orb 区域透明→透出球体；emoji 显示于球上 */
  -webkit-user-select:none;user-select:none;
  font:inherit;color:inherit;
  text-align:center;
}
/* ——— 球体本体：透明占位（由 #stellar-canvas 的 WebGL 绘制真·星际球体） ———
   保留 110x110 尺寸与居中位置，让 scissor 视口精确落在原位。所有 CSS 球面色/辉光/
   环一律移除，避免与 WebGL 球体叠加成"皮球"。 ——— */
.tpl .tpl-orb{
  width:110px;height:110px;
  border-radius:50%;
  position:relative;
  background:transparent !important;
  box-shadow:none !important;
  isolation:auto;
  transform:none !important;
  transition:transform .55s cubic-bezier(.16,1,.3,1), filter .55s ease;
}

/* ——— 球内表面纹理层：已由 WebGL 程序化表面取代，隐藏 CSS 层 ——— */
.tpl .tpl-surface{
  display:none !important;
}

/* ——— 内部主色辉光 / 行星环：已由 WebGL 绘制，隐藏 CSS 伪元素 ——— */
.tpl .tpl-orb::before,
.tpl .tpl-orb::after{
  display:none !important;
}
.tpl[data-ring="off"] .tpl-orb::after{ display:none!important; }

/* 球内图标（emoji 浮在玻璃球内，强发光、不转）
   v6：DOM emoji 被 stellar-spheres 的 #stellar-emojis 覆盖层接管（突破祖先堆叠上下文）。
   这里把 DOM 图标隐藏（保留可访问性 + 不影响布局），由覆盖层在根级 z-index:41 显示在球体之上。 */
.tpl .tpl-icon{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:46px;line-height:1;
  z-index:5;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.75)) drop-shadow(0 0 18px var(--pl-c, rgba(176,38,207,.70)));
  animation:plIconBob 4.2s ease-in-out infinite;
  pointer-events:none;
  visibility:hidden !important;
}

/* —— 覆盖层：根级 fixed, pointer-events:none, z-index:41（画布40之上） ——
   每个 .tpl / .core-globe 的 emoji 镜像到这里的 span，stellar-spheres.js 每帧定位 — */
#stellar-emojis{
  position:fixed;inset:0;width:100vw;height:100vh;
  z-index:41;pointer-events:none;overflow:hidden;
}
#stellar-emojis .se{
  position:absolute;left:0;top:0;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;line-height:1;
  transform:translate(-50%,-50%);  /* 仅居中，不再承载动画 */
  will-change:transform;
  pointer-events:none;
  user-select:none;
  /* 2026-09-29 协调化：去掉大红大紫重辉光，改柔光 */
  filter:drop-shadow(0 0 7px rgba(110,200,255,.35));
}
#stellar-emojis .se.core{ font-size:36px; }
/* 玻璃 HUD 圆徽托底：emoji 站在统一深色玻璃盘上，与任何球面色都协调 */
#stellar-emojis .se .se-i{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 32% 26%, rgba(120,210,255,.16), rgba(5,14,26,.58) 68%);
  border:1px solid rgba(150,220,255,.34);
  box-shadow:0 0 14px rgba(47,216,255,.16), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  animation:plIconBob 4.2s ease-in-out infinite;
}
#stellar-emojis .se.core .se-i{ width:74px;height:74px; }
/* 中央主星 SVG 麦穗：矢量居中于玻璃盘 */
#stellar-emojis .se.core .se-i svg{ width:42px;height:42px;display:block; }
/* 晨检条小星球图标：34px 矢量 + 柔光（更大、更清晰、不抢戏） */
#stellar-emojis .se.hero{
  width:34px;height:34px;font-size:0;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)) drop-shadow(0 0 8px var(--se-glow, #B026CF));
}
/* hero 排除玻璃盘：晨检条 SVG 直接贴球（2026-09-29） */
#stellar-emojis .se.hero .se-i{
  width:100%;height:100%;
  background:none;border:none;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
#stellar-emojis .se.hero .se-i svg{ width:100%;height:100%;display:block; stroke-width:2.2; }

/* ——— 5 章节主色（2026-09-29 v6：数字科技多色，与 planet-rebuild.js CHAPTER 一致） ——— */
.g-yi    .tpl .tpl-orb{ --pl-c:rgba(47,216,255,.92); --pl-c2:rgba(127,227,255,.58); --pl-glow:rgba(47,216,255,.55); --pl-glow2:rgba(127,227,255,.30); }
.g-er    .tpl .tpl-orb{ --pl-c:rgba(251,113,133,.90); --pl-c2:rgba(253,164,175,.55); --pl-glow:rgba(251,113,133,.55); --pl-glow2:rgba(253,164,175,.30); }
.g-san   .tpl .tpl-orb{ --pl-c:rgba(94,234,212,.92); --pl-c2:rgba(153,246,228,.58); --pl-glow:rgba(94,234,212,.55); --pl-glow2:rgba(153,246,228,.30); }
.g-strat .tpl .tpl-orb{ --pl-c:rgba(252,211,77,.92); --pl-c2:rgba(253,230,138,.58); --pl-glow:rgba(252,211,77,.55); --pl-glow2:rgba(253,230,138,.30); }
.g-biz   .tpl .tpl-orb{ --pl-c:rgba(176,38,207,.92); --pl-c2:rgba(193,63,224,.58); --pl-glow:rgba(176,38,207,.55); --pl-glow2:rgba(193,63,224,.30); }

/* ——— hover: 球体放大、自旋加速 ——— */
.tpl:hover .tpl-orb{
  transform:scale(1.10) translateY(-4px);
  filter:brightness(1.15);
}
/* hover 时让纹理自转加快 */
.tpl:hover .tpl-surface{ animation-duration:5s!important; }
/* hover 时行星环抖动加快 */
.tpl:hover .tpl-orb::after{ animation:plRingDrift 5s ease-in-out infinite; }
.tpl:hover .tpl-caption{
  color:#FFF!important;
  text-shadow:
    0 0 10px var(--pl-c, rgba(176,38,207,.85)),
    0 0 24px var(--pl-c, rgba(176,38,207,.55));
}

/* ——— 球下方文字标签 ——— */
.tpl .tpl-caption{
  font:600 11.5px/1.35 var(--font-cosmic, "PingFang SC","HarmonyOS Sans SC","Noto Sans SC",sans-serif);
  color:#F7EAFB;
  letter-spacing:.5px;
  text-align:center;
  max-width:118px;
  margin-top:0;
  transition:color .25s;
}
/* 激活态：球发光 + 文字金辉 */
.tpl.active .tpl-orb{
  filter:brightness(1.30) saturate(1.2);
  animation:plActivePulse 2.4s ease-in-out infinite!important;
}
.tpl.active .tpl-surface{ animation-duration:3.5s!important; }
.tpl.active .tpl-caption{
  color:#FBBF24!important;
  text-shadow:0 0 12px rgba(251,191,36,.85),0 0 28px rgba(251,191,36,.45)!important;
}
@keyframes plActivePulse{
  0%,100%{ filter:brightness(1.10); }
  50%    { filter:brightness(1.45) saturate(1.3); }
}

/* ==============  星球外壳：4 球并列（晨检条）  ============== */
.planet-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  align-items:end;
  margin:6px 0 18px;
  padding:6px 8px 4px;
}
.planet-cell{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  cursor:pointer;
  -webkit-user-select:none;user-select:none;
  transform-origin:50% 70%;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.planet-cell[data-floating="0"]{ /* 让中央驾驶舱不浮动 */ }

/* ==============  星球本体：球面 + 大气层 + 旋转光环  ============== */
.planet-orb{
  position:relative;
  width:118px;height:118px;
  border-radius:50%;
  overflow:visible;
  isolation:isolate;
  transform:translateZ(0);
  transition:transform .8s cubic-bezier(.16,1,.3,1), filter .8s ease;
}
/* 4 颗星统一 VR 开屏同款：紫红金主调，每颗微差区分（色相均 ≥283° 或金，禁 230–283° 蓝相） */
.planet-cell[data-color="176,38,207"]   .planet-orb{ --pl-c:176,38,207; --pl-c2:138,23,168; } /* 兜底 · 紫红 */
.planet-cell[data-planet="weather"] .planet-orb{ --pl-c:193,63,224;  --pl-c2:138,23,168; } /* #C13FE0 亮紫红 290° · 天气 */
.planet-cell[data-planet="alarm"]   .planet-orb{ --pl-c:216,27,96;   --pl-c2:138,23,168; } /* #D81B60 玫红 340° · 预警 */
.planet-cell[data-planet="nass"]    .planet-orb{ --pl-c:252,211,77;  --pl-c2:176,38,207; } /* #FCD34D 金 · USDA 行情 */
.planet-cell[data-planet="solar"]   .planet-orb{ --pl-c:138,23,168;  --pl-c2:107,33,168; } /* #8A17A8 深紫红 292° · 节气 */

/* 球面本体（v4：径向高光 + 球底暗影 + 真·6 层大气层） */
.planet-orb::before{
  content:"";
  position:absolute;inset:0;border-radius:50%;
  background:
    /* 高光（亮左上 30%） */
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.22) 10%, transparent 35%),
    /* 主面（紫调球体） */
    radial-gradient(circle at 38% 38%, rgba(var(--pl-c),.95) 0%, rgba(var(--pl-c2),.85) 50%, rgba(43,16,48,.98) 100%),
    /* 球背光阴影：右下 1/3 */
    radial-gradient(circle at 75% 78%, rgba(0,0,0,.65) 0%, rgba(0,0,0,.22) 25%, transparent 55%),
    /* 球底投影 */
    radial-gradient(circle at 78% 92%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 22%, transparent 60%);
  box-shadow:
    /* 大气层辉光 v5：紫红主体 + 金色大气外环 */
    0 0 0 1px rgba(252,211,77,.35),
    0 0 18px rgba(var(--pl-c),.55),
    0 0 38px rgba(var(--pl-c2),.40),
    0 0 70px rgba(var(--pl-c),.28),
    0 0 110px rgba(var(--pl-c),.18),
    0 0 160px rgba(var(--pl-c),.10),
    /* 金色大气外溢 */
    0 0 90px rgba(252,211,77,.22),
    0 0 140px rgba(252,211,77,.12),
    /* 球底投影 */
    0 20px 36px rgba(0,0,0,.60),
    /* 球内壁：右上高光（球面反射） */
    inset 8px 10px 22px rgba(255,255,255,.28),
    /* 球内壁：左下深色（背光） */
    inset -10px -12px 28px rgba(0,0,0,.55);
}
/* 极地暗带（球内上下边缘）— 用单独的层 */
.planet-orb .planet-poles{
  position:absolute;inset:0;border-radius:50%;
  pointer-events:none;z-index:2;
  background:
    radial-gradient(ellipse 90% 12% at 50% 0%, rgba(0,0,0,.55) 0%, transparent 70%),
    radial-gradient(ellipse 90% 12% at 50% 100%, rgba(0,0,0,.55) 0%, transparent 70%);
}

/* 星球赤道光带（薄层光环，区分多颗星） */
.planet-orb::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:150%;height:38px;
  border-radius:50%;
  border:1px solid rgba(252,211,77,.55);
  transform:translate(-50%,-50%) rotateX(74deg) rotateZ(-15deg);
  box-shadow:
    0 0 16px rgba(252,211,77,.60),
    0 0 34px rgba(var(--pl-c),.45),
    inset 0 0 8px rgba(252,211,77,.40);
  filter:blur(.3px);
  pointer-events:none;
  z-index:2;
  opacity:.85;
  animation:plRingDrift 12s ease-in-out infinite;
}

/* 球内图标 */
.planet-icon{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:38px;line-height:1;
  z-index:3;
  filter:drop-shadow(0 0 8px rgba(var(--pl-c),.55));
  animation:plIconBob 4.2s ease-in-out infinite;
}

/* hover：球体放大 + 大气层猛涨 */
.planet-cell:hover .planet-orb{
  transform:scale(1.10) translateY(-4px);
  filter:brightness(1.12);
}
.planet-cell:hover .planet-orb::before{
  box-shadow:
    0 0 0 1.5px rgba(252,211,77,.55),
    0 0 32px rgba(var(--pl-c),.78),
    0 0 70px rgba(var(--pl-c2),.55),
    0 0 130px rgba(var(--pl-c),.40),
    0 0 200px rgba(var(--pl-c),.20),
    0 0 110px rgba(252,211,77,.35),
    0 0 170px rgba(252,211,77,.22),
    0 22px 44px rgba(0,0,0,.62),
    inset 8px 10px 22px rgba(255,255,255,.35),
    inset -10px -12px 28px rgba(0,0,0,.55);
}

/* WebGL 接管后：隐藏 .planet-orb 的 CSS 球/环 + DOM emoji，避免与 WebGL 球重叠加成"双球/残影" */
html.has-stellar-webgl .planet-orb{ background:transparent!important; }
html.has-stellar-webgl .planet-orb::before,
html.has-stellar-webgl .planet-orb::after{ display:none!important; }
html.has-stellar-webgl .planet-orb .planet-icon{ display:none!important; }
html.has-stellar-webgl .planet-cell:hover .planet-orb{ transform:none!important; filter:none!important; }
/* 中央主星：WebGL 接管后，隐藏原 DOM 麦穗 emoji，改由 SVG 覆盖层绘制（防双图标/溢出） */
html.has-stellar-webgl .core-globe .globe-core{ display:none!important; }

/* ==============  球下方标签 + 数据  ============== */
.planet-label{
  font-family:var(--font-cosmic);
  font-size:13px;font-weight:700;
  color:var(--text-strong);
  letter-spacing:1.2px;
  margin-top:2px;
}
.planet-cell .mb-body,
.planet-cell > .mb-body{
  font-family:var(--font-cosmic);
  font-size:11px;color:var(--muted);
  line-height:1.5;
  text-align:center;
  min-height:32px;max-width:160px;
  letter-spacing:.3px;
}

/* ==============  爆炸态（点击瞬间给 cell 加 .planet-burst）  ============== */
.planet-burst .planet-orb{
  animation:plBurst 1.2s cubic-bezier(.16,1,.3,1) forwards !important;
}
.planet-burst .planet-orb::before{
  animation:plBurstSpin 1.4s ease-out forwards !important;
}
@keyframes plBurst{
  0%   { transform:scale(1) translateY(0); filter:brightness(1); }
  10%  { transform:scale(1.35) translateY(-2px); filter:brightness(1.55); }
  60%  { transform:scale(.45) rotate(20deg); filter:brightness(.7) blur(1px); opacity:.85; }
  100% { transform:scale(1.05) translateY(-3px); filter:brightness(1.1); opacity:1; }
}
@keyframes plBurstSpin{
  0%   { transform:rotate(0); }
  100% { transform:rotate(220deg); }
}

/* ==============  点击粒子层（满屏 canvas，仅 JS 注入）  ============== */
.planet-burst-layer{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  width:100vw;height:100vh;
}
.planet-burst-layer canvas{ display:block; width:100%; height:100%; }

/* ==============  让 mb-body 在新结构里保持业务节点可见  ============== */
.planet-cell .mb-body b{ color:var(--text-strong);font-weight:700; }
.planet-cell .mb-body .green{ color:#5eead4; }
.planet-cell .mb-body .yellow{ color:#fde047; }
.planet-cell .mb-body .red{ color:#fca5a5; }

/* ==============  中央 cosmic-core 也作为「主星球」  ============== */
.cosmic-core[data-planet]{ cursor:pointer; }
.cosmic-core[data-planet]::after{ animation:auroraDrift 24s linear infinite, plPulse 4.8s ease-in-out infinite; }

/* ==============  响应式  ============== */
@media (max-width:900px){
  .planet-row{ grid-template-columns:repeat(4,1fr); gap:8px; }
  .planet-orb{ width:74px;height:74px; }
  .planet-icon{ font-size:26px; }
}
@media (max-width:560px){
  .planet-row{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .planet-orb{ width:96px;height:96px; }
  .planet-icon{ font-size:32px; }
  .planet-cell .mb-body{ font-size:11px; }
}

/* ==============  动画定义  ============== */
@keyframes plSpin{
  0%   { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}
@keyframes plRingDrift{
  0%,100%{ transform:translate(-50%,-50%) rotateX(74deg) rotateZ(-15deg); opacity:.78; }
  50%    { transform:translate(-50%,-50%) rotateX(78deg) rotateZ(8deg);  opacity:1;    }
}
@keyframes plIconBob{
  /* 性能：margin-top 帧动画会每帧触发布局，改 transform（合成层） */
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-3px); }
}
@keyframes plPulse{
  0%,100%{ box-shadow:0 24px 64px rgba(0,0,0,.55), 0 8px 22px rgba(0,0,0,.32), 0 0 32px rgba(176,38,207,.18), inset 0 1px 0 rgba(255,255,255,.10); }
  50%    { box-shadow:0 24px 64px rgba(0,0,0,.55), 0 8px 22px rgba(0,0,0,.32), 0 0 56px rgba(176,38,207,.36), inset 0 1px 0 rgba(255,255,255,.10); }
}

/* reduces 偏好降级 */
@media (prefers-reduced-motion: reduce){
  .planet-orb::before,
  .planet-orb::after,
  .planet-icon,
  .cosmic-core[data-planet]::after{ animation:none !important; }
  .planet-burst .planet-orb{ animation:none !important; transform:scale(1.05); }
}

/* ===================== 移动端/触屏性能降级（2026-09-07 性能专项） =====================
   保留 WebGL 星球与点击星爆，只砍 filter 帧动画与 emoji 浮动 */
@media (pointer: coarse), (max-width: 820px){
  /* 激活态 filter:brightness 帧动画（每帧重栅格化）→ 静态高亮 */
  .tpl.active .tpl-orb{ animation:none!important; filter:brightness(1.28) saturate(1.15); }
  /* 晨检条球赤道光带 3D 漂移帧动画 → 静态光带（WebGL 接管后本已隐藏，双保险） */
  .planet-orb::after{ animation:none; }
  /* emoji 覆盖层 bob 浮动 → 静态（26+ 个常驻动画合成层全释放） */
  #stellar-emojis .se .se-i{ animation:none; }
  /* 主星 plPulse（box-shadow 帧动画叠加在 auroraDrift 上）→ 保留 auroraDrift 关闭 plPulse */
  .cosmic-core[data-planet]::after{ animation:auroraDrift 24s linear infinite; }
}