/* 星星所在之处：舞台、公共件和夜空页的样式。所有按钮都是悬浮的、实心底色，不半透明，不压住星星。
   按钮是固定像素（五钮条 46×30、左侧竖窗 40 宽），其余尺寸 calc(var(--u) * n)；
   --u、--cell（缩略图格子边长）、--dock-w、--dock-h、--dock-body 由 shell.layout 写进根节点。 */

/* 共用部件（弹窗、导出页、色盘）是夜色：深底浅字。 */
:root {
  --bg: #080b18;
  --surface: #1a2140;
  --surface-2: #273056;
  --field: #27305a;
  --bar: #3a4378;
  --ink: #f0f2fa;
  --ink-2: #b3badb;
  --ink-3: #8189ad;
  --line: #454f82;
  --accent: #c2cff7;
  --danger: #a8423b;
  --on-dark: #f0f2fa;
}

.modal-overlay {
  background: rgba(4, 6, 14, 0.72);
}

.modal {
  border: var(--border-w) solid var(--line);
}

.modal-close {
  border: 0;
}

.modal-head {
  padding: 0 4px 0 12px;
}

.modal-head-pad {
  margin-left: -8px;
}

.modal-title {
  text-align: center;
}

.modal-text {
  text-align: center;
}

.modal-foot {
  justify-content: center;
}

.modal-foot .btn {
  flex: 0 1 auto;
  min-width: 140px;
}

/* 舞台：铺满整个视口；3D 夜空占满，按钮和面板只是浮在上面。 */
.stage {
  position: absolute;
  top: 0;
  overflow: hidden;
  background: #141a33;
  color: var(--ink);
  touch-action: none;
}

.sky-layers {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.drawing,
.scope-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.scope-mask {
  z-index: 2;
  display: none;
}

.sky-view,
.sky-gl {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.sky-gl {
  display: block;
}

.sky-view {
  pointer-events: none;
}

/* 标题：整行居中，左右各留出中 / EN 和左上操作条的位置。 */
.title {
  position: absolute;
  left: 72px;
  right: 72px;
  top: calc(8px + env(safe-area-inset-top, 0px));
  z-index: 5;
  margin: 0;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  font-size: calc(var(--u) * 5.8);
  line-height: 34px;
  font-weight: var(--title-weight);
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  color: var(--ink);
  pointer-events: none;
}

/* 中 / EN 分段钮：贴在居中内容列的右沿，不贴窗口最边。实心底，整体一个外框，选中的一半填色。 */
.lang {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: calc((100% - var(--dock-w)) / 2);
  z-index: 5;
  display: flex;
  height: 22px;
  border-radius: 6px;
  background: #1a2140;
  border: 1px solid #5a6bb8;
  overflow: visible;
}

.lang::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  top: -11px;
  bottom: -11px;
}

.lang-half {
  position: relative;
  display: block;
  padding: 0 8px;
  font-size: 12px;
  line-height: 22px;
  color: var(--ink-2);
}

.lang-half:first-child {
  border-radius: 6px 0 0 6px;
}

.lang-half:last-child {
  border-radius: 0 6px 6px 0;
}

.lang-half.is-on {
  background: #4f5a99;
  color: var(--ink);
}

/* 设备不支持 3D 时夜空中央的一句说明。 */
.nogl {
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  width: calc(var(--u) * 80);
  max-width: calc(100% - 48px);
  margin: 0 auto;
  text-align: center;
  text-wrap: balance;
  word-break: keep-all;
  font-size: calc(var(--u) * 4);
  line-height: 1.6;
  color: var(--ink-2);
}

/* 小钮条：回退、重做、重新开始、导出。每钮 46 × 30，icon 16，间距 6；实心、无阴影。点击区用伪元素扩到 52 × 44。 */
.strip {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50px + env(safe-area-inset-top, 0px));
  z-index: 4;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.sbtn {
  position: relative;
  flex: none;
  width: 46px;
  height: 30px;
  margin: 0 3px;
  padding: 0;
  color: var(--ink);
  pointer-events: auto;
  box-shadow: none;
}

.sbtn::after {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  top: -7px;
  bottom: -7px;
}

.sbtn .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
}

.sbtn .icon svg,
.mode-btn .icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sbtn[data-state='on'] {
  color: #ffffff;
}

.sbtn[disabled] {
  color: #6c75a3;
  cursor: default;
}

/* 左上竖窗：移动、旋转、望远镜。实心底色，竖着连成一条，选中的是浅底深色图标；整条可以拖，但不出屏幕。 */
.mode-strip {
  position: absolute;
  z-index: 5;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: calc(8px + env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  width: 40px;
  border: 1.5px solid #5a6bb8;
  border-radius: 20px;
  background: #1a2140;
  overflow: hidden;
}

.mode-grip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 14px;
  background: #273056;
  touch-action: none;
  cursor: grab;
}

.mode-grip span {
  width: 14px;
  height: 2px;
  margin-top: 2px;
  border-radius: 1px;
  background: #8189ad;
}

.mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 32px;
  padding: 0;
  border-top: 1px solid #454f82;
  color: #b3badb;
}

.mode-btn .icon {
  display: block;
  width: 18px;
  height: 18px;
}

.mode-btn.is-on {
  background: #e9edff;
  color: #1b2350;
}

/* 底部一整块：实心底色，从上到下 距离拉条 → 三个标签 → 当前标签的内容。居中偏下。 */
.dock {
  position: absolute;
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  width: var(--dock-w);
  height: auto;
  padding: 8px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.dock > .plate-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* 距离：钮停在中间，往左近、往右远。 */
.dist {
  position: relative;
  display: flex;
  align-items: center;
  height: 34px;
  margin: 0 2px 6px;
}

.dist-label,
.dist-value {
  flex: none;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
}

.dist-value {
  min-width: 52px;
  margin-left: 8px;
  text-align: right;
}

.dist-value.is-end {
  color: #8189ad;
}

.jog {
  position: relative;
  flex: 1 1 auto;
  height: 28px;
  margin-left: 8px;
  touch-action: none;
}

.jog-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  height: 4px;
  border-radius: 999px;
  background: #3a4378;
}

.jog-knob {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border: 1.5px solid #5a6bb8;
  border-radius: 50%;
  background: #eef0fa;
}

/* 三个标签：实心底，选中的填亮蓝；点按区用伪元素扩到 44。 */
.dock-tabs {
  position: relative;
  display: flex;
  align-items: center;
  height: 34px;
  margin: 0 2px;
}

.tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 34px;
  margin-right: 6px;
  padding: 0;
  border: 1.5px solid #5a6bb8;
  border-radius: 9px;
  background: #273056;
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

.tab:last-child {
  margin-right: 0;
}

.tab::after,
.seg-btn::after,
.text-btn::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: -5px;
  bottom: -5px;
}

.tab.is-on {
  border-color: #d4dcff;
  background: #5a6bd0;
  color: #ffffff;
  font-weight: 700;
}

html[lang^='en'] .tab {
  font-size: 12.5px;
}

/* 标签内容行：三个标签各一块，只显示当前的那块。 */
.dock-body {
  position: relative;
  height: var(--dock-body);
  margin-top: 6px;
}

.tab-body {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 0;
  bottom: 0;
  display: none;
  align-items: center;
}

.stage[data-tab='draw'] .body-draw,
.stage[data-tab='stars'] .body-stars,
.stage[data-tab='skies'] .body-skies {
  display: flex;
}

.body-draw,
.body-skies {
  justify-content: center;
}

/* 绘制标签两行：第一行三个钮，第二行画连线的简化程度。 */
.body-draw {
  flex-direction: column;
}

.draw-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.draw-row + .draw-row {
  margin-top: 6px;
}

.simp-row {
  padding: 0 7px;
}

.simp-label,
.simp-unit {
  flex: none;
  font-size: 13px;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

.simp-range {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 16px;
  margin: 0 10px;
  border-color: #5a6bb8;
  background: #273056;
}

.simp-range::-webkit-slider-runnable-track {
  height: 12px;
}

.simp-range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -6px;
  border-color: #5a6bb8;
  background: #eef0fa;
}

.simp-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-color: #5a6bb8;
  background: #eef0fa;
}

.simp-num {
  flex: none;
  width: 44px;
  height: 28px;
  margin: 0 3px 0 0;
  padding: 0;
  border: 1.5px solid #5a6bb8;
  border-radius: 9px;
  background: #273056;
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
  text-align: center;
}

.simp-num:focus {
  border-color: #d4dcff;
}

/* 画连线 / 放星星 的分段钮：每半按自己的字宽，字放在正中；放不下时和左右两个钮一起收窄。 */
.seg {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  border: 1.5px solid #5a6bb8;
  border-radius: 9px;
  overflow: hidden;
  background: #273056;
}

.seg-btn {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.seg-btn + .seg-btn {
  padding-left: 6.5px;
  border-left: 1.5px solid #5a6bb8;
}

.seg-btn.is-on {
  background: #5a6bd0;
  color: #ffffff;
  font-weight: 700;
}

/* 文字钮（导入图片、重新连线、重置）：实心底，白字。 */
.text-btn {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1.5px solid #5a6bb8;
  border-radius: 9px;
  background: #273056;
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

.body-draw .seg,
.body-draw .text-btn {
  margin: 0 3px;
}

.body-skies .text-btn {
  flex: none;
  margin-left: 8px;
}

html[lang^='en'] .seg-btn,
html[lang^='en'] .text-btn {
  font-size: 12.5px;
}

html[lang^='en'] .text-btn {
  padding: 0 7px;
}

/* 星星 / 夜空：一排横着滑的格子；滚动条按项目做法隐藏。 */
.body-scroll {
  justify-content: flex-start;
}

.opt-scroll {
  display: flex;
  align-items: center;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.opt-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.body-skies .opt-scroll {
  flex: 1 1 auto;
  min-width: 0;
}

/* 一颗预设星星 / 一张夜空的格子：实心底的小方块，选中套一圈亮边。 */
.pick {
  position: relative;
  flex: none;
  display: block;
  width: max-content;
  margin-right: 8px;
  padding: 0;
  color: var(--ink);
  text-align: center;
}

.pick:last-child {
  margin-right: 2px;
}

.pick-art {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border: 1.5px solid #5a6bb8;
  border-radius: 8px;
  background: #12182e;
}

.pick.is-on .pick-art {
  border-color: #d4dcff;
}

.pick-art canvas,
.pick-art .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
}

.pick-art canvas.art-sky {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 7px;
}

.pick-art .icon svg,
.pick-art canvas {
  display: block;
}

.pick-name {
  display: block;
  width: max-content;
  margin: 2px auto 0;
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
  word-break: keep-all;
  color: var(--ink-2);
}

.pick.is-on .pick-name {
  color: var(--ink);
}

html[lang^='en'] .pick-name {
  font-size: 10px;
}

.stage[data-short='1'] .pick-art {
  width: 38px;
  height: 38px;
}

/* 导入弹窗里的两行文字选项 */
.sky-dialog .rows .row:last-child {
  margin-bottom: 0;
}

.row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  margin: 0 0 calc(var(--u) * 1.6);
  padding: 0 calc(var(--u) * 3);
  color: var(--ink);
  font-size: calc(var(--u) * 4);
  line-height: 1.3;
}

.rows .row:last-child {
  margin-bottom: 0;
}

.row .plate-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.row-text {
  position: relative;
  display: block;
  text-align: center;
}

.plate-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* 分享动画 / 下载预览层：整层盖住舞台，整张画布就是那张图；只有右上角的小 ×。 */
/* 星座报告：弹窗里从上到下的一列，数字和进度条的填充由脚本逐帧写宽度。 */
.report-view {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
  background: #0a0e24;
}

.report-score {
  margin-top: var(--gap-3);
}

.report-score-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.report-score-label {
  color: var(--ink-2);
  font-size: var(--text);
}

.report-pct {
  font-size: calc(var(--u) * 11);
  line-height: 1.2;
  color: var(--ink);
}

.report-bar {
  height: calc(var(--u) * 2.4);
  margin-top: var(--gap-1);
  border-radius: 999px;
  background: var(--field);
  overflow: hidden;
}

.report-bar-small {
  height: calc(var(--u) * 1.6);
}

.report-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.report-match {
  margin: var(--gap-3) 0 0;
  text-align: center;
  font-size: calc(var(--u) * 4.4);
  line-height: 1.4;
}

.report-parts {
  margin: var(--gap-3) 0 0;
  padding: 0;
  list-style: none;
}

.report-part + .report-part {
  margin-top: var(--gap-2);
}

.report-part-head {
  display: flex;
  justify-content: space-between;
  color: var(--ink-2);
  font-size: var(--text-small);
  line-height: 1.5;
}

.report-facts {
  margin: var(--gap-3) 0 0;
  text-align: center;
  color: var(--ink-2);
  font-size: var(--text-small);
  line-height: 1.5;
}

.report-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: var(--gap-2);
  margin-top: var(--gap-3);
}

.report-actions .btn {
  width: 100%;
  padding: 0 var(--gap-1);
  font-size: var(--text-small);
  text-align: center;
  white-space: normal;
}

/* 图片变星座的调节窗：预览、轮廓—精细拉条、星数或认不出的原因。 */
.pic-view {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
  background: #0a0e24;
}

.pic-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-gap: var(--gap-2);
  align-items: center;
  margin-top: var(--gap-3);
}

.pic-end {
  color: var(--ink-2);
  font-size: var(--text-small);
  white-space: nowrap;
}

.pic-note {
  margin: var(--gap-2) 0 0;
  text-align: center;
  color: var(--ink-2);
  font-size: var(--text-small);
  line-height: 1.5;
}

/* 英文标题是两行，放进标题行里；字号小一点，行高紧。 */
html[lang^='en'] .title {
  white-space: pre-line;
  font-size: calc(var(--u) * 3.8);
  line-height: 1.04;
  letter-spacing: 0.02em;
  text-indent: 0.02em;
}

html[lang^='en'] .dist-label,
html[lang^='en'] .dist-value {
  font-size: 12px;
}

/* 重新连线等文字钮不可用（星星少于两颗）。 */
.text-btn:disabled {
  border-color: #3a4378;
  background: #1e2549;
  color: #6c75a3;
  cursor: default;
}

/* 导入的格子右上角的删除小钮；点按区用伪元素扩开。 */
.pick-del {
  position: absolute;
  right: -6px;
  top: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid #5a6bb8;
  border-radius: 50%;
  background: #273056;
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
}

.pick-del::after {
  content: '';
  position: absolute;
  left: -6px;
  right: -6px;
  top: -6px;
  bottom: -6px;
}

/* 顶部提示条：放在标题和小钮条下面。 */
.stage .toast {
  --toast-top: calc(92px + env(safe-area-inset-top, 0px));
  z-index: 30;
}

/* 极窄屏幕上署名那块缩一点，第二行和链接仍排在同一行。 */
@media (max-width: 359px) {
  .credit-text {
    font-size: calc(var(--u) * 2.6);
  }

  .credit-avatar {
    margin-right: var(--gap-2);
  }
}