/* ============================================================
   移动端性能优化 · mobile-optimization.css（v3 · 基于稳定 galaxy-v16 基线）
   原则：
     1) 观感与桌面版星球画面一致（玻璃/光晕/流光/星星/浮动都在）
     2) 只用 GPU 合成友好的动画（transform/opacity），并降频
     3) 大面积实时 filter:blur 的 fixed 层是移动端闪烁元凶 → 改"烘焙柔光"
        （用更软的渐变停点模拟模糊效果，静态呈现，零逐帧重绘）
     4) backdrop-filter 只降档不腰斩（10px→8px，保住玻璃观感）
     5) 3D/WebGL 脚本由 index.html 在桌面端（≥1024px / pointer:fine）条件注入，
        移动端完全不加载 stellar-spheres / decision-3d / planet-rebuild 等，
        从根因消除 iPhone 卡顿（不跑 canvas rAF / 不建 WebGL 上下文）
   加载顺序：必须放在 cosmic.css / galaxy.css / galaxy-v16.css 之后
   ============================================================ */

@media (max-width: 900px), (pointer: coarse) {

  /* ========== 1. 防闪烁核心：大面积 fixed 模糊层改烘焙柔光 ========== */

  /* body::before 全屏极光：原 filter:blur(48px)+旋转动画。
     实时模糊的全屏 fixed 层在视口变化/滚动时反复重栅格化 → 画面闪烁失控。
     改为：静态 + 无 blur，靠渐变本身的透明度衰减实现同等柔光观感 */
  body::before {
    animation: none !important;
    filter: none !important;
    opacity: .55 !important;                 /* 无模糊后略降透明度，亮度与模糊版接近 */
  }

  /* 极光带：原 filter:blur(36px)+滑动动画 → 静态烘焙柔光（元素与色带保留） */
  .aurora-band {
    animation: none !important;
    filter: none !important;
    opacity: .5 !important;
  }

  /* cosmic-galaxy.js 注入的银河尘埃层（内联 blur(46px)/blur(30px)）：
     降档而非关闭，保住银河观感又大幅降低重绘成本 */
  #cosmicGalaxy .cos-dust      { filter: blur(18px) !important; animation: none !important; }
  #cosmicGalaxy .cos-dust-dark { filter: blur(14px) !important; animation: none !important; }

  /* 卡片辐射光圈：blur 14px→8px（面积小，成本可接受，观感保留） */
  .card::after, .agri-card::after, .rt-card::after, .tpl-group::after {
    filter: blur(8px) !important;
  }

  /* ========== 2. 恢复观感：玻璃拟态只降一档（不腰斩） ========== */

  .card, .agri-card, .rt-card, .tpl-group, .scene, .intel, .realtime, .agri,
  .composer, .mb-card, .pulse-ticker, .agri-context, .scene-roi, .map-block,
  .mode-badge {
    -webkit-backdrop-filter: blur(8px) !important;   /* 原 10px → 8px，玻璃感保留 */
    backdrop-filter: blur(8px) !important;
  }

  /* ========== 3. 恢复观感：保留装饰动画，只用合成友好属性 + 降频 ========== */
  /* 这些动画全部是 transform/opacity，GPU 合成，不重绘 → 恢复后依然流畅 */

  :root { --beat: 1.8s !important; }   /* 心跳 1.15s→1.8s，舒缓且省电 */

  /* 星球自转/光环：保留，降频一半（视觉核心，绝不动结构） */
  .globe-ring.r1 { animation-duration: 36s !important; }  /* cosmicSpin 18s→36s */
  .globe-ring.r2 { animation-duration: 52s !important; }  /* 26s→52s */
  .globe-ring.r3 { animation-duration: 24s !important; }  /* 12s→24s */
  .globe-core .globe-surface { animation-duration: 44s !important; } /* 自转纹理 22s→44s */
  .globe-core { animation-duration: 6s, 1.8s !important; } /* cosmicPulse + heartbeat */

  /* 卡片顶部流光（transform 位移动画，便宜）→ 恢复，降频 */
  .card::before, .agri-card::before, .rt-card::before, .tpl-group::before,
  .scene::before, .mb-card::before, .pulse-ticker::before, .map-block::before {
    animation-duration: 5.2s !important;   /* cosmicFlow 2.6s→5.2s */
  }
  .cosmic-core::before { animation-duration: 6.8s !important; }

  /* 卡片辉光呼吸（opacity+translateY，便宜）→ 恢复，降频 */
  .card::after, .agri-card::after, .rt-card::after, .tpl-group::after {
    animation-duration: 8s !important;     /* glowBreathe 5.2s→8s */
  }

  /* 标题流光（background-position 仅重绘标题本身，面积小）→ 恢复，降频 */
  .brand h1 { animation-duration: 14s !important; }   /* gradientShift 9s→14s */

  /* 星星闪烁（opacity+scale，便宜）→ 恢复 */
  .starfield i { animation-duration: 4.8s !important; }
  /* starfield 整体呼吸原为 filter:brightness（重绘贵）→ 换 opacity 实现 */
  .starfield { animation: sfBreathe 6s ease-in-out infinite !important; }
  @keyframes sfBreathe { 0%,100%{ opacity:.85; } 50%{ opacity:1; } }

  /* 浮动卡片（transform，便宜）→ 恢复，降频 */
  .float-card-1 { animation-duration: 9.6s !important; }
  .float-card-2 { animation-duration: 8.7s !important; }
  .float-card-3 { animation-duration: 10.6s !important; }
  .float-card-4 { animation-duration: 10s !important; }

  /* 全息投影光束闪烁（opacity，便宜）→ 恢复，降频 */
  .globe-projector { animation-duration: 6s !important; }

  /* 扫描线脉冲（opacity，便宜）→ 恢复 */
  body::after { animation-duration: 5s !important; }

  /* 其余持续动画统一降频 */
  .mode-badge.live::before,
  .hud .hud-dot { animation-duration: 3.2s !important; }
  .pt-track { animation-duration: 60s !important; }
  .composer { animation-duration: 14s !important; }
  .gx-core::after { animation-duration: 52s !important; }

  /* 保持关闭（每帧 filter 重绘，真·性能杀手，且关掉后视觉差异极小） */
  .gx-core { animation: none !important; }        /* gxCoreBreath filter:brightness */
  .core-floor, .core-floor::before { animation: none !important; } /* cyberFloor background-position */
  .cosmic-core::after { animation: none !important; }  /* 舱内极光旋转（大面积 conic 重绘） */
  .shooting-star { display: none !important; }    /* 流星残影静态不好看，隐藏 */

  /* ========== 4. transform / 3D：恢复立体结构 ========== */
  /* v1 曾强制 transform-style:flat，杀掉星球 3D 纵深 → 观感差异主因之一，移除该规则。
     仅保留 will-change 治理（纯收益，无视觉差异） */
  .card, .agri-card, .rt-card, .tpl-group, .scene, .intel, .realtime, .agri,
  .composer, .mb-card, .pulse-ticker, .agri-context, .scene-roi, .map-block,
  .tpl-group .gx-arena .tpl.gx-sat-tool {
    will-change: auto !important;
  }

  /* ========== 5. 滚动与渲染 ========== */

  html { scroll-behavior: auto !important; }
  body {
    overflow-x: hidden;
    background-attachment: scroll !important;  /* fixed → scroll，避免滚动重绘 */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* ========== 6. 右侧滑轮：自定义滚动条（UX 修复 1） ==========
     移动端原生滚动条过细/自动隐藏，用户不知道可以滚动。
     改为：细而常显的紫调滑轮，与星球主题一致；同时覆盖页面级与卡片内滚动区
     （.card .card-body / .agri-body / .rt-body / .intel-full 等 overflow:auto 区域）。
     注：iOS Safari 用 overlay 滚动条、忽略 webkit 伪元素（自动回退原生，无副作用）；
     Android Chrome / 桌面响应式模式正常渲染；Firefox 走 scrollbar-* 标准属性。 */

  html {
    scrollbar-width: thin;                                    /* Firefox */
    scrollbar-color: rgba(176,38,207,.55) rgba(26,13,31,.40);  /* 滑块 / 轨道 */
  }
  ::-webkit-scrollbar { width: 7px; height: 7px; }
  ::-webkit-scrollbar-track {
    background: rgba(26,13,31,.35);
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(176,38,207,.65), rgba(138,23,168,.55));
    border-radius: 4px;
    border: 1px solid rgba(176,38,207,.25);
  }
  ::-webkit-scrollbar-thumb:hover,
  ::-webkit-scrollbar-thumb:active {
    background: rgba(176,38,207,.85);
  }

  /* ========== 7. 横向画面：星球系列整组可见（UX 修复 2） ==========
     问题：planet.css 在 ≤560px 把 .planet-row 切成 2×2，用户看不到「一组星球」整体。
     方案：手机端保持一排 4 颗（球体用 clamp 随屏宽缩放，320-414px 均可整组入屏），
     光环/图标/标签同比缩小防溢出；仅 ≤340px 超窄屏退化为横向滚动 + scroll-snap。 */

  .planet-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;  /* 覆盖 planet.css 的 2×2 */
    gap: 6px !important;
    padding: 6px 2px 4px !important;
    align-items: end;
  }
  .planet-orb {
    width: clamp(54px, 16.5vw, 74px) !important;
    height: clamp(54px, 16.5vw, 74px) !important;
  }
  /* 赤道光带同比收窄，避免溢出相邻格子造成横向滚动条 */
  .planet-orb::after { width: 132% !important; height: 26px !important; }
  .planet-icon { font-size: clamp(20px, 6vw, 28px) !important; }
  .planet-label { font-size: 11px !important; }
  .planet-cell { gap: 6px; }
  .planet-cell .mb-body { font-size: 11px; }

  /* 兜底：任何媒体/画布不撑破屏宽 */
  img, canvas, svg, video { max-width: 100%; }

  /* ========== 8. 低端设备兜底（perf-guard.js 判定后加 data-lowperf） ==========
   真·低端机才进这一档：装饰动画全停、backdrop-filter 关闭，但元素全保留 */
  html[data-lowperf="1"] body::after,
  html[data-lowperf="1"] .card::before, html[data-lowperf="1"] .agri-card::before,
  html[data-lowperf="1"] .rt-card::before, html[data-lowperf="1"] .tpl-group::before,
  html[data-lowperf="1"] .scene::before, html[data-lowperf="1"] .mb-card::before,
  html[data-lowperf="1"] .pulse-ticker::before, html[data-lowperf="1"] .map-block::before,
  html[data-lowperf="1"] .card::after, html[data-lowperf="1"] .agri-card::after,
  html[data-lowperf="1"] .rt-card::after, html[data-lowperf="1"] .tpl-group::after,
  html[data-lowperf="1"] .starfield, html[data-lowperf="1"] .starfield i,
  html[data-lowperf="1"] .float-card-1, html[data-lowperf="1"] .float-card-2,
  html[data-lowperf="1"] .float-card-3, html[data-lowperf="1"] .float-card-4,
  html[data-lowperf="1"] .globe-projector, html[data-lowperf="1"] .brand h1 {
    animation: none !important;
  }
  html[data-lowperf="1"] .globe-ring,
  html[data-lowperf="1"] .cosmic-core,
  html[data-lowperf="1"] .gx-core::after {
    animation-duration: 90s !important;   /* 星球仍在转，极慢 */
  }
  html[data-lowperf="1"] .card,
  html[data-lowperf="1"] .agri-card,
  html[data-lowperf="1"] .rt-card,
  html[data-lowperf="1"] .tpl-group {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* 超窄屏（≤340px）：一排放不下 4 颗 → 横向滑动浏览，逐颗吸附 */
@media (max-width: 340px) {
  .planet-row {
    grid-template-columns: repeat(4, 72px) !important;
    justify-content: start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px !important;   /* 给横向滑轮留位 */
  }
  .planet-cell { scroll-snap-align: center; }
  .planet-orb { width: 56px !important; height: 56px !important; }
}