/* =====================================================
   《廉途·智伴》pages.css — 各屏样式 v5.1
   ===================================================== */

/* ============ S0 主界面·红色调（v5.6） ============ */
.s0{
  position:absolute; inset:0; overflow:hidden;
  background:#5a0d0b; /* 兜底赤色（实际由 sky 满铺） */
}
/* v5.7 内容柱滚动兜底容器（背景层为其兄弟，不随滚动） */
.s0-scroll{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; }
/* 内容柱：视口内上下左右全居中 */
.s0-center{
  position:relative; z-index:6;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  padding:calc(env(safe-area-inset-top, 0px) + 24px) 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
}
/* 矮屏 clamp 缩放（.92 起）防溢出；极端溢出由 .s0-scroll 纵向滚动兜底（首屏仍居中） */
@media (max-height:639px){ .s0-center{ transform:scale(.92); } }
@media (max-height:560px){ .s0-center{ transform:scale(.84); } }
@media (max-height:480px){ .s0-center{ transform:scale(.76); } }
.s0-bg-sky{ position:absolute; inset:0; overflow:hidden; }
.s0-bg-sky img{ width:100%; height:100%; object-fit:cover; }
.s0-bg-mountains{ position:absolute; left:0; right:0; bottom:0; height:42%; overflow:hidden; opacity:.4; pointer-events:none; }
.s0-bg-mountains img{ width:100%; height:100%; object-fit:cover; object-position:center bottom; }
.s0-tex{ opacity:.35; }
/* 暗红 vignette 渐亮（1.5s，替代旧墨绿夜幕渐亮） */
.s0-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%, transparent 28%, rgba(58,8,6,.55) 74%, rgba(38,5,4,.8) 100%);
  opacity:0; animation:s0-vig-glow 1.5s ease forwards;
}
@keyframes s0-vig-glow{ from{ opacity:0; } to{ opacity:1; } }
.s0 svg.trail{ position:absolute; inset:0; width:100%; height:100%; }
.s0 svg.trail path, .s0 svg.trail circle{ stroke-dasharray:1200; stroke-dashoffset:1200; animation:draw-line 2.6s ease forwards; }
.s0 svg.trail .d2{ animation-delay:.5s; } .s0 svg.trail .d3{ animation-delay:1s; } .s0 svg.trail .d4{ animation-delay:1.4s; }
@keyframes draw-line{ to{ stroke-dashoffset:0; } }
.s0-star{ fill:#F6F3EC; opacity:0; animation:star-in 1s ease forwards; }
@keyframes star-in{ to{ opacity:.9; } }
.s0-inner{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.s0-brand{
  color:#F6F3EC; font-size:2.5rem; letter-spacing:.14em; text-shadow:0 2px 18px rgba(58,8,6,.6);
  opacity:0; animation:fade-rise 1.2s .3s ease forwards;
}
.s0-slogan{ color:#F6F3EC; font-family:var(--serif); letter-spacing:.28em; font-size:.95rem;
  opacity:0; animation:fade-rise 1.2s .7s ease forwards; }
.s0-contract{
  margin-top:18px; max-width:19em; color:#F6F3EC; font-family:var(--serif);
  font-size:.95rem; line-height:1.9; border-top:1px solid rgba(246,243,236,.35);
  border-bottom:1px solid rgba(246,243,236,.35); padding:12px 6px;
  opacity:0; animation:fade-rise 1.2s 1s ease forwards;
}
@keyframes fade-rise{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
.s0-actions{ margin-top:26px; display:flex; flex-direction:column; gap:12px; width:min(68%, 340px);
  opacity:0; animation:fade-rise 1.2s 1.3s ease forwards; }
.s0 .btn{ color:#F6F3EC; }
.s0 .btn.primary{ background:#C8321E; border:1.5px solid #FFD98A; color:#F6F3EC; font-family:var(--serif); box-shadow:0 4px 16px rgba(200,50,30,.45); }
.s0 .btn.howto-ghost{ background:transparent; border:1.5px solid #FFD98A; }
.s0-foot{ margin-top:22px; color:rgba(246,243,236,.7); font-size:.7rem; }
/* ============ S1 纵向征程（v5.4） ============ */
.s1{ position:absolute; inset:0; background:linear-gradient(180deg,#5a0d0b,#c8321e 45%,#e8863a 78%,#f3d9a8); }
.s1-bg-sky{ position:absolute; inset:0; overflow:hidden; }
.s1-bg-sky img{ width:100%; height:100%; object-fit:cover; animation:s1-breathe 14s ease-in-out infinite alternate; will-change:transform; }
@keyframes s1-breathe{ from{ transform:scale(1);} to{ transform:scale(1.05); } }
.s1-bg-mountains{
  position:absolute; left:0; right:0; bottom:0; height:46%; overflow:hidden;
  will-change:transform; pointer-events:none;
}
.s1-bg-mountains img{ position:absolute; left:0; bottom:0; height:100%; width:100%; object-fit:cover; object-position:center bottom; }
.s1-tex{ opacity:.35; } /* 纸纹降透明度让赤色透出 */
/* 纵向滚动容器（禁横向） */
.s1-scroll-y{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
/* 桌面：同一竖版，居中列 */
.s1-col{ max-width:560px; margin:0 auto; }
/* 顶部总览（sticky） */
.s1-head-sticky{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg, rgba(90,13,11,.88), rgba(90,13,11,.55));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding-bottom:8px;
}
.s1-topbar{
  display:flex; align-items:center; gap:10px; padding:calc(10px + var(--safe-t)) 104px 6px 16px;
}
.s1-topbar h1{ font-size:1.2rem; color:#F6F3EC; flex:1; text-shadow:0 1px 10px rgba(90,13,11,.5); }
.s1-km{ font-family:var(--serif); color:#FFD98A; font-size:1rem; white-space:nowrap; text-shadow:0 1px 8px rgba(90,13,11,.55); }
.segbar{ margin:2px 16px 0; height:10px; display:flex; border-radius:5px; overflow:hidden; border:1px solid rgba(246,243,236,.4); }
.segbar .seg{ height:100%; background:rgba(246,243,236,.22); position:relative; }
.segbar .seg.done{ background:#FFD98A; }
.segbar .seg.newlong{ background:#1F5A4C; box-shadow:inset 0 0 0 1.5px rgba(246,243,236,.5); }
/* 纵向征程 track */
.s1-track{ position:relative; margin:0 0 8px; }
.s1-ribbon{ position:absolute; inset:0; pointer-events:none; }
.s1-ribbon svg{ position:absolute; top:0; left:0; width:100%; height:100%; }
/* 节点行：印在带上，右侧站名+累计km */
.node-row{
  position:absolute; left:0; right:0; height:44px;
  display:flex; align-items:center; cursor:pointer;
  z-index:4; /* 未亮优先 */
}
.node-row.lit{ z-index:2; }
.node-row.next{ z-index:5; }
.node{
  width:44px; height:44px; flex:none;
  margin-left:calc(38% - 22px);   /* 印在飘带上（屏宽约38%处） */
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; padding:0; user-select:none;
}
.node .seal-visual{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:.86rem; border-radius:4px; transform:rotate(-4deg);
  color:rgba(246,243,236,.75); border:1.5px solid rgba(246,243,236,.55);
  box-shadow:inset 0 0 0 2px rgba(246,243,236,.12); background:rgba(70,10,7,.35);
  pointer-events:none; transition:all .3s ease;
}
.node-row.lit .seal-visual{
  background:var(--c-stamp); color:#F6F3EC;
  border-color:#FFD98A;                            /* 朱印金边 */
  box-shadow:inset 0 0 0 2px rgba(255,217,138,.4), 0 3px 14px rgba(200,50,30,.55);
  font-weight:700;
}
.node-row.next .seal-visual{ animation:node-pulse 2s ease-in-out infinite; }
@keyframes node-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,217,138,.4), inset 0 0 0 2px rgba(255,233,176,.2);} 50%{ box-shadow:0 0 0 10px rgba(255,217,138,0), inset 0 0 0 2px rgba(255,233,176,.5);} }
.node-info{ margin-left:10px; line-height:1.25; min-width:0; }
.node-info .node-name{
  display:block; font-family:var(--serif); font-size:.95rem;
  color:rgba(246,243,236,.88); text-shadow:0 1px 6px rgba(90,13,11,.6);
}
.node-row.lit .node-name{ color:#FFD98A; font-weight:600; }
.node-info .node-km{
  display:block; font-size:.68rem; color:rgba(246,243,236,.68);
  text-shadow:0 1px 6px rgba(90,13,11,.6);
}
/* 时代走廊（末段间隙，滚动触发一次） */
.s1-era{ position:absolute; left:10%; right:6%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.s1-era .era-art{ position:relative; width:100%; max-width:420px; height:150px; }
.s1-era .era-mountains, .s1-era .era-skyline{
  position:absolute; inset:0; width:100%; height:100%; transition:opacity 1.6s ease;
}
.s1-era .era-mountains{ opacity:1; }
.s1-era .era-skyline{ opacity:0; }
.s1-era.era-on .era-mountains{ opacity:0; }
.s1-era.era-on .era-skyline{ opacity:1; }
.s1-era .era-copy{
  font-family:var(--serif); font-size:.88rem; line-height:1.9; text-align:center;
  color:#F6F3EC; max-width:20em; padding:10px 14px;
  background:rgba(90,13,11,.4); border-radius:10px;
  opacity:0; transform:translateY(12px); transition:opacity 1.2s ease .4s, transform 1.2s ease .4s;
  text-shadow:0 1px 8px rgba(90,13,11,.6);
}
.s1-era.era-on .era-copy{ opacity:1; transform:none; }
/* 底部抽屉详情卡（可下滑关闭） */
.s1-drawer-mask{ position:fixed; inset:0; z-index:655; background:rgba(24,28,26,.45); animation:fade-in .2s ease; }
.s1-drawer{
  position:fixed; left:0; right:0; bottom:0; z-index:660;
  background:var(--c-paper); background-image:var(--paper-tex);
  border-radius:16px 16px 0 0; padding:10px 18px calc(16px + var(--safe-b));
  max-height:64vh; overflow-y:auto;
  transform:translateY(105%); transition:transform .3s ease;
  box-shadow:0 -8px 30px rgba(0,0,0,.3);
}
.s1-drawer.open{ transform:none; }
.s1-drawer .dw-grip{ width:44px; height:5px; border-radius:3px; background:var(--c-line); margin:0 auto 10px; }
.s1-drawer .dw-close{ position:absolute; top:8px; right:8px; width:44px; height:44px; color:var(--c-ink-soft); }
.s1-drawer .dw-thumb{ width:100%; height:150px; object-fit:cover; border-radius:10px; background:#CBCBC4; }
.s1-drawer .dw-thumb-ph{
  width:100%; height:150px; border-radius:10px; background:linear-gradient(135deg,#D8D2C2,#C9C2B2);
  display:flex; align-items:center; justify-content:center; color:var(--c-ink-soft);
  font-family:var(--serif); letter-spacing:.2em;
}
.s1-drawer h3{ color:var(--c-main-deep); margin-top:10px; font-size:1.1rem; }
.s1-drawer .d-site{ color:var(--c-ink-soft); font-size:.8rem; margin-top:2px; }
.s1-drawer .d-sub{ font-size:.86rem; line-height:1.7; margin-top:8px; color:var(--c-ink); }
.s1-drawer .d-note{
  margin-top:8px; font-size:.8rem; line-height:1.6; color:var(--c-main-deep);
  background:rgba(46,125,107,.08); border-left:3px solid var(--c-main); padding:6px 8px; border-radius:0 6px 6px 0;
}
.s1-drawer .d-km{ color:var(--c-stamp); font-family:var(--serif); font-size:.85rem; margin-top:8px; }
.s1-drawer .dw-actions{ display:flex; gap:10px; margin-top:12px; }
.s1-drawer .dw-actions .btn{ flex:1; min-height:44px; }
.s1 .page-footer{ position:relative; z-index:5; padding-bottom:calc(70px + var(--safe-b)); }
.s1-footer{ color:rgba(246,243,236,.75); }
.s1-footer .src-link{ color:#FFD98A; }

/* ============ S2 三幕 ============ */
.s2{ position:absolute; inset:0; overflow:hidden; background:#101B17; color:#F6F3EC; }
.s2-scene{ position:absolute; inset:0; }
.s2-scene img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  will-change:transform;
}
.s2-scene img.kb-anim{ animation:kenburns 12s ease-in-out infinite alternate; }
@keyframes kenburns{ from{ transform:scale(1);} to{ transform:scale(1.08);} }
.s2-scene::before{ /* 纸纹叠层 */
  content:""; position:absolute; inset:0; background-image:var(--paper-tex); z-index:2; pointer-events:none;
}
.s2-scene::after{ /* 夜幕压暗 */
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(10,16,14,.42) 0%,rgba(10,16,14,.18) 40%,rgba(10,16,14,.62) 100%);
}
.fx-canvas{ position:absolute; inset:0; z-index:3; pointer-events:none; }
/* 站景轮播 reel（v5.5）：双 img 层 GPU 合成交替 */
.reel-img{ opacity:0; transition:opacity 1.2s ease; will-change:opacity,transform; transform:translateZ(0); }
.reel-img.reel-front{ opacity:1; }
.reel-kb-a{ animation:reelKbA 3.5s linear forwards; transform-origin:center; }
.reel-kb-b{ animation:reelKbB 3.5s linear forwards; transform-origin:center; }
@keyframes reelKbA{ from{ transform:scale(1.03);} to{ transform:scale(1.09);} }
@keyframes reelKbB{ from{ transform:scale(1.09);} to{ transform:scale(1.03);} }
/* v5.8 亮度 veil：crossfade 同步黑纱 0→.10→0 */
.reel-veil{ position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; z-index:2; }
.reel-veil.reel-veil-anim{ animation:reelVeil 1.2s ease forwards; }
@keyframes reelVeil{ 0%{ opacity:0; } 50%{ opacity:.10; } 100%{ opacity:0; } }
/* 篝火光晕（仅S2） */
.fire-glow{
  position:absolute; z-index:2; left:50%; bottom:-8%; width:130vw; height:52vh; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%, rgba(232,134,58,.5) 0%, rgba(232,134,58,.18) 42%, transparent 72%);
  animation:fire-flicker 2.8s ease-in-out infinite; pointer-events:none; mix-blend-mode:screen;
}
@keyframes fire-flicker{ 0%,100%{ opacity:.75; } 32%{ opacity:1; } 64%{ opacity:.6; } }

.s2-head{
  position:absolute; top:calc(10px + var(--safe-t)); left:12px; right:12px; z-index:10;
  display:flex; align-items:center; gap:10px;
}
.s2-head .back{ width:44px; height:44px; color:#F6F3EC; display:flex; align-items:center; justify-content:center; }
.s2-title{ font-family:var(--serif); font-size:1.15rem; letter-spacing:.1em; text-shadow:0 1px 8px rgba(0,0,0,.5); flex:1; }
.s2-skip{
  font-size:.8rem; color:rgba(246,243,236,.9); border:1px solid rgba(246,243,236,.45);
  border-radius:18px; padding:6px 14px; background:rgba(16,27,23,.35); min-height:44px;
}
/* 幕a 字幕 */
.sub-card{
  position:absolute; left:50%; bottom:calc(96px + var(--safe-b)); transform:translateX(-50%);
  width:min(92vw,460px); z-index:10; background:rgba(16,27,23,.72); border:1px solid rgba(246,243,236,.25);
  border-radius:12px; padding:14px 16px; backdrop-filter:blur(3px); animation:card-up .4s ease;
}
.sub-card p{ font-family:var(--serif); line-height:1.85; font-size:.98rem; }
.sub-actions{ display:flex; gap:10px; margin-top:10px; }
.sub-actions .btn{ border-color:rgba(246,243,236,.4); color:#F6F3EC; font-size:.85rem; min-height:44px; flex:1; background:rgba(246,243,236,.08); }
.tap-hint{ position:absolute; bottom:calc(56px + var(--safe-b)); left:50%; transform:translateX(-50%); z-index:10; color:rgba(246,243,236,.75); animation:pulse-hint 1.6s ease-in-out infinite; }
@keyframes pulse-hint{ 0%,100%{ transform:translate(-50%,0); opacity:.5;} 50%{ transform:translate(-50%,-6px); opacity:1;} }
/* 幕b 夜话 */
.talk-layer{ position:absolute; inset:0; z-index:8; display:flex; flex-direction:column; justify-content:flex-end; }
.dialog-box{
  margin:0 14px 10px; background:rgba(16,27,23,.82); border:1px solid rgba(246,243,236,.28);
  border-radius:12px; padding:14px 16px; min-height:120px; max-height:34svh; max-height:34vh; overflow:auto;
  user-select:none; -webkit-user-select:none;
}
.dialog-box .dlg-name{ color:var(--c-ember); font-family:var(--serif); font-size:.85rem; margin-bottom:6px; letter-spacing:.1em; }
.dialog-box .dlg-text{ font-family:var(--serif); font-size:1rem; line-height:1.9; }
.dialog-box .dlg-text .caret{ display:inline-block; width:2px; height:1em; background:var(--c-ember); margin-left:2px; vertical-align:-2px; animation:caret-blink .8s steps(1) infinite; }
@keyframes caret-blink{ 50%{ opacity:0; } }
/* 回声卡 */
.echo-card{
  margin:0 14px 10px; background:rgba(46,125,107,.28); border:1px solid rgba(246,243,236,.3);
  border-radius:12px; padding:12px 16px; animation:card-up .35s ease; user-select:none;
}
.echo-card .echo-tag{ font-size:.72rem; color:var(--c-ember); font-family:var(--serif); letter-spacing:.2em; }
.echo-card p{ margin-top:4px; font-size:.9rem; line-height:1.7; }
.motto-chip{
  margin:0 14px 10px; align-self:center; font-family:var(--serif); color:#F6F3EC;
  background:rgba(200,50,30,.32); border:1px dashed rgba(200,50,30,.85); padding:7px 14px;
  border-radius:16px; font-size:.88rem; animation:card-up .4s ease; text-align:center; user-select:none;
}
/* 像框立绘（老班长） */
.portrait-slot{
  position:absolute; bottom:calc(84px + var(--safe-b)); right:14px; z-index:9;
  width:46%; max-width:190px; aspect-ratio:349/448; pointer-events:auto; /* 立绘原始比例，避免裁头 */
}
.portrait-frame{
  position:relative; width:100%; height:100%; border-radius:6px; overflow:hidden;
  background:#0B120F; border:3px solid rgba(246,243,236,.85);
  box-shadow:0 8px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.4);
  transform:perspective(700px) rotateY(-3deg); transform-origin:bottom center;
}
.portrait-frame img{ width:100%; height:100%; object-fit:cover; transition:filter .5s ease; }
.portrait-frame .p-name{
  position:absolute; left:0; right:0; bottom:0; padding:4px 0 5px; text-align:center;
  background:rgba(11,18,15,.72); color:#F6F3EC; font-family:var(--serif); font-size:.72rem; letter-spacing:.3em;
}
/* 情绪滤镜 */
.pf-smile img{ filter:none; }
.pf-solemn img{ filter:brightness(.85) saturate(.85); }
.pf-tear img{ filter:saturate(.7) brightness(.88) hue-rotate(8deg) contrast(1.02); }
.pf-tear::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(24,42,52,.55) 100%);
}
.pf-salute img{ filter:sepia(.22) brightness(1.04) saturate(1.05); animation:salute-push 6s ease-in-out infinite alternate; }
@keyframes salute-push{ from{ transform:scale(1);} to{ transform:scale(1.09);} }
.pf-salute::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(232,134,58,.22), transparent 55%);
}
.pf-shake img{ filter:brightness(.85) saturate(.85); }
.pf-shake{ animation:pf-shake .5s ease; }
@keyframes pf-shake{ 0%,100%{ transform:perspective(700px) rotateY(-3deg) translateX(0);} 25%{ transform:perspective(700px) rotateY(-3deg) translateX(-5px);} 75%{ transform:perspective(700px) rotateY(-3deg) translateX(5px);} }
/* 幕末按钮组 */
.talk-actions{ display:flex; gap:10px; margin:0 14px 12px; z-index:10; }
.talk-actions .btn{ flex:1; min-height:44px; background:rgba(16,27,23,.6); border-color:rgba(246,243,236,.4); color:#F6F3EC; }
.talk-actions .btn.primary{ background:var(--c-main); border-color:transparent; }
/* 抉择选项 */
.choice-list{ display:flex; flex-direction:column; gap:10px; margin:0 14px 12px; z-index:10; }
.choice-list .btn{ justify-content:flex-start; text-align:left; background:rgba(16,27,23,.66); border-color:rgba(246,243,236,.45); color:#F6F3EC; min-height:44px; }
.choice-list .btn.picked-ok{ border-color:var(--c-main); background:rgba(46,125,107,.4); }
.choice-list .btn.picked-bad{ border-color:rgba(200,50,30,.8); background:rgba(200,50,30,.22); }
.choice-list .btn[disabled]{ opacity:.5; }
/* 幕c 考问 */
.quiz-card{
  position:absolute; left:50%; top:calc(64px + var(--safe-t)); transform:translateX(-50%);
  width:min(94vw,470px); max-height:calc(100% - 160px); overflow:auto; z-index:12;
  background:rgba(16,27,23,.88); border:1px solid rgba(246,243,236,.3); border-radius:14px; padding:16px;
  animation:card-up .35s ease; background-image:var(--paper-tex);
}
.quiz-card .q-intro{ color:var(--c-ember); font-family:var(--serif); letter-spacing:.12em; font-size:.9rem; }
.quiz-card .q-stem{ margin-top:8px; font-family:var(--serif); font-size:1.02rem; line-height:1.8; }
.q-opts{ display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.q-opts .btn{ justify-content:flex-start; text-align:left; background:rgba(246,243,236,.07); border-color:rgba(246,243,236,.4); color:#F6F3EC; min-height:44px; }
.q-opts .btn.correct{ border-color:var(--c-main); background:rgba(46,125,107,.45); }
.q-opts .btn.wrong{ border-color:rgba(200,50,30,.85); background:rgba(200,50,30,.25); }
.q-opts .btn[disabled]{ opacity:.55; }
.q-expl{ margin-top:12px; font-size:.85rem; line-height:1.7; color:rgba(246,243,236,.85); border-top:1px dashed rgba(246,243,236,.3); padding-top:10px; }
.q-wrong-line{ margin-top:10px; color:var(--c-ember); font-family:var(--serif); }
/* 追问对话浮层 */
.ask-layer{ position:absolute; inset:0; z-index:20; background:rgba(10,16,14,.78); display:flex; flex-direction:column; animation:fade-in .2s ease; }
.ask-head{ display:flex; align-items:center; gap:10px; padding:calc(10px + var(--safe-t)) 12px 6px; }
.ask-head h3{ flex:1; color:#F6F3EC; font-size:1.05rem; }
.ask-log{ flex:1; overflow:auto; padding:10px 14px; display:flex; flex-direction:column; gap:10px; }
.ask-bubble{ max-width:86%; padding:10px 13px; border-radius:12px; font-size:.92rem; line-height:1.7; }
.ask-bubble.user{ align-self:flex-end; background:var(--c-main); color:#fff; border-bottom-right-radius:3px; }
.ask-bubble.ai{ align-self:flex-start; background:rgba(246,243,236,.94); color:var(--c-ink); border-bottom-left-radius:3px; background-image:var(--paper-tex); }
.ask-bubble .src-tag{ display:block; margin-top:6px; font-size:.68rem; color:var(--c-ink-soft); }
.ask-bubble.ai .src-tag{ color:var(--c-main-deep); }
.ask-input-row{ display:flex; gap:8px; padding:10px 12px calc(12px + var(--safe-b)); }
.ask-input-row input{
  flex:1; min-height:44px; border-radius:10px; border:1px solid rgba(246,243,236,.4);
  background:rgba(246,243,236,.1); color:#F6F3EC; padding:0 12px;
}
.ask-input-row input::placeholder{ color:rgba(246,243,236,.5); }
.ask-input-row .btn{ min-width:56px; }

/* ============ S3 伴学 ============ */
.s3{ position:absolute; inset:0; display:flex; flex-direction:column; background:var(--c-paper); }
.s3-top{
  display:flex; align-items:center; gap:8px; padding:calc(10px + var(--safe-t)) 14px 6px; flex-wrap:wrap;
}
.s3-top h1{ font-size:1.2rem; color:var(--c-main-deep); flex:1; }
.s3-offline{
  margin:0 14px; background:rgba(200,50,30,.08); border:1px solid rgba(200,50,30,.35); color:var(--c-stamp);
  font-size:.78rem; padding:7px 12px; border-radius:8px; display:none;
}
.s3-offline.show{ display:block; }
.s3-privacy{ margin:6px 14px 0; font-size:.72rem; color:var(--c-ink-soft); line-height:1.5; }
.s3-persona{ display:flex; gap:8px; margin:8px 14px 0; }
.s3-persona .btn{ flex:1; min-height:44px; font-size:.9rem; }
.s3-persona .btn.active{ background:var(--c-main); color:#fff; }
.s3-bubbles{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 14px 0; }
.s3-bubbles .btn{ font-size:.85rem; min-height:44px; border-radius:20px; border-color:var(--c-main); color:var(--c-main-deep); background:rgba(46,125,107,.07); }
.s3-chat{ flex:1; overflow:auto; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.s3-chat .ask-bubble.user{ background:var(--c-main); color:#fff; border-bottom-right-radius:3px; align-self:flex-end; max-width:86%; padding:10px 13px; border-radius:12px; font-size:.92rem; line-height:1.7; }
.s3-chat .ask-bubble.ai{ background:var(--c-paper-dark); color:var(--c-ink); border-bottom-left-radius:3px; align-self:flex-start; max-width:90%; padding:10px 13px; border-radius:12px; font-size:.92rem; line-height:1.7; background-image:var(--paper-tex); border:1px solid var(--c-line); }
.s3-chat .typing{ color:var(--c-ink-soft); font-style:italic; font-size:.85rem; align-self:flex-start; }
.s3-input-row{ display:flex; gap:8px; padding:10px 14px calc(70px + var(--safe-b)); background:var(--c-paper); border-top:1px solid var(--c-line); }
.s3-input-row input{ flex:1; min-height:44px; border-radius:10px; border:1px solid var(--c-line); background:#fff; padding:0 12px; }
.s3-daily{
  margin:10px 14px 0; border:1px solid var(--c-line); border-radius:12px; overflow:hidden; flex:none;
}
.s3-daily .daily-head{
  display:flex; align-items:center; padding:10px 14px; background:rgba(46,125,107,.08); cursor:pointer; min-height:44px;
}
.s3-daily .daily-head h2{ font-size:1rem; color:var(--c-main-deep); flex:1; font-family:var(--serif); }
.s3-daily .daily-head .chev{ transition:transform .2s; color:var(--c-ink-soft); }
.s3-daily.open .daily-head .chev{ transform:rotate(180deg); }
.s3-daily .daily-body{ padding:12px 14px; display:none; }
.s3-daily.open .daily-body{ display:block; }
.daily-best{ font-family:var(--serif); color:var(--c-stamp); font-size:.9rem; }
.daily-progress{ font-size:.8rem; color:var(--c-ink-soft); margin-top:4px; }

/* ============ S4 校园·终幕 ============ */
.s4{ position:absolute; inset:0; display:flex; flex-direction:column; background:var(--c-paper); }
.s4-content{ position:absolute; inset:0; display:flex; flex-direction:column; visibility:hidden; }
.s4-content.wall-in{ visibility:visible; animation:wall-slide .6s ease both; }
@keyframes wall-slide{ from{ opacity:0; transform:translateY(46px);} to{ opacity:1; transform:none;} }
.s4-top{ padding:calc(10px + var(--safe-t)) 16px 4px; display:flex; align-items:center; gap:10px; }
.s4-top h1{ font-size:1.25rem; color:var(--c-main-deep); flex:1; }
.s4-scroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:calc(70px + var(--safe-b)); }
/* 终幕覆盖层 */
.finale{ position:absolute; inset:0; z-index:20; overflow:hidden; background:#14231F; transition:opacity .5s ease; }
.finale.fin-out{ opacity:0; pointer-events:none; }
.fin-reel{ position:absolute; inset:0; transition:opacity .6s ease; }
.fin-reel.fin-fade{ opacity:0; }
.fin-reel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; will-change:transform,opacity; }
.fin-reel img.fin-a{ opacity:1; animation:finA 6s linear forwards; transform-origin:center; }
.fin-reel img.fin-a-still{ opacity:1; } /* decode gate 等待期 xy2 静置（无 KB） */
.fin-reel img.fin-b{ animation:finB 6s linear forwards; transform-origin:center; }
@keyframes finA{
  0%{ opacity:1; transform:scale(1.06); }
  50%{ opacity:1; transform:scale(1.02); }
  70%{ opacity:0; transform:scale(1.0); }
  100%{ opacity:0; transform:scale(1.0); }
}
@keyframes finB{
  0%{ opacity:0; transform:scale(1.12); }
  50%{ opacity:0; transform:scale(1.06); }
  70%{ opacity:1; transform:scale(1.02); }
  100%{ opacity:1; transform:scale(1.0); }
}
.fin-copy{
  position:absolute; inset:0; z-index:4; background:#F6F3EC;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  padding:30px; opacity:0; transition:opacity .6s ease; background-image:var(--paper-tex);
}
.fin-copy.show{ opacity:1; }
.fin-copy.out{ opacity:0; transition:opacity .8s ease; }
.fin-copy .fc-line{
  font-family:var(--serif); color:#1B1915; font-size:1.28rem; line-height:2;
  letter-spacing:.06em; text-align:center; max-width:17em;
  opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease;
}
.fin-copy .fc-line.on{ opacity:1; transform:none; }
.fin-skip{
  position:absolute; top:calc(8px + var(--safe-t)); right:8px; z-index:650;
  display:flex; gap:8px;
}
.fin-skip-btn{
  min-height:44px; padding:0 16px; border-radius:20px; font-size:.88rem;
  background:rgba(16,27,23,.5); border:1px solid rgba(246,243,236,.45); color:#F6F3EC;
  font-family:var(--serif); letter-spacing:.08em;
}
.fin-skip-btn.gold{ border-color:var(--c-ember); color:var(--c-ember); }
.s4-landmarks{ display:flex; flex-direction:column; gap:12px; padding:10px 14px 0; }
.land-card{ border:1px solid var(--c-line); border-radius:12px; overflow:hidden; background:var(--c-paper-dark); }
.land-card .lm-img{ aspect-ratio:16/9; width:100%; object-fit:cover; background:#CBCBC4; }
.land-card .lm-ph{ aspect-ratio:16/9; width:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#D8D2C2,#C9C2B2); color:var(--c-ink-soft); font-family:var(--serif); font-size:1rem; letter-spacing:.2em; }
.land-card .lm-cap{ padding:8px 12px 10px; font-size:.85rem; color:var(--c-ink-soft); line-height:1.55; }
.land-card .lm-cap b{ color:var(--c-main-deep); font-family:var(--serif); font-size:.95rem; display:block; margin-bottom:2px; }
/* 承诺墙 */
.wall{
  margin:16px 14px 0; border:1px solid var(--c-line); border-radius:14px; background-image:var(--paper-tex);
  background-color:var(--c-paper); padding:16px 14px;
}
.wall h2{ font-family:var(--serif); color:var(--c-stamp); font-size:1.15rem; letter-spacing:.12em; display:flex; align-items:center; gap:8px; }
.wall h2::before{ content:""; width:10px; height:10px; background:var(--c-stamp); border-radius:2px; transform:rotate(45deg); }
.wall .wall-honest{ font-size:.72rem; color:var(--c-ink-soft); margin-top:8px; line-height:1.5; }
.wall-input-row{ display:flex; gap:8px; margin-top:12px; }
.wall-input-row input{
  flex:1; min-height:44px; border-radius:10px; border:1px solid var(--c-line); background:#fff; padding:0 12px;
}
.wall-seal-row{ display:flex; gap:14px; margin-top:14px; align-items:center; }
.wall-seal-row canvas{ border-radius:6px; flex:none; }
.wall-pledge{ flex:1; font-family:var(--serif); color:var(--c-main-deep); font-size:.95rem; line-height:1.7; }
.wall-list{ margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.wall-item{ display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--c-ink); padding:6px 8px; border-bottom:1px dashed var(--c-line); }
.wall-item .wi-seal{ width:30px; height:30px; flex:none; }
.wall-item .wi-date{ margin-left:auto; color:var(--c-ink-soft); font-size:.7rem; }
.wall-empty{ color:var(--c-ink-soft); font-size:.8rem; text-align:center; padding:10px 0; }
.s4-sub{ margin:14px 14px 0; display:flex; }
.s4-sub .btn{ flex:1; }

/* ============ S5 证书 ============ */
.s5{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; overflow:auto; background:var(--c-main-deep); padding:calc(12px + var(--safe-t)) 12px calc(20px + var(--safe-b)); }
.cert-stage{ position:relative; width:min(94vw,560px); flex:none; }
.cert-page{ position:relative; width:100%; }
.cert-page img{ width:100%; height:auto; box-shadow:0 14px 44px rgba(0,0,0,.45); border-radius:4px; }
.cert-flip{ perspective:1200px; }
.cert-flip .cert-page{ transition:transform .5s ease; transform-style:preserve-3d; }
.cert-share{ color:rgba(246,243,236,.85); font-family:var(--serif); font-size:.9rem; margin:14px 0 4px; text-align:center; letter-spacing:.05em; }
.cert-hint{ color:rgba(246,243,236,.6); font-size:.78rem; margin-bottom:6px; text-align:center; }
.s5-actions{ display:flex; gap:10px; margin-top:12px; width:min(94vw,420px); }
.s5-actions .btn{ flex:1; min-height:44px; background:rgba(246,243,236,.1); border-color:rgba(246,243,236,.45); color:#F6F3EC; }

/* ============ 遮罩：横屏/微信 ============ */
.gate-mask{
  position:fixed; inset:0; z-index:1000; background:#14231F; color:#F6F3EC;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  text-align:center; padding:30px;
}
.gate-mask .g-icon{ width:64px; height:64px; opacity:.9; }
.gate-mask p{ font-family:var(--serif); font-size:1.05rem; line-height:1.8; max-width:18em; }
.gate-mask .btn{ border-color:rgba(246,243,236,.5); color:#F6F3EC; }

/* ============ 行囊 ============ */
.bag-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px; }
.bag-cell{ display:flex; gap:10px; align-items:center; border:1px solid var(--c-line); border-radius:10px; padding:10px; }
.bag-cell.got{ border-color:var(--c-main); background:rgba(46,125,107,.07); }
.bag-cell svg{ width:34px; height:34px; flex:none; }
.bag-cell .bk-name{ font-size:.85rem; font-family:var(--serif); }
.bag-cell .bk-give{ font-size:.72rem; color:var(--c-ink-soft); line-height:1.4; margin-top:2px; }
.bag-cell.locked{ opacity:.45; }
/* 信物入囊动效 */
.fly-keep{ position:fixed; z-index:950; width:44px; height:44px; pointer-events:none; transition:all .9s cubic-bezier(.4,0,.3,1); }

/* ============ 设置/来源页 ============ */
.sheet-mask{ position:fixed; inset:0; z-index:850; background:rgba(24,28,26,.55); animation:fade-in .2s ease; }
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:860; max-height:86svh; max-height:86vh; overflow:auto;
  background:var(--c-paper); border-radius:16px 16px 0 0; padding:18px 18px calc(20px + var(--safe-b));
  background-image:var(--paper-tex); animation:sheet-up .28s ease;
}
@keyframes sheet-up{ from{ transform:translateY(60px); opacity:0;} to{ transform:none; opacity:1;} }
.sheet h2{ color:var(--c-main-deep); font-size:1.15rem; margin-bottom:10px; display:flex; align-items:center; }
.sheet h2 .sp{ flex:1; }
.set-row{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px dashed var(--c-line); min-height:44px; }
.set-row label{ flex:1; font-size:.95rem; }
.seg-ctl{ display:flex; border:1px solid var(--c-line); border-radius:8px; overflow:hidden; }
.seg-ctl button{ padding:6px 14px; min-height:44px; font-size:.9rem; color:var(--c-ink-soft); }
.seg-ctl button.active{ background:var(--c-main); color:#fff; }
.switch{ position:relative; width:52px; height:32px; border-radius:16px; background:var(--c-line); transition:background .2s; flex:none; }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:#fff; transition:left .2s; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.switch.on{ background:var(--c-main); }
.switch.on::after{ left:23px; }
.priv-sec{ margin:14px 0; }
.priv-sec h3{ font-size:.95rem; color:var(--c-main-deep); margin-bottom:6px; }
.priv-sec p, .priv-sec li{ font-size:.85rem; line-height:1.75; color:var(--c-ink-soft); }
.priv-sec ul{ padding-left:1.2em; }
.asset-table{ width:100%; border-collapse:collapse; font-size:.78rem; }
.asset-table td, .asset-table th{ border:1px solid var(--c-line); padding:5px 7px; text-align:left; line-height:1.4; }
.asset-table th{ background:rgba(46,125,107,.08); color:var(--c-main-deep); }

/* ============ debug 浮层 ============ */
.debug-panel{
  position:fixed; top:calc(6px + var(--safe-t)); left:6px; z-index:1100; max-width:60vw;
  background:rgba(10,14,12,.85); color:#9FE3C8; font-family:Consolas,monospace; font-size:11px;
  padding:8px 10px; border-radius:8px; white-space:pre-wrap; pointer-events:auto; line-height:1.5;
}