/* story.css — PGC 故事线(极光奇幻森林)。
   2026-09-17 UED 换皮(Figma Aimon/20260909-PGC玩法, 画板 390×844): 梗概页/剧情页/抉择页/答题页/结局弹层/次数用尽弹层
   改为整屏背景插画 + 沉浸式顶栏(盖住 App 顶栏) + 底部渐变文字区。章节列表页与营地页仍沿用旧素框架(地图页在设计稿里标"待调整UI，暂不开发")。
   2026-09-18 按 Figma "CSS (all layers)" 逐层对位重做(产品反馈位置/布局对不上): 尺寸、间距、字号、颜色、圆角全部取自设计稿数值,
   画板状态栏 47px 对应 env(safe-area-inset-top), 画板底部 Home 条 34px 对应 env(safe-area-inset-bottom)。
   业务 JS(flow-story.js) 只依赖这些 .story-* 类名。设计稿底色 #060B1F, 主按钮渐变 104.23deg #FF77E0→#1AA7FF。 */

/* 设计稿结局卡标题字体 Poppins Bold Italic(OFL 开源, 只带 latin 子集 8KB); 其余文字沿用系统字体(设计稿 San Francisco Display = iOS 系统字体) */
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/Poppins-BoldItalic.woff2?v=591c48fa") format("woff2"); }
/* ---- 逐字流式(09-27 用户以参考视频定稿, 存档 docs/product/refs/流式打字参考-20260927.mp4) ----
   剧情正文和答对气泡都是"一个字一个 <span>": 没轮到的 opacity:0, 轮到时加 tw-on 淡入。
   淡入 120ms 要和 flow-story.js 的 TYPE_FADE_MS 一致(有用例对着两边比)。
   每 30ms 出一个字、每个字淡 120ms → 同时有约 4 个字在半路上, 就是视频里"最新 2~3 个字是半透明的"。
   tw-all 是"点一下出全文"用的: 直接关掉过渡, 否则补齐的一屏字会一起淡、看着像闪一下。 */
.tw-c { opacity: 0; transition: opacity 120ms linear; }
.tw-c.tw-on { opacity: 1; }
.tw-all .tw-c { opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) { .tw-c { opacity: 1; transition: none; } }

/* ---- 沉浸式整屏视图(梗概/剧情/抉择/答题/结局): 固定铺满视口, 盖过 App 顶栏与舞台内边距 ---- */
body.story-immersive .stage { z-index: 40; }
/* 安卓全屏态(09-21): 状态栏已隐藏, env(safe-area-inset-top) 多为 0, 给顶栏留出挖孔/刘海的最小距离 */
body.story-fullscreen .story-screen { --sat: max(env(safe-area-inset-top, 0px), 28px); --sab: max(env(safe-area-inset-bottom, 0px), 34px); }
/* 2026-09-24 UED 走查 P1-3 + 真机问题: 全屏态下安卓把手势条藏了, env(safe-area-inset-bottom) 变 0, --sab 只剩 18px 兜底,
   底部按钮就压在手势条那一条上, 第一下点击常被系统吃掉。全屏时底部至少留设计稿 Home 条的 34px。 */
.story-screen {
  --sat: env(safe-area-inset-top, 47px);                      /* 设计稿状态栏 47 */
  --sab: max(env(safe-area-inset-bottom, 0px), 18px);         /* 设计稿 Home 条 34; 无 Home 条机型留 18 */
  --story-grad: linear-gradient(104.23deg, #FF77E0 -7.5%, #1AA7FF 116.89%);
  position: fixed; inset: 0; z-index: 30; max-width: var(--maxw); margin: 0 auto; background: #060B1F; color: #fff; overflow: hidden;
  display: flex; flex-direction: column;
  font-family: -apple-system, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Roboto, "PingFang SC", sans-serif;   /* 设计稿 San Francisco Display */
}
.story-screen .ico { width: 18px; height: 18px; flex: 0 0 18px; }
/* 合规: AI 生成/互动披露在整屏里持续可见——设计稿没有这一行, 放进底部 Home 条区域不占版面 */
.story-disclosure { position: absolute; left: 0; right: 0; bottom: 3px; z-index: 5; text-align: center; font-size: 9px; line-height: 11px; color: rgba(255,255,255,.35); pointer-events: none; }
/* 背景: 474.75×844 居中裁切(=cover) + 蒙层 rgba(0,0,0,.4) + 顶部 136px 渐暗(0→.24) + 底部 158px 渐暗(0→.3) */
.story-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.story-bg::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.story-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.24) 0px, rgba(0,0,0,0) 136px), linear-gradient(0deg, rgba(0,0,0,.3) 0px, rgba(0,0,0,0) 158px); }
/* modal_overlay: 底部 452px, 透明→rgba(26,26,26,.6)(到一半即满), 轻微毛玻璃 */
/* 2026-09-25 UED 走查: 底图没到之前整层先透明(底下是深色底), 到了再淡入; 3 秒兜底见 flow-story.js screen() */
.story-bg.story-bg-in { opacity: 0; }
.story-bg.story-bg-in.ready { opacity: 1; transition: opacity .28s ease; }
.story-bg-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 452px; background: linear-gradient(180deg, rgba(26,26,26,0) 0%, rgba(26,26,26,.6) 50%); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
/* 梗概页: 整图 cover + 蒙层 .6, 没有渐变带 */
.story-bg.story-bg-pro::before { background: rgba(0,0,0,.6); }
.story-bg.story-bg-pro::after, .story-bg.story-bg-pro .story-bg-fade { display: none; }

/* 顶栏: top 59(=状态栏 47 + 12), 高 36; 左返回圆钮 36 白 8% 毛玻璃; 标题居中 */
.story-topbar { position: relative; z-index: 2; flex: 0 0 auto; height: 36px; margin: calc(var(--sat) + 12px) 16px 0; display: flex; align-items: flex-start; justify-content: center; }
.story-topbar-back { position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 20px; border: 0; padding: 0; background: rgba(255,255,255,.08); color: #fff; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; }
.story-topbar-back svg { width: 20px; height: 20px; display: block; }
.story-topbar-chapters { position: absolute; right: 0; top: 0; width: 36px; height: 36px; border-radius: 20px; border: 0; padding: 0; background: rgba(255,255,255,.08); color: #fff; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; }   /* 设计稿右上角"章节目录"(09-21 产品要求补上) */
.story-topbar-chapters svg { width: 20px; height: 20px; display: block; }
.story-topbar-chapters ~ .story-topbar-timer, .story-topbar-timer:not(:last-child) { right: 44px; }
/* 章节目录弹层(设计稿 Chapters): 蒙层 + 底部深色面板, 标题居中 + ✕, 每行 Chapter N / 标题 / 当前 ✓ 或未到 🔒 */
.story-chapters { position: absolute; inset: 0; z-index: 70; }
.story-chapters-mask { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
/* 2026-09-24 UED 走查 P1-4: 整体模块高 306px(含自身内边距, 全局 box-sizing:border-box);
   列表距顶部标题 8px; 列表行字重 semibold、纯白 #FFFFFF */
.story-chapters-sheet { height: 306px; padding: 20px 0 calc(var(--sab) + 8px); gap: 0; }
.story-chapters-head { position: relative; width: 100%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0 16px 8px; }
.story-chapters-title { font-size: 16px; line-height: 20px; font-weight: 700; color: #fff; }
.story-chapters-head .story-sheet-close { position: absolute; right: 16px; top: -2px; margin: 0; }
.story-chapters-list { width: 100%; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.story-chapter-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 16px; border: 0; background: transparent; color: #FFFFFF; font: inherit; font-size: 14px; line-height: 20px; font-weight: 600; text-align: left; }
/* 2026-09-24 UED 走查 P1-4: 稿里三行文字亮度一致——没到过的章节**不变灰**, 一律 #FFFFFF, 靠行尾 🔒 区分 */
.story-chapter-row:disabled { color: #FFFFFF; }
.story-chapter-no { flex: 0 0 auto; font-weight: 600; }
.story-chapter-title { flex: 1; min-width: 0; }
.story-chapter-row svg { width: 16px; height: 16px; flex: 0 0 16px; display: block; }
.story-bubble-timeout { display: block; margin-bottom: 2px; }
.story-topbar-title { display: flex; flex-direction: column; align-items: center; max-width: 70%; font-size: 18px; font-weight: 700; line-height: 18px; text-align: center; white-space: nowrap; }
.story-topbar-sub { display: block; font-size: 13px; font-weight: 400; line-height: 13px; color: rgba(255,255,255,.6); margin-top: 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.story-topbar.story-topbar-pro { align-items: center; }
.story-topbar.story-topbar-pro .story-topbar-title { font-size: 20px; line-height: 20px; }
.story-topbar-timer { position: absolute; right: 0; top: 6px; font-variant-numeric: tabular-nums; font-size: 12px; line-height: 16px; padding: 4px 10px; border-radius: 12px; background: rgba(255,255,255,.14); color: #fff; }
.story-topbar-timer.urgent { background: rgba(255,92,92,.28); color: #ffb3b3; }

/* 正文区: 剧情/抉择/答题的文字贴底(设计稿正文块 bottom 对齐按钮区), 梗概页顶对齐 */
.story-scroll { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px 16px 0; }
.story-scroll > * { flex: 0 0 auto; }
.story-scroll.story-scroll-top { justify-content: flex-start; padding-top: 20px; }              /* 梗概页正文 top 115 = 59+36+20 */
.story-scroll.story-scroll-tail { padding-bottom: calc(var(--sab) + 16px); }                    /* 无按钮页(剧情/结局): 正文距底 34+16 */
.story-body { font-size: 16px; line-height: 24px; font-weight: 400; color: #fff; white-space: pre-wrap; }
.story-body p { margin: 0 0 12px; }
.story-body p:last-child { margin-bottom: 0; }
.story-body b { font-weight: 700; }
.story-body.story-quiz-q { font-weight: 500; }         /* 答题题干 Medium */
.story-body.story-system { color: #fff; }
.story-tap { cursor: pointer; }                        /* 叙事页: 整屏可点继续(设计稿无按钮) */
.story-speaker { font-weight: 700; margin-bottom: 8px; }

/* 底部按钮区: 上内边距 16, 按钮 44, 下方 Home 条; 整条 10px 毛玻璃 */
.story-footer { position: relative; z-index: 2; flex: 0 0 auto; padding: 16px 16px var(--sab); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.story-footer.story-footer-pro { padding: 12px 18px var(--sab); }                                 /* 梗概页: 上 12, 左右 18(按钮 354) */
.story-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; border-radius: 16px; border: 0; padding: 0 12px; font-size: 20px; line-height: 20px; font-weight: 700; color: #fff; }
.story-btn.primary { background: var(--story-grad); }
.story-btn.primary:disabled { opacity: .6; }
.story-btn.ghost { background: rgba(255,255,255,.2); font-size: 16px; line-height: 19px; font-weight: 600; }
.story-btn-row { display: flex; gap: 10px; }
.story-btn-row .story-btn { flex: 1; }

/* ---- 梗概页 ---- */
.story-pro-title { display: flex; align-items: center; gap: 8px; font-size: 18px; line-height: 18px; font-weight: 700; margin: 0 0 16px; }
.story-pro-text { font-size: 16px; line-height: 24px; color: #fff; }
.story-pro-text p { margin: 0 0 12px; }
.story-unlock-head { display: flex; align-items: center; gap: 8px; font-size: 18px; line-height: 18px; font-weight: 700; margin: 20px 0 16px; }
.story-unlock-head .cnt { margin-left: auto; font-size: 13px; line-height: 17px; font-weight: 400; color: rgba(255,255,255,.6); }
/* 设计稿(线一 3 只 / 线三 6 只): 每行 3 格 106×130、行内间距 20、多于 3 只换行且行距 0(线三稿 Frame 2147232720) */
.story-unlock-row { display: flex; flex-wrap: wrap; gap: 0 20px; justify-content: flex-start; margin-bottom: 20px; }
.story-unlock-item { width: 106px; max-width: 106px; aspect-ratio: 106 / 130; flex: 0 0 calc((100% - 40px) / 3); display: flex; align-items: center; justify-content: center; position: relative; }   /* 09-21: 屏窄于 390 时按比例缩, 保证一行三只 */
/* 设计稿把 1280 方形抠图缩到 129.4px 再按角色轮廓裁到格子里(线一: 98×118 / 77×119 / 105×91); 我们的 466 方形抠图同样缩到 129px, 不裁切, 宽的角色最多探出格子 12px 落在 20px 间距里 */
.story-unlock-item img { width: 121.7%; max-width: none; aspect-ratio: 1; height: auto; object-fit: contain; display: block; }   /* 稿: 1280 图缩到 129 放在 106 格里 */
.story-unlock-item.locked img { filter: grayscale(1) brightness(.78) contrast(.95); }            /* 未解锁: 设计稿灰色剪影(内阴影 rgba(55,55,55,.4)) */
.story-unlock-ph { font-size: 34px; line-height: 44px; font-weight: 400; color: rgba(255,255,255,.7); }

/* ---- 抉择 / 答题 选项: 358×50 半透明白 20% 圆角 12 内边距 16, 字母与文字间距 12 ---- */
.story-opts { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; margin-bottom: 0; }
.story-opt { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; min-height: 50px; padding: 13px 14px; border-radius: 12px; border: 2px solid transparent; background: rgba(255,255,255,.2); color: #fff; font-size: 16px; line-height: 20px; font-weight: 400; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.story-opt-key { flex: 0 0 14px; width: 14px; white-space: nowrap; }
.story-opt-text { flex: 1; min-width: 0; }
.story-opt.on { border-color: #fff; }
.story-opt.wrong { border-color: #FF4747; background: rgba(255,133,133,.2); }
.story-opt.right { border-color: #2CDB4F; background: rgba(131,242,153,.2); }
.story-opt .story-opt-mark { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; line-height: 14px; font-weight: 700; color: #fff; }
.story-opt.wrong .story-opt-mark { background: #FF4747; }
.story-opt.right .story-opt-mark { background: #2CDB4F; }
.story-opt:disabled { opacity: 1; }
/* 2026-09-28 多选题勾选圆圈(Figma 组件 Checkbox / ic_select_n, 16×16) —— 稿上只有多选题有, 单选与抉择页没有。
   未选: 0.88px 内描边 #FFF 60%。用 box-shadow 不用 border —— 稿上是 inner alignment, border 会从 16px 里再吃掉一圈。
   已选: 白色实心圆 + 镂空对勾(svgIcon("tickbox") 是 Figma 导出的原图, 对勾是洞不是黑勾)。
   margin-top 2px = (选项行高 20 − 16) / 2, 让圆圈压在第一行文字的中线上(稿上两行的选项就是这样)。
   margin-left -2px: .story-opt 的 gap 是 12(字母↔正文), 稿上正文↔圆圈是 10, 差的 2px 在这里减掉。
   右边距不用另设: .story-opt 是 border-box, padding-right 14 + 2px 透明描边, 圆圈离选项外缘正好 16px, 与稿一致(真机量过)。 */
.story-opt-box { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; margin-left: -2px; border-radius: 50%; box-shadow: inset 0 0 0 0.88px rgba(255,255,255,.6); }
.story-opt-box.on { box-shadow: none; color: #fff; }
.story-screen .story-opt-box .ico { width: 16px; height: 16px; flex: 0 0 16px; display: block; }
/* 2026-09-24 产品: 线三"没有多选正确"时不弹对错弹窗, 只让选项框红闪一下, 留在原题重选 */
.story-opt-flash { animation: story-opt-flash .35s ease-out 2; }   /* 共 700ms, 与 JS 里移除类名的 setTimeout 对齐 */
@keyframes story-opt-flash {
  0%, 100% { border-color: transparent; background: rgba(255,255,255,.2); }
  50%      { border-color: #FF4747;     background: rgba(255,133,133,.2); }
}
@media (prefers-reduced-motion: reduce) { .story-opt-flash { animation: none; border-color: #FF4747; } }
.story-multi-tip { font-size: 13px; line-height: 17px; color: rgba(255,255,255,.6); margin-top: 8px; }

/* ---- 答题反馈: 顶部左侧角色圆头像 94 + 白色 85% 气泡(左上直角带小尾巴), top 139 = 状态栏 47 + 92 ---- */
.story-bubble-wrap { position: absolute; z-index: 3; left: 16px; right: 16px; top: calc(var(--sat) + 92px); display: flex; align-items: flex-start; gap: 12px; animation: story-pop .25s ease-out both; }
.story-bubble-avatar { position: relative; flex: 0 0 94px; width: 94px; height: 94px; border-radius: 50%; background: #E9BCAA; overflow: visible; }
.story-bubble-avatar .story-bubble-img { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.story-bubble-avatar .story-bubble-img img { width: 100%; height: 100%; object-fit: cover; transform: rotate(20deg) scale(1.08); transform-origin: 50% 55%; display: block; }   /* 兜底照片头像; UED 表情图(.story-bubble-rect)不套这条(09-21 修: 之前叠加导致牌子被裁) */
.story-bubble-avatar .story-opt-mark { position: absolute; left: 12px; top: 2px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; border: 2px solid #fff; box-sizing: border-box; }
.story-bubble-avatar.story-bubble-avatar-ued { overflow: hidden; }
.story-bubble-rect { position: absolute; transform-origin: 0 0; overflow: hidden; }
.story-bubble-rect img { position: absolute; display: block; max-width: none; }
.story-bubble-avatar.wrong .story-opt-mark { background: #FF4747; }
.story-bubble-avatar.right .story-opt-mark { background: #2CDB4F; }
.story-bubble { position: relative; margin-left: 6px; max-width: 207px; background: rgba(255,255,255,.85); color: #000; border-radius: 0 16px 16px 16px; padding: 16px; font-size: 14px; line-height: 21px; font-weight: 500; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.story-bubble::before { content: ""; position: absolute; left: -6px; top: 0; width: 0; height: 0; border-top: 0 solid transparent; border-bottom: 16px solid transparent; border-right: 6px solid rgba(255,255,255,.85); }
@keyframes story-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- 结局: 再压一层 rgba(0,0,0,.7) + 居中"解锁新伙伴"卡(331×402, 上方立绘 227×147 溢出卡顶) ---- */
.story-end-overlay { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 20px; background: rgba(0,0,0,.7); }
.story-end-group { position: relative; width: 331px; max-width: calc(100% - 40px); height: 402px; }
/* 2026-09-25 UED 走查 P1-5b: 光影换成 UED 切图(227×147, 3 倍导出)+ 稿里的三颗星星; 立绘只钉高度 134,
   宽度随抠图比例走(稿里 87.32×134)——原来写死 111×134, 方形抠图落进去只能撑到 111, 所以看着偏小。 */
.story-end-art { position: absolute; left: 50%; top: 0; width: 227px; height: 147px; margin-left: -113.5px; display: flex; align-items: center; justify-content: center; }
.story-end-glow { position: absolute; z-index: 0; left: 0; top: 0; width: 227px; height: 147px; }
.story-end-stars { position: absolute; z-index: 1; left: 11.8px; top: 12.5px; width: 182px; height: 79px; }
.story-end-img { position: relative; z-index: 2; width: auto; height: 134px; max-width: 227px; margin-top: 13px; object-fit: contain; filter: drop-shadow(0 0 13.66px rgba(131,183,255,.48)); }
.story-end-img-ph { position: relative; z-index: 2; width: 111px; height: 134px; margin-top: 13px; border-radius: 30px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 40px; color: rgba(255,255,255,.4); }
.story-end-card { position: absolute; z-index: 1; left: 0; right: 0; top: 88px; height: 258px; }
.story-end-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 2px rgba(255,255,255,.2)); }
/* 2026-09-24 UED 走查 P1-5: 按钮距卡片底部固定 24px(原来跟着正文长度浮动) */
.story-end-body { position: absolute; left: 12px; right: 12px; top: 79px; bottom: 24px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 20px; }
.story-end-copy { display: flex; flex-direction: column; align-items: center; width: 100%; }
.story-end-title { font-family: Poppins, -apple-system, "SF Pro Display", "Helvetica Neue", sans-serif; font-size: 22px; line-height: 22px; font-weight: 700; font-style: italic; margin: 0 0 16px; text-align: center; background: linear-gradient(90deg, #FFFFFF 25.1%, #BFCEFF 74.14%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; }
.story-end-text { font-size: 14px; line-height: 21px; font-weight: 400; color: #fff; text-align: center; margin: 0; max-width: 291px; }   /* 09-21 产品: 只有伙伴名加粗 */
.story-end-text b { font-weight: 700; }
/* 2026-09-25: 一局只能领 1 位伙伴 —— 已经领过的局重玩到别的结局时, 在正文下面写明白(稿里没有这个状态) */
.story-end-note { margin: 6px 0 0; font-size: 12px; line-height: 17px; color: rgba(255,255,255,.65); text-align: center; max-width: 291px; }
.story-end-body .story-btn { height: 34px; border-radius: 12px; font-size: 16px; line-height: 19px; padding: 0 32px; }
.story-end-close { position: absolute; z-index: 3; left: 50%; top: 360px; margin-left: -16px; width: 32px; height: 32px; border-radius: 20px; border: 0; padding: 0; background: rgba(255,255,255,.08); color: #fff; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; }
.story-end-close svg { width: 10px; height: 10px; display: block; }
.story-end-actions { margin-top: 12px; }

/* ---- 玩法说明整页(2026-09-26, 设计稿 1502-5405「玩法说明」390×844) ----
   稿里这一页是纯色底 #091125, 没有背景图; 顶栏与正文的几何靠 .story-topbar / .story-scroll-top 已有的规则对上:
   顶栏 top 59 = --sat(47) + 12、高 36; 正文 top 115 = 59 + 36 + 20、宽 358 = 390 - 16*2; 条间距 20; 每条 16px/150% */
.story-howto-screen { background: #091125; }
.story-howto-screen .story-bg { display: none; }
.story-howto-rules { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.story-howto-rule { margin: 0; font-size: 16px; line-height: 150%; font-weight: 400; color: #FFFFFF; }

/* ---- 次数用尽弹层(底部): #091125 圆角 20, 上内边距 20, 区块间距 16 ---- */
.story-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 60; background: #091125; border-radius: 20px 20px 0 0; padding: 20px 0 var(--sab); display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; animation: story-up .25s ease-out both; }
.story-sheet-close { align-self: flex-end; width: 24px; height: 24px; margin: 0 16px; border-radius: 20px; border: 0; background: transparent; color: #fff; padding: 6px; display: flex; align-items: center; justify-content: center; }
.story-sheet-close svg { width: 12px; height: 12px; display: block; }
.story-sheet-ico { width: 159px; height: 147px; display: block; color: #fff; }
.story-sheet-text { display: flex; flex-direction: column; gap: 12px; padding: 0 16px; }
.story-sheet-title { font-size: 20px; line-height: 20px; font-weight: 700; margin: 0; }
.story-sheet-desc { font-size: 16px; line-height: 130%; color: rgba(255,255,255,.6); margin: 0; padding: 1px 0; }
.story-sheet-actions { width: 100%; padding: 12px 16px 0; }
.story-dimmer { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.5); }
@keyframes story-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ================= 以下为旧素框架(章节列表 / 营地 / 玩法说明 仍在用) ================= */
.story-card { margin-bottom: 12px; }
.story-kicker { font-size: 12px; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; }
.story-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.story-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 2px 0 6px; }
.story-meta { font-size: 13px; color: var(--text); margin-top: 6px; }
.story-meta.muted { color: var(--muted); }
.story-badge { display: inline-block; font-size: 11px; line-height: 18px; padding: 0 8px; border-radius: 9px; background: var(--surface-2); color: var(--text); white-space: nowrap; }
.story-badge-cleared, .story-badge-good { background: rgba(55,211,155,.18); color: var(--ok); }
.story-badge-locked { background: var(--surface); color: var(--faint); }
.story-badge-bad, .story-badge-fail { background: rgba(255,107,107,.16); color: var(--danger); }
.story-badge-multi { background: rgba(255,196,77,.2); color: #ffc44d; font-weight: 700; }   /* 多选题标注 */
.story-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
/* 按钮本身是 inline-flex, 直接排在文字后会贴住/压住上一行; 故事线里的按钮一律放进 .story-actions 或自带上边距 */
.story-card > .btn.block { margin-top: 14px; }
.story-card .story-opts + .btn.block { margin-top: 4px; }
.story-card-locked { opacity: .72; }
.story-text { white-space: pre-wrap; line-height: 1.7; font-size: 15px; color: var(--text); margin: 8px 0 12px; }
.story-text.story-system { border-left: 3px solid var(--accent); padding-left: 10px; color: var(--muted); font-size: 14px; }
.story-speaker { font-weight: 600; color: var(--accent); margin-top: 6px; }
.story-prompt { font-size: 16px; font-weight: 600; line-height: 1.6; margin: 6px 0 10px; }
.story-reward-name { font-size: 20px; font-weight: 700; margin: 4px 0; }
/* 故事列表顶部的森林次数卡(点开钱包) */
.story-wallet { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
.story-wallet-label { font-size: 12px; color: var(--muted); }
.story-wallet-count { font-size: 16px; font-weight: 600; }   /* 2026-09-14 用户反馈字号过大 */
.story-wallet-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* 顶栏右侧工具(仅章节列表页): 图鉴 / 玩法说明, 顶掉生成次数徽标的位置(2026-09-10 用户反馈) */
.story-tools { display: flex; gap: 6px; }
.story-tool { width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 16px; line-height: 30px; text-align: center; }
/* 2026-09-24 UED 走查第 7 条: 角色图鉴(营地)底色为 #091125, 与其余故事线页面的 #060B1F 不同 */
#view-story-camp .story-screen { background: #091125; }
/* 森林营地(设计稿 Forest Camp, 09-21 按稿重画): 沉浸式整屏; 每条线一组(线名 + 右侧 x/N); 一行 3 只整只彩色抠图, 未收集灰色剪影; 图下只放名字 */
.story-camp-section { margin: 0 0 24px; }
.story-camp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.story-camp-line { font-size: 16px; line-height: 20px; font-weight: 700; color: #fff; }
.story-camp-count { font-size: 13px; line-height: 16px; color: rgba(255,255,255,.6); }
.story-camp-grid { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.story-camp-item { flex: 0 0 calc((100% - 40px) / 3); max-width: 106px; text-align: center; }
.story-camp-art { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.story-camp-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.story-camp-item.locked .story-camp-art img { filter: grayscale(1) brightness(.78) contrast(.95); }
.story-camp-name { font-size: 12px; line-height: 16px; margin-top: 6px; color: #fff; word-break: break-word; }
.story-camp-item.locked .story-camp-name { color: rgba(255,255,255,.6); }

/* 结局奖励弹窗卡片(产品 09-11): 形象 + 名称 + 介绍 */
.story-friend-card { text-align: center; }
.story-friend-img { width: 120px; height: 120px; margin: 4px auto 10px; border-radius: 24px; object-fit: cover; display: block; background: var(--surface-2); box-shadow: var(--shadow-lg); }
.story-friend-ph { display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--muted); }
.story-friend-card .story-text { text-align: left; }
/* 营地点亮动效: 刚加入的伙伴格子 */
@keyframes story-lit { 0% { transform: scale(.6); opacity: .2; box-shadow: 0 0 0 0 rgba(55,211,155,.0); } 55% { transform: scale(1.12); opacity: 1; box-shadow: 0 0 0 14px rgba(55,211,155,.22); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(55,211,155,0); } }
.story-camp-item.lit .story-camp-art { animation: story-lit 1.1s ease-out both; border-radius: 50%; }

/* ───────────── 奇幻森林地图（设计稿「奇幻森林地图完整版」390×1389 + 彩色状态稿，2026-09-25）─────────────
   取代原来的故事线卡片列表。数值全部来自导出的 SVG，不是目测：
   · 整张地图 390×1389，视口 844，可上下滑（稿上标注「整体地图造型呈 S 形，一个 S 形是一个周期」）
   · 背景是图片，原图 711×1566、在 390 宽下是 1.81 倍图；它只够盖一屏（865 CSS px），
     所以背景固定铺满视口、不随地图滚动（这一条待设计确认）
   · S 形主路径：stroke-width 40、白色 12%；走过的段落实线，没解锁的段落虚线（dash 40/40）
   · 节点：三层椭圆叠出立体感 —— 底 rx35/ry31、面 rx35/ry27.5，中间一只蝴蝶
     已解锁 #2677E9 + #4C9DF8；未解锁 #525252 + #717171；停在哪个节点，外围多一圈 6px #4C9DF8
   · 底部卡片：Volume N + 故事线名 + 按钮（288×34、圆角 12、渐变 #FF77E0→#1AA7FF） */
#view-story-map .story-screen { background: #060B1F; }
.story-map-bg { position: absolute; inset: 0; background: url("../img/story/map-bg.jpg?v=4fcd5c53") center top / cover no-repeat; }
.story-map-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 30%, rgba(22,49,64,0) 0%, rgba(22,49,64,.55) 100%); }
.story-map-scroll { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 1; }
.story-map-canvas { position: relative; width: 390px; margin: 0 auto; }          /* 高度由 JS 按节点数算 */
.story-map-svg { position: absolute; left: 0; top: 0; width: 390px; display: block; pointer-events: none; }
.story-map-node { position: absolute; width: 70px; height: 62px; margin: -31px 0 0 -35px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.story-map-node svg { width: 70px; height: 62px; display: block; }
.story-map-node:disabled { cursor: default; }
/* 顶部角色 + 气泡（稿：停在哪条线，气泡里最后那个名字就换成该故事线名） */
.story-map-hero { position: absolute; left: 16px; top: 104px; display: flex; align-items: flex-start; gap: 8px; z-index: 2; pointer-events: none; }
.story-map-hero img { width: 76px; height: 76px; object-fit: contain; flex: 0 0 76px; }
.story-map-bubble { max-width: 207px; padding: 12px 16px; border-radius: 0 16px 16px 16px; background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #0B1020; font-size: 14px; line-height: 20px; font-weight: 500; }
/* 底部卡片：点节点后浮出 */
.story-map-card { position: absolute; left: 16px; right: 16px; bottom: calc(var(--sab) + 12px); z-index: 3;
  padding: 16px; border-radius: 16px; background: rgba(9,17,37,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,.45); animation: story-map-card-in .22s ease-out; }
@keyframes story-map-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.story-map-card .vol { font-size: 12px; line-height: 16px; color: rgba(255,255,255,.6); }
.story-map-card .name { margin: 2px 0 12px; font-size: 20px; line-height: 26px; font-weight: 700; color: #FFFFFF; }
.story-map-card .cost { margin: 0 0 12px; font-size: 12px; line-height: 16px; color: rgba(255,255,255,.6); }   /* 用户 09-25: 显示「消耗 N 次」, 不显示金额 */
.story-map-btn { display: block; width: 100%; height: 34px; padding: 0 32px; border: 0; border-radius: 12px;
  background: linear-gradient(90deg, #FF77E0 0%, #1AA7FF 100%); color: #FFFFFF; font-size: 14px; line-height: 34px; font-weight: 600; cursor: pointer; }
.story-map-btn:disabled { background: rgba(255,255,255,.12); color: rgba(255,255,255,.4); cursor: default; }
/* 地图顶栏：三个 36×36 圆钮（稿：x=16 返回 / x=290 图鉴 / x=338 玩法说明，y=59 = 状态栏 + 12） */
.story-map-topbar { position: absolute; left: 16px; right: 16px; top: calc(var(--sat) + 31px); z-index: 4; display: flex; align-items: center; gap: 12px; }
.story-map-topbar .spacer { flex: 1 1 auto; }
.story-map-topbtn { width: 36px; height: 36px; flex: 0 0 36px; padding: 0; border: 0; border-radius: 18px;
  background: rgba(255,255,255,.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.story-map-topbtn svg { width: 36px; height: 36px; display: block; }
.story-map-topbtn.back svg { width: 20px; height: 20px; }