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

body {
  background: #000000;
  overflow: hidden;
  font-family: 'DM Mono', monospace;
  width: 100vw;
  height: 100vh;
}

canvas { display: block; }

#ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
  padding: 26px 30px;
}

#form-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

.form-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.35s ease, border-color 0.35s ease;
}

.form-btn:hover {
  color: rgba(255, 255, 255, 0.7);
}

.form-btn.active {
  color: rgba(234, 91, 11, 0.95);
  border-bottom-color: rgba(234, 91, 11, 0.55);
}

.divider {
  color: rgba(255, 255, 255, 0.18);
  font-size: 11px;
}

#title {
  position: fixed;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: rgba(167, 208, 227, 0.35);
  text-transform: uppercase;
}

/* 太阳系名称：缩放放大某个太阳系时白色抖动浮现在屏幕中心 */
#sun-name {
  position: fixed;
  top: 50%;
  left: 50%;
  /* 居中由内层 transform 负责；外层只放位置，抖动动画作用在内层 */
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #ffffff;
  font-family: 'DM Mono', monospace;   /* 与 SYNCHRONIC / DIACHRONIC 同字体 */
  font-size: clamp(1.4rem, 4.4vw, 2.4rem);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 92vw;
  text-align: center;
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.4);
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 20;
}

/* 浮现 + 缓慢漂移（像在水面漂浮） */
#sun-name.visible {
  opacity: 1;
  animation: sun-name-float 7s ease-in-out infinite;
}

/* 聚焦状态下名称可点击（点击→简介淡入） */
#sun-name.clickable {
  pointer-events: auto;
  cursor: pointer;
}

@keyframes sun-name-float {
  0%   { transform: translate(calc(-50% - 3px), calc(-50% - 2px)); }
  20%  { transform: translate(calc(-50% + 2px), calc(-50% + 2px)); }
  40%  { transform: translate(calc(-50% + 4px), calc(-50% - 1px)); }
  60%  { transform: translate(calc(-50% - 1px), calc(-50% + 3px)); }
  80%  { transform: translate(calc(-50% - 4px), calc(-50% - 1px)); }
  100% { transform: translate(calc(-50% - 3px), calc(-50% - 2px)); }
}

/* 太阳系简介：点击名称后在屏幕中央淡入（像标题一样，不是弹窗）。
   上下边缘渐隐遮罩 → 滚动时内容上下减淡隐去，融合不突兀；隐藏滚动条。 */
#sun-intro {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, 84vw);
  max-height: 80vh;
  overflow-y: auto;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.88);
  font-family: 'DM Mono', monospace;
  font-size: clamp(0.82rem, 1.45vw, 0.98rem);
  line-height: 2.0;
  text-align: center;
  white-space: pre-wrap;
  opacity: 0;
  transition: opacity 0.9s ease;
  z-index: 21;
  padding: 9vh 0;            /* 让首尾行能滚进渐隐区 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  scrollbar-width: none;     /* Firefox：隐藏滚动条 */
}
#sun-intro::-webkit-scrollbar { display: none; }   /* WebKit：隐藏滚动条 */

#sun-intro.visible {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;           /* 再次点击 → 淡出回名称 */
}

/* 简介首行（太阳系名）稍微强调 */
#sun-intro .intro-title {
  display: block;
  font-size: 1.5em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 1.2em;
}