/* ===== 共筑学科星图 · 星空主题 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 13.3333vw; }
@media (min-width: 768px) {
  html { font-size: 100px; }
  body { max-width: 750px; margin: 0 auto; }
}

html, body { overflow-x: hidden; }

body {
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: #050d1f;
  color: #e8eefc;
}

/* 输入框字体 16px+ 防 iOS 微信自动放大页面 */
input, button { font-family: inherit; -webkit-appearance: none; appearance: none; }

.ua-tip {
  position: sticky; top: 0; z-index: 99;
  background: rgba(255, 248, 225, 0.95); color: #8d6e00;
  font-size: 0.26rem; text-align: center; padding: 0.16rem;
}

/* ===== 顶部 ===== */
.hero {
  padding: 0.7rem 0.5rem 0.4rem;
  text-align: center;
  background: linear-gradient(180deg, #0a1a3a 0%, #050d1f 100%);
}
.title {
  font-size: 0.56rem; font-weight: 700; letter-spacing: 0.08rem;
  background: linear-gradient(90deg, #a8c8ff, #fff, #a8c8ff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.3rem;
}
.welcome-text {
  font-size: 0.28rem; line-height: 1.9; color: #9db4dd;
  max-width: 6.4rem; margin: 0 auto 0.3rem;
}
.counter { font-size: 0.26rem; color: #7b93c4; }
.counter b { color: #ffd97a; font-size: 0.34rem; padding: 0 0.06rem; }

/* ===== 星图区 ===== */
.sky {
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;        /* 默认允许竖向滑动翻页；放大后由 JS 切换为 none */
  user-select: none;
  -webkit-user-select: none;
}
.zoom-wrap {
  position: relative;
  width: 100%;
  transform-origin: 0 0;
  will-change: transform;
}
.nebula {
  width: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.stars-layer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;  /* 兼容旧内核，不用 inset */
  pointer-events: none;
}

/* 缩放控制按钮 */
.zoom-controls {
  position: absolute;
  right: 0.24rem;
  top: 0.24rem;              /* 移到顶部，避让星图标签 */
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.zoom-controls button + button { margin-top: 0.16rem; }  /* 兼容旧内核，不用 flex gap */
.zoom-controls button {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  border: 1px solid rgba(150, 180, 255, 0.4);
  background: rgba(12, 24, 58, 0.75);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #cfe0ff;
  font-size: 0.36rem;
  line-height: 1;
  padding: 0;
}
.zoom-controls button:active { transform: scale(0.92); }

/* 缩放提示（6 秒后自动隐藏） */
.zoom-hint {
  position: absolute;
  left: 50%;
  bottom: 0.3rem;
  transform: translateX(-50%);
  background: rgba(10, 22, 52, 0.8);
  border: 1px solid rgba(150, 180, 255, 0.35);
  border-radius: 0.3rem;
  padding: 0.12rem 0.3rem;
  font-size: 0.22rem;
  color: #a9bfe8;
  white-space: nowrap;
  z-index: 9;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.zoom-hint.hide { opacity: 0; }

/* 放大后标签更清晰 */
.sky.show-labels .star .label {
  background: rgba(8, 16, 40, 0.6);
  color: #eef4ff;
}

/* 单颗星 */
.star {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; align-items: center;
}
.star .dot {
  width: 0.07rem; height: 0.07rem;
  border-radius: 50%;
  background: #fff8dd;
  box-shadow: 0 0 0.06rem 0.02rem rgba(255, 240, 180, 0.9),
              0 0 0.18rem 0.05rem rgba(255, 215, 110, 0.45);
  animation: twinkle 2.8s ease-in-out infinite;
}
.star .label {
  margin: 0 0.14rem;
  font-size: 0.2rem;
  color: #eaf1ff;
  text-shadow: 0 0 0.06rem rgba(90, 140, 255, 0.9), 0 0.02rem 0.06rem rgba(0, 0, 0, 0.95), 0 0 0.16rem rgba(0, 0, 0, 0.8);
  padding: 0 0.06rem;
  white-space: nowrap;
  opacity: 0;                    /* 默认全景不显示标签 */
  transition: opacity 0.3s ease;
}
/* 放大后浮现标签 */
.sky.show-labels .star .label { opacity: 1; }
/* 我的星永远显示名字 */
.star.mine .label { opacity: 1 !important; }
/* 星星大小/亮度分档（按序号循环，营造层次） */
.star.s1 .dot { transform: scale(1.6); }
.star.s2 .dot { transform: scale(1.15); opacity: 0.9; }
.star.s3 .dot { transform: scale(0.85); opacity: 0.75; }

/* 显示中的标签：纯文字无垫块，靠文字描边抗光晕 */
.star.labeled .label {
  color: #f5f8ff;
  text-shadow: 0 0 0.08rem rgba(120, 160, 255, 0.9), 0 0.02rem 0.08rem rgba(0, 0, 0, 1), 0 0 0.2rem rgba(0, 0, 0, 0.85);
}

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* 我自己的星：高亮 + 光环 */
.star.mine .dot {
  transform: scale(2);
  background: #ffe9a8;
  box-shadow: 0 0 0.1rem 0.04rem rgba(255, 225, 130, 1),
              0 0 0.3rem 0.1rem rgba(255, 200, 80, 0.6);
  animation: twinkle 1.6s ease-in-out infinite;
}
.star.mine .label {
  font-size: 0.24rem;
  color: #ffe9a8;
  font-weight: 600;
}

/* 新星诞生动画 */
.star.born .dot {
  animation: born 1.2s ease-out forwards, twinkle 1.6s ease-in-out 1.2s infinite;
}
@keyframes born {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(4); opacity: 1; }
  100% { transform: scale(2); }
}

/* 提示浮层 */
.toast {
  position: absolute;
  left: 50%; top: 40%;
  transform: translate(-50%, -50%) scale(0.9);
  background: rgba(10, 25, 60, 0.9);
  border: 1px solid rgba(255, 220, 130, 0.5);
  border-radius: 0.2rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.3rem;
  color: #ffe9a8;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ===== 入场磨砂遮罩 ===== */
.sky.veiled .zoom-wrap {
  filter: blur(10px) brightness(0.65);
}
.zoom-wrap {
  transition: filter 0.5s ease;
}
.veil {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.veil.show {
  opacity: 1;
  pointer-events: auto;
}
.veil-box {
  width: 86%;
  max-width: 6rem;
  background: rgba(8, 16, 40, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 215, 130, 0.4);
  border-radius: 0.24rem;
  padding: 0.6rem 0.5rem;
  text-align: center;
  box-shadow: 0 0.1rem 0.8rem rgba(0, 0, 0, 0.55);
}
.veil-title {
  font-size: 0.4rem;
  color: #ffe9a8;
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.veil-tip {
  font-size: 0.26rem;
  color: #a9bfe8;
  margin-bottom: 0.4rem;
}

/* 星星多时关闭闪烁动画，保证缩放流畅 */
.stars-layer.many .star .dot { animation: none; }

/* ===== 点亮面板 ===== */
.panel {
  padding: 0.5rem;
  text-align: center;
  background: linear-gradient(180deg, #050d1f 0%, #0a1a3a 100%);
}
.panel-tip { font-size: 0.28rem; color: #9db4dd; margin-bottom: 0.3rem; }
.form { display: flex; max-width: 6.2rem; margin: 0 auto; }
.form input { margin-right: 0.2rem; }  /* 兼容旧内核，不用 flex gap */
.form input {
  flex: 1;
  min-width: 0;
  height: 0.88rem;
  border-radius: 0.44rem;
  border: 1px solid rgba(140, 170, 255, 0.4);
  background: rgba(20, 40, 90, 0.6);
  color: #fff;
  font-size: 0.32rem;  /* ≥16px@375px，防 iOS 聚焦自动放大 */
  padding: 0 0.36rem;
  outline: none;
}
.form input::placeholder { color: #5f77ab; }
.form button {
  flex-shrink: 0;
  height: 0.88rem;
  padding: 0 0.44rem;
  border: none;
  border-radius: 0.44rem;
  background: linear-gradient(90deg, #ffc85e, #ff9a3d);
  color: #4a2c00;
  font-size: 0.3rem;
  font-weight: 700;
  white-space: nowrap;
}
.form button:active { transform: scale(0.96); }
.form button:disabled { opacity: 0.5; }

/* 已点亮的寄语 */
.signed-tip {
  font-size: 0.3rem;
  color: #ffe9a8;
  line-height: 1.8;
}

/* ===== 匿名确认弹窗 ===== */
.modal-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;  /* 兼容旧内核，不用 inset */
  background: rgba(3, 8, 20, 0.7);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.modal-mask.show {
  opacity: 1;
  pointer-events: auto;
}
.modal {
  width: 5.6rem;
  background: linear-gradient(180deg, #101f47 0%, #0a1533 100%);
  border: 1px solid rgba(150, 180, 255, 0.35);
  border-radius: 0.24rem;
  padding: 0.5rem 0.4rem 0.4rem;
  text-align: center;
  transform: scale(0.92);
  transition: transform 0.25s ease;
}
.modal-mask.show .modal { transform: scale(1); }
.modal-text {
  font-size: 0.34rem;
  color: #eef4ff;
  margin-bottom: 0.2rem;
}
.modal-sub {
  font-size: 0.24rem;
  color: #8ba3d4;
  margin-bottom: 0.4rem;
}
.modal-btns {
  display: flex;
}
.modal-btns button + button { margin-left: 0.24rem; }  /* 兼容旧内核，不用 flex gap */
.modal-btns button {
  flex: 1;
  height: 0.8rem;
  border-radius: 0.4rem;
  font-size: 0.3rem;
  border: none;
}
.btn-cancel {
  background: rgba(140, 165, 220, 0.18);
  color: #a9bfe8;
  border: 1px solid rgba(140, 165, 220, 0.35) !important;
}
.btn-ok {
  background: linear-gradient(90deg, #ffc85e, #ff9a3d);
  color: #4a2c00;
  font-weight: 700;
}
.modal-btns button:active { transform: scale(0.96); }

/* ===== 星光确认函 ===== */
.cert-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(3, 8, 20, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 0.4rem 0.3rem;
}
.cert-mask.show {
  opacity: 1;
  pointer-events: auto;
}
.cert-wrap {
  width: 100%;
  max-width: 6.4rem;
  text-align: center;
}
.cert-wrap img {
  width: 100%;
  border-radius: 0.16rem;
  box-shadow: 0 0.1rem 0.6rem rgba(255, 210, 110, 0.25);
  display: block;
}
.cert-hint {
  margin-top: 0.24rem;
  font-size: 0.24rem;
  color: #a9bfe8;
}
.cert-close {
  margin-top: 0.24rem;
  height: 0.8rem;
  padding: 0 0.6rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(150, 180, 255, 0.4);
  background: rgba(20, 40, 90, 0.6);
  color: #cfe0ff;
  font-size: 0.28rem;
}
.cert-close:active { transform: scale(0.96); }

/* 已点亮后的确认函入口按钮 */
.cert-entry {
  display: inline-block;
  margin-top: 0.24rem;
  padding: 0.12rem 0.4rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(255, 200, 94, 0.5);
  background: rgba(255, 200, 94, 0.12);
  color: #ffd97a;
  font-size: 0.26rem;
}

/* ===== 底部 ===== */
.footer {
  padding: 0.5rem 0.5rem calc(0.5rem + constant(safe-area-inset-bottom));
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));  /* iPhone 刘海屏安全区 */
  text-align: center;
  font-size: 0.24rem;
  color: #4a5f8f;
}