#screen-home {
    background: #1B1630 url("./assets/game/ui/game-bg.webp") center / cover no-repeat;
  }
  .space {
    position: relative;
    flex: 1;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
  }
  .space.dragging { cursor: grabbing; }
  .space::before {
    content: "";
    position: absolute;
    left: 50%; top: var(--planet-y, 76%);
    width: min(150vw, 620px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 214, 140, .16), rgba(255, 190, 110, .05) 42%, transparent 66%);
    pointer-events: none;
    z-index: 0;
  }
  .starfield {
    position: absolute; inset: -20% 0;
  }
  .starfield.far {
    background-image:
      radial-gradient(1.5px 1.5px at 26px 36px, rgba(255,255,255,.62) 50%, transparent 51%),
      radial-gradient(1px 1px at 84px 118px, rgba(255,255,255,.4) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 148px 62px, rgba(255,255,255,.55) 50%, transparent 51%),
      radial-gradient(1px 1px at 196px 154px, rgba(255,255,255,.34) 50%, transparent 51%),
      radial-gradient(2px 2px at 232px 210px, rgba(255,255,255,.5) 50%, transparent 51%),
      radial-gradient(1px 1px at 274px 92px, rgba(255,255,255,.42) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 118px 252px, rgba(255,255,255,.3) 50%, transparent 51%),
      radial-gradient(1px 1px at 60px 288px, rgba(255,255,255,.36) 50%, transparent 51%);
    background-size: 300px 300px;
  }
  .starfield.near {
    background-image:
      radial-gradient(2px 2px at 54px 96px, rgba(255,255,255,.72) 50%, transparent 51%),
      radial-gradient(2.5px 2.5px at 186px 52px, rgba(255,255,255,.48) 50%, transparent 51%),
      radial-gradient(1.8px 1.8px at 292px 148px, rgba(255,255,255,.55) 50%, transparent 51%),
      radial-gradient(2.2px 2.2px at 118px 268px, rgba(255,255,255,.42) 50%, transparent 51%),
      radial-gradient(1.6px 1.6px at 348px 236px, rgba(255,255,255,.36) 50%, transparent 51%);
    background-size: 400px 400px;
  }

  .space-dust {
    position: absolute; inset: 0;
    pointer-events: none;
    will-change: transform;       /* 视差只改这一层容器的 transform */
  }
  .space-dust.far  { z-index: 1; }
  .space-dust.mid  { z-index: 2; }
  .space-dust.near { z-index: 3; }
  .space-dust .star {
    position: absolute;
    transform: translate(-50%, -50%);
    will-change: transform;
    animation: starDrift var(--drift-dur, 26s) ease-in-out var(--drift-delay, 0s) infinite;
  }
  .space-dust .star .core {
    display: block;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF9E8 0 30%, rgba(255, 238, 190, .72) 56%, rgba(255, 230, 170, 0) 100%);
    animation: starTwinkle var(--tw-dur, 4s) ease-in-out var(--tw-delay, 0s) infinite;
    will-change: transform, opacity;
  }
  .space-dust.far .core { filter: drop-shadow(0 0 2px rgba(255, 240, 200, .45)); }
  .space-dust.mid .core { filter: drop-shadow(0 0 4px rgba(255, 238, 190, .55)); }
  .space-dust.near .core {
    border-radius: 0;
    background: radial-gradient(circle, #FFFEF8 0 18%, rgba(255, 244, 206, .7) 40%, rgba(255, 226, 160, 0) 76%);
    clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
    filter: drop-shadow(0 0 8px rgba(255, 224, 150, .5));
  }
  @keyframes starDrift {
    0%, 100% { transform: translate(-50%, -50%) translate3d(calc(var(--dx, 6px) * -1), calc(var(--dy, 6px) * -1), 0); }
    50%      { transform: translate(-50%, -50%) translate3d(var(--dx, 6px), var(--dy, 6px), 0); }
  }
  @keyframes starTwinkle {
    0%, 100% { opacity: var(--op-min, .3); transform: scale(var(--sc-min, .8)); }
    50%      { opacity: var(--op-max, 1);   transform: scale(var(--sc-max, 1.1)); }
  }
  .world {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 0;
  }

  .ship-fixed {
    position: absolute;
    left: 50%; top: var(--ship-top, 30%);
    width: var(--ship-w, clamp(120px, 68vw, 300px));   /* 首帧兜底：与星球页统一的 68% 屏宽 */
    transform: translate(-50%, -50%);
    z-index: 200;                    /* 永远压在星球之上 */
    pointer-events: none;
    animation: hover 2.6s ease-in-out infinite;   /* 稳定上下起伏：±8px，峰峰 16px */
    will-change: transform;
  }
  @keyframes hover {
    0%, 100% { transform: translate(-50%, calc(-50% + 8px)); }
    50%      { transform: translate(-50%, calc(-50% - 8px)); }
  }
  .ship-fixed.operating { animation-play-state: paused; }
  .ship-fixed.flying { animation: none; }
  /* 星域的两团推进器火焰：停稳 / 回位时保持短焰，拖动时只有拖在身后那侧拉长，起飞时两侧拉满。
   * 尺寸与圆头直接复用星球内的 .jet（宽 7.5% / 高 22% / 正圆焰头，唯一来源），
   * 这里只覆盖接入位置与可用长度：
   * - 去掉旧的 clip-path 梯形裁切（它把焰头切成直边斜角、底部留一条平口）；
   * - 旧的固定高度 --jet-h 改为 max-height 仅作安全上限，由 layoutSpace 按
   *   「船底 ↔ 星球顶留白 − 34px」写入，满火时尖端仍留在星球顶上方；
   * - 顶边必须埋进船体：ship-body.webp 在两团火焰所在的 x 带
   *   （22–29.5% / 70.5–78%，与星球页同一 x 带）不透明底边在 96.3%，
   *   所以顶边取 96% —— 与船底留 0.3% 高度（约 0.7–0.9px）的重叠，
   *   火焰从船体后面钻出来，既不会有可见缝隙，也不会露出硬切边。 */
  .ship-fixed .jet {
    top: 96%;
    max-height: var(--jet-h, 64px);
    z-index: 1;
    /* 方向性伸缩 / 松手收回用短过渡，避免逐帧改值时跳变；
     * 只作用在星域（.ship-fixed），星球页的 .jet 不受影响 */
    transition: transform .16s ease-out, opacity .16s ease-out;
  }
  /* 星域的倾角比星球页小：顶边埋进船底只有约 1px，±9° 会让外侧角翘出 3px 露出缺口，
   * 收窄到 ±3°（角部起伏 ≈1px）后整条顶边都在船体后面。
   * 左右位置直接沿用 .jet-l / .jet-r（22% / 70.5%，与星球页关于船体中轴同一镜像口径） */
  .ship-fixed .jet-l { --tilt: 3deg; }
  .ship-fixed .jet-r { --tilt: -3deg; }

  .planet-node {
    position: absolute;
    left: 0; top: 0;
    transform-origin: 50% 50%;
    display: block;
    margin: 0; padding: 0;
    background: none; border: 0;
    cursor: pointer;
    color: #FFF2DE;
    -webkit-tap-highlight-color: transparent;
    will-change: transform, opacity;
  }
  .planet-node .p-disc {
    position: relative;
    display: block;
    width: 100%; height: 100%;
    transform: rotate(var(--spin, 0deg));
    transform-origin: 50% 50%;
    /* 按压缩放用独立的 scale 属性（不与旋转 / 上下浮动的 transform 抢同一属性）：
     * 作用在 .p-disc 上，盘面、景物、羊、catched! 作为整体同比例缩放，缩放中心一致；
     * 时间曲线与原来的 .disc 按压一致（.18s ease），按下与回弹同速。 */
    scale: 1;
    transition: scale .18s ease;
  }
  .planet-node .disc {
    display: block;
    width: 100%; height: 100%;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 10px 22px rgba(20, 8, 30, .45));
    transition: filter .18s ease;
  }
  /* 按压时整盘（盘面 + 景物 + 羊 + catched!）一起缩到 96%，见 .p-disc 的 scale */
  .planet-node:active .p-disc { scale: .96; }
  /* 素材缺失时的兜底（正常不会出现） */
  .planet-node .disc.fallback {
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #FFB25C, #C9622E 72%);
  }

  .planet-node .p-spots {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 1;
  }
  .planet-node .p-spot {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    will-change: transform;
    animation: pSpotFloat var(--float-dur, 3.4s) ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
    filter: drop-shadow(0 2px 4px rgba(20, 8, 30, .35));
  }
  @keyframes pSpotFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) scale(1); }
    50%      { transform: translate(-50%, -50%) translateY(-3px) scale(1.035); }
  }

  .planet-node .p-sheep {
    position: absolute;
    left: 50%; top: 50%;
    width: 73.33%;                     /* 44% ÷ 0.818，scale 后可视宽度 = 盘径 60% */
    padding: 0;                        /* 覆盖 .sheep 的 10px 内边距（星球页贴地用） */
    z-index: 2;
    transform: translate(-50%, -50%) scale(.818);
    transform-origin: 50% 50%;
    opacity: 0;
    transition: opacity .22s ease;
    pointer-events: none;
    cursor: default;
  }
  /* 中心星与左右两侧（.near，±1.5 步）凡已抓到羊都显示：
   * 羊是 .p-disc 的子元素，跟着盘面的 --spin 与节点缩放走，位置/朝向与该星盘面天然一致 */
  .planet-node.near .p-sheep { opacity: 1; }
  .planet-node .p-sheep img {
    display: block;
    width: 100%; height: auto;
    transform-origin: 50% 100%;
    filter: drop-shadow(0 3px 6px rgba(20, 8, 30, .45));
    will-change: transform;
    animation-play-state: paused;
  }
  .planet-node.current.live .p-sheep img { animation-play-state: running; }

  /* catched!：已捕获星球在羊下方居中显示。
   * 文案是独立节点，不挂在羊的动画容器里 —— 羊跳跃时文字不动；
   * 颜色 --ink 由 home.js 从 SHEEP_INK（对应 assets/sheep/N.webp 的采样主色）写入，
   * 浅色主色靠四周深色描边 + 投影提对比，色相保持不变。 */
  .planet-node .p-got {
    position: absolute;
    left: 50%; top: 75%;
    transform: translateX(-50%);
    font-family: var(--font-dialog);
    font-weight: var(--weight-dialog);
    font-size: clamp(10px, 2.8vw, 12px);
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
    color: var(--ink, #FFF2DE);
    text-shadow:
      0 1px 0 rgba(26, 14, 10, .8), 0 -1px 0 rgba(26, 14, 10, .8),
      1px 0 0 rgba(26, 14, 10, .8), -1px 0 0 rgba(26, 14, 10, .8),
      0 2px 5px rgba(14, 6, 20, .65);
    opacity: 0;
    transition: opacity .22s ease;
    pointer-events: none;
    z-index: 3;
  }
  .planet-node.current .p-got { opacity: 1; }

  /* 星球名挂在圆盘下方，绝对定位不占节点高度（节点中心 = 圆盘中心） */
  .planet-node .p-label {
    position: absolute;
    left: 50%; top: 100%;
    transform: translate(-50%, 7px);
    font-size: 12px; letter-spacing: .04em; white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0,0,0,.7);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
  }
  .planet-node.near .p-label { opacity: .88; }
  .planet-node.current .p-label { opacity: 1; color: #FFE7B0; }
  .planet-node.current .p-disc {
    animation: homeBob 3s ease-in-out infinite;
  }
  @keyframes homeBob {
    0%, 100% { transform: rotate(var(--spin, 0deg)) translateY(0); }
    50%      { transform: rotate(var(--spin, 0deg)) translateY(-3px); }
  }

  .planet-node.hidden-planet .disc {
    filter: drop-shadow(0 0 18px rgba(255, 214, 120, .55)) drop-shadow(0 10px 22px rgba(20, 8, 30, .45));
  }
  .planet-node.hidden-planet .p-disc::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: calc(100% + 18px);
    height: calc(100% + 18px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid rgba(255, 224, 150, .55);
    box-shadow: 0 0 26px rgba(255, 205, 110, .35), inset 0 0 18px rgba(255, 210, 120, .25);
    pointer-events: none;
    animation: hiddenRing 3.2s ease-in-out infinite;
  }
  @keyframes hiddenRing {
    0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.98); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
  }

  .space::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 90px;
    background: linear-gradient(to top, rgba(27,22,48,.28), rgba(27,22,48,0));
    pointer-events: none;
    z-index: 4;
  }

  @media (prefers-reduced-motion: reduce) {
    .planet-node.hidden-planet .p-disc::after { animation: none; opacity: .8; }
    .planet-node.current .p-disc { animation: none; }
    .planet-node .p-spot { animation: none; }
    .planet-node .p-sheep img { animation: none; }
    .space-dust .star, .space-dust .star .core { animation: none; }
    .space-dust .star .core { opacity: .6; transform: none; }
    .ship-fixed { animation: none; }
    .planet-node .p-label { transition: none; }
  }