:root {
  --bg-0: #07081a;
  --bg-1: #10122b;
  --bg-2: #1b1f3a;
  --ink: #e6e8f5;
  --ink-dim: rgba(230, 232, 245, 0.6);
  --ink-faint: rgba(230, 232, 245, 0.35);
  --gold: #f2e5c8;
  --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", serif;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, sans-serif;
}

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

html, body { height: 100%; }

body {
  font-family: var(--sans);
  background: var(--bg-0);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 进入之门 ---------- */

.gate {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 50% 18%, #1b1f3a 0%, #10122b 42%, #07081a 100%);
  transition: opacity 1.3s ease;
}

.gate.leave { opacity: 0; pointer-events: none; }

.gate-stars { position: absolute; inset: 0; width: 100%; height: 100%; }

.gate-inner {
  position: relative;
  text-align: center;
  z-index: 2;
  animation: gateRise 2.4s ease-out both;
}

@keyframes gateRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.gate-kicker {
  font-size: 13px;
  letter-spacing: 0.55em;
  color: var(--ink-dim);
  margin-bottom: 26px;
  padding-left: 0.55em;
}

.gate-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 8vw, 64px);
  letter-spacing: 0.42em;
  padding-left: 0.42em;
  color: var(--gold);
  text-shadow: 0 0 40px rgba(242, 229, 200, 0.25);
}

.gate-rule {
  width: 60px; height: 1px;
  margin: 30px auto;
  background: linear-gradient(90deg, transparent, var(--ink-dim), transparent);
}

.gate-hint {
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.28em;
  color: var(--ink-dim);
}

.gate-btn {
  margin-top: 40px;
  background: none;
  border: 1px solid rgba(230, 232, 245, 0.35);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0.4em;
  padding: 13px 38px 13px 42px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.5s ease;
}

.gate-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 34px rgba(242, 229, 200, 0.18);
  letter-spacing: 0.52em;
}

.gate-foot {
  position: absolute;
  bottom: 30px;
  left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--ink-faint);
}

/* ---------- 主场景 ---------- */

.scene {
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 2.4s ease, visibility 2.4s ease;
  background:
    radial-gradient(120% 130% at 50% 12%, #1b1f3a 0%, #10122b 45%, #07081a 100%);
}

.scene.show { opacity: 1; visibility: visible; pointer-events: auto; }

.scene canvas#stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 流星层 */

#effects {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* 星座层 */

#constellations {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* 星云 */

.nebula {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.32;
  mix-blend-mode: screen;
}

.nb1 {
  width: 46vw; height: 46vw;
  right: -8vw; top: -10vw;
  background: radial-gradient(circle, rgba(120, 106, 220, 0.9) 0%, transparent 70%);
  animation: nebDrift1 46s ease-in-out infinite alternate;
}

.nb2 {
  width: 38vw; height: 38vw;
  left: -10vw; bottom: -8vw;
  background: radial-gradient(circle, rgba(74, 156, 178, 0.75) 0%, transparent 70%);
  animation: nebDrift2 58s ease-in-out infinite alternate;
}

.nb3 {
  width: 30vw; height: 30vw;
  left: 34vw; top: 30vh;
  background: radial-gradient(circle, rgba(224, 148, 170, 0.5) 0%, transparent 70%);
  animation: nebDrift3 40s ease-in-out infinite alternate;
}

@keyframes nebDrift1 { to { transform: translate(-6vw, 5vh) scale(1.15); } }
@keyframes nebDrift2 { to { transform: translate(5vw, -6vh) scale(1.1); } }
@keyframes nebDrift3 { to { transform: translate(3vw, 4vh) scale(0.92); } }

/* 月亮 */

.moon-wrap {
  position: absolute;
  right: 9%;
  top: 10%;
  z-index: 4;
  animation: floatY 14s ease-in-out infinite;
  will-change: transform;
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

.moon {
  width: clamp(180px, 24vw, 300px);
  height: clamp(180px, 24vw, 300px);
  position: relative;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.moon-inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 76% 20%, rgba(150, 140, 118, 0.3) 0%, rgba(150, 140, 118, 0) 15%),
    radial-gradient(circle at 22% 64%, rgba(135, 125, 102, 0.26) 0%, rgba(135, 125, 102, 0) 18%),
    radial-gradient(circle at 58% 80%, rgba(140, 130, 108, 0.24) 0%, rgba(140, 130, 108, 0) 13%),
    radial-gradient(circle at 40% 26%, rgba(255, 253, 245, 0.12) 0%, rgba(255, 253, 245, 0) 40%),
    radial-gradient(circle at 34% 30%, #f8f2e2 0%, #efe5cc 32%, #d9cbab 58%, #a99c80 80%, #71675a 100%);
  box-shadow:
    0 0 70px 8px rgba(227, 216, 189, 0.28),
    inset -26px -24px 70px rgba(84, 76, 60, 0.42),
    inset 6px 6px 24px rgba(255, 252, 240, 0.16);
  animation: moonSpin 130s linear infinite;
}

@keyframes moonSpin {
  to { transform: rotate(360deg); }
}

.moon-dust {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image:
    radial-gradient(circle, rgba(96, 88, 70, 0.28) 0.8px, transparent 1.4px),
    radial-gradient(circle, rgba(255, 252, 242, 0.16) 0.7px, transparent 1.2px);
  background-size: 26px 22px, 19px 30px;
  background-position: 0 0, 9px 7px;
  opacity: 0.55;
}

.moon-crater {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(90, 82, 66, 0.5) 0%, rgba(90, 82, 66, 0.18) 58%, transparent 72%);
  box-shadow:
    inset 2px -1px 3px rgba(255, 255, 255, 0.22),
    inset -2px 2px 5px rgba(58, 52, 40, 0.45);
}

.c1 { width: 24%; height: 24%; left: 22%; top: 24%; }
.c2 { width: 14%; height: 14%; left: 56%; top: 18%; }
.c3 { width: 17%; height: 17%; left: 18%; top: 58%; }
.c4 { width: 10%; height: 10%; left: 62%; top: 62%; }
.c5 { width: 8%; height: 8%; left: 40%; top: 10%; }
.c6 { width: 12%; height: 12%; left: 45%; top: 36%; }
.c7 { width: 9%; height: 9%; left: 30%; top: 13%; }
.c8 { width: 13%; height: 13%; left: 68%; top: 48%; }

/* 浮岛 */

.island-wrap {
  position: absolute;
  z-index: 4;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.iw1 { left: 12%; bottom: 18%; width: clamp(110px, 14vw, 170px); }
.iw2 { left: 32%; bottom: 8%; width: clamp(90px, 11vw, 130px); }
.iw3 { right: 14%; bottom: 22%; width: clamp(80px, 10vw, 120px); }

.island { width: 100%; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.4)); }

.island svg { width: 100%; height: auto; display: block; }

.id1 { animation: islandBob 11s ease-in-out infinite; }
.id2 { animation: islandBob 15s ease-in-out infinite 1.2s; }
.id3 { animation: islandBob 13s ease-in-out infinite 2.4s; }

@keyframes islandBob {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-14px) rotate(1.6deg); }
}

/* 萤火虫 */

#fireflies {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}

/* 短句 */

.phrase {
  position: absolute;
  left: 0; right: 0;
  bottom: 33%;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 0 24px;
  pointer-events: none;
}

.phrase p {
  font-family: var(--serif);
  font-size: clamp(18px, 3.4vw, 26px);
  letter-spacing: 0.34em;
  padding-left: 0.34em;
  text-align: center;
  color: rgba(236, 238, 250, 0.9);
  text-shadow: 0 0 28px rgba(180, 190, 255, 0.35);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.4s ease, transform 1.4s ease;
}

.phrase p.show {
  opacity: 1;
  transform: none;
}

.phrase-rule {
  width: 44px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-dim), transparent);
  opacity: 0.5;
}

/* 角落铭牌 */

.station-name {
  position: absolute;
  top: 26px; left: 28px;
  z-index: 7;
  font-size: 11px;
  letter-spacing: 0.42em;
  color: var(--ink-faint);
}

/* 声音开关 */

.sound-btn {
  position: absolute;
  right: 26px; bottom: 26px;
  background: rgba(230, 232, 245, 0.06);
  border: 1px solid rgba(230, 232, 245, 0.22);
  color: var(--ink-dim);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  padding: 9px 18px 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all 0.45s ease;
  z-index: 7;
}

.sound-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.gate-btn:active,
.sound-btn:active {
  transform: scale(0.95);
}

/* 底部提示 */

.foot-hint {
  position: absolute;
  left: 0; right: 0;
  bottom: 28px;
  z-index: 7;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--ink-faint);
  animation: hintFade 6s ease 4s both;
}

@keyframes hintFade {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0.45; }
}

/* ---------- 触屏通用 ---------- */

html {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ---------- 移动端 ---------- */

@media (max-width: 640px) {
  .moon-wrap { right: 6%; top: 6%; }
  .moon { width: clamp(120px, 34vw, 190px); height: clamp(120px, 34vw, 190px); }
  .moon-inner { box-shadow: 0 0 34px 5px rgba(227, 216, 189, 0.24), inset -18px -16px 48px rgba(84, 76, 60, 0.4), inset 4px 4px 16px rgba(255, 252, 240, 0.14); }
  .iw1 { left: 7%; bottom: 8%; width: 100px; }
  .iw2 { display: none; }
  .iw3 { display: none; }
  .phrase { bottom: 35%; gap: 16px; padding: 0 18px; }
  .phrase p { font-size: clamp(16px, 4.6vw, 20px); letter-spacing: 0.26em; padding-left: 0.26em; }
  .station-name { top: 18px; left: 18px; font-size: 10px; letter-spacing: 0.3em; }
  .sound-btn { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .foot-hint { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .gate-title { font-size: clamp(34px, 11vw, 48px); letter-spacing: 0.34em; padding-left: 0.34em; }
  .gate-kicker { font-size: 12px; letter-spacing: 0.42em; }
  .gate-hint { font-size: 14px; }
  .gate-btn { font-size: 15px; padding: 12px 32px 12px 36px; }
  .gate-foot { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* 小屏且较矮时，收拢布局防止元素重叠 */

@media (max-width: 640px) and (max-height: 700px) {
  .moon-wrap { top: 5%; }
  .moon { width: 110px; height: 110px; }
  .iw1 { bottom: 8%; width: 80px; }
  .phrase { bottom: 30%; }
  .phrase-rule { display: none; }
}

/* 手机横屏：进一步收拢，避免与顶部星座冲突 */

@media (max-width: 640px) and (orientation: landscape) {
  .moon-wrap { top: 6%; right: 4%; }
  .moon { width: 88px; height: 88px; }
  .iw1 { bottom: 8%; width: 70px; }
  .phrase { bottom: 22%; }
  .station-name { top: 12px; left: 14px; }
  .gate-inner { transform: scale(0.82); }
}

/* 大屏触控设备（平板竖屏等）也保持舒适 */

@media (min-width: 641px) and (max-width: 900px) {
  .moon { width: clamp(160px, 26vw, 220px); height: clamp(160px, 26vw, 220px); }
  .phrase { bottom: 32%; }
}