/* ================= 练嘴巴（#/mouth）落地宣传页样式 =================
   单独一份文件（与 ear.css 同理），避免与并行会话共同维护的 style.css 相互覆盖。
   引入：index.html 的 <link href="assets/css/mouth.css?v=N">
   横幅（.ear-hero / .eh-*）直接复用 ear.css 的类，保证与磨耳朵尺寸、位置完全一致。 */

/* 横幅：练嘴巴插画比磨耳朵偏方（约 1.87:1），宽度略收，让整条 hero 高度贴近磨耳朵。
   图片宽度保持不变 —— 只替换插画本身（暖色水彩「你一句，我一句」）。 */
.mh-hero .eh-img{flex:0 1 44%;max-width:460px}
/* hero 底色随新插画一起转暖（米调），与左图水彩的奶油底色衔接自然；仅作用于练嘴巴 */
.mh-hero{background:linear-gradient(120deg,#fffdf7,#f6ecdb)}
/* 原有标语「大胆开口，才能全面提升」改用真实文字承标题层级（原先烙在旧横幅图上） */
.mh-h1{margin:0;font-size:26px;line-height:1.28;font-weight:900;color:var(--ink);
  letter-spacing:.5px}
.mh-h1::after{content:"";display:block;width:44px;height:4px;border-radius:3px;margin-top:9px;
  background:linear-gradient(90deg,#2f6bff,#7c4dff)}
.mh-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.mh-go{display:inline-flex;align-items:center;gap:6px;padding:11px 22px;border-radius:12px;
  background:linear-gradient(135deg,#2f6bff,#7c4dff);color:#fff;text-decoration:none;
  font-size:15px;font-weight:800;letter-spacing:.5px;box-shadow:0 8px 20px rgba(47,107,255,.28);
  transition:transform .16s ease,box-shadow .16s ease}
.mh-go i{font-style:normal;transition:transform .16s ease}
.mh-go:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(47,107,255,.34)}
.mh-go:hover i{transform:translateX(3px)}
.mh-note{font-size:12.5px;color:var(--ink2)}

/* 场景目录 */
.mh-sec{margin-top:22px}
.mh-sec-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 4px 12px}
.mh-sec-h h2{margin:0;font-size:18px;color:var(--ink)}
.mh-sec-h span{font-size:13px;color:var(--ink2)}
.mh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;padding-bottom:96px}
.mh-chap{display:flex;flex-direction:column;gap:5px;padding:12px 14px;border-radius:12px;text-decoration:none;
  background:var(--panel);border:1px solid var(--line);color:inherit;min-width:0;
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.mh-chap:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow)}
.mh-chap-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mh-chap-no{font-size:12px;font-weight:800;color:var(--cta);letter-spacing:.5px}
.mh-chap-p{font-size:11.5px;color:var(--ink2);flex:0 0 auto}
.mh-chap-t{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.45}
.mh-chap-s{font-size:12px;color:var(--ink2);line-height:1.5;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

@media(max-width:900px){
  /* 移动端：横幅回落单栏（ear.css 已处理 .ear-hero/.eh-img），场景卡单列更易点 */
  .mh-grid{grid-template-columns:1fr;gap:10px}
  .mh-h1{font-size:21px}
  .mh-cta{gap:10px}
  .mh-go{flex:1 1 100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .mh-go,.mh-chap{transition:none}
}

/* ================= 练嘴巴 · 底部常驻播放控制条（.mt-player） =================
   与磨耳朵 #/ear 底部播放条同款视觉语言；控制「本页句子逐句朗读」。
   左：页码 / 当前句 / 第 k/M 句；中：⏮ ▶ ⏭ ⏹；右：循环 · 音色 · 语速 · 每句。
   常驻显示，避免右侧面板控件随页面滚动消失。 */
/* 宽度对齐「上面的文本框架」：正文容器 main 为 max-width:1180px + 左右 padding:22px，
   故内容框宽 = min(1180px, 视口) − 44px，水平居中。
   播放条用同样的口径（width:calc(100% − 44px) 上限 1136px + margin:0 auto 居中），
   左/右边缘即可与 .pg-bar / .pr-body 正文框严格对齐（不再铺满整屏）。 */
.mt-player{position:fixed;left:0;right:0;bottom:0;margin:0 auto;width:calc(100% - 44px);max-width:1136px;
  z-index:40;display:flex;align-items:center;gap:16px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(20,30,60,.10);padding:9px 22px}
.mp-now{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.35;overflow:hidden}
.mpn-p{font-size:11px;color:var(--ink2)}
.mpn-t{font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpn-i{font-size:11px;color:var(--brand-d);font-weight:700}
.mp-ctrl{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.mp-b{border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 11px;font-size:14px;
  cursor:pointer;font-family:inherit;color:var(--ink2);font-weight:700;white-space:nowrap;line-height:1.2}
.mp-b:hover{border-color:var(--brand);color:var(--brand-d)}
.mp-b:disabled{opacity:.4;cursor:not-allowed}
.mp-b.mp-play{min-width:46px;font-size:15px;background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 4px 12px rgba(47,107,255,.28)}
.mp-b.mp-play:hover{background:var(--brand-d);color:#fff}
.mp-b.mp-play.on{background:var(--cta);border-color:var(--cta);box-shadow:0 4px 12px rgba(255,90,60,.30)}
.mp-b.mp-stop{color:#c0392b;border-color:#f0c8c0}
.mp-b.mp-stop:hover{background:#fff3f0;border-color:#e08e7c}
.mp-opts{flex:0 0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mp-opt{font-size:12.5px;color:var(--ink2);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer}
.mp-opt select{font-size:12.5px;padding:3px 6px;border:1px solid #cdd6e4;border-radius:6px;background:#fff;
  color:var(--ink);cursor:pointer;font-family:inherit}
/* 播放条常驻（fixed）。桌面下 .page-reader 原本 100vh，而它又被 topbar + #app 内边距
   整体顶下约 85px → 底部落到视口之外，右栏最后几行会被播放条盖住。
   这里把 reader 高度收到「视口高 − 85px」，并给底部留出播放条高度（76px），
   使 .pr-body 内的右栏内容整体落在播放条上方（全屏 body.pg-full 下由更高优先级的
   规则重置为 100vh，不受影响）。 */
.page-reader.mouth{height:calc(100vh - 85px);padding-bottom:76px}

@media(max-width:900px){
  .mt-player{flex-wrap:wrap;gap:8px;padding:8px 12px}
  .mp-now{flex:1 1 100%}
  .mpn-t{font-size:13px}
  .mp-ctrl{margin-right:auto}
  .mp-opts{flex:1 1 100%;gap:8px;justify-content:space-between}
  .page-reader.mouth{padding-bottom:132px}
}

/* ================= 练嘴巴阅读器 · 逐词拆解窄屏排版（≤560px） =================
   问题：点句展开的 .bk-inline 里，.bk-row 是固定 4 列网格「90px 70px 60px 1fr」
   （最小 ≈238px + 间距）；而 390px 视口下 .mt-body 实测仅 267px →
   释义列被压到十几像素，中文竖排堆叠「散架」（实测 grid 末列仅 26px）。
   修法：窄屏改为两行 —— 第一行「单词 · 音标 · 词性」（按内容自适应），
   释义独占第二行铺满，行高恢复正常。 */
@media(max-width:560px){
  .mt-line .bk-inline .bk-row{grid-template-columns:auto auto auto;gap:2px 8px}
  .mt-line .bk-inline .bk-m{grid-column:1/-1}
  .mt-line .bk-inline .bk-w{min-width:0;overflow-wrap:anywhere}
}