From 01f4240c38a842fcc65990e10ae196c38c974617 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=86=B0=E6=9C=94?= <565183519@qq.com>
Date: Wed, 26 Aug 2026 08:48:24 +0800
Subject: [PATCH] =?UTF-8?q?planet=20v3=EF=BC=9A=E7=AB=8B=E4=BD=93=E6=82=AC?=
 =?UTF-8?q?=E6=B5=AE=E6=98=9F=E7=90=83=E2=80=94=E2=80=94=E5=A4=A7=E7=88=86?=
 =?UTF-8?q?=E7=82=B8=E4=B8=AD=E8=AF=9E=E7=94=9F=EF=BC=8C=E5=91=A8=E5=9B=B4?=
 =?UTF-8?q?=E6=98=AF=E7=AD=89=E5=BE=85=E5=BC=80=E6=8B=93=E7=9A=84=E9=BB=AF?=
 =?UTF-8?q?=E6=B7=A1=E6=98=9F=E7=BE=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

按冰朔规格重做：球体三要素（高光偏移33%/暗面inset明暗交界/表面纹理pan自转）
+大气rim+悬浮浮动9s+大爆炸（conic爆光+扩散环+18抛射碎屑）
+黯淡星球群7颗（无光仅rim、其一带火种）+湖面语言纹理保留。
纯CSS轻量无依赖。搜索确认技术：stackoverflow/codepen pure CSS sphere。
---
 .../first-planet-home/FirstPlanetHome.tsx     |  66 +++--
 .../first-planet-home/first-planet-home.css   | 271 +++++++++---------
 2 files changed, 187 insertions(+), 150 deletions(-)

diff --git a/build/mother-brain-desktop-app-phase4-20260825/source/hololake-native-desktop/src/modules/first-planet-home/FirstPlanetHome.tsx b/build/mother-brain-desktop-app-phase4-20260825/source/hololake-native-desktop/src/modules/first-planet-home/FirstPlanetHome.tsx
index aa3fb13be..4d726ab89 100644
--- a/build/mother-brain-desktop-app-phase4-20260825/source/hololake-native-desktop/src/modules/first-planet-home/FirstPlanetHome.tsx
+++ b/build/mother-brain-desktop-app-phase4-20260825/source/hololake-native-desktop/src/modules/first-planet-home/FirstPlanetHome.tsx
@@ -63,18 +63,35 @@ function usePlanetSpecks(count: number) {
   }), [count])
 }
 
-// 大爆炸废墟：星球外圈的碎光微粒
-function useDebris(count: number) {
+// 大爆炸：向外飞散的爆发碎屑（诞生瞬间的抛射物）
+function useBangShards(count: number) {
   return useMemo(() => Array.from({ length: count }, (_, i) => {
-    const angle = seeded(i + 901) * Math.PI * 2
-    const radius = 58 + seeded(i + 1101) * 26
+    const angle = (i / count) * Math.PI * 2 + seeded(i + 901) * 0.5
+    const dist = 62 + seeded(i + 1101) * 30
     return {
       id: i,
-      x: 50 + Math.cos(angle) * radius,
-      y: 50 + Math.sin(angle) * radius * 0.8,
-      d: 3 + seeded(i + 1301) * 5,
-      dl: -seeded(i + 1501) * 7,
-      s: 0.8 + seeded(i + 1701) * 1.4,
+      x: 50 + Math.cos(angle) * dist,
+      y: 50 + Math.sin(angle) * dist * 0.85,
+      len: 6 + seeded(i + 1301) * 14,
+      rot: (angle * 180) / Math.PI,
+      warm: seeded(i + 1501) < 0.55,
+      dl: -seeded(i + 1701) * 4,
+    }
+  }), [count])
+}
+
+// 等待被开拓的黯淡星球群：大小不一、无光、仅 rim
+function useDimPlanets(count: number) {
+  return useMemo(() => Array.from({ length: count }, (_, i) => {
+    const angle = (i / count) * Math.PI * 2 + seeded(i + 2001) * 0.9
+    const dist = 34 + seeded(i + 2201) * 12
+    return {
+      id: i,
+      x: 50 + Math.cos(angle) * dist * 0.95,
+      y: 40 + Math.sin(angle) * dist * 0.55,
+      s: 20 + seeded(i + 2401) * 34,
+      spark: i === 2,
+      dl: -seeded(i + 2601) * 5,
     }
   }), [count])
 }
@@ -138,8 +155,9 @@ export function FirstPlanetHome() {
   const [infinityLit, setInfinityLit] = useState(false)
   const [gateMessage, setGateMessage] = useState('')
 
-  const specks = usePlanetSpecks(42)
-  const debris = useDebris(12)
+  const specks = usePlanetSpecks(26)
+  const shards = useBangShards(18)
+  const dims = useDimPlanets(7)
   const formatted = useMemo(() => (raw ? formatGateNumber(raw) : ''), [raw])
   const fullNumber = formatted ? (infinityLit ? `${formatted}∞` : formatted) : ''
   const canEnter = Boolean(fullNumber)
@@ -157,22 +175,28 @@ export function FirstPlanetHome() {
     <div className={`fph-root stage-${stage}${motionAwake ? ' motion-awake' : ''}`} onPointerMove={wake} onPointerDown={wake}>
       <StarfieldCanvas awake={motionAwake} />
       <div className="fph-lake" aria-hidden="true"><span className="fph-lake-lang">语言 · ∞ · 光湖 · TCS · 心跳 · 语言 · ∞ · 光湖 · TCS · 心跳 · 语言 · ∞ · 光湖</span></div>
-      <i className="fph-dark-planet d1" aria-hidden="true" />
-      <i className="fph-dark-planet d2" aria-hidden="true" />
-      <i className="fph-dark-planet d3" aria-hidden="true" />
+
+      {/* 等待被开拓的黯淡星球群 */}
+      {dims.map((d) => (
+        <i key={d.id} className={`fph-dim${d.spark ? ' spark' : ''}`} aria-hidden="true"
+          style={{ left: `${d.x}%`, top: `${d.y}%`, width: d.s, height: d.s, '--tw-dl': `${d.dl}s` } as React.CSSProperties} />
+      ))}
 
       <div className="fph-planet-wrap" aria-hidden="true">
+        {/* 大爆炸：诞生瞬间的爆环与抛射 */}
+        <i className="fph-bang-burst" />
+        <i className="fph-bang-ring" />
+        {shards.map((sh) => (
+          <i key={sh.id} className={`fph-shard${sh.warm ? ' warm' : ''}`} style={{ left: `${sh.x}%`, top: `${sh.y}%`, width: sh.len, transform: `rotate(${sh.rot}deg)`, animationDelay: `${sh.dl}s` } as React.CSSProperties} />
+        ))}
+        {/* 立体悬浮星球 */}
         <div className="fph-planet">
-          <i className="seed" />
-          <i className="swell s1" /><i className="swell s2" /><i className="swell s3" />
-          <i className="arm a1" /><i className="arm a2" />
+          <i className="surf" />
           {specks.map((sp) => (
             <i key={sp.id} className={`speck${sp.warm ? ' warm' : ''}`} style={{ left: `${sp.x}%`, top: `${sp.y}%`, width: sp.s, height: sp.s, '--tw-d': `${sp.d}s`, '--tw-dl': `${sp.dl}s` } as React.CSSProperties} />
           ))}
-          {debris.map((db) => (
-            <i key={db.id} className="debris" style={{ left: `${db.x}%`, top: `${db.y}%`, width: db.s, height: db.s, '--tw-d': `${db.d}s`, '--tw-dl': `${db.dl}s` } as React.CSSProperties} />
-          ))}
-          <i className="halo" />
+          <i className="shade" />
+          <i className="atmo" />
         </div>
         <div className="fph-planet-reflection" />
       </div>
diff --git a/build/mother-brain-desktop-app-phase4-20260825/source/hololake-native-desktop/src/modules/first-planet-home/first-planet-home.css b/build/mother-brain-desktop-app-phase4-20260825/source/hololake-native-desktop/src/modules/first-planet-home/first-planet-home.css
index eef1004f1..44bb451e8 100644
--- a/build/mother-brain-desktop-app-phase4-20260825/source/hololake-native-desktop/src/modules/first-planet-home/first-planet-home.css
+++ b/build/mother-brain-desktop-app-phase4-20260825/source/hololake-native-desktop/src/modules/first-planet-home/first-planet-home.css
@@ -1,5 +1,6 @@
-/* 第一语言星球首页 v2 —— 光的种子：黑暗中涌出，蔓延，像太阳照亮 */
-/* 复用 design-tokens 三层令牌（5主题=星球的性格颜色，自动生效） */
+/* 第一语言星球首页 v3 —— 立体悬浮星球：大爆炸中诞生，周围是等待开拓的黯淡星群 */
+/* 轻量纯 CSS（球体三要素：高光偏移/暗面内阴影/纹理滚动），无依赖 */
+/* 复用 design-tokens 三层令牌（5主题=星球的性格颜色） */
 
 .fph-root {
   position: fixed; inset: 0; overflow: hidden;
@@ -11,7 +12,7 @@
 }
 .fph-starfield { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--primitive-scene-opacity, 0.8); }
 
-/* 湖面：语言组成的湖，低透明度字符涟漪 */
+/* 湖面：语言组成的湖 */
 .fph-lake {
   position: absolute; left: 0; right: 0; bottom: 0; height: 26%; overflow: hidden;
   background:
@@ -24,146 +25,164 @@
   white-space: nowrap; text-align: center;
   font-size: 11px; letter-spacing: 1.1em; text-indent: 1.1em;
   color: color-mix(in srgb, var(--primitive-cool-glow) 34%, transparent);
-  filter: blur(0.6px);
-  opacity: .5;
+  filter: blur(0.6px); opacity: .5;
   animation: fph-lake-drift 26s linear infinite;
 }
 @keyframes fph-lake-drift { from { transform: translateX(3%); } to { transform: translateX(-3%); } }
 
-/* 暗星球：大爆炸废墟里等待被点亮的，各带一粒火种 */
-.fph-dark-planet {
+/* ── 黯淡星球群：无光、仅 rim、等待被开拓 ── */
+.fph-dim {
   position: absolute; border-radius: 50%;
-  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--primitive-text-faint) 30%, transparent), color-mix(in srgb, var(--primitive-bg-d) 92%, transparent) 62%);
-  box-shadow: inset -6px -8px 18px color-mix(in srgb, var(--primitive-bg-d) 88%, transparent), 0 0 22px color-mix(in srgb, var(--primitive-nebula-b) 60%, transparent);
-  transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity 1.1s;
-}
-.fph-dark-planet::after {
-  content: ''; position: absolute; left: 26%; top: 22%; width: 3px; height: 3px; border-radius: 50%;
-  background: var(--primitive-warm-glow);
-  box-shadow: 0 0 8px var(--primitive-warm-glow), 0 0 16px color-mix(in srgb, var(--primitive-warm-glow) 50%, transparent);
-  animation: fph-spark 4.5s ease-in-out infinite;
-}
-.fph-dark-planet.d1 { width: 46px; height: 46px; left: 16%; top: 30%; }
-.fph-dark-planet.d2 { width: 30px; height: 30px; right: 20%; top: 24%; }
-.fph-dark-planet.d2::after { animation-delay: -1.6s; }
-.fph-dark-planet.d3 { width: 20px; height: 20px; right: 12%; top: 47%; }
-.fph-dark-planet.d3::after { animation-delay: -3.1s; }
-@keyframes fph-spark { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
-.stage-world .fph-dark-planet { opacity: .5; transform: translateY(-14px); }
-
-/* ── 第一语言星球 v2：光的种子从中心涌出 ── */
-.fph-planet-wrap {
-  position: absolute; left: 50%; top: 44%;
-  transform: translate(-50%, -50%);
-  transition: top 1.1s cubic-bezier(.2,.8,.2,1), transform 1.1s cubic-bezier(.2,.8,.2,1);
-}
-.stage-world .fph-planet-wrap { top: 21%; transform: translate(-50%, -50%) scale(.42); }
-
-.fph-planet {
-  position: relative; width: min(300px, 46vw); aspect-ratio: 1; border-radius: 50%;
-  /* 球体：中心亮核向外涌光，边缘沉入深蓝 */
-  background:
-    radial-gradient(circle at 50% 50%,
-      color-mix(in srgb, var(--primitive-star-bright) 96%, transparent) 0 6%,
-      color-mix(in srgb, var(--primitive-warm-glow) 72%, transparent) 14%,
-      color-mix(in srgb, var(--primitive-cool-glow) 52%, transparent) 30%,
-      color-mix(in srgb, var(--primitive-nebula-a) 66%, transparent) 52%,
-      color-mix(in srgb, var(--primitive-bg-c) 92%, transparent) 78%,
-      color-mix(in srgb, var(--primitive-bg-d) 96%, transparent) 100%);
+  background: radial-gradient(circle at 36% 32%,
+    color-mix(in srgb, var(--primitive-text-faint) 30%, transparent) 0 18%,
+    color-mix(in srgb, var(--primitive-bg-b) 92%, transparent) 58%,
+    color-mix(in srgb, var(--primitive-bg-c) 96%, transparent) 100%);
   box-shadow:
-    0 0 46px color-mix(in srgb, var(--primitive-warm-glow) 30%, transparent),
-    0 0 110px color-mix(in srgb, var(--primitive-cool-glow) 40%, transparent),
-    0 0 220px color-mix(in srgb, var(--primitive-nebula-a) 80%, transparent),
-    inset -18px -26px 60px color-mix(in srgb, var(--primitive-bg-d) 72%, transparent);
-  animation: fph-breathe 7s ease-in-out infinite, fph-glowpulse 7s ease-in-out infinite;
+    inset -3px -4px 8px color-mix(in srgb, var(--primitive-bg-d) 90%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--primitive-glass-edge) 52%, transparent),
+    0 0 14px color-mix(in srgb, var(--primitive-nebula-a) 40%, transparent);
+  opacity: .95;
 }
-@keyframes fph-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
-@keyframes fph-glowpulse {
-  0%,100% { filter: brightness(1); }
-  50% { filter: brightness(1.22); }
+.fph-dim.spark::after {
+  content: ''; position: absolute; left: 30%; top: 26%; width: 3px; height: 3px; border-radius: 50%;
+  background: var(--primitive-warm-glow);
+  box-shadow: 0 0 8px var(--primitive-warm-glow);
+  animation: fph-spark 4.5s ease-in-out infinite;
+  animation-delay: var(--tw-dl, 0s);
 }
+@keyframes fph-spark { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
 
-/* 种子：近乎白的亮核 */
-.fph-planet .seed {
-  position: absolute; left: 50%; top: 50%; width: 16%; height: 16%;
-  transform: translate(-50%,-50%);
-  border-radius: 50%;
-  background: radial-gradient(circle, #fffdf4 0 18%, var(--primitive-star-bright) 42%, color-mix(in srgb, var(--primitive-warm-glow) 66%, transparent) 68%, transparent 78%);
-  filter: blur(0.5px);
-  box-shadow: 0 0 26px var(--primitive-warm-glow), 0 0 70px color-mix(in srgb, var(--primitive-warm-glow) 55%, transparent);
+/* ── 悬浮容器：上下浮动，像真的悬在宇宙里 ── */
+.fph-planet-wrap {
+  position: absolute; left: 50%; top: 42%;
+  width: min(300px, 46vw); aspect-ratio: 1;
+  transform: translate(-50%, -50%);
+  animation: fph-float 9s ease-in-out infinite;
+  transition: top 1.1s cubic-bezier(.2,.8,.2,1), width 1.1s cubic-bezier(.2,.8,.2,1);
 }
+@keyframes fph-float {
+  0%, 100% { margin-top: 0; }
+  50% { margin-top: -14px; }
+}
+.stage-world .fph-planet-wrap { top: 20%; width: min(130px, 22vw); }
 
-/* 涌光：从种子向外扩散的三层光晕 */
-.fph-planet .swell {
-  position: absolute; left: 50%; top: 50%; border-radius: 50%;
-  transform: translate(-50%,-50%);
-  border: 1px solid transparent;
+/* ── 大爆炸：诞生瞬间 ── */
+.fph-bang-burst {
+  position: absolute; inset: -34%; border-radius: 50%;
+  background: conic-gradient(from 10deg,
+    transparent 0 4%, color-mix(in srgb, var(--primitive-warm-glow) 22%, transparent) 6%, transparent 9%,
+    transparent 0 16%, color-mix(in srgb, var(--primitive-cool-glow) 18%, transparent) 18%, transparent 21%,
+    transparent 0 30%, color-mix(in srgb, var(--primitive-warm-glow) 16%, transparent) 32%, transparent 35%,
+    transparent 0 46%, color-mix(in srgb, var(--primitive-cool-glow) 15%, transparent) 48%, transparent 51%,
+    transparent 0 62%, color-mix(in srgb, var(--primitive-warm-glow) 20%, transparent) 64%, transparent 67%,
+    transparent 0 78%, color-mix(in srgb, var(--primitive-cool-glow) 16%, transparent) 80%, transparent 83%,
+    transparent 0 92%, color-mix(in srgb, var(--primitive-warm-glow) 14%, transparent) 94%, transparent 97%,
+    transparent 100%);
+  filter: blur(5px);
+  opacity: .55;
+  animation: fph-bang-pulse 6s ease-in-out infinite;
 }
-.fph-planet .s1 { width: 34%; height: 34%; border-color: color-mix(in srgb, var(--primitive-warm-glow) 46%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--primitive-warm-glow) 30%, transparent); opacity: .8; }
-.fph-planet .s2 { width: 56%; height: 56%; border-color: color-mix(in srgb, var(--primitive-cool-glow) 38%, transparent); opacity: .6; }
-.fph-planet .s3 { width: 80%; height: 80%; border-color: color-mix(in srgb, var(--primitive-cool-glow) 24%, transparent); opacity: .4; }
+.fph-bang-ring {
+  position: absolute; inset: -18%; border-radius: 50%;
+  border: 1px solid color-mix(in srgb, var(--primitive-warm-glow) 30%, transparent);
+  box-shadow: 0 0 30px color-mix(in srgb, var(--primitive-warm-glow) 16%, transparent);
+  opacity: .5;
+  animation: fph-ring 6s ease-out infinite;
+}
+@keyframes fph-ring {
+  0% { transform: scale(.86); opacity: .55; }
+  70% { transform: scale(1.12); opacity: .12; }
+  100% { transform: scale(1.12); opacity: 0; }
+}
+@keyframes fph-bang-pulse { 0%,100% { opacity: .4; } 50% { opacity: .65; } }
+.fph-shard {
+  position: absolute; height: 1.5px; border-radius: 2px;
+  background: linear-gradient(90deg, color-mix(in srgb, var(--primitive-cool-glow) 70%, transparent), transparent);
+  opacity: .5;
+  animation: fph-spark 5s ease-in-out infinite;
+}
+.fph-shard.warm { background: linear-gradient(90deg, color-mix(in srgb, var(--primitive-warm-glow) 70%, transparent), transparent); }
+.stage-world .fph-bang-burst, .stage-world .fph-bang-ring, .stage-world .fph-shard { opacity: .18; }
 
-/* 旋臂：星系感的发光弧（光蔓延的轨迹） */
-.fph-planet .arm {
-  position: absolute; border-radius: 50%;
-  border: 2.5px solid transparent;
-  filter: blur(1.2px);
+/* ── 立体球体：高光偏移 + 表面纹理 + 明暗交界 + 大气 rim ── */
+.fph-planet {
+  position: absolute; inset: 0; border-radius: 50%;
+  /* 球体基底：光源在左上 */
+  background: radial-gradient(circle at 33% 30%,
+    color-mix(in srgb, var(--primitive-star-bright) 70%, var(--primitive-cool-glow)) 0 4%,
+    color-mix(in srgb, var(--primitive-cool-glow) 70%, var(--primitive-bg-b)) 18%,
+    color-mix(in srgb, var(--primitive-nebula-a) 88%, var(--primitive-bg-b)) 42%,
+    color-mix(in srgb, var(--primitive-bg-b) 96%, transparent) 68%,
+    color-mix(in srgb, var(--primitive-bg-c) 98%, transparent) 100%);
+  box-shadow:
+    inset -30px -26px 56px color-mix(in srgb, var(--primitive-bg-d) 92%, transparent),
+    inset -12px -10px 26px color-mix(in srgb, var(--primitive-bg-d) 60%, transparent),
+    inset 8px 8px 22px color-mix(in srgb, var(--primitive-star-bright) 10%, transparent),
+    0 0 34px color-mix(in srgb, var(--primitive-cool-glow) 22%, transparent),
+    0 24px 60px color-mix(in srgb, var(--primitive-shadow) 60%, transparent);
+  animation: fph-breathe 8s ease-in-out infinite;
 }
-.fph-planet .a1 {
-  inset: 12%;
-  border-top-color: color-mix(in srgb, var(--primitive-warm-glow) 82%, transparent);
-  border-right-color: color-mix(in srgb, var(--primitive-warm-glow) 30%, transparent);
-  box-shadow: 0 0 14px color-mix(in srgb, var(--primitive-warm-glow) 34%, transparent);
-  animation: fph-spin 30s linear infinite;
-}
-.fph-planet .a2 {
-  inset: 26%;
-  border-bottom-color: color-mix(in srgb, var(--primitive-cool-glow) 74%, transparent);
-  border-left-color: color-mix(in srgb, var(--primitive-cool-glow) 26%, transparent);
-  box-shadow: 0 0 12px color-mix(in srgb, var(--primitive-cool-glow) 30%, transparent);
-  animation: fph-spin 19s linear infinite reverse;
-}
-@keyframes fph-spin { to { transform: rotate(360deg); } }
+@keyframes fph-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.015); } }
 
-/* 球面星点：种子蔓延出的星群，冷暖交织呼吸 */
+/* 表面纹理：云带+陆块，慢速平移=自转错觉；球形遮罩让边缘收窄 */
+.fph-planet .surf {
+  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
+  background:
+    repeating-linear-gradient(100deg,
+      transparent 0 26px,
+      color-mix(in srgb, var(--primitive-glass-top) 9%, transparent) 26px 34px,
+      transparent 34px 60px,
+      color-mix(in srgb, var(--primitive-nebula-a) 26%, transparent) 60px 74px,
+      transparent 74px 108px),
+    repeating-radial-gradient(circle at 40% 60%,
+      transparent 0 18px,
+      color-mix(in srgb, var(--primitive-cool-glow) 12%, transparent) 18px 24px,
+      transparent 24px 44px);
+  opacity: .6;
+  -webkit-mask: radial-gradient(circle at 42% 38%, #000 30%, color-mix(in srgb, #000 55%, transparent) 62%, transparent 78%);
+  mask: radial-gradient(circle at 42% 38%, #000 30%, color-mix(in srgb, #000 55%, transparent) 62%, transparent 78%);
+  animation: fph-surf-pan 80s linear infinite;
+}
+@keyframes fph-surf-pan { from { background-position: 0 0, 0 0; } to { background-position: 240px 0, -160px 0; } }
+
+/* 球面光点：文明/星群微光，只落在受光面 */
 .fph-planet .speck {
   position: absolute; border-radius: 50%;
-  background: color-mix(in srgb, var(--primitive-cool-glow) 88%, #fff);
-  box-shadow: 0 0 6px color-mix(in srgb, var(--primitive-cool-glow) 60%, transparent);
+  background: color-mix(in srgb, var(--primitive-star-bright) 80%, #fff);
+  box-shadow: 0 0 5px color-mix(in srgb, var(--primitive-warm-glow) 55%, transparent);
   animation: fph-twinkle var(--tw-d, 3s) ease-in-out infinite;
   animation-delay: var(--tw-dl, 0s);
 }
-.fph-planet .speck.warm {
-  background: var(--primitive-star-bright);
-  box-shadow: 0 0 7px color-mix(in srgb, var(--primitive-warm-glow) 70%, transparent);
-}
-@keyframes fph-twinkle { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
+.fph-planet .speck.warm { background: var(--primitive-star-bright); }
+@keyframes fph-twinkle { 0%,100% { opacity: .3; } 50% { opacity: .95; } }
 
-/* 废墟：大爆炸留下的碎光，漂在星球外圈 */
-.fph-planet .debris {
-  position: absolute; border-radius: 50%;
-  background: color-mix(in srgb, var(--primitive-text-faint) 60%, transparent);
-  box-shadow: 0 0 5px color-mix(in srgb, var(--primitive-nebula-a) 80%, transparent);
-  opacity: .5;
-  animation: fph-twinkle var(--tw-d, 4s) ease-in-out infinite;
-  animation-delay: var(--tw-dl, 0s);
+/* 明暗交界：从受光点向外的球面暗化 */
+.fph-planet .shade {
+  position: absolute; inset: 0; border-radius: 50%;
+  background: radial-gradient(circle at 33% 30%,
+    transparent 34%,
+    color-mix(in srgb, var(--primitive-bg-d) 34%, transparent) 58%,
+    color-mix(in srgb, var(--primitive-bg-d) 78%, transparent) 80%,
+    color-mix(in srgb, var(--primitive-bg-d) 96%, transparent) 96%);
 }
 
-/* 外晕：星球的光漫进宇宙 */
-.fph-planet .halo {
-  position: absolute; inset: -16%; border-radius: 50%;
-  border: 1px solid color-mix(in srgb, var(--primitive-cool-glow) 36%, transparent);
-  box-shadow: 0 0 40px color-mix(in srgb, var(--primitive-cool-glow) 22%, transparent);
-  opacity: .55;
-  animation: fph-halo 7s ease-in-out infinite;
+/* 大气 rim：受光缘一线亮 + 外溢大气 */
+.fph-planet .atmo {
+  position: absolute; inset: 0; border-radius: 50%;
+  box-shadow:
+    inset 1.5px 1.5px 3px color-mix(in srgb, var(--primitive-star-bright) 40%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--primitive-cool-glow) 26%, transparent),
+    0 0 18px color-mix(in srgb, var(--primitive-cool-glow) 26%, transparent);
 }
-@keyframes fph-halo { 0%,100% { transform: scale(1); opacity: .45; } 50% { transform: scale(1.05); opacity: .7; } }
 
+/* 湖中倒影 */
 .fph-planet-reflection {
-  position: absolute; left: 50%; top: calc(100% + 8px); width: 68%; height: 50%;
+  position: absolute; left: 50%; top: calc(100% + 26px); width: 70%; height: 42%;
   transform: translateX(-50%) scaleY(-1);
-  background: radial-gradient(50% 60% at 50% 0%, color-mix(in srgb, var(--primitive-warm-glow) 26%, transparent), color-mix(in srgb, var(--primitive-cool-glow) 18%, transparent) 42%, transparent 72%);
-  filter: blur(6px); opacity: .55;
+  background: radial-gradient(50% 60% at 50% 0%,
+    color-mix(in srgb, var(--primitive-cool-glow) 22%, transparent),
+    color-mix(in srgb, var(--primitive-nebula-a) 14%, transparent) 44%, transparent 72%);
+  filter: blur(7px); opacity: .5;
 }
 
 /* 首屏：编号门 */
@@ -175,7 +194,7 @@
 .fph-brand b { font-size: 20px; letter-spacing: .34em; color: var(--content-primary); }
 .fph-brand span { font-size: 13px; letter-spacing: .3em; color: var(--content-secondary); }
 .fph-brand em { font-style: normal; font-size: 11px; letter-spacing: .42em; color: var(--content-muted); }
-.fph-claim { position: absolute; top: 58%; left: 0; right: 0; margin: 0; display: grid; gap: 3px; }
+.fph-claim { position: absolute; top: 60%; left: 0; right: 0; margin: 0; display: grid; gap: 3px; }
 .fph-claim i { font-style: normal; font-size: 10.5px; letter-spacing: .3em; color: var(--content-faint); }
 .fph-claim strong { font-size: 12px; letter-spacing: .22em; color: var(--content-muted); }
 .fph-title { margin: 0; font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: .12em; color: var(--content-primary); }
@@ -190,15 +209,13 @@
 }
 .fph-gatebox input {
   flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
-  color: var(--content-primary); font-size: 15px; letter-spacing: .08em;
-  font-family: inherit;
+  color: var(--content-primary); font-size: 15px; letter-spacing: .08em; font-family: inherit;
 }
 .fph-gatebox input::placeholder { color: var(--content-faint); letter-spacing: .04em; }
 .fph-inf {
   width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
   border: 1px solid var(--primitive-glass-edge); background: var(--primitive-glass);
-  color: var(--content-muted); font-size: 18px; line-height: 1;
-  transition: all .25s ease;
+  color: var(--content-muted); font-size: 18px; line-height: 1; transition: all .25s ease;
 }
 .fph-inf.lit {
   color: var(--primitive-star-bright);
@@ -210,8 +227,7 @@
   height: 40px; padding: 0 18px; border-radius: 10px; border: 0; cursor: pointer;
   background: var(--button-primary-bg); color: var(--button-primary-text);
   font-weight: 700; letter-spacing: .1em; font-family: inherit;
-  box-shadow: var(--button-primary-shadow);
-  transition: opacity .2s ease, transform .2s ease;
+  box-shadow: var(--button-primary-shadow); transition: opacity .2s ease;
 }
 .fph-enter:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
 .fph-gate-msg { margin: 0; min-height: 18px; font-size: 12px; letter-spacing: .1em; color: var(--content-muted); }
@@ -224,15 +240,12 @@
   animation: fph-world-in .9s ease both;
 }
 @keyframes fph-world-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
-.fph-world-head { text-align: center; display: grid; gap: 8px; margin-top: 9vh; }
+.fph-world-head { text-align: center; display: grid; gap: 8px; margin-top: 7vh; }
 .fph-world-kicker { font-size: 11px; letter-spacing: .34em; color: var(--accent-light); }
 .fph-world-head h1 { margin: 0; font-size: clamp(24px, 3vw, 36px); letter-spacing: .14em; color: var(--content-primary); }
 .fph-world-head p { margin: 0; font-size: 13px; letter-spacing: .1em; color: var(--content-muted); }
 .fph-world-head b { color: var(--content-secondary); letter-spacing: .12em; }
-.fph-pools {
-  display: grid; grid-template-columns: repeat(3, minmax(180px, 240px)); gap: 16px;
-  justify-content: center;
-}
+.fph-pools { display: grid; grid-template-columns: repeat(3, minmax(180px, 240px)); gap: 16px; justify-content: center; }
 .fph-pool {
   position: relative; display: grid; gap: 6px; justify-items: start; text-align: left;
   padding: 18px 18px 16px; border-radius: 16px; cursor: pointer;
@@ -240,7 +253,7 @@
   background: color-mix(in srgb, var(--primitive-glass) 72%, transparent);
   backdrop-filter: blur(14px);
   color: inherit; font-family: inherit;
-  transition: transform .25s ease, border-color .25s ease, background .25s ease;
+  transition: transform .25s ease, border-color .25s ease;
 }
 .fph-pool:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primitive-cool-glow) 46%, var(--primitive-glass-edge)); }
 .fph-pool .pool-light {