/* ============================================================
   Hero 层 —— 仅首页使用（地球、星空、太阳炫光、首屏文案）
   内页不加载本文件（WordPress 下由 is_front_page() 条件控制）。
   ★ 构图常量 COMP_X / COMP_Y 在 JS 侧（assets/js/config.js），
     与 .sun / .moon 的 19%/32% 锚点、#hero 的 transform-origin 必须一致。
   ============================================================ */

/* ---------- 背景层（按本地时间切换 昼/夜）---------- */
#bg{position:fixed;inset:0;z-index:0;overflow:hidden}
#bg .layer{position:absolute;inset:0;transition:opacity 1.2s ease}
#bg .hidden{opacity:0;pointer-events:none}

#day{background:
    radial-gradient(120% 90% at 50% 122%, #2a0a4a 0%, #160a33 28%, #070a22 60%, #02010a 100%);}
/* 太阳：与夜晚月亮共用同一锚点（19% / 32%），昼夜切换天体位置不变 */
#day .sun{position:absolute;left:19%;top:32%;width:300px;height:300px;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #fff7e6 0%, #ffe39a 28%, #ffb347 46%, rgba(255,160,60,.25) 62%, rgba(255,140,40,0) 72%);
  box-shadow:0 0 150px 55px rgba(255,180,80,.45);filter:blur(.3px)}
#day .sun::after{content:"";position:absolute;inset:-60px;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,220,140,.0),rgba(255,210,130,.35),rgba(255,220,140,0) 30%,rgba(255,210,130,.35),rgba(255,220,140,0) 62%,rgba(255,210,130,.35),rgba(255,220,140,0));
  mix-blend-mode:screen;animation:spin 36s linear infinite;filter:blur(2px)}
.aurora{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;opacity:.55}
.a1{width:60vw;height:38vw;left:-8vw;top:6vh;background:radial-gradient(circle,#ff2a6d,transparent 65%);animation:drift1 18s ease-in-out infinite}
.a2{width:55vw;height:36vw;right:-6vw;top:14vh;background:radial-gradient(circle,#05d9e8,transparent 65%);animation:drift2 22s ease-in-out infinite}
.a3{width:48vw;height:32vw;left:24vw;top:-6vh;background:radial-gradient(circle,#00ff9f,transparent 65%);animation:drift3 26s ease-in-out infinite}
.a4{width:40vw;height:30vw;left:34vw;top:36vh;background:radial-gradient(circle,#b537f2,transparent 65%);animation:drift1 30s ease-in-out infinite reverse}

#night{background:
    radial-gradient(60% 55% at 16% 28%, rgba(40,110,220,.22), transparent 70%),
    radial-gradient(52% 44% at 74% 72%, rgba(20,60,150,.28), transparent 72%),
    radial-gradient(40% 36% at 42% 60%, rgba(90,50,180,.10), transparent 70%),
    radial-gradient(130% 100% at 50% 118%, #0a1430 0%, #060a1c 45%, #02030a 100%);}
#stars{position:absolute;inset:0;width:100%;height:100%}
/* 月亮：与白天太阳共用同一锚点（19% / 32%） */
#night .moon{position:absolute;left:19%;top:32%;width:160px;height:160px;transform:translate(-50%,-50%);border-radius:50%;
  background:
    radial-gradient(circle at 38% 36%, #fdfdff 0%, #e7eefc 40%, #c4d2ec 70%, #97a8cc 100%);
  /* ★ 亮度收一档：月亮锚点是固定构图（19%/32%，不可移动），但它正好落在左侧 HUD
     的航线组件后面，全亮时会隔着玻璃把文字顶花。位置不动，只压光晕与整体亮度。 */
  opacity:.9;
  box-shadow:0 0 58px 14px rgba(180,205,255,.30), inset -18px -14px 36px rgba(70,90,130,.55);
  overflow:hidden}
#night .moon::before,#night .moon::after{content:"";position:absolute;border-radius:50%;
  background:rgba(120,140,180,.35)}
#night .moon::before{width:34px;height:34px;left:34px;top:46px;box-shadow:60px -10px 0 -6px rgba(120,140,180,.3),-18px 30px 0 -10px rgba(120,140,180,.25)}
#night .moon::after{width:18px;height:18px;left:78px;top:84px;box-shadow:-50px 18px 0 -4px rgba(120,140,180,.3)}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,-4vh) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,5vh) scale(1.1)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,6vh) scale(1.08)}}

/* 扫描线 / 暗角（hero 专属，内页由 .bg-fx 自带） */
#scan{position:fixed;inset:0;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(5,217,232,.04) 0px, rgba(5,217,232,.04) 1px, transparent 2px, transparent 4px);
  mix-blend-mode:overlay;opacity:.35}
#vig{position:fixed;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%)}

/* 全屏透明画布：不用矩形容器裁切，球体可自由溢出 */
#globeViz{position:fixed;inset:0;z-index:2}
/* 首屏左侧的经纬网格（见 front-page.php 注释） */
.hero-grid{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    repeating-linear-gradient(to right,  rgba(90,175,225,.075) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, rgba(90,175,225,.075) 0 1px, transparent 1px 88px);
  -webkit-mask-image:radial-gradient(115% 105% at 20% 46%, #000 6%, rgba(0,0,0,.55) 40%, transparent 64%);
          mask-image:radial-gradient(115% 105% at 20% 46%, #000 6%, rgba(0,0,0,.55) 40%, transparent 64%)}
/* ---------- 城市灯光层 —— 2026-10-09 整体移除 ----------
   原 #twinkle 是全屏 canvas（z-index 3，mix-blend-mode:screen），由 lights.js
   逐帧把 1251 个城市画成带辉光的球面点。移除原因：
   ① 它是 30fps 常驻 rAF，逼着页面永不能 idle（挡住"按需渲染"）；
   ② 一帧光晕合成 3.2~6.5ms，是首屏最大的单点 GPU/CPU 开销；
   ③ 观感上把球面推向"夜景卫星图"，与"精密示意地图"的定位相反。
   现在球面的信息量全部由**线条语言**承担（国界 / 经纬网格 / 航线 / 起讫点），
   见 globe-hero.js 的 _decorPaths()。 */
/* 星座网络（地球轮廓外围连线，置于地球后侧） */
#plexus{position:fixed;inset:0;z-index:1;pointer-events:none}

/* ---------- 太阳炫光：斜射七彩光晕（经典镜头色散） ---------- */
#sunflare{position:fixed;z-index:3;left:19%;top:32%;width:0;height:0;pointer-events:none;
  mix-blend-mode:screen;transition:opacity 1.2s ease}
.sf-beam{position:absolute;left:-2vw;top:-6vh;width:92vw;height:20vh;
  transform:rotate(14deg);transform-origin:left center;
  background:linear-gradient(90deg,
    rgba(255,170,110,.34) 0%, rgba(255,220,140,.26) 16%, rgba(255,250,200,.18) 32%,
    rgba(150,255,210,.14) 50%, rgba(120,200,255,.16) 68%, rgba(170,130,255,.12) 84%, rgba(255,110,190,.08) 100%);
  filter:blur(30px);opacity:.85}
.sf-streak{position:absolute;left:-38vw;top:-4px;width:92vw;height:8px;border-radius:4px;
  background:linear-gradient(90deg,transparent,
    rgba(255,90,90,.75) 26%, rgba(255,190,90,.85) 38%, rgba(230,255,140,.9) 46%,
    rgba(120,255,170,.9) 52%, rgba(90,210,255,.9) 60%, rgba(150,110,255,.8) 70%, rgba(255,90,190,.55) 80%, transparent);
  filter:blur(2.5px);opacity:.9}
.sf-halo{position:absolute;left:-320px;top:-320px;width:640px;height:640px;border-radius:50%;
  background:conic-gradient(from 20deg,
    rgba(255,110,110,.20), rgba(255,200,100,.18), rgba(220,255,140,.15),
    rgba(120,255,170,.16), rgba(90,200,255,.19), rgba(170,110,255,.18), rgba(255,110,190,.16), rgba(255,110,110,.20));
  filter:blur(34px);opacity:.8}
.sf-core{position:absolute;left:-80px;top:-80px;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,#ffffff 0%,#fff7d8 18%,rgba(255,224,150,.65) 38%,rgba(255,200,110,.22) 60%,rgba(255,180,80,0) 78%);
  box-shadow:0 0 120px 40px rgba(255,212,130,.45)}
.sf-ghost{position:absolute;border-radius:50%;mix-blend-mode:screen;filter:blur(1px)}
.sf-g1{left:24vw;top:5vh;width:8vh;height:8vh;background:radial-gradient(circle,rgba(255,120,190,.45),rgba(255,120,190,0) 70%)}
.sf-g2{left:42vw;top:10vh;width:5vh;height:5vh;background:radial-gradient(circle,rgba(120,255,190,.42),rgba(120,255,190,0) 70%)}
.sf-g3{left:58vw;top:15vh;width:11vh;height:11vh;background:radial-gradient(circle,rgba(110,190,255,.40),rgba(110,190,255,0) 72%)}
.sf-g4{left:74vw;top:21vh;width:4.5vh;height:4.5vh;background:radial-gradient(circle,rgba(200,140,255,.38),rgba(200,140,255,0) 70%)}

/* ---------- 球面标注层（由 hero-labels.js 逐帧定位）----------
   ★ 这一层解决的问题：球面原本只有几何体、没有一个字。访客看到几十个亮点，
     分不清哪个是始发港、哪个是自己所在国的港口、哪个只是内陆派送城市。
   ★ 三个层级用三种"分量"表达，而不是三种颜色：
     始发港（品牌黄，节点最大、带外环）> 目的港（数据青，最大、带锁定环）> 支线城市（小、淡）
   ★ 布局手法：容器高度设 0 + align-items:center，于是子元素天然以"投影点"为垂直中心，
     不必给每个标签算半高。节点用负 margin 把圆心精确压回投影点。 */
/* z-index 6：要压过 #vig(4) 与 #scan(5) 这两层全屏叠加，标注文字才不会被暗角与
   扫描线糊掉。#vig/#scan 叠在文字上会明显降低可读性 —— 而它们对画面氛围的贡献
   在"球体本身"上就已经拿到了，没必要连着文字一起滤。
   左侧 HUD / 右侧面板同样是 6，且在 DOM 里排在后面，所以它们照样盖在标注之上。 */
#heroLabels{position:fixed;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.hlabel{position:absolute;left:0;top:0;height:0;display:flex;align-items:center;
  font-family:var(--mono);white-space:nowrap;
  transition:opacity .4s ease;
  will-change:transform,opacity}
/* 反向（标签在点左侧）：整体镜像，节点仍然压在投影点上 */
.hlabel.is-left{flex-direction:row-reverse}

/* ★★ 球面标注整族乘 --ui（2026-10-09）：用户原话「港口的、城市的卡片很小」。
   这一族是 JS 逐个定位的浮层，尺寸全写死，2K 原生下相对屏幕缩了一半。
   节点尺寸与负 margin 必须**成对**缩放（负 margin 用来把圆心压回投影点），
   所以统一写 calc(n * var(--ui))，且 .hl-dot 的 margin-left 取同值的一半。 */
.hl-dot{position:relative;width:calc(7px * var(--ui));height:calc(7px * var(--ui));border-radius:50%;flex:0 0 auto;
  margin-left:calc(-3.5px * var(--ui));background:rgba(190,238,255,.85)}
.hlabel.is-left .hl-dot{margin-left:0;margin-right:calc(-3.5px * var(--ui))}
/* 引线：从节点斜拉一小段到标签，避免标签"悬空" */
.hl-tick{width:calc(15px * var(--ui));height:1px;flex:0 0 auto;
  background:linear-gradient(90deg,rgba(5,217,232,.7),rgba(5,217,232,.12))}
.hlabel.is-left .hl-tick{background:linear-gradient(270deg,rgba(5,217,232,.7),rgba(5,217,232,.12))}

.hl-chip{display:inline-flex;flex-direction:column;gap:2px;padding:calc(4px * var(--ui)) calc(9px * var(--ui));border-radius:calc(8px * var(--ui));
  border:1px solid rgba(5,217,232,.24);background:rgba(8,12,18,.66);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  box-shadow:0 4px 14px rgba(0,0,0,.4)}
.hl-chip b{font-family:var(--sans);font-size:calc(11.5px * var(--ui));font-weight:700;color:#eef9ff;
  letter-spacing:.2px;line-height:1.2}
.hl-chip em{font-size:calc(8px * var(--ui));letter-spacing:1.6px;color:var(--dim);font-style:normal;
  text-transform:uppercase;line-height:1}

/* —— 始发港：品牌色（当前=品牌蓝），全站唯一使用行动色的地理节点 —— */
.hlabel--origin .hl-dot{width:calc(8px * var(--ui));height:calc(8px * var(--ui));margin-left:calc(-4px * var(--ui));
  background:var(--route-origin);box-shadow:0 0 12px var(--route-origin)}
.hlabel--origin.is-left .hl-dot{margin-left:0;margin-right:calc(-4px * var(--ui))}
.hlabel--origin .hl-chip{border-color:var(--origin-chip-brd);background:var(--origin-chip-bg)}
.hlabel--origin .hl-chip b{color:var(--origin-chip-ink)}
.hlabel--origin .hl-tick{background:linear-gradient(90deg,var(--origin-tick),var(--origin-tick-end))}
.hlabel--origin.is-left .hl-tick{background:linear-gradient(270deg,var(--origin-tick),var(--origin-tick-end))}

/* —— 目的港（= 访客所在国的港口，如「洛杉矶港」）：全屏信息主角 ——
   ★★ 2026-10-09 二次放大：用户要求「访客所在地那个定位的卡、字可以更大些」。
   它是这一屏**唯一需要被读到的地理信息**（其余两级只是环境），所以这次拉开层级：
     基准字号 13.5 → 19px（+41%）· 副行 8.5 → 12px（原来太小，"US · 目的港" 几乎读不出）
     · padding 5/11 → 8/15 · 圆角 8 → 11 · 圆点 10 → 13 · 锁定环 inset -5 → -7
   ★ 与城市标签（10.5px）的层级差从 1.29× 拉到 1.81×，主次一眼分明。
   ★ 仍然整族乘 --ui：1440 下是 19px，2K 下是 27px。 */
.hlabel--port .hl-dot{width:calc(13px * var(--ui));height:calc(13px * var(--ui));margin-left:calc(-6.5px * var(--ui));
  background:var(--route-hub);box-shadow:0 0 20px var(--route-hub)}
.hlabel--port.is-left .hl-dot{margin-left:0;margin-right:calc(-6.5px * var(--ui))}
/* 锁定环：一圈慢慢向外扩的细环，读作"这个点被持续盯住"
   ★ inset 与圆点半径同比例，否则大屏下环会紧贴甚至咬进圆点里 */
.hlabel--port .hl-dot::after{content:"";position:absolute;inset:calc(-7px * var(--ui));border-radius:50%;
  border:1px solid rgba(5,217,232,.55);animation:hlRing 2.6s ease-out infinite}
@keyframes hlRing{0%{transform:scale(.55);opacity:0}22%{opacity:.95}100%{transform:scale(2.1);opacity:0}}
.hlabel--port .hl-chip{border-color:rgba(5,217,232,.52);background:rgba(5,16,24,.78);
  gap:calc(4px * var(--ui));
  padding:calc(8px * var(--ui)) calc(15px * var(--ui));border-radius:calc(11px * var(--ui))}
.hlabel--port .hl-chip b{font-size:calc(19px * var(--ui));color:#ffffff;letter-spacing:.3px}
.hlabel--port .hl-chip em{color:var(--cyan);font-size:calc(12px * var(--ui));letter-spacing:1.6px}

/* —— 支线城市：小而密，靠"淡"退到后景，不能跟上面两级抢 —— */
.hlabel--city .hl-chip{padding:calc(3px * var(--ui)) calc(7px * var(--ui));border-color:rgba(127,168,201,.22);
  background:rgba(8,12,18,.52)}
.hlabel--city .hl-chip b{font-size:calc(10.5px * var(--ui));font-weight:400;color:#cbe7f7}
.hlabel--city .hl-tick{width:calc(11px * var(--ui));background:linear-gradient(90deg,rgba(127,168,201,.5),rgba(127,168,201,.08))}
.hlabel--city.is-left .hl-tick{background:linear-gradient(270deg,rgba(127,168,201,.5),rgba(127,168,201,.08))}

/* ---------- 昼/夜显式开关 ---------- */
.mode-switch{position:static;z-index:7;pointer-events:auto;display:flex;align-items:center;gap:8px;font-family:var(--mono)}
/* 小开关也是玻璃：不铺实色，透明度压低后靠内侧高光体现质感 */
.mode-switch .ms{background:var(--ctl-bg);border:1px solid rgba(5,217,232,.3);color:#9fd6ee;
  font-size:calc(12px * var(--ui));letter-spacing:1px;padding:calc(7px * var(--ui)) calc(15px * var(--ui));border-radius:8px;cursor:pointer;
  box-shadow:var(--ctl-src);transition:.2s}
.mode-switch .ms:hover{border-color:rgba(5,217,232,.7);color:#fff}
.mode-switch .ms.active{background:rgba(5,217,232,.18);border-color:var(--cyan);color:#fff;box-shadow:0 0 14px rgba(5,217,232,.35)}
.mode-switch .ms-auto{font-size:calc(11px * var(--ui));color:var(--dim);margin-left:6px}

/* ---------- 左侧首屏文案（从导航下沿开始排，避开导航） ---------- */
/* ★★ D63 终版：left 直接用**导航列的边距** --stage-pad ——
   判定标准就一条：**内容左缘 == 导航条左缘**（Δ=0），不再谈"1280 蓝本"、
   也不再留 ±8px 的构图差（用户：「不说1280了，咱就说等于导航栏的宽度！」）。 */
.left-col{position:fixed;z-index:6;left:var(--stage-pad);
  top:calc(var(--nav-top) + var(--nav-h) + 28px);
  width:min(calc(560px * var(--ui)),52vw);display:flex;flex-direction:column;gap:calc(18px * var(--ui));pointer-events:none}
.hud{pointer-events:none}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:calc(11px * var(--ui));letter-spacing:3px;
  color:var(--cyan);border:1px solid rgba(5,217,232,.4);padding:calc(6px * var(--ui)) calc(13px * var(--ui));border-radius:999px;
  background:rgba(5,217,232,.06);font-family:var(--mono);text-transform:uppercase}
.badge .dot{width:calc(7px * var(--ui));height:calc(7px * var(--ui));border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 1.6s infinite}
.left-col h1{margin-top:16px;font-size:calc(30px * var(--ui));font-weight:800;letter-spacing:1px;position:relative;
  text-shadow:0 0 18px rgba(5,217,232,.5),0 0 2px rgba(255,61,240,.6)}
.left-col h1 .cy{color:var(--cyan)} .left-col h1 .mg{color:var(--magenta)}
.left-col h1.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;color:var(--magenta);
  clip-path:inset(0 0 60% 0);transform:translate(2px,-1px);opacity:.0;mix-blend-mode:screen;animation:gl 4.5s infinite}
@keyframes gl{0%,92%,100%{opacity:0}93%{opacity:.8;transform:translate(3px,-2px)}96%{opacity:.5;transform:translate(-2px,1px)}}
/* ---------- 航线组件（始发 → 终到）----------
   ★ 替换掉原来的「深圳港 ● ══▶ 定位中…」：一行纯文本加一个全角箭头字符，
     既没有层级也没有状态。这一屏是整站的叙事主线，值得做成真正的组件。
   两个状态：
     · 未定位 —— 轨道暗、终到节点呼吸（表示"正在找"）
     · 已定位 —— 轨道点亮、一道光从左往右跑（表示"通道已建立"） */
.routebar{
  margin-top:16px;max-width:calc(472px * var(--ui));display:flex;align-items:center;gap:calc(13px * var(--ui));
  padding:calc(12px * var(--ui)) calc(16px * var(--ui));border-radius:calc(13px * var(--ui));
  border:1px solid rgba(5,217,232,.20);
  background:linear-gradient(180deg, rgba(13,15,18,.46) 0%, rgba(13,15,18,.22) 100%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  box-shadow:var(--glass-line);
}
.rb-node{display:flex;align-items:center;gap:calc(9px * var(--ui));min-width:0}
.rb-from{flex:0 0 auto}
.rb-to{flex:0 1 auto;min-width:0}
.rb-pin{position:relative;width:calc(9px * var(--ui));height:calc(9px * var(--ui));border-radius:50%;flex:0 0 auto}
.rb-from .rb-pin{background:var(--route-origin);box-shadow:0 0 12px var(--route-origin)}
.rb-to .rb-pin{background:var(--route-hue,var(--cyan));box-shadow:0 0 12px var(--route-hue,var(--cyan))}
/* 未定位：终到节点呼吸，暗示"正在扫描" */
.routebar:not(.is-live) .rb-to .rb-pin{animation:rbBreath 1.5s ease-in-out infinite}
@keyframes rbBreath{0%,100%{opacity:.35;transform:scale(.78)}50%{opacity:1;transform:scale(1)}}
/* 定位完成的瞬间：从节点向外扩一圈，把"锁定"这个动作讲清楚 */
.routebar.is-live .rb-to .rb-pin::after{
  content:"";position:absolute;inset:calc(-3px * var(--ui));border-radius:50%;
  border:1px solid var(--route-hue,var(--cyan));animation:rbLock .6s cubic-bezier(.2,.72,.2,1) 1 both}
@keyframes rbLock{from{transform:scale(.4);opacity:1}to{transform:scale(3.4);opacity:0}}

.rb-rail{position:relative;flex:1 1 40px;min-width:36px;height:calc(2px * var(--ui));border-radius:2px;
  background:repeating-linear-gradient(90deg, rgba(5,217,232,.16) 0 5px, transparent 5px 11px);
  transition:background .5s ease}
.routebar.is-live .rb-rail{
  background:repeating-linear-gradient(90deg, rgba(5,217,232,.52) 0 5px, transparent 5px 11px)}
/* 跑动的那一道光：只在 is-live 时存在 */
.rb-run{position:absolute;top:-1px;left:-32%;width:32%;height:calc(4px * var(--ui));border-radius:3px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(200,252,255,.95),transparent);
  box-shadow:0 0 12px rgba(5,217,232,.8)}
.routebar.is-live .rb-run{animation:rbRun 2.8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes rbRun{0%{left:-32%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}

.rb-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.rb-txt b{font-size:calc(14.5px * var(--ui));font-weight:700;color:#fff;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-from .rb-txt b{color:var(--origin-chip-ink)}
.rb-txt em{font-family:var(--mono);font-size:calc(8.5px * var(--ui));letter-spacing:1.7px;color:var(--dim);
  font-style:normal;margin-top:4px;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.status{margin-top:10px;max-width:calc(472px * var(--ui));font-size:calc(12.5px * var(--ui));color:var(--ink-5);line-height:1.65;font-family:var(--mono)}
.clock{margin-top:7px;font-size:calc(12px * var(--ui));color:var(--magenta);font-family:var(--mono);letter-spacing:1px}

/* ---------- 航线详情面板（右上） ---------- */
.panel{
  /* ★ 必须避让导航：导航是 top:var(--nav-top) + 高 var(--nav-h)（占 24–88px），
     而这里原先写死 top:34px —— 面板直接压在导航条与「在线询价」按钮底下，
     标题被挡掉一半。tokens.css 早就把这两个值定义成"安全区"了，浮层一律按它避让。 */
  /* ★ 用户点名「卡片很小」：宽、内边距、圆角、字号整体乘 --ui。
     ★★ D63 终版：right 同样直接用 --stage-pad ⇒ **面板右缘 == 导航条右缘**（Δ=0）。 */
  position:fixed;z-index:6;right:var(--stage-pad);
  top:calc(var(--nav-top) + var(--nav-h) + 20px);
  width:calc(270px * var(--ui));
  font-size:calc(12px * var(--ui));color:var(--ink-4);border-radius:calc(14px * var(--ui));
  padding:calc(15px * var(--ui)) calc(17px * var(--ui)) calc(14px * var(--ui));
  border:1px solid rgba(5,217,232,.22);
  background:linear-gradient(180deg, rgba(13,15,18,.54) 0%, rgba(13,15,18,.30) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 14px 40px rgba(0,0,0,.44), var(--glass-line), var(--glass-inner);
  animation:panelIn .5s cubic-bezier(.2,.72,.2,1) both;
}
@keyframes panelIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
/* 顶沿一道从实到虚的短线 —— 把面板和"航线"主题连起来（不是四角装饰角标） */
.panel::before{content:"";position:absolute;left:calc(17px * var(--ui));right:calc(17px * var(--ui));top:0;height:1px;
  background:linear-gradient(90deg,rgba(5,217,232,.9),transparent)}
.panel h2{display:flex;align-items:center;gap:8px;
  font-size:calc(10px * var(--ui));color:var(--cyan);letter-spacing:2.2px;margin-bottom:calc(12px * var(--ui));
  font-weight:700;font-family:var(--mono)}
.panel h2::before{content:"";width:calc(5px * var(--ui));height:calc(5px * var(--ui));border-radius:50%;background:var(--cyan);
  box-shadow:0 0 8px var(--cyan)}
.panel .row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:calc(6px * var(--ui)) 0;border-bottom:1px dashed rgba(127,168,201,.14)}
.panel .row:last-child{border-bottom:none;padding-bottom:0}
.panel .row span:first-child{flex:0 0 auto;font-family:var(--mono);font-size:calc(10px * var(--ui));
  letter-spacing:1.4px;color:var(--dim)}
.panel .row span:last-child{color:#fff;text-align:right;font-size:calc(12.5px * var(--ui));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 城市可能有 4 个，必须允许换行，否则会被 ellipsis 吃掉一半 */
.panel #p-cities{white-space:normal;font-size:calc(11.5px * var(--ui));line-height:1.6;color:var(--ink-3)}
.panel #p-km{font-family:var(--mono);letter-spacing:.5px;color:var(--ink-1)}

/* ---------- 面板底部：一次行动 ----------
   放在这里是因为访客刚读完"你的国家在这条航线上"—— 全屏意图最明确的时刻，
   而面板本身已经是他的注意力所在（他刚才在等这个面板出现）。
   询价与 WhatsApp 并列而非二选一：两者回答的是不同问题，
   表单留痕可报价可跟进，WhatsApp 回答的是"现在这票多少、能不能插舱"。 */
.panel-acts{display:flex;gap:8px;margin-top:calc(14px * var(--ui));padding-top:calc(13px * var(--ui));
  border-top:1px dashed rgba(127,168,201,.14)}
.panel-acts .pa{flex:0 1 auto;min-width:0;justify-content:center;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;padding:calc(9px * var(--ui)) calc(12px * var(--ui));border-radius:calc(9px * var(--ui));
  font-family:var(--mono);font-size:calc(11px * var(--ui));letter-spacing:.6px;line-height:1;text-decoration:none;
  color:var(--ink-3);border:1px solid var(--ctl-brd);background:var(--ctl-bg);
  transition:color .18s,border-color .18s,background .18s}
.panel-acts .pa span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-acts .pa .pa-ico,.panel-acts .pa .wa-ico{flex:0 0 auto;color:var(--ink-6);transition:color .18s}
.panel-acts .pa:hover{color:#fff;border-color:rgba(5,217,232,.5);background:rgba(5,217,232,.10)}
.panel-acts .pa:hover .pa-ico{color:var(--cyan)}
/* WhatsApp 那一枚沿用品牌绿，只在 hover 时点亮（与 .btn-wa 同一套规则） */
.panel-acts .btn-wa.pa:hover{border-color:rgba(37,211,102,.45);background:rgba(37,211,102,.09)}
.panel-acts .btn-wa.pa:hover .wa-ico{color:#25d366}
.panel-acts .pa:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- 宽屏：转化入口归面板，HUD 不重复 ----------
   ★ 面板在 ≤1180px 是 display:none（270px 宽的卡片在手机上放不下），
     所以那一档必须由 HUD 的 .hero-cta 顶上 —— 否则手机上完全没有联系入口。
     宽屏反过来：面板已经把两个入口都给了，HUD 再来一份就是同一屏说两遍。
   ★ `:not(:has(...))` 那条是给"后台只填了 WhatsApp、没配 CTA"的情况兜底：
     .btn-wa 被隐藏后整块会只剩 22px 的 margin-top 撑着一段空白。 */
@media (min-width:1181px){
  .hero-cta .btn-wa{display:none}
  .hero-cta:not(:has(.btn-fuel,.btn-ghost)){display:none}
}

/* ---------- 图例（左下）：从"四行文字"改成真正的键 ---------- */
/* ★ D63 终版：left 同样直接用 --stage-pad，与导航/文案列同一左缘（Δ=0）。 */
.legend{position:fixed;z-index:6;left:var(--stage-pad);bottom:28px;
  display:flex;flex-direction:column;gap:8px;padding:calc(14px * var(--ui)) calc(17px * var(--ui)) calc(13px * var(--ui));border-radius:calc(13px * var(--ui));
  border:1px solid rgba(5,217,232,.16);background:var(--glass-bg);
  -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  box-shadow:var(--glass-line);font-family:var(--mono)}
.legend .lg-title{font-size:calc(9px * var(--ui));letter-spacing:2.6px;color:var(--dim);margin-bottom:3px}
.legend .lg-row{display:flex;align-items:center;gap:calc(9px * var(--ui));font-size:calc(11px * var(--ui));color:var(--ink-4);line-height:1.3}
.legend .lg-row i{width:calc(9px * var(--ui));height:calc(9px * var(--ui));border-radius:50%;flex:0 0 auto;display:block}
.legend .lg-row span{color:var(--ink-2);font-size:calc(11px * var(--ui))}
.legend .lg-row em{font-style:normal;font-size:calc(9.5px * var(--ui));letter-spacing:1.2px;color:var(--ink-7);
  margin-left:auto;padding-left:calc(16px * var(--ui))}
/* ★ 选择器要带 .lg-row：`.legend .lg-row i`（三档）会把这里的宽高与圆角一起盖掉，
   结果"航线"那一项被画成一个 9x9 的圆点（实测踩到）。 */
.legend .lg-row i.lg-line{width:calc(26px * var(--ui));height:calc(2px * var(--ui));border-radius:1px;
  background:repeating-linear-gradient(90deg,var(--route-hub) 0 5px,transparent 5px 10px)}

/* ★★ 2026-10-09 删掉了 `.hero-note` 规则 —— 它是一条**死 CSS**：
   WP 主题的 front-page.php 从来没有输出过这个元素（原型 index.html 里有
   「globe.gl · 太空夜景蓝色星球…」那行注记，搬到 WP 时丢掉了）。
   排查记录：用户说「右下角也小」，我先按 .hero-note 处理，但实测
   `document.querySelector('.hero-note')` 在 2560 下返回 null，且
   右下角区域（crop 截图）确认为空 —— 用户指的其实是**落在屏幕右下方的
   支线城市标签**（休斯顿 @2115,1016），与「城市的卡片很小」是同一件事，
   已由 .hlabel--city 那一族乘 --ui 覆盖。
   ★ 结论：不要为了"对应用户描述"去复活一个没人渲染的元素。 */
/* ★ 删掉了 .corner 四角角标 —— 那是明令禁止的装饰件（见 README 硬约束） */

/* ============================================================
   响应式
   ------------------------------------------------------------
   ★ 首屏原本**一条媒体查询都没有**：文案列固定 40px 左边距 + min(560px,52vw)，
     右侧航线详情面板固定 right:30px/宽 240px，图例与页脚注也全是固定定位。
     桌面 16:9 下相安无事，一到窄屏就会互相压在一起（面板压住标题、
     图例叠在按钮上）。这里按"先让位、再堆叠"的顺序逐级收缩。
   ★ 地球的构图常量（COMP_X / COMP_Y）在 JS 里，这里绝对不碰 ——
     缩的是浮层的占位，不是球的位置。
   ============================================================ */

/* ① 中屏：右侧航线详情面板先让位（它离地球最近，也最容易被挤出画面） */
@media (max-width:1180px){
  .panel{display:none !important}
  .left-col{left:32px;width:min(520px,60vw)}
  .legend{left:32px}
}

/* ② 平板竖屏 / 小笔电：文案列改为占满可用宽度，图例与角落注记收掉 */
@media (max-width:860px){
  .legend{display:none}
  .left-col{left:var(--gutter);right:var(--gutter);width:auto;
    top:calc(var(--nav-top) + var(--nav-h) + 22px);gap:14px}
  .left-col h1{margin-top:12px;font-size:clamp(22px,5.6vw,30px)}
  .route{margin-top:8px;font-size:14px}
  .status{margin-top:6px;font-size:12.5px;line-height:1.65}
  .clock{margin-top:4px;font-size:11px}
  .hero-sub{font-size:13.5px;max-width:none}
  /* 昼夜开关靠右：它原本在左，正好落进月亮（固定锚点 19%/32%）覆盖的那一小片区域。
     靠右之后两者不再重叠，顺带让 HUD 底部有一段"文字在左、开关在右"的呼吸。 */
  .mode-switch{margin-top:2px;align-self:flex-end}

  /* 日月与 HUD 抢位置 —— 桌面版球在右侧、HUD 只占左半，天体落在文字的右侧空白里，
     所以一直没暴露；窄屏 HUD 占满整宽后，19%/32% 这个锚点正好压在
     routebar / status 那一列文字上（实测：月亮隔着玻璃把文字顶花）。
     ★ 锚点不动 —— 19%/32% 是构图常量，改动要经确认；这里只把天体**缩小 + 压暗**，
       保留"那里有个天体"的氛围，不再和文字争。 */
  #day .sun{width:180px;height:180px;opacity:.5}
  #night .moon{width:84px;height:84px;opacity:.2}
  /* 白昼的镜头炫光同理收一档（它的 opacity 由 JS 按昼夜写死 0/1，
     所以只能改子元素，不能直接改这一层的 opacity，否则夜间也会亮起来） */
  #sunflare .sf-beam,#sunflare .sf-halo{opacity:.5}
}

/* ③ 手机：进一步压缩字号与按钮，把首屏留给地球 */
@media (max-width:560px){
  .left-col{gap:10px}
  .badge{font-size:9.5px;letter-spacing:2px;padding:5px 11px}
  .left-col h1{font-size:21px;letter-spacing:.5px;text-shadow:0 0 14px rgba(5,217,232,.45)}
  .route{font-size:13px;gap:7px}
  .hero-cta{gap:9px;margin-top:16px}
  .btn-fuel,.btn-ghost{padding:11px 18px;font-size:12.5px}
  .mode-switch .ms{padding:6px 11px;font-size:11px}
  .mode-switch .ms-auto{margin-left:2px;font-size:10px}
}