/* ───────── 星球密码（首页英雄区右侧交互装置） ───────── */
.hero-art{
  justify-self:stretch;align-self:center;
  /* viewBox 500 里圆直径 336（67.2%），要圆回到 540px 视觉直径
     ⇒ 容器 = 540 / 0.672 ≈ 804px。同时受视口高度约束（矮窗不溢出）。 */
  width:100%;max-width:1045px;
  position:relative;
  /* 用户：「你把这个放大最右面就行。光圈跟最右的圆点保持很小的距离」
     实测光圈右 1457、右侧圆点左 1453 → 重叠 4px，推过头了，要回退 14px。
     ⚠️ margin-right 对 justify-self:stretch 的网格项无效（实测改完读数纹丝不动），
        必须用 transform 位移。 */
  /* 实测（这次量对了）：**可见光环外沿** r=210 在最右 1381，
     右侧圆点左 1453 → 真实间隙 72px。
     （之前报的 2px 是错量到光晕渐变半径 258 —— 那部分几乎全透明，肉眼看不见。）
     目标间隙 ~10px ⇒ 右移 62px。 */
  transform:translateX(56px);
}

.pl-wrap{
  display:flex;flex-direction:column;align-items:center;
  position:relative;          /* 给 .pl-head 的绝对定位做参照 */
  padding:0;
  /* ★ 2026-11-07 用户要求「外面的框去掉」：
     原来这里是一层圆角矩形卡片（深紫底 + 1px 紫边 + 8px 模糊 + 16/14px 内边距）。
     现在全部拆掉，圆盘直接浮在星空上，四周不留框、不留底。
     注意：hero 大框不在这个文件里（那是 space.css 的 .hero），这里只拆星球密码自己的框。 */
  background:none;
  border:0;
  border-radius:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.pl-head{
  /* ★ 2026-11-07：标题已移进 SVG 的「第五环」标题带里（见 planetlock.js 的
     pl-band-title / pl-band-sub）。这里的 HTML 版本隐藏，避免重复显示。
     用户口径：「这个是包在紫色光环里面的，你可以理解为 第五环」。 */
  display:none;
}
.pl-title{
  display:block;font-size:14px;font-weight:800;color:#e8e0ff;
  letter-spacing:.04em;
}
.pl-sub{
  display:block;font-size:10.5px;color:#9489b5;margin-top:3px;
  letter-spacing:.02em;
}

/* 盘面 */
.pl-stage{
  /* viewBox 528（四周各留 96 给光晕，实测需要 82，留余量）
     ⇒ 圆直径 336 占容器 336/528 = 63.6%。
     要保持圆的视觉直径：容器宽 = 目标直径 ÷ 0.636。目标 540 → ≈ 849。

     ★ 2026-11-07 加：还要受**视口高度**约束。
       实测 458×520 的小窗口里圆盘底部超出可视区 67px（不是 SVG 画布裁切，
       是整块比屏幕高）；而 390×844 / 768×900 都完整。
       所以上限取「宽度允许」与「高度允许」的较小值：
       屏高减去顶栏(96) + 标题(≈46) + 屏内上下 padding(≈122) 后，留给圆。
       用 min() 让两个条件同时成立，矮窗自动缩圆、不裁切。 */
  width:100%;aspect-ratio:1/1;
  max-width:1045px;
  margin:0 auto;
  position:relative;
  touch-action:none;      /* 移动端拖动不触发页面滚动 */
  user-select:none;
}
.pl-svg{display:block;width:100%;height:100%;overflow:visible;cursor:grab}
body.pl-dragging .pl-svg{cursor:grabbing}
body.pl-dragging{user-select:none}

/* 环扇区过渡 */
.pl-sec{transition:fill .18s ease,stroke .18s ease,stroke-width .18s ease}

/* ── 鼠标移到轮盘 → 整盘发紫光 ──
   用户要求「鼠标移到轮盘，轮盘要发紫光」。
   实现：.pl-stage:hover 时给 SVG 上 drop-shadow 紫色光晕（沿圆形轮廓扩散），
   同时把三环的描边提亮一档。用 filter 而不是 box-shadow，因为要沿圆的形状发光而不是方框。 */
.pl-svg{
  transition:filter .38s ease;
}
/* 只有真的指在盘面上才发光（.pl-stage 有 :hover 判定，键盘聚焦也照顾到） */
.pl-stage:hover .pl-svg,
.pl-stage:focus-within .pl-svg{
  filter:
    drop-shadow(0 0 10px rgba(168,85,247,.58))
    drop-shadow(0 0 26px rgba(139,92,246,.36))
    drop-shadow(0 0 52px rgba(109,74,255,.22));
}
/* 环线同步提亮：让光有「从环里透出来」的感觉 */
.pl-stage:hover .pl-sec{
  stroke:rgba(168,120,255,.34);
}
.pl-stage:hover .pl-frame{
  animation-duration:1.6s;   /* 悬停时呼吸更快，像被激活 */
}
/* 触屏设备没有 hover，用按下来给同样的反馈 */
@media (hover:none){
  .pl-stage:active .pl-svg{
    filter:
      drop-shadow(0 0 10px rgba(168,85,247,.62))
      drop-shadow(0 0 26px rgba(139,92,246,.42));
  }
}

/* ── 顶部对准格：只用光晕勾勒，不用实心色块 ──
   用户指出「鼠标移过去，不要显示块状」。
   原来 fill 是 rgba(123,77,255,.42) 一整块紫色 = 硬色块。
   现在填充接近透明，靠描边加亮 + drop-shadow 光晕表现「被选中」。

   ★ 2026-11-07 用户第二次纠正：「这个亮着的框不要动，只是文字在变。」
     原实现把高亮挂在扇区上，而扇区跟着 rot 转 ⇒ 亮框本身在环上滑动。
     现在高亮拆成两层：
       .pl-frame    = 固定在正上方 -15°~+15° 的取景框（位置永不变）
       .pl-lab-top  = 转到框内的那个标签（随环转，进框时提亮加粗）
     观感就是「框钉住不动，框里的字一格一格换过去」。 */
.pl-sec.pl-top{
  filter:drop-shadow(0 0 6px rgba(180,140,255,.9))
         drop-shadow(0 0 14px rgba(140,100,255,.55));
}

/* 固定取景框：位置不动，只做呼吸光晕 */
.pl-frame{
  filter:drop-shadow(0 0 6px rgba(190,150,255,.85))
         drop-shadow(0 0 14px rgba(140,100,255,.45));
  animation:plFrameBreath 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes plFrameBreath{
  0%,100%{ opacity:.82; }
  50%    { opacity:1; }
}

/* ── 最外沿亮边已移除 ──
   用户：「星座密码的环，他的亮边不用显示出来」——
   JS 里那条 rgba(255,252,255,.98) 的实线已删，这里对应的呼吸动画一并清掉。
   现在光环只保留三层弥散光晕（模糊的紫雾），没有硬边。 */

/* 当前落在取景框里的那个标签：更亮、带光晕 */
.pl-lab-top{
  filter:drop-shadow(0 0 4px rgba(255,255,255,.75))
         drop-shadow(0 0 10px rgba(190,150,255,.6));
}

/* 解锁提示 */
.pl-msg{
  min-height:0;max-height:0;overflow:hidden;
  opacity:0;transition:.25s ease;
  text-align:center;width:100%;
}
.pl-msg.on{
  max-height:70px;opacity:1;margin-top:8px;
}
.pl-msg b{
  display:block;font-size:13px;color:#5eead4;font-weight:800;
  letter-spacing:.03em;
}
.pl-msg span{
  display:block;font-size:11px;color:#9de8d8;margin-top:3px;
}
/* 答案提示 */
.pl-tip{
  max-height:0;overflow:hidden;opacity:0;transition:.25s ease;
  font-size:11px;color:#ffd6a5;text-align:center;width:100%;
}
.pl-tip.on{max-height:40px;opacity:1;margin-top:6px}

/* 底部按钮 */
.pl-foot{display:flex;gap:8px;margin-top:10px}
.pl-btn{
  appearance:none;cursor:pointer;font-family:inherit;
  font-size:11.5px;font-weight:700;
  padding:7px 18px;border-radius:999px;color:#fff;
  background:rgba(123,77,255,.3);
  border:1px solid rgba(150,120,255,.45);
  transition:.16s;
}
.pl-btn:hover{background:rgba(123,77,255,.5);border-color:rgba(180,150,255,.75)}
.pl-btn.ghost{
  background:transparent;color:#a99ed0;
  border-color:rgba(150,120,255,.25);
}
.pl-btn.ghost:hover{color:#d8ccff;border-color:rgba(150,120,255,.5);background:rgba(123,77,255,.14)}

/* 解锁时整盘外发光 */
.pl-stage:has(.pl-svg)::after{content:none}

@media (max-width:1000px){
  /* 450 也要受视口高度约束，否则矮窗会溢出（实测 458×520 溢出 67px） */
  .hero-art{max-width:780px;margin-right:0}
  .pl-stage{max-width:780px}
}




/* ═══════════════════════════════════════════════════════
   圆心登录圆（HTML 层，浮在 SVG 之上、不随环转）
   ───────────────────────────────────────────────────────
   用户要求（2026-11-07）：
     「登陆、密码 等基本登陆内容放到圆心的圆内。整个圆要放到，可以看清楚登陆。
       打乱、看答案就不要了（这样圆就有更多的空间）」
   所以圆心半径从 50/320 放大到 84/360（画布占比 23% → 47%）。
   ═══════════════════════════════════════════════════════ */
.pl-core{
  position:absolute;left:50%;top:50%;
  /* 直径 = CORE_R*2/VIEW = 212/360 = 58.89%（CORE_R 84→106，圆心放大）
     ⚠️ 只给 width + aspect-ratio:1，不能给 height:% ——
        父级 .pl-stage 的 height 会被内容撑大（实测 400 vs 377），
        按百分比算 height 会得到椭圆。用 aspect-ratio 锁死正圆。 */
  /* ⚠️ 必须同时 min-height:0 + overflow:hidden：
     flex 容器的自动最小尺寸会让内容把盒子撑高（实测 169×180 的椭圆），
     锁死比例 + 裁切超出的部分。 */
  /* ⚠️ 直径必须 = CORE_R*2 / VIEWBOX边长 = 212/528 = 40.15%
     原来写 58.89%（那是 viewBox=360 时代的 212/360），
     viewBox 改到 528 后没同步 ⇒ 圆心长得比内环起点还大，实测压住了三层转盘。
     这是「登录圆心和转盘叠在一起」的真正原因。 */
  /* ⚠️⚠️ 圆心直径必须 = CORE_R*2 / viewBox边长
     当前 CORE_R=80、viewBox=500 ⇒ 160/500 = **32%**
     历史：曾写 58.89%（vbox360时代）、40.15%（vbox528时代）、39.4%，
     每次改 viewBox 或 CORE_R 都忘了同步 ⇒ 圆心长得比第三环还大，
     把整个星体环（80~102）盖住 —— 这就是「看不到第三层字」的真正原因。
     实测证据：40.15% 在 607px 容器里 = 244px 直径 = 半径 100 SVG > 环内沿 80。 */
  /* ★ 圆心直径 = CORE_R*2 / viewBox边长
     当前 CORE_R=88.3、viewBox=540 ⇒ 176.6/540 = **32.7%**
     历史教训：这个百分比曾因不同步出现过 58.89 / 40.15 / 32 / 33.2 四个错值。
     **改 CORE_R 或 viewBox，必须同步改这里**，并跑核验：
       圆心半径(SVG) <= 内环 rIn(88.3) 才算对。 */
  width:32.7%;aspect-ratio:1/1;min-height:0;overflow:hidden;box-sizing:border-box;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  /* ── 中心圆 = 第 4 个圆 = 黄（亮度最大）──
     用户第 2 条：红→紫→蓝→黄，黄最亮；第 3 条：鼠标移到中心要发黄光。
     底色用黄的低透明径向渐变压在深底上：中间偏暖、边缘收到深紫，
     既保留星空的通透感，又能一眼看出这是第 4 个（黄）圆。
     强度取 10%/4%（更亮的版本会被看成"这圈在发光"，与"只要最外沿亮"冲突）。 */
  /* 黄底（第 4 个圆 = 黄，恢复版） */
  background:
    radial-gradient(circle at 50% 30%, rgba(255,214,10,.10), rgba(255,196,40,.04) 46%, rgba(24,14,38,.96) 76%),
    rgba(20,13,34,.97);
  /* 用户「我只要最外面的边亮」——中心圆彻底不发光：
     外发光 + 内发光都去掉，只留一条 1px 暗金细线做区域分界。 */
  border:1px solid rgba(255,214,10,.12);
  box-shadow:none;
  z-index:4;
  transition:border-color .3s ease, box-shadow .34s ease, background .34s ease;
}



.pl-core-inner{

  to  { transform:translate(-50%,-50%) rotate(360deg); }
}
/* ③ 鼠标移到中心 → 发黄光（比三环任何一档都强：模糊更大、透明度更高） */
.pl-core:hover,
.pl-core:focus-within{
  /* 基态不发光（发光边只留给最外沿），鼠标移进来才发黄光 —— 这是用户第 3 条明确要的 */
  border-color:rgba(255,224,60,.92);
  box-shadow:
    0 0 26px rgba(255,214,10,.72),
    0 0 68px rgba(255,196,40,.46),
    0 0 120px rgba(255,180,0,.24),
    inset 0 0 40px rgba(255,214,10,.22);
}
.pl-core.busy{border-color:rgba(94,234,212,.8)}
.pl-core[data-pane="done"]{border-color:rgba(94,234,212,.75)}



/* 中心圆本体要盖住 ::before 的边缘（overflow:hidden 已有），内容层上浮 */
.pl-core-inner{
  width:82%;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  line-height:1.22;
}
.pl-core-brand{
  /* 用户「只需要 星座.live 就行」——原「登录」标题已删，
     这里成为圆心唯一的标题行，所以放大一档并撑开下边距，
     补上原来两行让出的空间，视觉重心仍在圆心上半部。 */
  font-size:15px;font-weight:800;letter-spacing:.05em;
  color:rgba(255,232,140,.98);margin:0 0 8px;line-height:1.25;
  text-shadow:0 0 16px rgba(255,206,60,.5);
}
.pl-core-brand i{font-style:normal;color:rgba(94,200,255,.9)}
/* .pl-core-title 已停用：用户要求「只需要 星座.live」，
   四个面板（登录/注册/找回密码/已登录）的标题行已从 DOM 中移除。
   规则暂留空壳，避免旧缓存页面出现无样式标题。 */
.pl-core-title{
  font-size:0;line-height:0;height:0;overflow:hidden;margin:0;
}

/* 面板切换：只显示 data-pane 对应的那一块 */
.pl-core-pane{display:none;flex-direction:column;align-items:center;width:100%}
.pl-core[data-pane="login"]  .pl-core-pane[data-p="login"],
.pl-core[data-pane="reg"]    .pl-core-pane[data-p="reg"],
.pl-core[data-pane="forgot"] .pl-core-pane[data-p="forgot"],
.pl-core[data-pane="done"]   .pl-core-pane[data-p="done"]{display:flex}

.pl-core input{
  width:100%;box-sizing:border-box;
  font-family:inherit;font-size:13px;line-height:1.3;
  padding:6px 9px;margin-bottom:5px;
  border-radius:8px;
  color:#f0eaff;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(150,120,255,.30);
  outline:none;
  transition:border-color .16s, background .16s, box-shadow .16s;
}
.pl-core input::placeholder{color:rgba(180,168,210,.55)}
.pl-core input:focus{
  border-color:rgba(180,140,255,.85);
  background:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(140,100,255,.16);
}
.pl-core button{
  width:100%;box-sizing:border-box;
  font-family:inherit;font-size:12px;font-weight:800;
  font-size:13.5px;letter-spacing:.05em;line-height:1.3;
  padding:7px 0;margin-top:2px;
  border-radius:999px;cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#6d4aff);
  border:1px solid rgba(180,150,255,.55);
  box-shadow:0 4px 14px rgba(109,74,255,.42);
  transition:.16s;
}
.pl-core button:hover:not(:disabled){
  background:linear-gradient(135deg,#9d6fff,#7c5cff);
  box-shadow:0 6px 18px rgba(109,74,255,.55);
}
.pl-core button:disabled{opacity:.55;cursor:default}

.pl-core-links{
  display:flex;justify-content:center;gap:14px;
  margin-top:6px;width:100%;line-height:1.2;
}
.pl-core-links a{
  font-size:10.5px;line-height:1.2;color:rgba(170,158,205,.85);
  text-decoration:none;border-bottom:1px dotted transparent;
  transition:.15s;
}
.pl-core-links a:hover{color:#d8ccff;border-bottom-color:rgba(180,150,255,.6)}

.pl-core-who{
  font-size:12px;font-weight:700;color:#e8e0ff;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;margin-bottom:7px;
}

/* 圆心在手机上要更小一点，避免压住内环标签 */
@media (max-width:1000px){
  .pl-core-inner{width:86%}
  .pl-core input{font-size:11px;padding:5px 8px;margin-bottom:4px}
  .pl-core button{font-size:11.5px;padding:6px 0}
}

/* ═══════════════════════════════════════════════════════
   大圆盘（#bigchart）元素配色 —— 星盘本体
   ───────────────────────────────────────────────────────
   用户纠正：「是大的圆盘，不是密码那个圆盘」
   目标 = 星盘屏的命盘本体 #bigchart > .chart-wheel > svg（672×672）
   外圆 r=350，外面还有一圈 r=356 的发光环。

   火象 红 / 土象 黄褐 / 风象 青蓝 / 水象 蓝紫
   JS 只在指针落入圆内时写 data-elem，CSS 取色画光环。
   ═══════════════════════════════════════════════════════ */
#bigchart{ position:relative; }
#bigchart[data-elem]{ --elem:168,120,255; }
#bigchart[data-elem="fire"]{ --elem:255,122,89; }   /* #ff7a59 星盘火 */
#bigchart[data-elem="earth"]{ --elem:255,196,107; } /* #ffc46b 星盘土 */
#bigchart[data-elem="air"]{ --elem:94,200,255; }    /* #5ec8ff 星盘风 */
#bigchart[data-elem="water"]{ --elem:157,123,255; } /* #9d7bff 星盘水 */
/* 圆盘本体：元素色发光（drop-shadow 沿圆形轮廓扩散，不是方框）
   ── SVG 必须 overflow:visible ──
     浏览器对 <svg> 默认 overflow:hidden，超出 viewBox 的内容会被裁掉。
     实测：svg { overflow: "hidden" }，而 drop-shadow(0 0 48px) 是画在
     SVG 的渲染层上、向外扩散 48px —— 右侧正好被裁成直角缺口，
     用户看到的「不是一个完整的圆」就是这个原因（像素测量：右侧 57°~93° 全黑）。
     显式声明 visible 后，光晕才能完整地扩到圆外。 */
#bigchart[data-elem] > svg{
  overflow:visible;
  filter:
    drop-shadow(0 0 8px  rgba(var(--elem),.90))
    drop-shadow(0 0 22px rgba(var(--elem),.60))
    drop-shadow(0 0 48px rgba(var(--elem),.35));
  transition:filter .35s ease;
}
/* 未悬停也保持 overflow:visible（否则静止态的常驻光波边缘也会被裁） */
#bigchart > svg{ overflow:visible; }

/* 外圈描边环：纯圆形（border-radius:50%），跟着圆盘尺寸走
   —— 前提：#bigchart 必须是定位父级，否则 ::after 会相对整页定位 */
#bigchart{ position:relative; }
#bigchart[data-elem]::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  /* ── 尺寸必须与 SVG 里的圆盘一致，不能直接用 100% ──
     #bigchart 是 SVG 的外接框（571×571），但 SVG 内部 viewBox 是 760×760、
     真正的圆盘 r=350（直径 700/760 = 92.1%）。
     原来写 width/height:100% → 环直径 571px，而圆盘只有 526px，
     差 45px，环悬在圆盘外面，和视觉上的盘边对不上（看着就不像"圆盘的环"）。
     现在按 700/760 精确取 92.105%。 */
  width:92.105%; height:92.105%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:2.5px solid rgba(var(--elem),.90);
  box-shadow:
    0 0 14px rgba(var(--elem),.85),
    0 0 38px rgba(var(--elem),.55),
    inset 0 0 24px rgba(var(--elem),.20);
  pointer-events:none;
  /* ── 必须浮在 SVG 之上 ──
     伪元素默认绘制在宿主内容之下，而 #bigchart 的子元素是整个星盘 SVG。
     结果是这条 2.5px 的元素色描边环被 SVG 的深色圆盘盖住，
     只有超出圆盘的那一点点露出来 —— 表现就是「环不完整、右侧断口」。
     z-index:3 把它提到 SVG 之上，环才能连成一整圈。 */
  z-index:3;
  animation:discRing 2.6s ease-in-out infinite;
}
@keyframes discRing{
  0%,100%{ opacity:.75; transform:translate(-50%,-50%) scale(1); }
  50%    { opacity:1;   transform:translate(-50%,-50%) scale(1.015); }
}

@media (prefers-reduced-motion: reduce){
  #bigchart[data-elem]::after{ animation:none; }
}


/* ═══════════════════════════════════════════════════════
   圆盘内的常驻光波（app.js renderChart 里生成 .disc-wave）
   ───────────────────────────────────────────────────────
   用户要求：
     「只要在命盘圆圈内容，光的波浪线要一直在」
     「土元素波峰波谷最大，其次风元素、水元素、再其次是火元素」

   两件事：
     ① 常驻：默认就可见，不依赖 hover
     ② 幅度分级（波峰波谷高低）：土 > 风 > 水 > 火
        用 CSS 变量 --disc-amp 控制，JS 在切换元素时改写。
        SVG 里 path 已按 amp=7 画好，改 --disc-amp 是整体放大系数。
   ═══════════════════════════════════════════════════════ */

/* ── 默认：紫金各半、常显、缓慢自转 ──
   ⚠️ 这里绝对不能写 color 或 currentColor！
      描边色由 SVG 内的 linearGradient(#discWaveSplit) 提供（左紫右金）。
      一旦写了 color + stroke:currentColor，渐变会被单色覆盖 ——
      表现就是「只看得到紫色，金色看不到」。
   辉光用白色系的 drop-shadow，不染色，避免把两色糊成一色。 */
.disc-wave-g{
  transform-origin:50% 50%;
  transform-box:fill-box;
  animation:discWaveSpin 26s linear infinite;
  transition:transform .4s ease, filter .35s ease;
}
.disc-wave-glow{
  filter:drop-shadow(0 0 7px rgba(205,180,255,.5))
         drop-shadow(0 0 16px rgba(255,215,150,.35));
}
.disc-wave-main{ filter:brightness(1.3); }

@keyframes discWaveSpin{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}

/* ── 幅度分级 ──
   scale 作用在整条波上：1.0 / 1.25 / 1.55 / 1.95
   土最大（1.95）> 风（1.55）> 水（1.25）> 火（1.0 最小） */
/* ═══════════════════════════════════════════════════════
   悬停四元素：颜色跟随元素色（不再是紫金）
   ───────────────────────────────────────────────────────
   用户最终口径：
     · 默认 / 鼠标移出 → 一半紫一半金（渐变）
     · 悬停到某个元素 → 整条波变成该元素的单色

   实现：用 --wave-stroke 这个变量决定描边。
     · 默认态未定义 --wave-stroke → 走 SVG 里的 url(#discWaveSplit) 渐变
     · 有 data-elem 时 → 变量被设成具体颜色，覆盖渐变
   CSS 无法「有条件地退回 url()」，所以用两层：
     · 基础规则显式写 stroke:url(#discWaveSplit)
     · 元素态规则写 stroke:<颜色> 优先级更高，覆盖掉
   同时保留幅度分级（土>风>水>火）。 */

/* 默认：紫金渐变（显式声明，避免被继承覆盖） */
.disc-wave-g .disc-wave{ stroke:url(#discWaveSplit); }

/* 悬停四元素：单色 + 幅度分级 */
#bigchart[data-elem="fire"]  .disc-wave{ stroke:rgba(255,122,89,.95); }
#bigchart[data-elem="water"] .disc-wave{ stroke:rgba(157,123,255,.95); }
#bigchart[data-elem="air"]   .disc-wave{ stroke:rgba(94,200,255,.95); }
#bigchart[data-elem="earth"] .disc-wave{ stroke:rgba(255,196,107,.95); }

#bigchart[data-elem="fire"]  .disc-wave-g{ --disc-amp:1.00; }
#bigchart[data-elem="water"] .disc-wave-g{ --disc-amp:1.25; }
#bigchart[data-elem="air"]   .disc-wave-g{ --disc-amp:1.55; }
#bigchart[data-elem="earth"] .disc-wave-g{ --disc-amp:1.95; }

/* 旋转中叠加幅度：用 wrapper 的 scale 与 keyframes 的 rotate 分开写会冲突，
   所以把 scale 放在 CSS 变量里，由 keyframes 的中间帧用 scale() 合成 */
#bigchart[data-elem] .disc-wave-g{
  animation:discWaveSpinAmp 26s linear infinite;
}
@keyframes discWaveSpinAmp{
  from{ transform:rotate(0deg)   scale(var(--disc-amp,1)); }
  to  { transform:rotate(360deg) scale(var(--disc-amp,1)); }
}

/* 未悬停也保持自转（默认 --disc-amp = 1） */
@media (prefers-reduced-motion: reduce){
  .disc-wave-g, #bigchart[data-elem] .disc-wave-g{ animation:none; }
}

/* ── 手机端：把圆盘放大到能吃满宽度（圆心登录区才有空间） ──
   实测 390 宽下链路上限：screen-inner 318 → hero padding 22×2 → hero-grid 274
   → pl-wrap padding 14×2 → stage 244 → 圆心 114px，输入框只有 ~93px，
   文字挤成一团。收掉两级 padding 并把 hero-art 上限解开。 */
@media (max-width:560px){
  /* 目标：手机上圆心登录区 ≥150px（桌面是 176px）。
     链路实测 390 宽：screen 377(pad 13) → screen-inner 307(margin 8) → hero 307(pad 12)
     → pl-wrap 284(pad 8) → stage 267 → core 124。逐级把横向 padding/margin 归零。 */
  #s-chart .screen-inner{margin:0;width:100%}
  #s-chart .hero{padding:16px 0 14px;border-radius:0;border-left:0;border-right:0}
  .hero-grid{gap:12px}
  /* 手机上同理：宽度交给 width:100%，但最大高度仍受视口约束（横屏矮窗尤其明显） */
  .hero-art{max-width:100%;margin:0}
  .pl-wrap{padding:10px 2px 8px;border-radius:14px;width:100%}
  .pl-stage{max-width:100%;width:100%}
  .pl-core-inner{width:88%}
  .pl-core-brand{font-size:11px}
  .pl-core-title{font-size:0;margin:0}
  .pl-core input{font-size:13.5px;padding:7px 10px;margin-bottom:6px}
  .pl-core button{font-size:14px;padding:8px 0}
  .pl-core-links a{font-size:11.5px}
  .pl-core-links{gap:14px;margin-top:7px}
}