* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: #cfe3f5;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

#app {
  position: fixed; inset: 0; display: block;
  touch-action: none; /* canvas handles all gestures */
}

/* ---------- 标签 ---------- */
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.body-label {
  position: absolute; top: 0; left: 0;
  transform: translate(-200px, -200px);
  pointer-events: auto;
  cursor: pointer;
  font-size: 12px;
  color: rgba(190, 215, 240, 0.85);
  text-shadow: 0 0 4px #000, 0 0 2px #000;
  padding: 2px 6px;
  white-space: nowrap;
  translate: 6px -50%;
  touch-action: manipulation;
}
.body-label .ld { margin-left: 6px; opacity: 0.6; font-size: 11px; }
.body-label.label-moon { font-size: 11px; color: rgba(160, 185, 210, 0.75); }
.body-label.label-poi { color: rgba(255, 200, 130, 0.85); }
.body-label.label-star { font-size: 10px; color: rgba(150, 165, 195, 0.6); pointer-events: none; }
.body-label.label-star .ld { font-size: 9px; }
#labels.daysky .label-star { display: none !important; }
#labels.daysky .label-faint { display: none !important; }
#labels.walksky .label-faint { display: none !important; } /* 行走地表：暗弱目标肉眼不可见，夜晚亦然 */
.body-label.aimed { color: #ffe9b0; }
.body-label.aimed::before { content: "▸ "; }
.body-label.selected { color: #7fd4ff; font-weight: bold; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.panel {
  position: absolute;
  background: rgba(8, 16, 28, 0.62);
  border: 1px solid rgba(110, 160, 210, 0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.7;
  backdrop-filter: blur(6px);
}
#hud-time { min-width: 240px; }
#hud-nav { bottom: 14px; left: 14px; min-width: 280px; }
#hud-target { top: 14px; right: 14px; width: 300px; }
#hud-tip {
  position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: rgba(20, 30, 10, 0.7); border: 1px solid rgba(180, 220, 120, 0.4);
  border-radius: 6px; padding: 6px 16px; font-size: 14px; color: #d8f0b0;
  pointer-events: none; max-width: min(90vw, 880px); text-align: center;
  /* 导览旁白可达 300 字：必须换行，否则会被 body{overflow:hidden} 直接裁掉 */
  white-space: normal; overflow-wrap: break-word; line-height: 1.5;
}
#crosshair {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: rgba(160, 200, 240, 0.7); font-size: 18px; font-weight: 200;
}
/* 后台高清贴图升级角标：不打扰操作，完成自动淡出 */
#hud-bgload {
  position: absolute; bottom: 12px; left: 14px;
  font-size: 11px; color: rgba(180, 210, 240, 0.55);
  pointer-events: none; transition: opacity 0.8s; letter-spacing: 0.4px;
}
/* 目录搜索框（#search-box 在 #directory 内） */
#search-box { position: relative; padding: 6px 8px; }
#search-input {
  width: 100%; box-sizing: border-box; padding: 7px 10px; font-size: 13px;
  background: rgba(20, 32, 52, 0.9); color: #dceaff; border: 1px solid rgba(120, 170, 230, 0.35);
  border-radius: 7px; outline: none;
}
#search-input:focus { border-color: rgba(140, 200, 255, 0.7); }
#search-results {
  position: absolute; left: 8px; right: 8px; top: 100%; z-index: 30;
  background: rgba(8, 14, 26, 0.97); border: 1px solid rgba(120, 170, 230, 0.35);
  border-radius: 8px; overflow: hidden; max-height: 45vh; overflow-y: auto;
}
#search-results .search-item {
  padding: 8px 10px; cursor: pointer; font-size: 13px; color: #cfe0f8;
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
}
#search-results .search-item:hover, #search-results .search-item.active { background: rgba(70, 120, 190, 0.35); }
#search-results .search-item span { opacity: 0.6; font-size: 11px; }
#search-results .search-item em { font-style: normal; opacity: 0.5; font-size: 11px; }

/* 导览控制条：底部居中，仅导览播放中显示 */
#tour-bar {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; z-index: 40;
  background: rgba(10, 18, 32, 0.82); border: 1px solid rgba(120, 170, 230, 0.35);
  border-radius: 10px; padding: 7px 12px; backdrop-filter: blur(6px);
  font-size: 13px; color: #cfe4ff; max-width: 92vw;
}
#tour-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50vw; }
#tour-bar button {
  background: rgba(60, 100, 160, 0.35); color: #d8ecff; border: 1px solid rgba(140, 190, 240, 0.35);
  border-radius: 6px; width: 30px; height: 26px; cursor: pointer; font-size: 13px; line-height: 1;
}
#tour-bar button:hover { background: rgba(90, 140, 210, 0.5); }
.big { font-size: 16px; font-weight: bold; color: #e8f4ff; }
.dim { opacity: 0.65; font-size: 12px; }
.warn { color: #ffb86b; font-size: 12px; }
.accent { color: #8fd9ff; }
.key {
  display: inline-block; border: 1px solid rgba(150, 190, 230, 0.5);
  border-radius: 3px; padding: 0 5px; font-size: 11px; margin: 0 1px;
  background: rgba(60, 90, 130, 0.3);
}
.tname { font-size: 17px; font-weight: bold; color: #fff; margin-bottom: 4px; }
.desc {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(110, 160, 210, 0.2);
  font-size: 12px; opacity: 0.85; line-height: 1.6;
}
.fact {
  margin-top: 6px; padding: 7px 9px;
  background: rgba(40, 70, 50, 0.35);
  border-left: 2px solid #8fd98f;
  border-radius: 4px;
  font-size: 12px; line-height: 1.6; color: #d4ecd4;
  pointer-events: auto;
}
.fact b { color: #a8e8a8; }
.fact-next {
  display: inline-block; margin-left: 4px; cursor: pointer;
  color: #7fd4ff; font-size: 11px; user-select: none;
  touch-action: manipulation;
}
.fact-next:hover { text-decoration: underline; }

/* ---------- 左侧列（时间框 + 目录） ---------- */
#left-col {
  position: fixed; top: 14px; left: 14px; z-index: 20;
  width: 260px; display: flex; flex-direction: column; gap: 8px;
  max-height: calc(100vh - 130px);
  pointer-events: none;
}
#left-col .panel {
  position: static;
  pointer-events: auto;
}

/* ---------- 天体目录 ---------- */
#directory {
  position: fixed; top: 110px; left: 14px; z-index: 20;
  width: 260px;
  /* 面板必须限制在视口内，#dir-body 的 overflow 才会生效（issue #58） */
  max-height: calc(100vh - 124px);
  max-height: calc(100dvh - 124px);
  background: rgba(8, 16, 28, 0.82); border: 1px solid rgba(110, 160, 210, 0.28);
  border-radius: 10px; backdrop-filter: blur(8px);
  display: flex; flex-direction: column;
  min-height: 0; pointer-events: auto;
}
#dir-body { display: none; }
#directory.open #dir-body { display: flex; flex-direction: column; }
.dir-head {
  padding: 10px 14px; font-size: 14px; font-weight: bold; color: #e8f4ff;
  border-bottom: 1px solid rgba(110, 160, 210, 0.2);
  cursor: pointer; user-select: none;
  touch-action: manipulation;
}
.dir-head:hover { background: rgba(60, 110, 170, 0.15); border-radius: 10px 10px 0 0; }
/* min-height:0：flex 子项默认 min-height:auto 会阻止收缩，导致滚动条永不出现（issue #58） */
#dir-body { overflow-y: auto; padding: 6px 8px; flex: 1; min-height: 0; touch-action: pan-y; }
#dir-body details { margin-bottom: 4px; }
#dir-body summary {
  cursor: pointer; padding: 6px 8px; font-size: 13px; color: #9fc6ea;
  border-radius: 6px; user-select: none; touch-action: manipulation;
}
#dir-body summary:hover { background: rgba(60, 110, 170, 0.25); }
.dir-parent { padding: 4px 10px 1px; font-size: 11px; color: #6f96bc; }
.dir-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 5px 10px 5px 18px; font-size: 13px; font-family: inherit;
  color: #cfe3f5; background: none; border: none; border-radius: 6px;
  touch-action: manipulation;
}
.dir-item span { opacity: 0.5; font-size: 11px; }
.dir-item:hover { background: rgba(60, 110, 170, 0.35); }
#dir-body::-webkit-scrollbar { width: 6px; }
#dir-body::-webkit-scrollbar-thumb { background: rgba(110, 160, 210, 0.3); border-radius: 3px; }

/* ---------- GitHub Star 按钮 ---------- */
#github-star {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 22px;
  padding: 8px 20px; font-size: 13px; font-family: inherit;
  color: #e6edf3; background: rgba(33, 110, 60, 0.35);
  border: 1px solid rgba(63, 185, 80, 0.4); border-radius: 20px;
  text-decoration: none; letter-spacing: 0.5px;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
  touch-action: manipulation;
}
#github-star:hover {
  background: rgba(63, 185, 80, 0.25); border-color: #3fb950;
  transform: translateY(-1px);
}
.star-icon { display: inline-block; transition: transform 0.3s ease; }
#github-star:hover .star-icon { transform: rotate(15deg) scale(1.15); }

/* ---------- 启动屏 ---------- */
#start {
  position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(ellipse at center, #0c1a2e 0%, #02050c 70%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.start-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.nebula-glow {
  position: absolute; top: 50%; left: 50%; width: 140vmax; height: 140vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(25, 70, 125, 0.22) 0%, rgba(12, 40, 80, 0.08) 40%, transparent 70%);
  animation: nebulaPulse 10s ease-in-out infinite;
}
@keyframes nebulaPulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
.star-particles {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(180, 220, 255, 0.9), transparent),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(200, 230, 255, 0.7), transparent),
    radial-gradient(1px 1px at 50% 70%, rgba(160, 200, 240, 0.6), transparent),
    radial-gradient(2px 2px at 70% 60%, rgba(190, 215, 250, 0.8), transparent),
    radial-gradient(1px 1px at 10% 80%, rgba(170, 210, 250, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 90% 90%, rgba(200, 225, 255, 0.7), transparent);
  background-size: 200% 200%;
  animation: particleDrift 30s linear infinite;
}
@keyframes particleDrift {
  0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%, 100% 100%, 50% 0%; }
  100% { background-position: 100% 100%, 0% 100%, 50% 0%, 100% 50%, 0% 0%, 50% 100%; }
}
.start-inner {
  position: relative; z-index: 1;
  text-align: center;
  padding: 56px 72px;
  background: rgba(8, 16, 28, 0.55);
  border: 1px solid rgba(110, 160, 210, 0.22);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  box-shadow:
    0 0 40px rgba(0, 0, 0, 0.6),
    inset 0 0 60px rgba(110, 160, 210, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.03);
  animation: cardFloat 6s ease-in-out infinite;
}
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.title-block { margin-bottom: 6px; }
.main-title {
  font-size: 64px; font-weight: 300; letter-spacing: 14px;
  color: #eaf4ff;
  text-shadow: 0 0 20px rgba(127, 196, 255, 0.25), 0 0 60px rgba(60, 130, 210, 0.15);
  animation: titleGlow 4s ease-in-out infinite;
}
@keyframes titleGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(127, 196, 255, 0.25), 0 0 60px rgba(60, 130, 210, 0.15); }
  50% { text-shadow: 0 0 30px rgba(127, 196, 255, 0.4), 0 0 80px rgba(60, 130, 210, 0.25); }
}
.sub-title {
  display: block;
  font-size: 15px; letter-spacing: 20px; font-weight: 400;
  color: #6fa8d8; margin-top: 8px;
  animation: subShimmer 5s ease-in-out infinite;
}
/* 首页标题随浏览器语言切换：中文显中文，其余语言（含 es/ja/fr/de/ru）一律显英文兜底 */
.title-block .title-zh { display: none; }
.title-block .title-en { display: block; }
html[lang^="zh"] .title-block .title-zh,
html[lang="zh-CN"] .title-block .title-zh { display: block; }
html[lang^="zh"] .title-block .title-en,
html[lang="zh-CN"] .title-block .title-en { display: none; }

@keyframes subShimmer {
  0%, 100% { opacity: 0.7; letter-spacing: 20px; }
  50% { opacity: 1; letter-spacing: 22px; }
}
.start-inner .sub {
  margin: 24px 0 28px;
  color: #8db4d8; font-size: 15px; line-height: 1.6;
}
#start-btn {
  position: relative; overflow: hidden;
  font-size: 18px; padding: 16px 56px;
  background: linear-gradient(180deg, rgba(29, 58, 95, 0.9), rgba(18, 39, 66, 0.9));
  color: #d8ecff; border: 1px solid rgba(58, 110, 168, 0.6); border-radius: 10px;
  letter-spacing: 6px; font-family: inherit;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 26px rgba(58, 110, 168, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.35s ease;
  touch-action: manipulation;
}
#start-btn:enabled { cursor: pointer; }
#start-btn:disabled {
  cursor: default;
  color: #d8ecff;
  background: linear-gradient(180deg, rgba(29, 58, 95, 0.9), rgba(18, 39, 66, 0.9));
  border-color: rgba(58, 110, 168, 0.6);
  box-shadow: 0 0 26px rgba(58, 110, 168, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#start-btn:disabled .btn-text { color: #d8ecff; }
#start-btn:enabled:hover {
  background: linear-gradient(180deg, rgba(40, 80, 127, 0.95), rgba(23, 51, 86, 0.95));
  border-color: rgba(90, 160, 230, 0.8);
  box-shadow: 0 0 40px rgba(58, 110, 168, 0.4), 0 0 80px rgba(58, 110, 168, 0.15);
  transform: translateY(-2px);
}
.btn-text { position: relative; z-index: 1; }
.btn-fill {
  position: absolute; bottom: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, #4a8fd9, #7fc4ff, #a8e0ff);
  border-radius: 0 0 0 10px;
  box-shadow: 0 0 8px rgba(127, 196, 255, 0.5);
  width: 0%;
  transition: width 0.4s ease-out, opacity 0.6s ease;
}
#start-btn:enabled .btn-fill { opacity: 0; }
.btn-shimmer {
  position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
#start-btn:hover .btn-shimmer { left: 150%; }
.start-inner .hint {
  margin-top: 20px; font-size: 13px; color: #5a7a9a;
}
/* ICP 备案号：境内合规展示，低调置于启动页底部，不进入 3D 画面 */
#beian {
  display: block; margin-top: 16px;
  font-size: 12px; color: #44607d; letter-spacing: 0.5px;
  text-decoration: none; transition: color 0.2s ease;
}
#beian:hover { color: #6f97bf; }

/* ---------- 帮助 ---------- */
#help {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(2, 6, 12, 0.88);
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto; padding: 20px;
}
.help-inner {
  max-width: 760px; padding: 30px 40px;
  background: rgba(10, 20, 34, 0.9); border: 1px solid rgba(110, 160, 210, 0.3);
  border-radius: 12px;
}
.help-inner h2 { color: #eaf4ff; margin-bottom: 16px; font-size: 22px; }
.help-inner h3 { color: #8fc6f0; margin: 12px 0 6px; font-size: 15px; }
.help-cols { display: flex; gap: 40px; }
.help-inner table { border-collapse: collapse; font-size: 13px; }
.help-inner td { padding: 2px 14px 2px 0; color: #b8d4ec; }
.help-inner td:first-child { color: #ffe9b0; white-space: nowrap; }
.credit { margin-top: 18px; font-size: 11px; color: #5a7a9a; line-height: 1.7; }

/* ---------- 气巨大气浸没层 ---------- */
#immersion {
  position: fixed; inset: 0;
  pointer-events: none; opacity: 0; z-index: 8;
}

/* ================================================================
   触控操作面板 (touch controls) — 仅在 .touch 类（移动端）下显示
   ================================================================ */
#tc-root {
  display: none; /* hidden on desktop */
  position: fixed; inset: 0; z-index: 30;
  pointer-events: none;
  /* safe area padding for notched devices */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.touch #tc-root { display: block; }

/* All tc interactive elements */
.tc-btn {
  pointer-events: auto;
  touch-action: manipulation;
  border: none; cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 顶栏（菜单） ---------- */
#tc-top-bar {
  position: absolute; top: 8px; left: 8px;
  display: flex; flex-direction: column; gap: 4px;
  pointer-events: none;
}
#tc-menu-btn {
  width: 42px; height: 42px; border-radius: 10px;
  background: rgba(8, 16, 28, 0.75); border: 1px solid rgba(110, 160, 210, 0.35);
  color: #cfe3f5; font-size: 18px;
  backdrop-filter: blur(6px);
  pointer-events: auto;
}
/* 时间展开面板（样式沿用旧 tc-menu） */
#tc-time-panel[hidden] { display: none !important; }
#tc-time-panel {
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(8, 16, 28, 0.88); border: 1px solid rgba(110, 160, 210, 0.3);
  border-radius: 10px; padding: 8px;
  backdrop-filter: blur(8px);
  pointer-events: auto;
  min-width: 160px;
}
#tc-time-panel button {
  width: 100%; text-align: left; padding: 8px 12px;
  border-radius: 7px; font-size: 13px; color: #cfe3f5;
  background: transparent;
}
#tc-time-panel button:hover, #tc-time-panel button:active {
  background: rgba(60, 110, 170, 0.35);
}
#tc-time-panel .tc-section-label {
  font-size: 11px; color: #5a7a9a; padding: 4px 12px 2px;
}
#tc-time-panel .tc-row { display: flex; gap: 4px; }
#tc-time-panel .tc-row button { flex: 1; text-align: center; padding: 8px 4px; }

/* ---------- 底部操作栏 ---------- */
#tc-bottom-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 8px 10px 10px;
  display: flex; align-items: flex-end; gap: 8px;
  pointer-events: none;
  /* extra padding for home-bar on iOS */
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

/* 缩放按钮组 */
#tc-zoom-group {
  display: flex; flex-direction: column; gap: 4px;
  pointer-events: auto;
}
.tc-zoom-btn {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(8, 16, 28, 0.75); border: 1px solid rgba(110, 160, 210, 0.3);
  color: #cfe3f5; font-size: 22px; line-height: 1;
  backdrop-filter: blur(6px);
}
.tc-zoom-btn:active { background: rgba(40, 80, 130, 0.85); }

/* 模式动作按钮区（中间） */
#tc-actions {
  display: flex; flex-direction: column; gap: 4px;
  pointer-events: auto; flex: 1;
}
.tc-action-btn {
  height: 40px; border-radius: 9px; padding: 0 14px;
  background: rgba(8, 16, 28, 0.75); border: 1px solid rgba(110, 160, 210, 0.3);
  color: #cfe3f5; font-size: 13px;
  backdrop-filter: blur(6px); white-space: nowrap;
}
.tc-action-btn:active { background: rgba(40, 80, 130, 0.85); }
.tc-action-btn.primary {
  border-color: rgba(90, 160, 230, 0.5);
  background: rgba(20, 50, 90, 0.8);
  color: #8fd9ff;
}

/* 目录/目标抽屉按钮 */
#tc-drawer-btns {
  display: flex; flex-direction: column; gap: 4px;
  pointer-events: auto;
}
.tc-drawer-btn {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(8, 16, 28, 0.75); border: 1px solid rgba(110, 160, 210, 0.3);
  color: #cfe3f5; font-size: 20px;
  backdrop-filter: blur(6px);
}
.tc-drawer-btn:active, .tc-drawer-btn.active {
  background: rgba(40, 80, 130, 0.85);
  border-color: rgba(90, 160, 230, 0.5);
}

/* ---------- 虚拟摇杆 ---------- */
#tc-joystick-wrap {
  position: absolute; left: 10px;
  /* Positioned above bottom bar - calculated in JS based on bottom bar height */
  bottom: 120px;
  pointer-events: none;
}
#tc-joystick-wrap:not([hidden]) { pointer-events: auto; }
#tc-joystick-base {
  width: 100px; height: 100px; border-radius: 50%;
  background: rgba(8, 16, 28, 0.55);
  border: 2px solid rgba(110, 160, 210, 0.35);
  position: relative;
  touch-action: none;
  cursor: pointer;
}
#tc-joystick-thumb {
  position: absolute; top: 50%; left: 50%;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(100, 160, 230, 0.7);
  border: 2px solid rgba(160, 210, 255, 0.8);
  transform: translate(-50%, -50%);
  transition: transform 0.05s;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(100, 160, 230, 0.4);
}

/* ---------- 右侧动作按钮（行走/飞行模式） ---------- */
#tc-right-btns[hidden] { display: none !important; }
#tc-right-btns {
  position: absolute; right: 10px;
  bottom: 120px;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: auto;
  align-items: flex-end;
}
#tc-right-btns:not([hidden]) { pointer-events: auto; }
.tc-right-btn {
  min-width: 72px; height: 42px; border-radius: 10px; padding: 0 12px;
  background: rgba(8, 16, 28, 0.75); border: 1px solid rgba(110, 160, 210, 0.3);
  color: #cfe3f5; font-size: 13px; white-space: nowrap;
  backdrop-filter: blur(6px);
}
.tc-right-btn:active { background: rgba(40, 80, 130, 0.85); }
.tc-right-btn.held { background: rgba(40, 80, 130, 0.85); border-color: rgba(90, 160, 230, 0.6); }
.tc-right-btn.danger {
  border-color: rgba(255, 140, 80, 0.5);
  color: #ffc090;
}

/* ================================================================
   移动端响应式：面板重排 (pointer:coarse = touch device)
   ================================================================ */
@media (pointer: coarse), (max-width: 768px) {
  /* 隐藏桌面专用快捷键提示 */
  .key { display: none; }
  .touch .key { display: none; }

  /* 左侧列 — 全高显示，目录可滚动 */
  #left-col {
    top: 8px; left: 8px;
    width: 220px;
    max-height: calc(100dvh - 160px);
    /* On mobile, initially collapsed (directory shows but body hidden) */
  }

  /* 时间面板：精简（移动端时间由 tc-menu 控制，隐藏快捷键提示） */
  #hud-time { min-width: 0; font-size: 12px; padding: 6px 10px; }
  #hud-time .dim { display: none; } /* hide keyboard shortcut hints */

  /* 导航面板：移至右下（避免与摇杆冲突） */
  #hud-nav {
    bottom: auto; left: auto;
    top: 8px; right: 8px;
    min-width: 0; width: 190px;
    font-size: 12px; padding: 7px 10px;
  }
  #hud-nav .dim { display: none; } /* hide shortcut hints */

  /* 目标面板：右侧、可滚动 */
  #hud-target {
    top: auto; right: 8px;
    bottom: 120px; /* above bottom bar */
    width: 200px; max-height: 45dvh;
    font-size: 12px; padding: 8px 10px;
    overflow-y: auto;
    display: none; /* hidden by default; tc-target-btn toggles */
  }
  #hud-target.tc-open { display: block; }

    /* 窄窗口的**桌面**浏览器（半屏并排、笔记本小窗很常见）不是触屏，没有
     tc-target-btn，信息面板不能跟着一起隐藏——否则天体名/距离/半径/重力/描述/
     知识卡片全部消失，键盘提示也被 .key{display:none} 一起藏掉。 */
  @media (max-width: 768px) and (pointer: fine) {
    #hud-target { display: block; }
    #hud-nav .key { display: inline; }
  }

/* 提示：不遮挡摇杆 */
  #hud-tip {
    bottom: 115px; font-size: 12px; padding: 5px 12px;
    max-width: 75vw; white-space: normal; text-align: center;
  }

  /* 目录：左侧、可滚动；top 继承桌面 110px，tablet 保持同偏移 */
  #directory { top: 100px; width: 220px; max-height: 60dvh; }
  #dir-body { max-height: 50dvh; }

  /* 帮助弹窗：全屏可滚动 */
  .help-inner {
    padding: 20px 16px;
    max-width: 100%; max-height: 90dvh;
    overflow-y: auto;
  }
  .help-cols { flex-direction: column; gap: 12px; }
  .help-inner table { font-size: 12px; }
  .help-inner td { padding: 3px 8px 3px 0; }
  .help-inner h2 { font-size: 17px; }
  .help-inner h3 { font-size: 13px; }

  /* 启动屏：紧凑布局 */
  .start-inner {
    padding: 32px 24px;
    max-width: min(360px, 92vw);
    max-height: 90dvh;
    overflow-y: auto;
    animation: none; /* reduce motion on mobile */
  }
  .main-title {
    font-size: clamp(28px, 8vw, 48px);
    letter-spacing: clamp(4px, 2vw, 10px);
    animation: none;
  }
  .sub-title {
    font-size: 12px; letter-spacing: 10px;
    animation: none;
  }
  .start-inner .sub { font-size: 13px; margin: 16px 0 20px; }
  #start-btn { font-size: 15px; padding: 14px 32px; letter-spacing: 3px; }

  /* 标签：稍大以便触摸 */
  .body-label { font-size: 13px; padding: 4px 8px; }

  /* 十字准星：在移动端行走/飞行模式下不显示（无指针锁） */
  #crosshair { display: none; }
}

/* 超小屏（手机竖屏） */
@media (pointer: coarse) and (max-width: 430px) {
  #left-col { width: 180px; }
  #hud-target { width: 170px; }
}

/* ================================================================
   .touch — 仅移动端布局覆盖（IS_MOBILE=true 时 html.touch 存在）
   所有规则以 .touch 开头，桌面端永远不匹配。
   ================================================================ */

/* 阻止浏览器拦截双指手势（页面缩放/滚动），同时为可滚动元素显式恢复 pan-y */
html.touch, html.touch body { touch-action: none; }
html.touch #dir-body,
html.touch .help-inner { touch-action: pan-y; }

/* ── 左侧列：移动端完全隐藏 ── */
.touch #left-col { display: none !important; }

/* ── 遮罩层：抽屉打开时覆盖画布，点击关闭 ── */
#tc-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 28;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
#tc-backdrop.visible { display: block; }
/* 移动版保持亮度不变：遮罩透明但仍可点击关闭抽屉 */
.touch #tc-backdrop { background: transparent; }

/* 顶栏在移动版为空（菜单按钮移至底部抽屉），直接隐藏 */
.touch #tc-top-bar { display: none; }

/* 常驻时间小部件：右上角，始终可见；宽度统一 */
#tc-time-widget {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 34;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch; /* 让子元素都撑满同等宽度 */
  width: 172px;
  gap: 0;
}
/* 常驻时间按钮：与面板等宽，时间左对齐，箭头右对齐 */
#tc-time-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: rgba(8, 16, 28, 0.82);
  border: 1px solid rgba(110, 160, 210, 0.3);
  border-radius: 8px;
  padding: 5px 10px;
  color: #e8f4ff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  pointer-events: auto;
  cursor: pointer;
}
#tc-time-btn:hover { background: rgba(20, 45, 80, 0.92); border-color: rgba(110, 180, 230, 0.5); }
#tc-time-btn:active { background: rgba(30, 60, 120, 0.95); }
#tc-time-chevron {
  font-size: 15px;
  color: #8fd9ff;
  margin-left: 6px;
  flex-shrink: 0;
  line-height: 1;
}
/* 展开面板：与按钮等宽，正下方展开 */
#tc-time-panel {
  width: 100%;
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  margin-top: 4px;
  border-radius: 10px;
}

/* ── 目录：底部上拉抽屉（Bottom Sheet）── */
.touch #directory {
  position: fixed;
  top: auto; bottom: 0; left: 0; right: 0;
  height: 62dvh;
  width: 100% !important;
  max-height: 62dvh;
  z-index: 33;
  border-radius: 18px 18px 0 0;
  border-left: none; border-right: none; border-bottom: none;
  transform: translateY(110%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column;
}
.touch #directory.open { transform: translateY(0); }

/* 拖拽手柄：目录头顶部小横线 */
.touch #dir-head {
  border-radius: 18px 18px 0 0;
  text-align: center;
  padding-top: 12px;
  cursor: default;
  position: relative;
}
.touch #dir-head::before {
  content: '';
  display: block;
  width: 36px; height: 4px;
  background: rgba(110, 160, 210, 0.35);
  border-radius: 2px;
  margin: 0 auto 8px;
}

/* 目录内容：充满剩余高度，允许纵向滚动 */
.touch #dir-body {
  display: flex !important;
  flex-direction: column;
  flex: 1; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: none;
}

/* ── HUD 导航：顶部紧凑状态条；右侧留 180px 给常驻时间标签 ── */
.touch #hud-nav {
  position: fixed;
  top: 8px; left: 8px;
  right: auto;
  max-width: calc(100vw - 190px); /* 留出右侧时间小部件空间 */
  bottom: auto;
  max-height: 64px;
  overflow: hidden;
  font-size: 10px; padding: 4px 10px; line-height: 1.35;
  border-radius: 10px;
  min-width: 0;
  white-space: normal;
}
.touch #hud-nav .big   { font-size: 11px; }
.touch #hud-nav .tname { font-size: 11px; }
/* 移动版保留关键状态、隐藏纯键盘提示与警告 */
.touch #hud-nav .dim,
.touch #hud-nav .warn,
.touch #hud-nav br + *  { display: none; }

/* ── HUD 目标：从右侧滑入（z-index 低于目录 Bottom Sheet）── */
.touch #hud-target {
  position: fixed;
  top: 60px; right: 0; left: auto; bottom: auto;
  width: min(220px, 55vw);
  max-height: calc(100dvh - 130px);
  overflow-y: auto;
  touch-action: pan-y;
  display: block !important;    /* 覆盖 media query 里的 display:none */
  transform: translateX(105%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px 0 0 12px;
  z-index: 33;
  font-size: 11px; padding: 8px 10px;
}
.touch #hud-target.tc-open { transform: translateX(0); }

/* ── 底部操作栏：单行紧凑（高度 54px + safe-area）── */
.touch #tc-bottom-bar {
  padding: 0 8px;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  height: calc(54px + max(6px, env(safe-area-inset-bottom)));
  background: rgba(6, 12, 22, 0.92);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(110, 160, 210, 0.15);
  align-items: center;
  gap: 5px;
}

/* 缩放按钮：横向排列 */
.touch #tc-zoom-group { flex-direction: row; gap: 4px; }
.touch .tc-zoom-btn {
  width: 36px; height: 36px;
  font-size: 18px; border-radius: 9px;
}

/* 动作按钮：横向单行，均分剩余空间 */
.touch #tc-actions {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 4px;
}
.touch .tc-action-btn {
  flex: 1; min-width: 0; height: 36px;
  font-size: 12px; padding: 0 5px;
  border-radius: 9px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.touch .tc-action-btn.primary { flex: 1.3; } /* 主按钮稍宽 */

/* 抽屉按钮：横向排列 */
.touch #tc-drawer-btns { flex-direction: row; gap: 4px; }
.touch .tc-drawer-btn,
.touch #tc-menu-btn {
  width: 36px; height: 36px;
  font-size: 16px; border-radius: 9px;
}

/* ── 虚拟摇杆 & 右侧按钮：浮于底栏上方 ── */
.touch #tc-joystick-wrap { bottom: calc(62px + max(6px, env(safe-area-inset-bottom))); }
.touch #tc-right-btns    { bottom: calc(62px + max(6px, env(safe-area-inset-bottom))); }

/* 右侧动作按钮：紧凑 */
.touch .tc-right-btn {
  min-width: 64px; height: 38px;
  font-size: 12px; padding: 0 10px; border-radius: 9px;
}

/* ── 提示条：避开底栏 ── */
.touch #hud-tip {
  bottom: calc(62px + max(6px, env(safe-area-inset-bottom)) + 8px);
  font-size: 12px; padding: 5px 14px;
  max-width: 80vw; white-space: normal; text-align: center;
}

/* ── 标签：增大触摸面积 ── */
.touch .body-label { font-size: 13px; padding: 4px 8px; min-height: 26px; }

/* ── 弹出帮助：移动版不降低背后亮度 ── */
.touch #help { background: transparent; }

/* ── 汉堡菜单：宽度适中 ── */
.touch #tc-menu { min-width: 160px; max-width: 220px; }

/* ── 可访问性 ─────────────────────────────────────────────────────── */
/* 键盘焦点：此前全仓库没有任何 :focus-visible，纯键盘用户完全看不到焦点在哪。
   用 outline 而不是 box-shadow，避免与已有的 backdrop-filter 叠层冲突。 */
:focus-visible {
  outline: 2px solid #7fd4ff;
  outline-offset: 2px;
  border-radius: 3px;
}
/* 屏幕阅读器专用文本（视觉上不占位，但会被朗读） */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 常驻错误角标：默认隐藏，出现运行时异常才显示（见 hud.setErrorCount） */
#hud-err {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(90, 24, 24, 0.86); border: 1px solid rgba(255, 120, 120, 0.55);
  color: #ffd9d9; font-size: 12px; padding: 4px 12px; border-radius: 6px;
  pointer-events: auto; cursor: pointer; display: none; z-index: 20;
}

/* ── 电影/纯净模式（Z 键，或 ?clean=1）────────────────────────────────
   一次性隐藏全部叠加层，留下"只有宇宙"的画面：截图、录屏、演示、VR 都需要。
   与逐元素开关（L 标签 / O 轨道 / C 罗盘）不同，这里连 HUD、目录、准星、
   提示条、比例参照一起收掉，且不改变任何渲染参数。 */
body.cinematic #hud,
body.cinematic #labels,
body.cinematic #crosshair,
body.cinematic #directory,
body.cinematic .compass-widget,
body.cinematic #tour-bar,
body.cinematic .scaleref-overlay,
body.cinematic #tc-menu,
body.cinematic #tc-target,
body.cinematic .tc-panel,
body.cinematic #tc-joystick {
  display: none !important;
}
/* 进入/退出时给一个极短淡出，避免画面"啪"地跳变 */
#hud, #labels, #directory, .compass-widget { transition: opacity 0.18s ease; }
body.cinematic #hud, body.cinematic #labels,
body.cinematic #directory, body.cinematic .compass-widget { opacity: 0; }

/* 可访问性：运动敏感用户减少启动屏动画 */
@media (prefers-reduced-motion: reduce) {
  .nebula-glow, .star-particles, .title-block .main-title, .sub-title,
  .start-card, #start-btn {
    animation: none !important;
    transition: none !important;
  }
  /* 全局：除启动页动画外，界面过渡与提示条淡入也一并取消。
     相机本身的飞行动画与惯性由 JS 侧读同一个媒体查询关闭（见 main.js 与
     orbitCamera 的 reducedMotion），CSS 管不到。 */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* 再入等离子鞘 / 气动加热的屏幕辉光（强度由 main.js 按 Sutton–Graves 律写入）。
   从画面边缘向内的暖橙径向渐变：真实再入时等离子体在迎风面外沿最亮，
   视觉上表现为四周泛橙、中心仍能看见前方。 */
#reentry-glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 40;
  opacity: 0; transition: opacity 0.12s linear;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(255, 150, 60, 0) 38%,
      rgba(255, 120, 40, 0.18) 62%,
      rgba(255, 90, 25, 0.42) 82%,
      rgba(255, 70, 15, 0.62) 100%);
  mix-blend-mode: screen;
}
body.cinematic #reentry-glow { z-index: 40; } /* 纯净模式下保留：它是画面的一部分 */

/* 行走模式的头盔晕影：视口边缘一圈向内渐暗的包裹感。
   用 CSS 而不是 3D 几何：主场景近平面会随最近天体动态调整，叠加层又要
   独立的米制相机——行走模式下这两者交互很容易让 3D 框落到视锥外。
   视口级晕影与分辨率、FOV、相机姿态全都无关，是最稳的"我在其中"表达。 */
body.walk-mode::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 35;
  background:
    radial-gradient(ellipse 78% 72% at 50% 50%,
      rgba(0,0,0,0) 62%,
      rgba(12,15,20,0.28) 82%,
      rgba(8,10,14,0.62) 100%);
}

.edition-note {max-width:560px;color:#a9bdd6;font:12px/1.6 system-ui;margin:12px auto}.edition-note a {color:#9bceff}