/* ============================================================
   AI 修仙人生模拟器 — 开始游戏页面
   视觉基调：水墨玄黑 + 月白 + 鎏金（GDD §13）
   ============================================================ */

:root {
  --ink:        #0a0a0a;   /* 玄黑主色 */
  --ink-deep:   #050507;
  --moon:       #e8e4da;   /* 月白 */
  --moon-dim:   #9a968d;   /* 灰白文字 */
  --gold:       #c8a05a;   /* 鎏金 */
  --gold-soft:  #a8864c;
  --seal:       #a8352b;   /* 印章红 */

  /* 共享组件 token */
  --paper:      rgba(24, 23, 20, 0.74);   /* 卡片纸感底 */
  --glow:       rgba(200, 160, 90, 0.35); /* 金色泛光 */
  --line-gold:  rgba(178, 140, 84, 0.45); /* 金色细线 */
}

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

html,
body {
  height: 100%;
}

body {
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  background: #000; /* 桌面端手机框左右留空黑底 */
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------
   容器（竖屏手机框：桌面居中，与游戏/地图页一致）
   ------------------------------------------------------------ */
.welcome {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--ink-deep);
}

/* ------------------------------------------------------------
   右侧山水主视觉（竖屏素材，cover 裁切保留右上月亮与山）
   ------------------------------------------------------------ */
.bg-scene {
  position: absolute;
  inset: 0;
  background-color: #0a0806;
  background-image: url("../assets/ui/bg_main_final.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* 月光暖光层：从右上月亮处发散，提亮山体细节，避免死黑 */
.bg-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 62% 50% at 82% 20%,
      rgba(238, 226, 198, 0.20) 0%,
      rgba(238, 226, 198, 0.07) 48%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 60% 46% at 68% 64%,
      rgba(96, 116, 158, 0.14) 0%,
      transparent 70%
    );
  pointer-events: none;
}

/* 上下轻微压暗：保证底部按钮区文字可读，顶部标题自然 */
.bg-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(5, 5, 7, 0.18) 0%,
    transparent 24%,
    transparent 62%,
    rgba(5, 5, 7, 0.62) 88%,
    rgba(5, 5, 7, 0.85) 100%
  );
  pointer-events: none;
}

/* ------------------------------------------------------------
   左侧内容区
   ------------------------------------------------------------ */
.content {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  width: min(460px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* 底部提示已独立定位，补等高内边距保持按钮位置不变 */
  padding-bottom: 44px;
}

/* 底部金色罗盘 / 星图装饰（竖屏主视觉下隐藏，避免干扰背景图标题） */
.content::before {
  content: "";
  position: absolute;
  display: none;
  pointer-events: none;
}

/* ------------------------------------------------------------
   主标题素材（裁剪自游戏标题图：我在修仙界当路人 + 印章）
   素材为书法字 + 大面积留白，故放大显示以撑起标题气势
   ------------------------------------------------------------ */
.title-main {
  width: clamp(300px, 25vw, 390px);
  height: auto;
  display: block;
  margin-bottom: clamp(12px, 1.8vh, 22px);
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(200, 160, 90, 0.14));
  animation: title-in 0.9s ease-out both;
}

/* 标题入场：淡入 + 轻上浮 */
@keyframes title-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 副标签：AI 修仙人生模拟器（两侧金色短线装饰） */
.sub-label {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
  color: var(--moon-dim);
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.34em;
  margin-bottom: clamp(26px, 4vh, 50px);
}

/* 仙鹤水墨装饰：悬浮于文字右侧，半透明不遮挡 */
.crane-deco {
  position: absolute;
  right: -14%;
  top: 16%;
  width: clamp(180px, 22vw, 340px);
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: brightness(1.15) saturate(0.85);
  animation: crane-float 9s ease-in-out infinite;
}
@keyframes crane-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.sub-label::before,
.sub-label::after {
  content: "";
  width: clamp(26px, 2.4vw, 44px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 160, 90, 0.6));
}

.sub-label::after {
  background: linear-gradient(90deg, rgba(200, 160, 90, 0.6), transparent);
}

/* 主题句：你的修仙人生，由你决定 */
.tagline {
  color: var(--moon);
  font-size: clamp(26px, 2.5vw, 38px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75);
  margin-bottom: clamp(14px, 2.2vh, 26px);
}

/* 描述文案 */
.subcopy {
  color: rgba(196, 192, 182, 0.78);
  font-size: clamp(12px, 1.05vw, 14px);
  line-height: 2.0;
  letter-spacing: 0.05em;
  max-width: 38ch;
  margin-bottom: clamp(28px, 4vh, 48px);
}

/* ------------------------------------------------------------
   按钮区
   ------------------------------------------------------------ */
.actions {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.4vh, 30px);
}

.btn {
  display: block;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}

/* 图片按钮：开始这一生 / 继续上一世 */
.btn-img-primary {
  width: clamp(200px, 20vw, 280px);
}
.btn-img-primary img,
.btn-img-secondary img {
  width: 100%;
  height: auto;
  display: block;
}
.btn-img-primary img {
  filter: drop-shadow(0 4px 14px rgba(200, 150, 70, 0.35)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
.btn-img-secondary {
  width: clamp(150px, 15vw, 210px);
}
.btn-img-secondary img {
  opacity: 0.92;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}
.btn-img-secondary:hover img {
  opacity: 1;
  filter: drop-shadow(0 2px 10px rgba(200, 160, 90, 0.3));
}

/* hover / active 反馈 */
.btn:hover {
  transform: scale(1.02);
}
.btn:hover .btn-img-primary img,
.btn:hover .btn-img-secondary img {
  filter: brightness(1.1);
}

.btn:active {
  transform: scale(0.98);
}

/* 次级入口：仙途地图 / 设置（并排，金色圆点分隔） */
.links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(14px, 2vh, 22px);
}

/* 图标入口：仙途/天道/人生/奇遇/设置（无底板，图标 + 二字标题） */
.nav-icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(5px, 0.8vh, 8px);
  width: clamp(52px, 5vw, 68px);
  text-decoration: none;
  transition: transform 0.15s ease;
}
.nav-icon img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}
.nav-icon .nav-label {
  /* 哑光暖金：弱化处理，含蓄不抢镜 */
  color: #CDAE79;
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  font-weight: 500; /* 中粗 */
  font-size: clamp(12px, 1.05vw, 14px);
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-indent: 0.22em; /* 抵消字间距导致的视觉右偏 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.nav-icon:hover {
  transform: translateY(-2px) scale(1.06);
}
.nav-icon:hover img {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 14px rgba(200, 160, 90, 0.45));
}
.nav-icon:hover .nav-label {
  color: #d8bc8e;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.settings-link:hover {
  color: var(--gold);
  text-shadow: 0 0 10px rgba(200, 160, 90, 0.4);
}

.link-sep {
  color: rgba(200, 160, 90, 0.4);
  font-size: 12px;
}

/* 存档选择浮层：槽位卡片（一世/二世/三世） */
.slot-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 8px;
  padding: 12px 14px;
  background: rgba(14, 13, 11, 0.5);
  border: 1px solid rgba(178, 140, 84, 0.35);
  border-radius: 8px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.slot-card:hover {
  border-color: var(--gold);
  background: rgba(200, 160, 90, 0.08);
  box-shadow: 0 0 12px rgba(200, 160, 90, 0.18);
}
.slot-card:last-child {
  margin-bottom: 0;
}
.slot-card.is-empty {
  opacity: 0.5;
  cursor: not-allowed;
}
.slot-card.is-empty:hover {
  border-color: rgba(178, 140, 84, 0.35);
  background: rgba(14, 13, 11, 0.5);
  box-shadow: none;
}
.slot-idx {
  flex-shrink: 0;
  width: 44px;
  color: var(--gold);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.slot-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.slot-name {
  color: var(--moon);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.slot-meta {
  color: rgba(196, 192, 182, 0.6);
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slot-arrow {
  flex-shrink: 0;
  color: rgba(200, 160, 90, 0.55);
  font-size: 18px;
  line-height: 1;
}
.slot-card.is-empty .slot-arrow {
  visibility: hidden;
}
.slot-empty-tip {
  text-align: center;
  color: rgba(196, 192, 182, 0.62);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  padding: 8px 4px 6px;
}
.slot-picker-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

/* ------------------------------------------------------------
   底部弱提示（技术性信息，弱化处理）
   ------------------------------------------------------------ */
.hero-line {
  position: absolute;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom)); /* 距底部 28px */
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  white-space: nowrap;
  color: rgba(216, 208, 190, 0.72);
  font-size: clamp(11px, 0.95vw, 13px);
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}


@media (min-width: 901px) {
  }

/* ------------------------------------------------------------
   手机端（≤ 900px）：竖屏全画布，居中构图
   背景保持山水清晰（不做强压暗），文字叠加半透明底板保证可读，
   贴合设计图「文字区 + 清晰山水」的观感
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  /* 竖屏素材右对齐铺满：保留右上圆月与右下山峦 */
  .bg-scene {
    background-position: right center;
    background-size: cover;
  }

  /* 手机端内容已居中，无需左侧压暗渐变（仅保留全局上下压暗，见 .bg-scene::after） */
  .content {
    max-width: 100%;
    bottom: 16%; /* 位于背景标题下方的下部区域，不再贴底 */
    padding: 0 8vw 38px; /* 38px 补偿被移走的底部提示高度 */
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  /* 主标题素材：靠左，落在素材左侧黑色留白区，适度放大 */
  .title-main {
    width: min(76vw, 340px);
    margin-bottom: clamp(10px, 1.6vh, 18px);
  }

  /* 手机端空间有限，隐藏副标签两侧短线 */
  .sub-label {
    font-size: clamp(11px, 2.8vw, 13px);
    margin-bottom: clamp(16px, 3vh, 32px);
  }

  .sub-label::before,
  .sub-label::after {
    display: none;
  }

  .tagline {
    font-size: clamp(24px, 6.6vw, 32px);
    margin-bottom: clamp(12px, 2.2vh, 24px);
  }

  .subcopy {
    font-size: 12px;
    max-width: 30ch;
    margin-bottom: clamp(22px, 4vh, 44px);
  }

  /* 按钮：居中堆叠 */
  .actions {
    align-items: center;
    gap: clamp(20px, 3vh, 36px);
    padding-top: clamp(14px, 2.4vh, 24px);
  }

  .links {
    margin-top: clamp(8px, 1.4vh, 14px);
  }

  .btn-img-primary {
    width: min(52vw, 230px);
  }

  .btn-img-secondary {
    width: min(36vw, 160px);
  }

  /* 罗盘装饰：手机端隐藏，保持居中构图纯净 */
  .content::before {
    display: none;
  }

  }

/* ------------------------------------------------------------
   中屏 / 小高度窗口：隐藏罗盘装饰，避免与按钮区重叠
   ------------------------------------------------------------ */
@media (max-height: 820px) and (min-width: 901px) {
  .content::before {
    display: none;
  }
}

/* 中屏窄宽：标题适当回缩，避免挤压右侧山水 */
@media (max-width: 1100px) and (min-width: 901px) {
  .title-main {
    width: min(30vw, 320px);
  }
}