/* 话本官网 · 配色取自 App UI 视觉稿：深梅子黑底 + 玫瑰粉主色 + 酒红/紫雾点缀 */
:root{
  --bg:#0d070b;
  --bg-2:#160d13;
  --surface:#21151c;
  --surface-2:#2e202a;
  --line:rgba(247,184,198,.14);
  --rose:#e7547c;
  --rose-bright:#ff7a9c;
  --rose-soft:#f7b8c6;
  --wine:#7a2438;
  --purple:#9d6bff;
  --text:#fff5f7;
  --muted:#c9a3af;
  --faint:#8f7280;
  --radius:26px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
::selection{background:var(--rose);color:#fff}
a{color:inherit;text-decoration:none}
.grad{
  background:linear-gradient(92deg,var(--rose-bright),var(--rose) 45%,var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- 导航 ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;gap:28px;
  padding:14px 28px;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(13,7,11,.72);backdrop-filter:blur(14px);border-color:var(--line)}
.logo{
  font-family:"Songti SC","STSong","Noto Serif SC",serif;
  font-size:30px;font-weight:900;letter-spacing:.08em;
  background:linear-gradient(180deg,#ffd9e2,var(--rose-bright) 60%,var(--rose));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav-links{display:flex;gap:26px;margin-left:12px}
.nav-links a{font-size:15px;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--text)}
.test-badge{
  margin-left:auto;
  font-size:13px;font-weight:600;letter-spacing:.04em;
  color:#ffd9e2;background:rgba(231,84,124,.16);
  border:1px solid rgba(255,122,156,.45);
  padding:7px 14px;border-radius:999px;white-space:nowrap;
}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;text-align:center;
  padding:170px 24px 90px;
  background:
    radial-gradient(900px 480px at 85% -5%,rgba(157,107,255,.16),transparent 60%),
    radial-gradient(1000px 620px at 12% 0%,rgba(231,84,124,.20),transparent 60%),
    linear-gradient(180deg,var(--bg-2),var(--bg) 70%);
  overflow:hidden;
}
.hero-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none}
.glow-a{width:420px;height:420px;background:#5c1a2e;top:-120px;right:-80px}
.glow-b{width:380px;height:380px;background:#2c1440;bottom:6%;left:-120px}
.petals span{
  position:absolute;top:-4vh;width:14px;height:10px;border-radius:80% 4px 80% 4px;
  background:linear-gradient(135deg,#ff9fb6,#c93a5e);opacity:0;
  animation:fall linear infinite;
}
.petals span:nth-child(1){left:8%;animation-duration:11s;animation-delay:0s}
.petals span:nth-child(2){left:18%;animation-duration:14s;animation-delay:2s;width:10px}
.petals span:nth-child(3){left:30%;animation-duration:12s;animation-delay:5s}
.petals span:nth-child(4){left:44%;animation-duration:16s;animation-delay:1s;width:9px}
.petals span:nth-child(5){left:57%;animation-duration:13s;animation-delay:4s}
.petals span:nth-child(6){left:66%;animation-duration:15s;animation-delay:7s;width:11px}
.petals span:nth-child(7){left:74%;animation-duration:11s;animation-delay:3s}
.petals span:nth-child(8){left:83%;animation-duration:14s;animation-delay:6s;width:9px}
.petals span:nth-child(9){left:90%;animation-duration:12s;animation-delay:8s}
.petals span:nth-child(10){left:38%;animation-duration:17s;animation-delay:9s;width:8px}
@keyframes fall{
  0%{transform:translateY(0) rotate(0deg);opacity:0}
  8%{opacity:.75}
  90%{opacity:.6}
  100%{transform:translateY(105vh) rotate(320deg);opacity:0}
}
.hero-kicker{font-size:15px;letter-spacing:.5em;color:var(--rose-soft);text-indent:.5em}
.hero-title{
  font-family:"Songti SC","STSong","Noto Serif SC",serif;
  font-size:clamp(52px,9.5vw,118px);line-height:1.12;font-weight:900;
  margin:22px 0 26px;letter-spacing:.02em;
}
.hero-sub{font-size:clamp(17px,2.4vw,22px);line-height:1.75;color:var(--muted)}
.scroll-cue{display:inline-block;margin-top:56px;color:var(--faint);font-size:14px;letter-spacing:.3em}
.cue-arrow{display:block;margin-top:8px;animation:bob 1.8s ease-in-out infinite;color:var(--rose-bright)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ---------- 手机样机 ---------- */
.phone-wrap{margin-top:64px;position:relative;z-index:2}
.phone{
  width:340px;max-width:88vw;margin:0 auto;text-align:left;
  background:#171017;border:1px solid rgba(255,255,255,.14);
  border-radius:44px;padding:12px 12px 14px;
  box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 0 6px rgba(255,255,255,.03),0 0 110px rgba(231,84,124,.22);
}
.phone-notch{width:110px;height:22px;background:#000;border-radius:12px;margin:2px auto 10px}
.phone-head{display:flex;align-items:center;justify-content:space-between;padding:2px 8px 10px;color:var(--rose-soft)}
.phone-back{font-size:24px;line-height:1}
.phone-name{font-family:"Songti SC","STSong",serif;font-size:16px;font-weight:700;color:var(--text)}
.phone-more{letter-spacing:.2em;color:var(--faint)}
.phone-body{
  border-radius:26px;padding:18px 16px;min-height:308px;
  display:flex;flex-direction:column;gap:12px;
  transition:background .5s ease;
}
.phone[data-theme="rose"] .phone-body{background:linear-gradient(165deg,#2b1720,#1a0f16 55%,#241019)}
.phone[data-theme="wine"] .phone-body{background:linear-gradient(165deg,#431d24,#220d11 55%,#33131a)}
.phone[data-theme="neon"] .phone-body{background:linear-gradient(165deg,#2c1b46,#140b26 55%,#221238)}
.story-line{font-size:14.5px;line-height:1.85;color:#f3dde3;animation:fadeUp .65s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.user-line{
  color:var(--rose-soft);
  border-left:2px solid var(--rose);
  padding-left:11px;
}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
#demoPhone .phone-body{height:400px;min-height:0;overflow-y:auto;scrollbar-width:none;scroll-behavior:smooth}
#demoPhone .phone-body::-webkit-scrollbar{display:none}
.phone-placeholder.is-typing{color:var(--text)}
.phone-placeholder.is-typing::after{
  content:"";display:inline-block;width:2px;height:14px;margin-left:2px;vertical-align:-2px;
  background:var(--rose-bright);animation:blink .8s infinite;
}
.phone-send{transition:transform .2s ease,box-shadow .2s ease}
.phone-send.sending{transform:scale(1.22);box-shadow:0 0 18px rgba(255,122,156,.75)}
.phone-input{
  margin-top:12px;display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  border-radius:999px;padding:11px 16px;
}
.phone-placeholder{font-size:13.5px;color:var(--faint)}
.phone-send{
  width:30px;height:30px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--rose-bright),var(--rose));color:#fff;font-size:13px;
}
.demo-tip{margin-top:20px;color:var(--faint);font-size:14px}
.phone-mini{width:320px}
.phone-body-static{min-height:300px}

/* ---------- 跑马灯 ---------- */
.marquee{border-block:1px solid var(--line);padding:20px 0;overflow:hidden;background:var(--bg-2)}
.marquee-track{display:flex;gap:34px;width:max-content;animation:slide 26s linear infinite;align-items:center}
.marquee-track span{
  font-family:"Songti SC","STSong",serif;font-size:21px;font-weight:700;letter-spacing:.14em;color:var(--rose-soft);white-space:nowrap;
}
.marquee-track i{color:var(--rose);font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- 大卖点 ---------- */
.feature{max-width:1060px;margin:0 auto;padding:150px 28px 30px;text-align:center}
.feature-kicker{color:var(--rose-bright);font-size:14px;letter-spacing:.42em;font-weight:700}
.feature-title{
  font-family:"Songti SC","STSong","Noto Serif SC",serif;
  font-size:clamp(36px,6vw,64px);line-height:1.3;font-weight:900;margin:20px 0 24px;
}
.feature-text{max-width:680px;margin:0 auto;font-size:clamp(16px,2vw,19px);line-height:1.9;color:var(--muted)}

/* ---------- 通用区块头 ---------- */
.stories,.play,.themes,.other,.faq{max-width:1200px;margin:0 auto;padding:140px 28px 20px}
.section-kicker{color:var(--rose-bright);font-size:14px;letter-spacing:.42em;font-weight:700;text-align:center}
.section-title{
  font-family:"Songti SC","STSong","Noto Serif SC",serif;
  font-size:clamp(36px,6vw,60px);line-height:1.3;font-weight:900;text-align:center;margin:18px 0 54px;
}
.section-text{text-align:center;color:var(--muted);font-size:17px;line-height:1.8;margin:-30px auto 36px;max-width:560px}

/* ---------- 故事卡片 ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;width:100%}
.story-card{
  border-radius:var(--radius);padding:30px 28px 26px;min-height:250px;
  display:flex;flex-direction:column;
  background:linear-gradient(160deg,var(--h1),var(--bg-2) 78%);
  border:1px solid var(--line);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
  transform-style:preserve-3d;will-change:transform;
}
.story-card:hover{border-color:rgba(255,122,156,.5);box-shadow:0 24px 50px rgba(0,0,0,.45)}
.card-genre{font-size:13px;letter-spacing:.24em;color:var(--rose-soft)}
.story-card h3{
  font-family:"Songti SC","STSong",serif;font-size:30px;font-weight:900;margin:14px 0 12px;letter-spacing:.04em;
}
.story-card p:not(.card-genre){font-size:15px;line-height:1.8;color:var(--muted)}
.card-go{margin-top:auto;padding-top:22px;font-size:14.5px;color:var(--rose-bright);font-weight:600}
.coming-card{
  background:rgba(255,255,255,.02);
  border:1px dashed rgba(247,184,198,.35);
  align-items:flex-start;
}
.coming-card h3{
  background:linear-gradient(92deg,var(--rose-soft),var(--rose-bright));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- 怎么玩 ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;width:100%}
.step{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 28px;
}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;font-size:23px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--rose-bright),var(--wine));
  font-family:"Songti SC","STSong",serif;
}
.step h3{font-size:21px;margin:20px 0 10px}
.step p{font-size:15px;line-height:1.8;color:var(--muted)}

/* ---------- 阅读外观 ---------- */
.theme-switch{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:42px}
.theme-btn{
  font:inherit;font-size:15px;cursor:pointer;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:11px 24px;
  transition:all .25s ease;
}
.theme-btn:hover{color:var(--text)}
.theme-btn.is-active{color:#fff;background:linear-gradient(135deg,var(--rose-bright),var(--rose));border-color:transparent;font-weight:700}
.theme-stage{display:flex;justify-content:center}

/* ---------- 其他 ---------- */
.other-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;width:100%}
.other-card{
  border:1px dashed rgba(247,184,198,.35);border-radius:var(--radius);
  padding:38px 28px;text-align:center;background:rgba(255,255,255,.02);
}
.other-card h3{font-size:22px;margin-bottom:10px}
.other-card p{color:var(--faint);font-size:15px}

/* ---------- 常见问题 ---------- */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:6px 24px}
.faq-item summary{
  cursor:pointer;font-size:17.5px;font-weight:700;padding:16px 0;list-style:none;
  display:flex;justify-content:space-between;align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--rose-bright);font-size:24px;font-weight:400}
.faq-item[open ] summary::after{content:"–"}
.faq-item p{font-size:15.5px;line-height:1.85;color:var(--muted);padding:0 0 20px}

/* ---------- 结尾 ---------- */
.finale{text-align:center;padding:170px 24px 130px;position:relative;overflow:hidden}
.finale::before{
  content:"";position:absolute;inset:auto -10% -55% -10%;height:480px;
  background:radial-gradient(50% 100% at 50% 100%,rgba(231,84,124,.30),transparent 70%);
  pointer-events:none;
}
.finale-title{
  font-family:"Songti SC","STSong","Noto Serif SC",serif;
  font-size:clamp(42px,8vw,88px);line-height:1.25;font-weight:900;
}
.cta-btn{
  display:inline-block;margin-top:44px;font-size:18px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--rose-bright),var(--rose) 55%,#c93a5e);
  padding:17px 54px;border-radius:999px;
  box-shadow:0 16px 42px rgba(231,84,124,.4);
  transition:transform .2s ease,box-shadow .2s ease;position:relative;
}
.cta-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 22px 52px rgba(231,84,124,.5)}
.finale-note{margin-top:30px;color:var(--faint);font-size:15px;letter-spacing:.18em}

/* ---------- 页脚 ---------- */
.footer{
  border-top:1px solid var(--line);padding:34px 28px;
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;color:var(--faint);font-size:14px;
}
.footer-logo{
  font-family:"Songti SC","STSong",serif;font-size:22px;font-weight:900;color:var(--rose-soft);letter-spacing:.08em;
}
.footer-copy{margin-left:auto}

/* ---------- 滚动显现 ---------- */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .petals span,.marquee-track,.cue-arrow{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- 平板（电脑与手机之间的过渡档） ---------- */
@media (max-width:1080px){
  .card-grid,.steps,.other-grid{grid-template-columns:repeat(2,1fr)}
  .steps .step:last-child,.other-grid .other-card:last-child,.card-grid .story-card:last-child{grid-column:span 2}
  .feature{padding-top:120px}
  .stories,.play,.themes,.other,.faq{padding-top:110px}
  .nav{gap:20px}
  .nav-links{gap:20px}
}

/* ---------- 手机 ---------- */
@media (max-width:860px){
  .card-grid,.steps,.other-grid{grid-template-columns:1fr}
  .steps .step:last-child,.other-grid .other-card:last-child,.card-grid .story-card:last-child{grid-column:auto}
  .nav-links{display:none}
  .nav{padding:12px 18px;gap:14px}
  .test-badge{font-size:12px;padding:6px 11px}
  .hero{padding-top:132px}
  .feature,.stories,.play,.themes,.other,.faq{padding-top:100px;padding-left:20px;padding-right:20px}
  .theme-btn{min-height:44px}
  .faq-item summary{padding:18px 0}
  .footer-copy{margin-left:0}
}

/* ---------- 小屏手机（如 360–430px 宽） ---------- */
@media (max-width:480px){
  .nav{padding:10px 14px;gap:10px}
  .logo{font-size:24px}
  .test-badge{font-size:11px;padding:5px 9px;letter-spacing:.02em}
  .hero{padding:112px 16px 70px}
  .hero-kicker{font-size:13px;letter-spacing:.34em;text-indent:.34em}
  .hero-title{font-size:clamp(40px,13.5vw,52px)}
  .hero-sub{font-size:16px;line-height:1.7}
  .phone-wrap{margin-top:44px}
  .phone{border-radius:36px;padding:10px 10px 12px}
  #demoPhone .phone-body{height:360px}
  .phone-mini{width:100%;max-width:320px}
  .demo-tip{font-size:13px;padding:0 8px}
  .scroll-cue{margin-top:40px}
  .feature-title,.section-title{font-size:clamp(30px,8.6vw,36px)}
  .feature-text{font-size:16px}
  .story-card{min-height:0;padding:24px 22px}
  .story-card h3{font-size:26px}
  .step{padding:26px 22px}
  .theme-switch{gap:9px}
  .theme-btn{padding:10px 17px;font-size:14px}
  .finale{padding:120px 18px 100px}
  .cta-btn{padding:15px 42px;font-size:16px}
  .footer{flex-direction:column;align-items:flex-start;gap:10px;padding:28px 20px}
  .marquee-track span{font-size:18px}
}