/* ============================================================
   太阳系巡礼 · 深空轨道观测台
   视觉基调:近黑蓝的深空 + 黄铜金仪器强调色 + 等宽数据读出
   ============================================================ */

:root{
  --void:      #04060d;
  --panel:     rgba(10, 15, 28, .74);
  --line:      rgba(146, 184, 235, .16);
  --ink:       #dfe8f4;
  --muted:     #8794a9;
  --faint:     #5a667a;
  --gold:      #e8b65a;
  --gold-dim:  rgba(232, 182, 90, .38);
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sans: 'Space Grotesk', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.mono{ font-family: var(--mono); }

svg[hidden]{ display: none; } /* hidden 属性的 UA 样式不覆盖 SVG 元素 */

/* ---------- 三维视口 ---------- */
#viewport{ position: fixed; inset: 0; z-index: 0; }
#viewport canvas{
  display: block;
  cursor: grab;
  touch-action: none;
  animation: canvas-in 1.1s ease-out both;
}
#viewport canvas.dragging{ cursor: grabbing; }
#viewport canvas.hovering{ cursor: pointer; }
@keyframes canvas-in{ from{ opacity: 0; } }

/* ---------- 通用 HUD ---------- */
.hud{ position: fixed; z-index: 10; }
.panel{
  background: var(--panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 14px;
  animation: fade-in .9s .25s ease-out both;
}
@keyframes fade-in{ from{ opacity: 0; } }

button{ font-family: inherit; }
button:focus-visible, input:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- 左上:题铭 + 模拟时钟 ---------- */
#hud-top{
  top: 24px; left: 28px;
  pointer-events: none; user-select: none;
  animation: fade-in .9s ease-out both;
}
#hud-top .eyebrow{
  margin: 0 0 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .34em;
  color: var(--gold);
}
#hud-top h1{
  margin: 0 0 9px;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: .46em;
  text-shadow: 0 0 24px rgba(8, 12, 24, .9);
}
#clock{
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--muted);
}
#clock .sep{ margin: 0 9px; color: var(--gold-dim); }

/* ---------- 左侧:天体索引 ---------- */
#planet-index{
  left: 26px; top: 50%;
  transform: translateY(-50%);
  padding: 14px 10px 12px;
  min-width: 122px;
}
.idx-title{
  margin: 0 6px 9px;
  font-size: 10px;
  letter-spacing: .32em;
  color: var(--faint);
}
#index-list{
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1px;
}
#index-list button{
  display: flex; align-items: center;
  width: 100%;
  padding: 6px 10px;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .14em;
  cursor: pointer;
  transition: color .18s, background .18s;
}
#index-list button:hover{ color: var(--ink); background: rgba(146, 184, 235, .08); }
#index-list button.active{ color: var(--gold); }

/* ---------- 右侧:信息面板 ---------- */
#info-panel{
  right: 26px; top: 50%;
  transform: translateY(-50%);
  width: 300px;
  padding: 20px 20px 14px;
  display: flex; flex-direction: column; gap: 13px;
}
.ip-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
#ip-latin{
  margin: 0 0 5px;
  font-size: 10px;
  letter-spacing: .32em;
  color: var(--gold);
}
#ip-name{
  margin: 0;
  font-size: 33px;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1;
  white-space: nowrap;
}
.badge{
  flex: none;
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: .14em;
  padding: 4px 10px;
  border: 1px solid var(--gold-dim);
  border-radius: 99px;
  color: var(--gold);
  white-space: nowrap;
}
#ip-stats{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 14px;
  margin: 2px 0 0;
}
.stat dt{
  margin: 0 0 3px;
  font-size: 9.5px;
  letter-spacing: .2em;
  color: var(--faint);
}
.stat dd{
  margin: 0;
  font-size: 12.5px;
  font-family: var(--mono);
  letter-spacing: .02em;
}
#ip-desc{
  margin: 0;
  font-size: 12.5px;
  line-height: 1.78;
  color: #b6c1d3;
}
#ip-hint{
  margin: 0;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--faint);
}
#info-panel .flash{ animation: panel-flash .45s ease-out; }
@keyframes panel-flash{
  from{ opacity: .25; transform: translateY(5px); }
  to{ opacity: 1; transform: none; }
}

/* ---------- 底部:控制台 ---------- */
#control-bar{
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  width: max-content; /* 固定定位的收缩宽度会被视口右半截断,显式声明避免按钮文字竖排 */
  display: flex; align-items: center; gap: 13px;
  padding: 11px 18px;
}
#control-bar .divider{ width: 1px; height: 22px; background: var(--line); flex: none; }

.ctl{
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .12em;
  padding: 7px 10px;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
  transition: color .18s, background .18s, border-color .18s;
}
.ctl:hover{ color: var(--ink); background: rgba(146, 184, 235, .08); }
.ctl.toggle[aria-pressed="true"]{
  color: var(--gold);
  border-color: var(--gold-dim);
  background: rgba(232, 182, 90, .06);
}
.ctl.round{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  padding: 0;
}
.ctl.round:hover{ background: rgba(232, 182, 90, .1); }
.ctl.wide{ width: 100%; border: 1px solid var(--line); padding: 8px; font-size: 12px; }
.ctl.wide:hover{ border-color: var(--gold-dim); color: var(--gold); }

.speed-group{ display: flex; align-items: center; gap: 11px; }
.speed-group label{
  font-size: 10px;
  letter-spacing: .26em;
  color: var(--faint);
}
#speed-slider{
  -webkit-appearance: none;
  appearance: none;
  width: 168px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold) var(--fill, 52%), rgba(146, 184, 235, .25) var(--fill, 52%));
  cursor: pointer;
}
#speed-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid #10182a;
  box-shadow: 0 0 0 1px var(--gold-dim);
}
#speed-slider::-moz-range-thumb{
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid #10182a;
  box-shadow: 0 0 0 1px var(--gold-dim);
}
#speed-read{
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--ink);
  min-width: 196px;
  white-space: nowrap;
}

/* ---------- 名称标签(3D 投影) ---------- */
#labels{
  position: fixed; inset: 0;
  z-index: 5;
  pointer-events: none;
}
body.labels-off #labels{ display: none; }
.label{
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  color: #c9d4e4;
  opacity: .78;
  transition: opacity .2s, color .2s;
  will-change: transform;
}
.label:hover{ opacity: 1; color: #fff; }
.label.focused{ color: var(--gold); opacity: 1; }

/* ---------- 聚焦瞄准框(签名元素) ---------- */
#reticle{
  position: fixed; left: 0; top: 0;
  z-index: 6;
  pointer-events: none;
  will-change: transform, width, height;
}
#reticle[hidden]{ display: none; }
#reticle .ring{
  position: absolute; inset: 7px;
  border: 1px dashed var(--gold-dim);
  border-radius: 50%;
  animation: reticle-spin 18s linear infinite;
}
#reticle .c{
  position: absolute;
  width: 11px; height: 11px;
  border: 1.5px solid var(--gold);
}
#reticle .tl{ left: 0; top: 0; border-right: 0; border-bottom: 0; }
#reticle .tr{ right: 0; top: 0; border-left: 0; border-bottom: 0; }
#reticle .bl{ left: 0; bottom: 0; border-right: 0; border-top: 0; }
#reticle .br{ right: 0; bottom: 0; border-left: 0; border-top: 0; }
@keyframes reticle-spin{ to{ transform: rotate(360deg); } }

/* ---------- 底部提示 ---------- */
#hint{
  left: 50%; bottom: 100px;
  transform: translateX(-50%);
  margin: 0;
  font-size: 10.5px;
  letter-spacing: .3em;
  color: var(--faint);
  pointer-events: none;
  transition: opacity 1.2s;
  animation: fade-in 1s .8s ease-out both;
  white-space: nowrap;
}
#hint.gone{ opacity: 0; }

/* ---------- 动效克制 ---------- */
@media (prefers-reduced-motion: reduce){
  #viewport canvas{ animation: none; }
  .panel, #hud-top, #hint{ animation: none; }
  #reticle .ring{ animation: none; }
  .label{ transition: none; }
}

/* ---------- 清屏:隐藏全部界面块(索引/信息面板/控制台/题铭/提示),场景照旧 ---------- */
body.clean-view #hud-top,
body.clean-view #planet-index,
body.clean-view #info-panel,
body.clean-view #control-bar,
body.clean-view #hint { display: none !important; }

/* ---------- 帮助面板 ---------- */
#help-modal{
  position: fixed; inset: 0;
  z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 4, 10, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
#help-modal[hidden]{ display: none; }
.help-card{
  width: min(400px, 92vw);
  padding: 20px 22px 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
}
.help-head{
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 12px;
}
.help-head h3{
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .3em;
}
.ctl.round.sm{ width: 28px; height: 28px; border-radius: 50%; }
.help-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.help-table th, .help-table td{
  padding: 7px 4px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}
.help-table th{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--gold);
  white-space: nowrap;
  padding-right: 18px;
}
.help-table td{ color: #b6c1d3; }
.help-note{
  margin: 12px 0 0;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--faint);
}

/* ---------- 窄屏 ---------- */
@media (max-width: 820px){
  #hud-top{ top: 16px; left: 18px; }
  #hud-top h1{ font-size: 20px; }
  #planet-index{ display: none; }
  #info-panel{
    left: 12px; right: 12px; top: auto; bottom: 92px;
    transform: none;
    width: auto;
    max-height: 44vh;
    overflow: auto;
    padding: 16px;
  }
  #ip-name{ font-size: 26px; }
  #control-bar{
    bottom: 10px;
    width: auto;
    max-width: 94vw;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
    padding: 9px 12px;
  }
  #speed-slider{ width: 110px; }
  #speed-read{ min-width: 0; }
  #hint{ display: none; }
}