/* ============ 星际游览 · UI 样式 ============ */
:root {
  --bg: #05070f;
  --glass: rgba(10, 16, 32, 0.72);
  --glass-border: rgba(122, 162, 255, 0.18);
  --text: #dfe7ff;
  --text-dim: #8b97b8;
  --accent: #7ab8ff;
  --accent-2: #ffd27a;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}

/* 触控设备：禁止双击缩放（iOS 忽略 user-scalable，需 touch-action 配合） */
button, input, select, textarea { touch-action: manipulation; }

/* UI 界面禁止长按选中/呼出菜单；科普文字保持可选中 */
body, #markers { user-select: none; -webkit-user-select: none; }
#info-desc, #info-dist, .panel-note { user-select: text; -webkit-user-select: text; }

#app { position: fixed; inset: 0; }

#scene-container { position: absolute; inset: 0; touch-action: none; }
#scene-container canvas { display: block; }

/* ---------- 标记层 ---------- */
#markers {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  touch-action: none;
  z-index: 5;
}

.marker {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 14px; /* ≥44px 触控热区 */
  background: none; border: none; cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  will-change: transform;
  z-index: 1;
  transition: opacity .45s ease;
}
.marker .label {
  font-size: 12px; letter-spacing: 0;
  color: var(--text);
  text-shadow: 0 0 8px rgba(0,0,0,0.95), 0 1px 2px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.9);
  white-space: nowrap;
  opacity: 0.92;
  transition: opacity .3s, color .2s;
}
.marker:hover .label, .marker:focus-visible .label { color: #fff; opacity: 1; }
.marker:focus-visible { outline: none; }
.marker:focus-visible .label { outline: 1.5px solid rgba(255,255,255,.8); outline-offset: 4px; border-radius: 3px; }
.marker.dim .label { opacity: 0.4; }
/* 触压反馈：标签点亮微放大（不能动 .marker 自身——其 transform 用于定位） */
.marker .label { transition: opacity .3s, color .2s, transform .15s ease; }
.marker:active .label { color: #fff; opacity: 1; transform: scale(1.12); }
/* 标签避让：与更近标记的文字重叠时整枚收起（3D 光晕仍在场景中标示天体） */
.marker.no-label { visibility: hidden; }

/* 暗淡蓝点：家的标志——淡蓝小字随 3D 微粒一同呼吸 */
.marker.pale .label {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #a9ccf5;
  animation: pale-breath 4.5s ease-in-out infinite;
}
.marker.pale:hover .label,
.marker.pale:focus-visible .label,
.marker.pale:active .label { color: #e2efff; }
@keyframes pale-breath {
  0%, 100% { opacity: 0.62; }
  50% { opacity: 1; }
}

/* 暗淡蓝点 · 边缘信标态：地球出屏或落到相机背后时，蓝点不消失，
   改为钳在屏幕边缘的小圆点信标 + 短标"地球"，永远指出来家的方向 */
.marker .dot { display: none; }
.marker.edge .dot {
  display: block;
  width: 7px; height: 7px; border-radius: 50%;
  margin-bottom: 6px;
  background: radial-gradient(circle, rgba(240,248,255,1) 0%, rgba(190,220,255,.9) 45%, rgba(122,184,255,.28) 78%, rgba(122,184,255,0) 100%);
  box-shadow: 0 0 10px 2px rgba(150,196,255,.55);
  animation: pale-breath 4.5s ease-in-out infinite;
}
.marker.edge .label { letter-spacing: 0.5px; }

/* ---------- 顶栏 ---------- */
#topbar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: calc(10px + var(--safe-top)) calc(14px + var(--safe-right)) 10px calc(14px + var(--safe-left));
  pointer-events: none;
  z-index: 10;
}
#topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; }
.brand-star {
  font-size: 22px; color: var(--accent-2); flex: none;
  text-shadow: 0 0 12px rgba(255, 210, 122, 0.8);
  animation: brand-glow 4s ease-in-out infinite;
}
@keyframes brand-glow {
  0%, 100% { text-shadow: 0 0 10px rgba(255, 210, 122, 0.55); }
  50% { text-shadow: 0 0 18px rgba(255, 210, 122, 0.95), 0 0 30px rgba(255, 180, 90, 0.35); }
}
.brand-text { min-width: 0; }
.brand-text h1 {
  font-size: 17px; font-weight: 600; letter-spacing: 0;
  white-space: nowrap;
  background: linear-gradient(120deg, #eaf1ff, #9db8ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* 层级面包屑：位置 + 固定提示两段（手机端隐藏提示段，见文末移动端区域） */
.crumb-line {
  display: flex; align-items: baseline; gap: 8px;
  min-width: 0; max-width: 46vw;
}
#breadcrumb {
  font-size: 11px; color: var(--text-dim); letter-spacing: 0;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crumb-hint {
  font-size: 11px; color: var(--text-dim); letter-spacing: 0;
  white-space: nowrap; flex: none;
}
.top-actions { display: flex; gap: 8px; }

.pill-btn {
  padding: 8px 14px;
  font-size: 13px; color: var(--text); letter-spacing: 0;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s, background .2s, transform .15s ease, box-shadow .2s;
}
.pill-btn:hover {
  border-color: rgba(122, 184, 255, 0.5);
  background: rgba(30, 45, 80, 0.8);
  box-shadow: 0 0 18px rgba(90, 140, 255, 0.18);
  transform: translateY(-1px);
}
.pill-btn:active { transform: translateY(0) scale(0.97); }
.pill-btn:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 2px; }
/* 窄屏时"星图总览 / 星图"切换为短文案（媒体查询在文末移动端区域） */
#btn-overview .short { display: none; }
#btn-panel .short { display: none; }

.icon-btn {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  font-size: 20px; line-height: 1; color: var(--text-dim);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  cursor: pointer;
  transition: color .2s, background .2s, transform .15s ease, border-color .2s;
}
.icon-btn:hover { color: #fff; background: rgba(255,255,255,0.1); border-color: rgba(122,184,255,0.4); }
.icon-btn:active { transform: scale(0.9); }
.icon-btn:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 2px; }

/* ---------- 飞行状态 ---------- */
#status {
  position: absolute;
  top: calc(64px + var(--safe-top)); left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  font-size: 13px; letter-spacing: 0;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  z-index: 9;
  white-space: nowrap;
  transition: opacity .3s, transform .3s;
}
#status.hidden { opacity: 0; transform: translateX(-50%) translateY(-8px); pointer-events: none; }
#status-text {
  min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 8px var(--accent-2);
  animation: status-blink 1s ease-in-out infinite alternate;
}
@keyframes status-blink { from { opacity: .35; } to { opacity: 1; } }

/* ---------- 顶栏：时间流速 ---------- */
.time-box {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.time-label { font-size: 12px; opacity: .8; }
.time-select {
  background: transparent; color: var(--text);
  border: none; outline: none; cursor: pointer;
  font-size: 12px; font-family: inherit; letter-spacing: 0;
  -webkit-appearance: none; appearance: none;
  padding-right: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5'><path d='M0 0l4 5 4-5z' fill='%238b97b8'/></svg>");
  background-repeat: no-repeat; background-position: right center;
}
.time-select:hover { color: #fff; }
.time-select:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.time-select option { background: #0b1020; color: #e8ecf6; }

/* ---------- 时间流速滑块（无极调节 ×1–×10） ---------- */
.time-rate {
  width: 96px; height: 14px;
  accent-color: var(--accent);
  cursor: pointer; background: transparent;
}
.time-rate:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.time-rate-val {
  font-size: 12px; color: var(--text); letter-spacing: 0;
  min-width: 54px; text-align: right; font-variant-numeric: tabular-nums;
}

/* ---------- 日期跳转（时间箱内，历算随日期重算） ---------- */
.date-jump {
  background: transparent; border: none; outline: none; cursor: pointer;
  color: var(--text); font-size: 11.5px; font-family: inherit;
  letter-spacing: 0; color-scheme: dark; width: 150px;
}
.date-jump:hover { color: #fff; }
.date-jump:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.date-now {
  background: transparent; border: none; cursor: pointer;
  color: var(--accent); font-size: 11px; font-family: inherit;
  padding: 2px 5px; border-radius: 4px; letter-spacing: 0;
}
.date-now:hover { background: rgba(122, 184, 255, 0.14); }
#btn-freefly.active {
  background: rgba(138, 216, 255, 0.16);
  border-color: rgba(138, 216, 255, 0.55);
  color: #bfe6ff;
}

/* ---------- 剧情条（旅行者一号 / 中国探月）：状态条同位的叙事卡片 ---------- */
.story-bar {
  position: absolute; top: calc(102px + var(--safe-top));
  left: 50%; transform: translateX(-50%);
  width: 340px; max-width: calc(100vw - 24px);
  padding: 12px 14px 10px;
  background: var(--glass);
  border: 1px solid rgba(122, 184, 255, 0.28);
  border-radius: 12px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 24px rgba(80, 130, 255, 0.12);
  z-index: 11;
  transition: opacity .3s, visibility .3s, transform .3s;
}
.story-bar.hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(-6px); }
.story-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.story-title {
  font: 600 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em; color: #8fe6c0;
}
#story-name { margin: 7px 0 4px; font-size: 13.5px; font-weight: 600; color: #e9f1ff; }
#story-text { margin: 0; font-size: 12px; line-height: 1.8; color: rgba(200, 218, 240, .88); }
.story-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 9px; }

/* ---------- 星图面板 ---------- */
#panel {
  position: absolute;
  top: calc(64px + var(--safe-top)); left: calc(14px + var(--safe-left));
  width: 292px; max-width: calc(100vw - 28px);
  max-height: calc(100% - 96px - var(--safe-top) - var(--safe-bottom));
  display: flex; flex-direction: column;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;          /* 滚到边不链到页面（iOS 橡皮筋） */
  -webkit-overflow-scrolling: touch;
  z-index: 20;
  transition: opacity .3s, transform .3s;
}
#panel.hidden { opacity: 0; transform: translateX(-16px); pointer-events: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.panel-head h2 { font-size: 15px; letter-spacing: 0; }
.panel-note { font-size: 11px; line-height: 1.7; color: var(--text-dim); margin-bottom: 12px; }
.note-more {
  display: inline-block; margin-top: 4px; padding: 0;
  font: inherit; font-size: 10.5px; color: var(--accent);
  background: none; border: none; cursor: pointer;
  letter-spacing: 0; opacity: 0.9;
  transition: opacity .2s;
}
.note-more:hover { opacity: 1; text-decoration: underline; }
.note-extra { display: none; margin-top: 4px; }
.panel-note.expanded .note-extra { display: block; animation: note-in .35s ease; }
@keyframes note-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.panel-section h3 {
  font-size: 11px; font-weight: 500; color: var(--text-dim);
  letter-spacing: 0; margin: 12px 0 8px;
}
.level-list { display: grid; gap: 6px; }
.level-btn {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; text-align: left;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--text); cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s ease;
}
.level-btn:hover {
  border-color: rgba(122, 184, 255, 0.45); background: rgba(60, 90, 150, 0.25);
  transform: translateX(2px);
}
.level-btn:active { transform: translateX(2px) scale(0.985); }
.level-btn:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 1px; }
.level-btn .lv-name { font-size: 13px; letter-spacing: 0; }
.level-btn .lv-desc { font-size: 10.5px; color: var(--text-dim); }
/* 剧情入口：与层级预设同列表，但给出"故事"的视觉语气 */
.level-caption {
  margin: 10px 2px 0; padding-top: 10px;
  border-top: 1px solid var(--glass-border);
  font: 600 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .2em; color: rgba(160, 190, 235, .55);
}
.level-btn.story { background: rgba(84, 120, 200, 0.16); border-color: rgba(122, 184, 255, 0.3); }
.level-btn.story .lv-name::before { content: '✦ '; color: #8fd8ff; }

.target-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 1px; }
.target-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  font-size: 12px; color: var(--text);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s ease;
}
.target-chip:hover {
  border-color: var(--tc, var(--accent));
  background: color-mix(in srgb, var(--tc, var(--accent)) 14%, transparent);
  transform: translateY(-1px);
}
.target-chip:active { transform: translateY(0) scale(0.96); }
.target-chip:focus-visible { outline: 1.5px solid var(--tc, var(--accent)); outline-offset: 1px; }
.target-chip .chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tc, var(--accent));
  box-shadow: 0 0 6px var(--tc, var(--accent));
}
.target-chip.filtered-out { display: none; }
.target-chip.visited { opacity: .62; }
.target-chip.visited .chip-dot { box-shadow: none; background: transparent; border: 1.5px solid var(--tc, var(--accent)); }
.target-chip.visited::after { content: '✓'; font-size: 9px; color: var(--tc, var(--accent)); }

.visited-count { float: right; font-size: 10px; letter-spacing: 0; opacity: .8; }
.target-search {
  width: 100%; box-sizing: border-box;
  margin: 2px 0 8px; padding: 9px 12px;
  font-size: 12.5px; font-family: inherit; color: var(--text);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border); border-radius: 10px;
  outline: none; -webkit-appearance: none; appearance: none;
}
.target-search:focus { border-color: var(--accent); }
.target-search::placeholder { color: var(--text-dim); }
.type-filter {
  display: flex; gap: 5px; margin-bottom: 6px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
}
.type-filter::-webkit-scrollbar { display: none; }
.filter-chip {
  padding: 5px 10px; font-size: 11px; color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--glass-border); border-radius: 999px;
  cursor: pointer; transition: color .2s, background .2s, border-color .2s;
  flex: none;
}
.filter-chip.active {
  color: #060a14; background: var(--tc, var(--accent));
  border-color: var(--tc, var(--accent)); font-weight: 600;
}

/* ---------- 天体直达：空间域分组 ---------- */
.tgroup { margin-bottom: 4px; }
.tgroup-head {
  width: 100%; display: flex; align-items: center; gap: 7px;
  padding: 7px 4px 7px 2px; margin-bottom: 2px;
  background: none; border: none; cursor: pointer;
  color: var(--text); font-family: inherit;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color .2s;
}
.tgroup-head:hover { color: var(--accent); }
.tgroup-head:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 1px; border-radius: 6px; }
.tg-arrow {
  width: 0; height: 0; flex: none;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  opacity: 0.55;
  transition: transform .25s ease;
}
.tgroup.collapsed .tg-arrow { transform: rotate(0deg); }
.tgroup:not(.collapsed) .tg-arrow { transform: rotate(90deg); }
.tg-name {
  font-size: 12px; font-weight: 600; letter-spacing: 0;
}
.tg-count {
  margin-left: auto; font-size: 10px; color: var(--text-dim);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  background: rgba(255,255,255,0.05);
  padding: 1px 7px; border-radius: 999px;
}
.tgroup-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .3s ease, opacity .25s ease;
  opacity: 1;
}
.tgroup.collapsed .tgroup-wrap { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.tgroup-wrap > .target-list { overflow: hidden; min-height: 0; }
.tgroup.group-empty { display: none; }

#panel-mask {
  position: absolute; inset: 0; z-index: 15;
  background: rgba(3, 5, 12, 0.35);
}
#panel-mask.hidden { display: none; }

/* ---------- 信息卡 ---------- */
#info-card {
  position: absolute;
  right: calc(14px + var(--safe-right)); bottom: calc(14px + var(--safe-bottom));
  width: 320px; max-width: calc(100vw - 28px);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  padding: 18px;
  z-index: 20;
  overflow: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  transition: opacity .35s ease, transform .35s cubic-bezier(.22, .9, .3, 1.1);
}
#info-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--tc, var(--accent-2)), transparent 70%);
  opacity: 0.9;
}
#info-card.hidden { opacity: 0; transform: translateY(16px) scale(0.98); pointer-events: none; }
#info-card .icon-btn { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; font-size: 16px; }
.info-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.info-head h2 { font-size: 20px; letter-spacing: 0; }
.info-en { font-size: 11px; color: var(--text-dim); letter-spacing: 0; }
.type-badge {
  font-size: 10px; letter-spacing: 0;
  padding: 3px 8px; border-radius: 999px;
  color: #060a14; background: var(--tc, var(--accent-2));
  font-weight: 600;
  box-shadow: 0 0 12px color-mix(in srgb, var(--tc, var(--accent-2)) 45%, transparent);
}
.info-row {
  display: flex; gap: 10px; font-size: 12.5px;
  padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.07);
}
.info-key { color: var(--text-dim); flex: none; }
.info-desc {
  font-size: 12.5px; line-height: 1.8; color: var(--text);
  padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.07);
}

/* ---------- 手势提示 ---------- */
#hint {
  position: absolute;
  bottom: calc(16px + var(--safe-bottom)); left: 50%;
  transform: translateX(-50%);
  font-size: 11.5px; letter-spacing: 0; color: var(--text-dim);
  background: rgba(8, 12, 24, 0.55);
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(122, 162, 255, 0.12);
  z-index: 8; white-space: nowrap;
  transition: opacity 1s;
}
#hint.faded { opacity: 0; pointer-events: none; }

/* ---------- 实时地球时钟（真实晨昏线同步指示） ---------- */
#earth-clock {
  position: absolute;
  right: calc(14px + var(--safe-right));
  bottom: calc(52px + var(--safe-bottom));   /* 抬高于手势提示条，避免重叠 */
  font-size: 10.5px; letter-spacing: 0; color: var(--text-dim);
  background: rgba(8, 12, 24, 0.55);
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(122, 162, 255, 0.12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-variant-numeric: tabular-nums;
  z-index: 8; white-space: nowrap;
}
#earth-clock .clock-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #7dffc8; box-shadow: 0 0 6px #7dffc8; margin-right: 6px;
  animation: status-blink 2s ease-in-out infinite alternate;
}
#earth-clock.hidden { display: none; }
/* 信息卡展开时隐藏时钟，避免在右下角相互遮挡（尤其移动端全宽卡片） */
#info-card:not(.hidden) ~ #earth-clock { display: none; }
@media (max-width: 768px) {
  #earth-clock { font-size: 9.5px; padding: 5px 10px; }
}

/* ---------- 加载页 · 星空轨道 Loading ---------- */
#loader {
  position: absolute; inset: 0; z-index: 100;
  overflow: hidden;
  isolation: isolate;
  background: #02050b;
  transition: opacity .9s ease, visibility .9s;
}
#loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
/* WebGL 就绪前的兜底画面：深空渐变 + 星点，避免首帧空白 */
.loader-fallback { position: absolute; inset: 0; background:
  radial-gradient(circle at 8% 22%, rgba(255,255,255,.9) 0 1px, transparent 1.5px),
  radial-gradient(circle at 17% 11%, rgba(170,215,255,.9) 0 1px, transparent 1.5px),
  radial-gradient(circle at 29% 31%, rgba(255,255,255,.85) 0 1px, transparent 1.5px),
  radial-gradient(circle at 43% 14%, rgba(140,190,255,.8) 0 1px, transparent 1.5px),
  radial-gradient(circle at 57% 24%, rgba(255,255,255,.95) 0 1px, transparent 1.5px),
  radial-gradient(circle at 70% 12%, rgba(255,255,255,.9) 0 1px, transparent 1.5px),
  radial-gradient(circle at 84% 27%, rgba(150,205,255,.9) 0 1px, transparent 1.5px),
  radial-gradient(circle at 94% 9%, rgba(255,255,255,.9) 0 1px, transparent 1.5px),
  radial-gradient(ellipse 120% 60% at 50% 108%, rgba(24, 96, 140, .5), transparent 70%),
  linear-gradient(180deg, #01030a 0%, #041024 55%, #0a2c46 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; }
/* 深空星云呼吸：叠在兜底渐变之上，页面一打开就有氛围 */
.loader-fallback::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 72% 46% at 50% 42%, rgba(70, 112, 255, .17), transparent 70%);
  animation: loader-breathe 4.5s ease-in-out infinite alternate;
}
@keyframes loader-breathe { from { opacity: .5; } to { opacity: 1; } }

.loader-core {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 24px; text-align: center;
  transition: transform .9s cubic-bezier(.3, .6, .2, 1), opacity .8s ease;
}
/* 完成收场：门户绽放（.warp 由 loader.js finish 加），整体淡出（.done 由 hud 加） */
#loader.warp .loader-core { transform: translateY(-16px) scale(.97); opacity: 0; }

/* 轨道门户：三层倾斜轨道环绕呼吸星标 */
.loader-portal {
  position: relative; width: 150px; height: 150px; margin-bottom: 24px;
  perspective: 420px;
  transition: transform .95s cubic-bezier(.25, .65, .2, 1), opacity .85s ease;
}
#loader.warp .loader-portal { transform: scale(2.1); opacity: 0; }
.loader-portal::before {
  content: ''; position: absolute; inset: -38%;
  background: radial-gradient(circle, rgba(110,160,255,.24), rgba(110,160,255,.05) 45%, transparent 68%);
  animation: loader-breathe 3.2s ease-in-out infinite alternate;
}
.orbit {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 1px solid rgba(150, 185, 255, .30);
}
.orbit::after {                       /* 沿轨道运行的亮点 */
  content: ''; position: absolute; top: -2.5px; left: 50%;
  width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: #cfe2ff; box-shadow: 0 0 8px 2px rgba(150, 190, 255, .85);
}
.orbit.o1 { width: 64%; height: 64%; animation: orbit-a 2.8s linear infinite; }
.orbit.o2 { width: 86%; height: 86%; border-color: rgba(150, 185, 255, .20); animation: orbit-b 4.6s linear infinite reverse; }
.orbit.o3 { width: 108%; height: 108%; border-color: rgba(150, 185, 255, .13); animation: orbit-a 6.8s linear infinite; }
@keyframes orbit-a {
  from { transform: translate(-50%, -50%) rotateX(66deg) rotateZ(0turn); }
  to   { transform: translate(-50%, -50%) rotateX(66deg) rotateZ(1turn); }
}
@keyframes orbit-b {
  from { transform: translate(-50%, -50%) rotateX(-58deg) rotateY(26deg) rotateZ(1turn); }
  to   { transform: translate(-50%, -50%) rotateX(-58deg) rotateY(26deg) rotateZ(0turn); }
}
.loader-star {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%);
  font-size: 44px; line-height: 1; color: #eaf2ff;
  text-shadow: 0 0 14px rgba(150, 190, 255, .9), 0 0 42px rgba(110, 150, 255, .5);
  animation: star-pulse 2.2s ease-in-out infinite alternate;
}
@keyframes star-pulse {
  from { transform: translate(-50%, -52%) scale(.92); opacity: .85; }
  to   { transform: translate(-50%, -52%) scale(1.1); opacity: 1; }
}

.loader-title {
  margin: 0; font-size: 21px; font-weight: 600;
  letter-spacing: .42em; text-indent: .42em;
  color: #e9f1ff; text-shadow: 0 2px 18px rgba(90, 140, 255, .35);
}
.loader-sub {
  margin: 7px 0 26px;
  font: 500 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .58em; text-indent: .58em; color: rgba(160, 190, 235, .5);
}
.loader-bar {
  position: relative; width: 230px; height: 3px; border-radius: 999px; overflow: hidden;
  background: rgba(140, 175, 255, .14);
}
#loader-fill {
  display: block; height: 100%; width: 0%; border-radius: inherit;
  background: linear-gradient(90deg, #38e2c2, #6ea8ff 55%, #b48cff);
  box-shadow: 0 0 12px rgba(110, 168, 255, .6);
}
#loader-fill::after {                 /* 流光扫过 */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .85) 50%, transparent 75%);
  background-size: 220% 100%;
  animation: fill-shimmer 1.5s linear infinite;
  opacity: .55;
}
@keyframes fill-shimmer { from { background-position: 190% 0; } to { background-position: -90% 0; } }

.loader-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  width: 230px; margin-top: 12px;
  font: 600 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
#loader-phase { color: #8fe6c0; letter-spacing: .2em; }
#loader-phase::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #69f2c0; box-shadow: 0 0 9px #69f2c0; vertical-align: 1px; animation: status-blink 1.3s ease-in-out infinite alternate; }
/* 加载失败（main.js 写入错误信息前 loader.js halt 加 .error）：定格并转红 */
#loader.error #loader-phase { color: #ff9d9d; }
#loader.error #loader-phase::before { background: #ff7d7d; box-shadow: 0 0 9px #ff7d7d; animation: none; }
#loader-percent { color: rgba(188, 224, 245, .85); }
#loader-label {
  margin: 10px 0 0; max-width: 300px; min-height: 1.4em;
  font-size: 11px; letter-spacing: .06em; color: rgba(170, 196, 225, .66);
}
/* 开屏宇宙冷知识：加载期间轮播，两行占位防换词跳版 */
#loader-fact {
  margin: 14px auto 0; max-width: 320px; min-height: 3em;
  font-size: 11px; line-height: 1.75; letter-spacing: .04em;
  color: rgba(158, 192, 228, .82);
  text-shadow: 0 1px 10px rgba(4, 10, 24, .9);
  opacity: 0;
  transition: opacity .5s ease;
}
#loader-fact::before { content: '✦ '; color: #6fd7ff; text-shadow: 0 0 8px rgba(111, 215, 255, .6); }
#loader-fact.show { opacity: 1; }
#loader.error #loader-fact { transition: none; opacity: 0; }
@media (max-width: 768px) {
  .loader-portal { width: 118px; height: 118px; margin-bottom: 20px; }
  .loader-star { font-size: 36px; }
  .loader-title { font-size: 18px; }
  .loader-bar, .loader-meta { width: 188px; }
  #loader-fact { max-width: 264px; font-size: 10px; }
}
@media (max-width: 380px) {
  #loader-label { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit, .loader-star, .loader-portal::before, .loader-fallback::after, #loader-fill::after { animation: none; }
}

/* ---------- 移动端适配 ---------- */
@media (max-width: 768px) {
  .brand-text h1 { font-size: 15px; }
  .brand-star { font-size: 19px; }
  /* 面板改为底部抽屉：锚定底部（搜索唤起键盘时由 --kb 抬升避让） */
  #panel {
    top: auto; bottom: calc(14px + var(--safe-bottom) + var(--kb, 0px));
    left: calc(10px + var(--safe-left)); right: calc(10px + var(--safe-right));
    width: auto; max-height: calc(56% - var(--kb, 0px));
    padding: 10px 16px calc(14px + var(--safe-bottom));
    scrollbar-width: thin; scrollbar-color: rgba(122,162,255,0.25) transparent;
  }
  #panel::-webkit-scrollbar { width: 4px; }
  #panel::-webkit-scrollbar-thumb { background: rgba(122,162,255,0.25); border-radius: 999px; }
  #panel.hidden { transform: translateY(16px); }
  /* 抽屉抓手 + 下拉关闭的起手区（手势在 hud.js） */
  .sheet-grab {
    display: block; flex: none;
    width: 44px; height: 4px; margin: -4px auto 10px;
    border-radius: 999px; background: rgba(255, 255, 255, 0.22);
    touch-action: none; cursor: grab;
  }
  .panel-head, .info-head { touch-action: none; }
  #info-card {
    left: calc(10px + var(--safe-left)); right: calc(10px + var(--safe-right));
    bottom: calc(10px + var(--safe-bottom)); width: auto;
    max-height: 62%; overflow-y: auto;
    padding: 14px 16px;
  }
  .info-head h2 { font-size: 17px; }
  .info-desc { font-size: 12px; }
  #status { top: calc(58px + var(--safe-top)); font-size: 12px; max-width: calc(100vw - 32px); }
  .marker .label { font-size: 11px; }
  #hint {
    max-width: calc(100vw - 24px);
    white-space: normal; text-align: center; line-height: 1.55;
    bottom: calc(12px + var(--safe-bottom));
  }
  #earth-clock {
    max-width: calc(100vw - 20px);
    overflow: hidden; text-overflow: ellipsis;
    bottom: calc(56px + var(--safe-bottom));
  }
  /* 信息卡展开时收起手势提示，避免底部两片 UI 相互叠压 */
  #info-card:not(.hidden) ~ #hint { display: none; }
}

/* 窄屏单行顶栏收纳：≤768 竖屏（含小桌面窗口）与 ≤920 横屏手机共用。
   601–920px 区间原本放不下完整时间箱（150px 日期输入），右侧按钮会被截断；
   此处统一收起日期跳转、品牌区可收缩、按钮换短文案 */
@media (max-width: 768px), (max-width: 920px) and (orientation: landscape) {
  .date-jump, .date-now { display: none; }
  .crumb-hint { display: none; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .crumb-line { flex: 1; max-width: none; }
  .time-rate { width: 68px; }
  .time-rate-val { font-size: 10.5px; min-width: 44px; }
  #btn-overview .long { display: none; }
  #btn-overview .short { display: inline; }
}

/* 触控设备：放大触控目标至 ≥40px（markers 已有 ≥44px 热区）
   置于手机竖屏规则之前：≤600px 的紧凑尺寸在后覆盖本条 */
@media (pointer: coarse) {
  .pill-btn { padding: 10px 15px; font-size: 12.5px; }
  #btn-freefly { display: none; }   /* 键盘飞行仅桌面端 */
  .icon-btn { width: 40px; height: 40px; font-size: 21px; }
  .target-chip { padding: 10px 14px; font-size: 12.5px; }
  .filter-chip { padding: 7px 12px; font-size: 11.5px; }
  .level-btn { padding: 12px 14px; }
  #info-card .icon-btn { width: 34px; height: 34px; font-size: 17px; }
  .time-rate { height: 22px; }      /* 加高滑块触控目标 */

  /* 触屏全程逐帧重绘画布，backdrop-filter 模糊层需同步重合成，
     是低端 GPU / 微信旧内核掉帧大户：常驻小面片弃用模糊改实底，
     面积大的面板/信息卡保留玻璃感但降模糊半径 */
  .pill-btn, .time-box, #status, #hint, #earth-clock {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(9, 14, 27, 0.85);
  }
  #panel, #info-card {
    backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
    background: rgba(9, 14, 27, 0.84);
  }
}

/* 手机竖屏（≤600px）：顶栏两行紧凑布局，压缩纵向占用
   第一行：✦ 标题 + 当前层级（同行显示，超长省略）
   第二行：时间流速 / 总览 / 星图 均分整行 */
@media (max-width: 600px) {
  #topbar {
    flex-direction: column; align-items: stretch;
    gap: 7px;
    padding: calc(8px + var(--safe-top)) calc(10px + var(--safe-right)) 8px calc(10px + var(--safe-left));
  }
  .brand { align-items: center; }
  .brand-star { font-size: 16px; }
  .brand-text { flex: 1; display: flex; align-items: baseline; gap: 7px; }
  .brand-text h1 { font-size: 14px; letter-spacing: 0; flex: none; }
  #breadcrumb { font-size: 10.5px; }
  #breadcrumb::before { content: '·'; margin-right: 6px; opacity: .65; }

  .top-actions { width: 100%; justify-content: space-between; gap: 6px; flex-wrap: wrap; row-gap: 6px; }
  .pill-btn { padding: 8px 12px; font-size: 12px; letter-spacing: 0; }
  .time-box { padding: 5px 8px; gap: 5px; }
  .time-label { display: none; }          /* ⏱ 图标省略，倍率数值仍在 */
  .time-rate { width: 56px; }
  .time-rate-val { font-size: 10px; min-width: 40px; }
  #btn-panel .long { display: none; }     /* 星图入口图标化，为时间箱腾位 */
  #btn-panel .short { display: inline; }

  /* 顶栏总高约 80px：飞行状态条紧随其下 */
  #status { top: calc(84px + var(--safe-top)); }
}

/* 横屏手机（601–920px）：顶栏单行已由上方收纳规则压缩，此处只调纵向布局 */
@media (max-width: 920px) and (orientation: landscape) {
  #topbar { padding-top: calc(6px + var(--safe-top)); }
  #status { top: calc(46px + var(--safe-top)); }
  #info-card { max-height: 60%; width: 300px; left: auto; }
  #panel { max-height: 66%; }
  #hint { bottom: calc(8px + var(--safe-bottom)); }
  #earth-clock { bottom: calc(44px + var(--safe-bottom)); }
}

/* ---------- 无障碍：减少动效偏好 ---------- */
/* Observation controls share stable touch targets across pointer types. */
*, *::before, *::after { letter-spacing: 0; }
:root { --glass: rgba(12, 15, 22, .88); --glass-border: rgba(186, 200, 223, .19); --visual-height: 100dvh; }
button, input, select { font-family: inherit; }
button svg { width: 18px; height: 18px; stroke-width: 1.6; flex: none; pointer-events: none; }
.icon-btn { width: 44px; height: 44px; border-radius: 8px; color: var(--text); background: var(--glass); }
.pill-btn { min-height: 44px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.top-actions { gap: 6px; align-items: center; flex-wrap: nowrap; }
#topbar { align-items: center; gap: 12px; }
.brand-text h1 { font-size: 18px; }
.brand-star { animation: none; }
#panel, #info-card { border-radius: 8px; }
.library-scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 10px 0; border-bottom: 1px solid rgba(145,165,195,.18); }
.library-scope label { position: relative; min-width: 0; cursor: pointer; }
.library-scope input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.library-scope span { display: flex; align-items: center; justify-content: center; gap: 4px; height: 44px; font-size: 12px; border-bottom: 2px solid transparent; color: #8e9ab0; }
.library-scope svg { width: 14px; height: 14px; flex: none; }
.library-scope input:checked + span { color: #9ee9cd; border-color: #70cdaa; }
.library-scope input:focus-visible + span { outline: 2px solid #9ee9cd; outline-offset: -2px; }
#info-card .info-actions { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(145,165,195,.12); }
#info-card .info-actions .icon-btn { position: static; flex: none; width: 44px; height: 44px; }
#info-card .info-actions .icon-btn[aria-pressed="true"] { color: #9ee9cd; }
#info-card .info-actions .icon-btn[aria-pressed="true"] svg { fill: rgba(112,205,170,.2); }
.icon-btn:disabled { opacity: .28; cursor: default; }
.info-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.info-actions .icon-btn { width: 32px; height: 32px; }
.observe-dialog { position: absolute; z-index: 20; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(430px, calc(100vw - 28px)); max-height: min(72vh, 560px); overflow: auto; padding: 18px; background: rgba(8,13,27,.96); border: 1px solid rgba(122,162,255,.28); border-radius: 10px; box-shadow: 0 18px 60px rgba(0,0,0,.45); }
.observe-dialog h2 { font-size: 16px; margin-bottom: 12px; }
.observe-dialog p { color: var(--text-dim); font-size: 12px; line-height: 1.6; }
.observe-dialog .dialog-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(145,165,195,.12); font-size: 12px; }
.observe-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.observe-dialog .dialog-close { width: 30px; height: 30px; position: absolute; top: 10px; right: 10px; }
.share-preview { margin: 0; }
.share-preview img { display: block; width: 100%; max-height: 52vh; object-fit: contain; border-radius: 8px; border: 1px solid rgba(122,162,255,.22); background: #05070f; }
.share-preview figcaption { margin-top: 8px; color: var(--text-dim); font-size: 11px; text-align: center; }
.compare-list { display: grid; gap: 8px; margin-top: 10px; }
.compare-card { padding: 10px; border: 1px solid rgba(145,165,195,.18); border-radius: 6px; background: rgba(255,255,255,.035); }
.compare-card strong { display: block; margin-bottom: 4px; }
.measure-line { position: absolute; z-index: 7; pointer-events: none; height: 2px; transform-origin: 0 50%; background: var(--accent-2); box-shadow: 0 0 10px rgba(255,210,122,.75); }
.measure-label { position: absolute; z-index: 8; pointer-events: none; padding: 4px 7px; color: var(--text); background: rgba(8,13,27,.86); border: 1px solid rgba(255,210,122,.35); border-radius: 4px; font-size: 11px; white-space: nowrap; }
#personal-targets.hidden, #target-groups.hidden, #info-card .info-actions.hidden { display: none; }
#panel.hidden, #info-card.hidden { visibility: hidden; }
#panel { z-index: 30; }
#panel-mask { z-index: 24; }
.level-btn, .target-search { border-radius: 6px; }
.panel-head h2 { font-size: 15px; }
.panel-head { flex: none; }
#panel > .panel-section { flex: none; }
#panel > .panel-section:has(#level-list) { order: 2; margin-top: 12px; }
#panel > .panel-section:has(#target-groups) { order: 1; }
.target-chip { border-radius: 6px; min-height: 40px; padding: 8px 10px; }
.type-filter { padding-bottom: 8px; }
.filter-chip { min-height: 36px; }
.tgroup-head { min-height: 40px; }
.target-search { min-height: 44px; font-size: 16px; }
#search-empty { padding: 24px 0; text-align: center; font-size: 13px; color: var(--text-dim); }
#search-empty.hidden { display: none; }
#info-card { width: 340px; padding: 20px; max-height: calc(100% - 100px); overflow-y: auto; }
#info-card .icon-btn { width: 44px; height: 44px; top: 6px; right: 6px; background: transparent; border: 0; }
.info-head { padding-right: 32px; gap: 7px; }
.info-head h2 { font-size: 20px; line-height: 1.4; overflow-wrap: anywhere; }
.info-en { flex-basis: 100%; overflow-wrap: anywhere; }
.info-row { line-height: 1.6; }
#info-dist { min-width: 0; overflow-wrap: anywhere; }
#info-expand { display: none; }
.type-badge { box-shadow: none; border-radius: 4px; }
#view-tools {
  position: absolute; right: calc(14px + var(--safe-right)); top: calc(var(--topbar-height, 64px) + 12px); z-index: 12;
  display: flex; flex-direction: row; gap: 4px; padding: 4px;
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 8px;
}
#view-tools .icon-btn { background: transparent; border: 0; }
#view-tools .icon-btn[aria-pressed="true"] { color: #90e6c2; background: rgba(103, 213, 170, .12); }
.tool-divider { width: 1px; height: 24px; background: var(--glass-border); margin: 10px 3px; }
#observation-settings {
  position: absolute; top: calc(var(--topbar-height, 68px) + 8px); right: calc(14px + var(--safe-right));
  z-index: 35; width: 320px; max-width: calc(100% - 24px); padding: 16px;
  max-height: calc(var(--visual-height) - 110px); overflow-y: auto; overscroll-behavior: contain;
  background: #11151e; border: 1px solid var(--glass-border); border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
}
#observation-settings.hidden { display: none; }
#observation-settings .time-box { display: grid; grid-template-columns: 1fr auto; gap: 8px; border: 0; border-radius: 0; background: none; padding: 8px 0 12px; backdrop-filter: none; }
#observation-settings label, .setting-label { font-size: 13px; }
#observation-settings .settings-subhead { margin: 14px 0 4px; padding-top: 10px; border-top: 1px solid rgba(145,165,195,.18); color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
#observation-settings .settings-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.subtle-btn { min-height: 34px; padding: 6px 8px; color: var(--text); background: rgba(255,255,255,.05); border: 1px solid var(--glass-border); border-radius: 6px; font: inherit; font-size: 11px; cursor: pointer; }
.subtle-btn:hover { background: rgba(122,184,255,.14); border-color: rgba(122,184,255,.45); }
.subtle-btn.primary { min-width: 96px; color: #06121f; background: #7ab8ff; border-color: transparent; font-weight: 600; }
.subtle-btn.primary:hover { background: #93c6ff; }

/* ---------- 剧情选择浮层（顶栏「剧情」按钮弹出） ---------- */
#story-picker {
  position: absolute; top: calc(var(--topbar-height, 68px) + 8px); right: calc(14px + var(--safe-right));
  z-index: 35; width: 320px; max-width: calc(100% - 24px); padding: 14px;
  background: #11151e; border: 1px solid var(--glass-border); border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
}
#story-picker.hidden { display: none; }
.story-card {
  display: flex; flex-direction: column; gap: 5px;
  width: 100%; margin-top: 8px; padding: 12px 13px;
  text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: rgba(84, 120, 200, 0.14);
  border: 1px solid rgba(122, 184, 255, 0.3); border-radius: 10px;
  transition: border-color .2s, background .2s, transform .15s ease;
}
.story-card:hover { border-color: rgba(138, 216, 255, 0.6); background: rgba(70, 105, 180, 0.28); transform: translateX(2px); }
.story-card:active { transform: translateX(2px) scale(0.985); }
.story-card strong { font-size: 13.5px; color: #e9f1ff; }
.story-card strong::before { content: '✦ '; color: #8fd8ff; }
.story-card span { font-size: 11px; line-height: 1.7; color: rgba(190, 210, 235, .8); }
.story-card em { font-style: normal; font-size: 10.5px; color: var(--text-dim); }
#btn-story.active { color: #90e6c2; border-color: rgba(103, 213, 170, .45); background: rgba(103, 213, 170, .12); }
#observation-settings .time-rate { grid-column: 1 / -1; width: 100%; height: 36px; }
#observation-settings .time-rate-val { font-size: 12px; }
.setting-label { display: block; color: var(--text-dim); margin-bottom: 8px; }
.date-row { display: flex; gap: 8px; padding-bottom: 16px; }
#observation-settings .date-jump { display: block; flex: 1; min-width: 0; width: auto; font-size: 16px; height: 44px; padding: 8px; background: #1a202b; border: 1px solid var(--glass-border); border-radius: 6px; }
#observation-settings .date-now { display: block; padding: 8px; min-height: 44px; font-size: 12px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; border-top: 1px solid var(--glass-border); }
.setting-row select { color: var(--text); color-scheme: dark; background: #1a202b; border: 1px solid var(--glass-border); border-radius: 6px; min-height: 40px; padding: 6px 10px; font-size: 16px; }
.setting-row input[type="checkbox"] { appearance: none; width: 44px; height: 26px; border-radius: 20px; background: #39414f; position: relative; cursor: pointer; }
.setting-row input[type="checkbox"]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.setting-row input[type="checkbox"]:checked { background: #468a74; }
.setting-row input[type="checkbox"]:checked::after { transform: translateX(18px); }
.setting-row input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#status { top: calc(var(--topbar-height, 60px) + 8px); max-width: calc(100% - 32px); pointer-events: none; }

@media (max-width: 768px), (pointer: coarse) and (max-height: 600px) {
  #topbar { flex-direction: row; padding: calc(8px + var(--safe-top)) calc(10px + var(--safe-right)) 8px calc(10px + var(--safe-left)); gap: 6px; }
  .brand { flex: 1; gap: 6px; }
  .brand-text { display: block; }
  .brand-text h1 { font-size: 15px; }
  .brand-star { font-size: 18px; }
  .crumb-line { display: block; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #breadcrumb { font-size: 10px; }
  #breadcrumb::before { content: none; }
  .top-actions { width: auto; flex: none; gap: 4px; }
  .top-actions .pill-btn { padding: 8px 10px; font-size: 12px; }
  #btn-freefly { display: none; }
  #panel {
    top: auto; left: var(--safe-left); right: var(--safe-right); bottom: var(--kb, 0px);
    max-width: none; width: auto; max-height: calc(var(--visual-height) * .78);
    padding: 10px 16px calc(16px + var(--safe-bottom)); border-radius: 8px 8px 0 0;
    background: rgba(13, 17, 24, .98); backdrop-filter: none;
  }
  .sheet-grab { display: block; width: 44px; height: 5px; margin: 0 auto 6px; }
  .panel-head { touch-action: none; }
  .target-chip, .filter-chip, .tgroup-head, .level-btn { min-height: 44px; }
  .target-chip { flex: 0 1 auto; max-width: 100%; font-size: 13px; }
  .target-chip .chip-dot { flex: none; }
  #info-card { left: calc(10px + var(--safe-left)); right: calc(10px + var(--safe-right)); bottom: calc(10px + var(--safe-bottom)); width: auto; max-width: none; max-height: 46%; padding: 13px 16px 4px; background: rgba(13,17,24,.93); }
  .info-head { margin-bottom: 6px; gap: 5px 8px; }
  .info-head h2 { font-size: 17px; }
  .info-en { font-size: 10px; }
  .info-row { font-size: 12px; padding: 6px 0; }
  #info-card:not(.expanded) .info-desc { display: none; }
  .info-desc { font-size: 13px; line-height: 1.8; }
  #info-expand { display: flex; justify-content: center; align-items: center; gap: 6px; width: 100%; min-height: 40px; color: var(--text-dim); font-size: 11px; border: 0; background: none; cursor: pointer; }
  #info-expand svg { width: 14px; height: 14px; }
  .expanded #info-expand svg { transform: rotate(180deg); }
  #view-tools { top: auto; bottom: calc(18px + var(--safe-bottom)); right: calc(10px + var(--safe-right)); flex-direction: row; }
  .info-open #view-tools { bottom: calc(var(--info-height, 145px) + 20px + var(--safe-bottom)); }
  .tool-divider { width: 1px; height: 24px; margin: 10px 3px; }
  #earth-clock { left: calc(10px + var(--safe-left)); right: auto; bottom: calc(80px + var(--safe-bottom)); }
}
@media (max-width: 360px) {
  .top-actions .pill-btn { width: 44px; padding: 0; }
  #btn-panel span { display: none; }
  .brand-star { display: none; }
}
@media (orientation: landscape) and (max-height: 600px) {
  #info-card { left: auto; right: calc(10px + var(--safe-right)); width: 280px; max-height: calc(100% - 80px); }
  #panel { left: var(--safe-left); right: auto; width: min(390px, 50%); max-height: calc(var(--visual-height) - 12px); }
  #view-tools, .info-open #view-tools { left: calc(12px + var(--safe-left)); right: auto; bottom: calc(12px + var(--safe-bottom)); }
  #observation-settings { max-height: calc(var(--visual-height) - 72px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marker { transition: none; }
}