/* ===== intro.css · 开场故事+选蛋命名流程（宇宙星河风）===== */
.intro {
  flex: 1; display: flex; flex-direction: column;
  position: relative; z-index: 1;
}

/* —— 开场影院：视频背景 + 8 段文字故事卡片 —— */
/* 影院模式时让 #introStory 挣脱 640px 窄栏 + padding，并给出确定高度
   （否则绝对定位的视频没有内在高度会塌缩成 0，导致画面看不见）*/
.intro-story.is-cinema {
  max-width: none;
  padding: 0;
  width: 100%;
  min-height: 82vh;
}
.intro-cinema {
  position: relative;
  width: 100%; height: 100%;
  min-height: 82vh; /* 关键：兜底高度，避免高度链塌缩导致视频不可见 */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: #05020f;
  border-radius: var(--radius);
}
.intro-cinema-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  background: #000;
}
/* 整段剧情视频：文字已烧录进画面，用 contain 完整显示 16:9 不裁切 */
.intro-cinema-video--full {
  object-fit: contain;
  background: #05020f;
}
/* 视频播放进度条 */
.intro-cinema-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 5px;
  background: rgba(255, 255, 255, 0.1); z-index: 3;
}
.intro-cinema-progress-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand), #ffd866);
  box-shadow: 0 0 10px var(--brand);
  transition: width .2s linear;
}
.intro-cinema-dim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 4, 32, 0.45) 0%, rgba(10, 4, 32, 0.30) 50%, rgba(10, 4, 32, 0.65) 100%);
}
.intro-cinema-mute,
.intro-cinema-skip {
  position: absolute; top: 16px; z-index: 3;
  padding: 8px 16px; font-size: 13px;
  background: rgba(10, 4, 32, 0.7);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  backdrop-filter: blur(8px);
}
.intro-cinema-mute { left: 16px; }
.intro-cinema-skip { right: 16px; }
/* 老用户出口：跳过旁边给「我已有账号 →」（2026-09-13 进入流程改造） */
.intro-cinema-account {
  position: absolute; top: 64px; left: 16px; z-index: 3;
  padding: 8px 16px; font-size: 13px;
  background: rgba(10, 4, 32, 0.7);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  backdrop-filter: blur(8px);
}
.intro-cinema-account:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.intro-cinema-mute:hover,
.intro-cinema-skip:hover {
  background: var(--brand); color: #fff; border-color: var(--brand);
}
.intro-cinema-card {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  z-index: 2; width: 92%; max-width: 640px;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255, 222, 178, 0.9) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 88%, rgba(196, 228, 255, 0.8) 0%, transparent 55%),
    linear-gradient(135deg, #fff8eb 0%, #fdf3e2 100%);
  border: 2.5px solid #5eead4;
  border-radius: 28px;
  padding: 28px 24px;
  box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.12), 0 0 0 6px rgba(255, 255, 255, 0.35), 0 14px 40px rgba(255, 180, 100, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  text-align: center;
  overflow: visible;
  color: #4a3520;
}
.intro-cinema-card .intro-story-emoji { font-size: 64px; margin-bottom: 14px; }
.intro-cinema-card .intro-story-text { font-size: 22px; color: #3a2818; text-shadow: 0 0 14px rgba(255, 216, 102, 0.4); }
.intro-cinema-card .intro-story-sub { font-size: 15px; color: #7a6048; }

.intro-scene-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}
.intro-scene-progress-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand), #ffd866);
}

/* —— 概念讲解视频影院（板块卡片"知识点讲解"按钮触发，全局固定层）—— */
.concept-cinema-wrap {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 2, 15, 0.92); backdrop-filter: blur(8px);
  animation: pop .25s ease;
}
.concept-cinema-wrap .intro-cinema {
  height: 100%; width: 100%;
}
.concept-cinema-wrap .intro-cinema-video {
  background: #05020f;
}

/* —— 故事阶段 —— */
.intro-story {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; max-width: 640px; margin: 0 auto; width: 100%; text-align: center;
}
.intro-story-emoji { font-size: 80px; line-height: 1.2; margin-bottom: 20px; animation: bounce-in .5s ease; filter: drop-shadow(0 0 20px rgba(183, 148, 255, 0.6)); }
.intro-story-text { font-size: 26px; font-weight: 800; line-height: 1.5; margin-bottom: 10px; animation: bounce-in .5s ease .1s both; color: var(--ink); text-shadow: 0 0 20px rgba(183, 148, 255, 0.4); }
.intro-story-sub { font-size: 16px; color: var(--ink-soft); font-weight: 600; animation: bounce-in .5s ease .2s both; }
.intro-story-dots { display: flex; gap: 8px; margin: 24px 0; }
.intro-story-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: all .2s; }
.intro-story-dot.active { background: var(--brand); width: 24px; border-radius: 4px; box-shadow: 0 0 8px var(--brand); }
.intro-controls { display: flex; gap: 12px; }

.intro-start {
  padding: 40px 32px;
  border-radius: 28px;
  border: 2.5px solid #5eead4;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255, 222, 178, 0.85) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 88%, rgba(196, 228, 255, 0.75) 0%, transparent 55%),
    linear-gradient(135deg, #fff8eb 0%, #fdf3e2 100%);
  box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.12), 0 0 0 6px rgba(255, 255, 255, 0.35), 0 14px 40px rgba(255, 180, 100, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  position: relative;
  overflow: visible;
  color: #4a3520;
}
.intro-start::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 20%, rgba(255, 184, 102, 0.12), transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(94, 234, 212, 0.1), transparent 50%);
  pointer-events: none;
}
.intro-start::after { /* 左下角装饰小星点 */
  content: '';
  position: absolute;
  bottom: -22px; left: -22px;
  width: 64px; height: 64px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path d='M28 64 L30 72 L38 74 L30 76 L28 72 L26 76 L24 72 L16 74 L24 72 L26 64 Z' fill='%23FFD866' stroke='%23FFA94D' stroke-width='1.4'/><circle cx='64' cy='64' r='2.2' fill='%235EEAD4'/><circle cx='10' cy='12' r='1.8' fill='%23FFD866'/><path d='M64 14 Q40 0 14 18' stroke='%23A78BFA' stroke-width='1.2' fill='none' stroke-dasharray='2 3' opacity='0.55'/></svg>");
  background-repeat: no-repeat; background-size: contain;
  pointer-events: none; z-index: 3;
}

/* —— 大陆选择 —— */
.intro-continent {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; max-width: 800px; margin: 0 auto; width: 100%;
}
/* 开场是深色星空主题（--bg:#0a0420 / --ink:#f0eaff），标题与副标题直接坐在星空上，
   必须用浅色；此前硬编码深棕 #3a2818 导致「选择你的星域」几乎看不见（与故事/命名页配色不一致）。
   注意：卡片内部（.cp-name 等）坐在浅色卡片上，仍保持深色文字，勿改。 */
.intro-continent h2 { font-size: 26px; font-weight: 800; margin-bottom: 8px; color: var(--ink); text-shadow: 0 0 20px rgba(255, 216, 102, 0.4); }
.intro-continent .hint { font-size: 14px; color: var(--ink-soft); margin-bottom: 28px; font-weight: 600; }
.continent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; width: 100%; }
.continent-pick {
  padding: 24px 16px; border-radius: 22px; border: 1.5px solid rgba(94, 234, 212, 0.5);
  background: linear-gradient(160deg, #fff8eb 0%, #fef0d8 100%);
  box-shadow: 0 4px 14px rgba(255, 180, 100, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: transform .18s ease, border-color .18s, box-shadow .18s;
  position: relative; overflow: hidden;
  color: #4a3520;
}
.continent-pick::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--cc); box-shadow: 0 0 12px var(--cc); }
.continent-pick:hover { transform: translateY(-6px) scale(1.03); border-color: var(--cc); box-shadow: 0 12px 28px rgba(255, 180, 100, 0.3), 0 0 0 3px rgba(94, 234, 212, 0.2); }
.continent-pick .cp-emoji { font-size: 44px; filter: drop-shadow(0 0 10px rgba(255, 216, 102, 0.4)); }
.continent-pick .cp-name { font-size: 18px; font-weight: 800; color: #3a2818; }
.continent-pick .cp-desc { font-size: 12px; color: #7a6048; text-align: center; line-height: 1.4; }
/* 状态徽标：颜色复用 hub.css 的 .sc-badge.cur/.done/.free（同一套口径） */
.continent-pick .cp-badge { margin-top: 2px; }
.continent-pick.active { border-color: #4ade80; box-shadow: 0 4px 14px rgba(74, 222, 128, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.7); }

/* —— 选蛋阶段 —— */
/* 12 生肖池自选（2026-09-13 改版）：一屏要放下 12 颗蛋，故窄栏放宽到 900px 并用
   自适应网格；每颗蛋的尺寸较「只有 1 颗」时期缩小，靠 :hover 放大补回手感。 */
.intro-egg {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; max-width: 900px; margin: 0 auto; width: 100%; text-align: center;
}
.intro-egg h2 { font-size: 24px; font-weight: 800; margin-bottom: 8px; color: var(--ink); }
.intro-egg .hint { font-size: 14px; color: var(--ink-soft); margin-bottom: 14px; font-weight: 600; }
/* 剩余可选数量提示（跨星域去重后第二块板只剩 11 只，明确告知玩家） */
.egg-count { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: 22px; }
.egg-count b { color: #ffd866; font-size: 15px; text-shadow: 0 0 10px rgba(255, 216, 102, 0.6); }
/* 12 生肖池 · 通用蛋不剧透（2026-09-13 改版）：12 颗外观完全一致，点开才随机揭晓是谁。
   灰阶 + 虚线框的那一格 = 已经开走、被这个账号唤醒的守护灵，纯占位、不可点。 */
.egg-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px; width: 100%;
}
.egg-pick {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px 12px; border-radius: 20px; border: 1.5px solid rgba(94, 234, 212, 0.5);
  background: linear-gradient(160deg, #fff8eb 0%, #fef0d8 100%);
  box-shadow: 0 4px 14px rgba(255, 180, 100, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s, box-shadow .18s;
  color: #4a3520;
}
.egg-pick:hover {
  transform: translateY(-8px) scale(1.05); border-color: #c9a24a;
  box-shadow: 0 14px 30px rgba(255, 180, 100, 0.3), 0 0 0 3px rgba(94, 234, 212, 0.2);
  z-index: 2;
}
.egg-pick .ep-svg { width: 84px; height: 98px; animation: floaty 3s ease-in-out infinite; }
.egg-pick .ep-svg .zodiac-img { width: 100% !important; height: 100% !important; }
.egg-pick .ep-name { font-size: 15px; font-weight: 800; color: #3a2818; line-height: 1.1; }
.egg-pick .ep-name.ep-mystery { color: #b99a6b; letter-spacing: 2px; }
.egg-pick .ep-hint {
  font-size: 11px; color: #a89070; line-height: 1.25;
  min-height: 28px; display: flex; align-items: center; justify-content: center;
  padding: 0 2px;
}
/* —— 已唤醒占位（灰阶幼体）—— */
.egg-pick.used {
  cursor: default;
  border-style: dashed; border-color: rgba(168, 144, 112, 0.45);
  background: linear-gradient(160deg, #f7f3ec 0%, #efe8dd 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.egg-pick.used:hover {
  transform: none; border-color: rgba(168, 144, 112, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.egg-pick.used .ep-svg { animation: none; }
/* 「非彩色版」：用 CSS 去色，零新资产、零加载 */
.egg-pick.used .ep-svg .zodiac-img { filter: grayscale(1) contrast(0.9) brightness(1.06); opacity: 0.5; }
.egg-pick.used .ep-name { color: #a89070; }
.egg-pick.used .ep-hint { color: #b9a68e; }

/* —— 破壳动画 —— */
.hatch-stage { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 24px; }
.hatch-egg { width: 200px; height: 220px; position: relative; display: grid; place-items: center; }
.hatch-egg .zodiac-img { width: 200px !important; height: 220px !important; }
.hatch-egg.shaking { animation: hatchShake .3s ease-in-out 5; }
@keyframes hatchShake { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-8deg)} 75%{transform:rotate(8deg)} }
.hatch-burst { position: absolute; inset: 0; pointer-events: none; }
.hatch-text { font-size: 20px; font-weight: 800; color: var(--brand); text-shadow: 0 0 12px var(--brand); }

/* —— 命名阶段 —— */
.intro-naming {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; max-width: 480px; margin: 0 auto; width: 100%; text-align: center;
}
.naming-reveal { width: 200px; height: 200px; margin-bottom: 16px; animation: bounce-in .6s ease; }
.naming-reveal .zodiac-img { width: 200px !important; height: 200px !important; }
.naming-zodiac { font-size: 20px; font-weight: 800; margin-bottom: 6px; color: var(--ink); }
.naming-desc { font-size: 14px; color: var(--ink-soft); margin-bottom: 24px; font-weight: 600; }
.naming-input-wrap { width: 100%; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.naming-input {
  width: 100%; max-width: 280px; padding: 14px 18px; font-size: 18px; font-weight: 700;
  text-align: center; border: 1.5px solid rgba(94, 234, 212, 0.5); border-radius: 16px;
  background: linear-gradient(160deg, #fff8eb 0%, #fef0d8 100%);
  color: #3a2818; font-family: var(--font);
  transition: border-color .15s, box-shadow .15s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.naming-input:focus { outline: none; border-color: #5eead4; box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.25), 0 0 16px rgba(255, 216, 102, 0.3); }
.naming-suggest { font-size: 13px; color: #7a6048; }
.naming-suggest b { color: #d97706; cursor: pointer; }
.naming-suggest b:hover { text-decoration: underline; }

/* —— 响应式 —— */
@media (max-width: 560px) {
  .intro-story-emoji { font-size: 56px; }
  .intro-story-text { font-size: 19px; }
  .intro-cinema-card { bottom: 16px; padding: 20px 16px; }
  .intro-cinema-card .intro-story-emoji { font-size: 48px; margin-bottom: 10px; }
  .intro-cinema-card .intro-story-text { font-size: 18px; }
  .intro-cinema-card .intro-story-sub { font-size: 13px; }
  .intro-cinema-mute,
  .intro-cinema-skip { top: 10px; padding: 6px 12px; font-size: 12px; }
  .intro-cinema-mute { left: 10px; }
  .intro-cinema-skip { right: 10px; }
  .intro-cinema-account { top: 50px; left: 10px; padding: 6px 12px; font-size: 12px; }
  .continent-grid { grid-template-columns: 1fr 1fr; }
  /* 窄屏：12 颗蛋压成 3 列小卡，格子内不再留大空隙 */
  .intro-egg { padding: 16px; }
  .intro-egg h2 { font-size: 20px; }
  .egg-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
  .egg-pick { padding: 10px 6px 9px; border-radius: 16px; }
  .egg-pick .ep-svg { width: 66px; height: 78px; }
  .egg-pick .ep-name { font-size: 13px; }
  .egg-pick .ep-name.ep-mystery { font-size: 12px; }
  .egg-pick .ep-hint { min-height: 24px; font-size: 10px; }
  .naming-reveal { font-size: 56px; }
}