:root{
  --red:#e8554a; --red-d:#d1443b; --orange:#f7934a; --gold:#f6c445;
  --green:#5fa856; --green-d:#4c8d45; --blue:#3fb0c2; --cream:#fbf7f0;
  --ink:#453630; --ink-soft:#8d7b6c; --paper:#fff;
  --shadow:0 4px 20px rgba(69,54,48,.08);
  --shadow-md:0 10px 30px rgba(69,54,48,.12);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  background:#17120e; color:var(--ink); min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
/* 手机预览框：桌面端 9:16；移动端自动全屏 */
#phoneFrame{
  position:relative; width:390px; height:693px; background:var(--cream);
  border-radius:30px; overflow:hidden; box-shadow:0 26px 80px rgba(0,0,0,.55);
  transform:translateZ(0); display:flex; flex-direction:column;
}
@media (max-width:560px){ body{ background:var(--cream); } #phoneFrame{ width:100%!important; height:100%!important; border-radius:0; box-shadow:none } }

/* 顶部进度条（壳层常驻） */
#flowStepper{
  position:relative; flex:none; display:flex; align-items:center; gap:8px;
  padding:calc(8px + env(safe-area-inset-top)) 12px 10px;
  background:linear-gradient(180deg, rgba(60,47,40,.88), rgba(60,47,40,.5));
  color:#fff; z-index:30;
}
#flowStepper .fs-brand{ font-size:10.5px; font-weight:900; color:#ffe9a8; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.4); flex:none }
#flowStepper .fs-pos{ display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700 }
#flowStepper .fs-bar{ flex:1; height:6px; border-radius:999px; background:rgba(255,255,255,.22); overflow:hidden }
#flowStepper .fs-bar i{ display:block; height:100%; width:7%; background:linear-gradient(90deg,#f4c542,#e0453a); border-radius:999px; transition:width .35s var(--ease) }
#flowStepper .fs-name{ color:#ffe9a8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px }
#flowStepper .fs-navbtn{ flex:0 0 auto; margin-left:auto; width:30px; height:30px; border:2px solid var(--ink); border-radius:9px; background:var(--gold); font-size:14px; line-height:1; cursor:pointer; padding:0; box-shadow:0 2px 0 rgba(91,58,41,.55) }
#flowStepper .fs-navbtn:active{ transform:translateY(2px); box-shadow:none }

/* 内容 iframe：只换它，不刷新壳层（转场：方向性滑动） */
#content{ flex:1; width:100%; border:0; background:var(--cream); display:block; transition:transform .26s var(--ease), opacity .22s var(--ease); will-change:transform,opacity }

/* 轻量转场（淡入淡出，避免卡顿） */
#flowTR{ position:absolute; inset:0; z-index:200; pointer-events:none; opacity:0; background:rgba(251,247,240,.92); transition:opacity .18s ease }
#flowTR.on{ opacity:1 }

/* 名词解释（壳层常驻） */
#glossBtn{ position:absolute; right:16px; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:45; width:46px; height:46px; border-radius:50%; background:linear-gradient(180deg,#3aa6b9,#2e8ea0); border:3px solid var(--ink); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer }
#glossBtn:active{ transform:scale(.92) }
#glossModal{ position:absolute; inset:0; z-index:70; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(20,17,14,.72) }
#glossModal.show{ display:flex }
#glossModal .gbox{ width:100%; max-width:400px; max-height:88vh; overflow-y:auto; background:var(--paper); border:3px solid var(--ink); border-radius:22px; padding:18px 20px 20px; box-shadow:0 20px 50px rgba(0,0,0,.35) }
#glossModal .gtitle{ font-weight:900; font-size:17px; text-align:center }
#glossModal .gsub{ font-size:12px; color:var(--ink-soft); text-align:center; margin-top:3px }
#glossModal .gitem{ margin-top:10px; padding-top:9px; border-top:2px dashed rgba(91,58,41,.22) }
#glossModal .gterm{ font-weight:900; font-size:15px; color:var(--red) }
#glossModal .gdef{ font-size:12.5px; color:var(--ink); line-height:1.7; margin-top:3px }
#glossModal .gbtn{ display:block; width:100%; margin-top:0; padding:12px; border:2px solid var(--ink); border-radius:12px; background:var(--gold); font-size:14px; font-weight:900; color:#4a3a2c; cursor:pointer; text-align:center; box-sizing:border-box }
/* 底部操作条：内容再长也钉在弹窗底部，不会把按钮顶到屏幕外 */
#glossModal .gfoot{ position:sticky; bottom:-20px; margin:14px -20px -20px; padding:12px 20px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 30%); border-radius:0 0 19px 19px }
#glossModal .gfoot .gbtn + .gbtn{ margin-top:8px }
#glossModal .gbtn-call{ background:linear-gradient(135deg,#f0685d,#d1443b); color:#fff; text-decoration:none; letter-spacing:.5px; box-shadow:0 6px 16px rgba(209,68,59,.28) }
#glossModal .gbtn-ghost{ background:#fff; color:var(--ink) }
#glossModal .gbtn:active{ transform:translateY(2px) }

/* 音乐球（壳层常驻，控制 BGM） */
#soundball{ position:absolute; left:16px; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:45; width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--gold)); box-shadow:var(--shadow-md); display:flex; align-items:center; justify-content:center; font-size:21px; cursor:pointer; border:3px solid var(--ink) }
#soundball:active{ transform:scale(.9) }
#soundball.paused{ filter:grayscale(.9); opacity:.7 }
/* 想放但还没放（等用户手势授权）——脉动一下，明示「碰一下屏幕就有声」 */
#soundball.waiting{ animation:sbPulse 1.5s ease-in-out infinite }
@keyframes sbPulse{ 0%,100%{ box-shadow:0 6px 18px rgba(214,90,60,.28); transform:scale(1) }
                    50%{ box-shadow:0 6px 22px rgba(214,90,60,.6);  transform:scale(1.07) } }

/* 导航面板（壳层 🧭） */
#flowNav{ position:absolute; inset:0; z-index:120; display:none; align-items:center; justify-content:center; background:rgba(59,36,26,.55); padding:18px }
#flowNav.show{ display:flex }
#flowNav .fn-box{ width:100%; max-width:400px; max-height:82vh; overflow-y:auto; background:var(--paper); border:3px solid var(--ink); border-radius:22px; padding:18px 16px; box-shadow:0 20px 50px rgba(0,0,0,.35) }
#flowNav .fn-title{ font-weight:900; font-size:17px; text-align:center }
#flowNav .fn-sub{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:4px; line-height:1.6 }
#flowNav .fn-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px }
#flowNav .fn-item{ display:block; padding:9px 8px; border:2px solid var(--ink); border-radius:12px; background:#fff; font-size:12px; font-weight:800; color:var(--ink); text-decoration:none; text-align:center; line-height:1.35 }
#flowNav .fn-item b{ color:var(--red); margin-right:3px }
#flowNav .fn-item:active{ transform:translateY(2px) }
#flowNav .fn-item.on{ background:var(--gold); box-shadow:0 0 0 3px rgba(201,162,77,.35) }
#flowNav .fn-close{ display:block; width:100%; margin-top:14px; padding:10px; border:2px solid var(--ink); border-radius:12px; background:#fff; font-size:13.5px; font-weight:900; color:var(--ink); cursor:pointer }

/* 开场 splash（开馆迎宾页）：z-index 40，低于常驻 🔊/❓(z45)，盖住内容区与顶部进度条；
   不自动跳转 —— 必须用户点击才进入下一页（第一面 · 封面） */
@keyframes spIn{ to{ opacity:1; transform:none } }
@keyframes swing{ 0%,100%{ transform:rotate(-3.5deg) } 50%{ transform:rotate(3.5deg) } }
@keyframes steamUp{ 0%{ opacity:0; transform:translateY(7px) } 35%{ opacity:.9 } 100%{ opacity:0; transform:translateY(-13px) } }
@keyframes ctaPulse{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }

/* 壳层轻提示 */
#shellToast{ position:absolute; left:50%; bottom:calc(96px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(20px); z-index:130; background:rgba(50,40,34,.9); color:#fff; padding:11px 18px; border-radius:14px; font-size:13.5px; font-weight:700; opacity:0; transition:transform .3s var(--ease),opacity .3s ease; pointer-events:none; white-space:nowrap; max-width:90% }
#shellToast.show{ opacity:1; transform:translateX(-50%) translateY(0) }

    .sp-lead{margin-top:6px;font-size:11px;color:#8a4f2a;letter-spacing:1px;opacity:.9;text-align:center}
    .sp-tastes{display:flex;gap:7px;margin-top:12px;width:288px;max-width:92%}
    .sp-taste{flex:1;background:rgba(255,255,255,.5);border:1px solid rgba(164,85,47,.18);border-radius:12px;padding:8px 2px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:#5b3a2b;line-height:1.2}
    .sp-taste b{font-size:19px;line-height:1}
    .sp-note{margin-top:9px;font-size:10px;color:#a4663a;opacity:.85;text-align:center}