/* ============================================================
 * dazi-h5.css — H5 触屏适配层(打字页共用)
 * 分两层:
 *  A) 功能样式(宽度无关): 适配器激活(body.h5 / .h5-ime / .h5-input-wrap /
 *     .h5-kb-open / .h5-pconly)即生效。
 *     此前全部规则锁在 ≤768px 媒体查询内, 而适配器激活阈值是短边 ≤920 ——
 *     平板(短边769~920: iPad 810/820/834 等)激活后样式不生效, 注入的裸输入框
 *     挤占锁高布局把虚拟键盘裁半截。功能类样式必须在任何宽度下都有效。
 *  B) 手机布局重排(≤768px): 字号/统计横排/键盘缩放等压缩仅在手机屏生效,
 *     平板(>768)走各页面自身的 PC 响应式布局(完整内容)。
 * 配套 /assets/js/dazi-h5.js: body.h5 / .h5-kb-open /
 * .h5-ime / .h5-input-wrap 均由该脚本按环境添加。
 * ============================================================ */

/* ========== A. 功能样式(激活即生效, 宽度无关) ========== */

/* ---------- 输入热区(适配器注入, 英文类打字页) ----------
 * >768 平板/横屏: 悬浮底栏, 不占页面布局流(虚拟键盘完整显示);
 * ≤768 手机: 由 B 层媒体查询覆盖回流式(与原手机布局一致) */
.h5-input-wrap {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
}
.h5-input-wrap input {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  outline: none;
  border: 1.5px solid color-mix(in srgb, var(--neon-cyan, #6366f1) 28%, var(--border, #e9ecf3));
  background: rgba(255,255,255,.90);  background: color-mix(in srgb, var(--bg-light, #fff) 90%, transparent);
  color: var(--text-primary, #1e2233);
  font-size: 18px;      /* ≥16px: 防 iOS 聚焦自动放大 */
  line-height: 1;
  padding: 0 14px;
  letter-spacing: 1.5px;
  caret-color: var(--neon-cyan, #6366f1);
}
.h5-input-wrap input:focus {
  border-color: var(--neon-cyan, #6366f1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neon-cyan, #6366f1) 14%, transparent);
}
.h5-input-hint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 14.5px; font-weight: 600;
  color: #8a93a8;
  pointer-events: none;
}
.h5-input-wrap input:focus + .h5-input-hint,
.h5-input-wrap:focus-within .h5-input-hint { display: none; }

/* 悬浮底栏与页面底部提示让位(仅适配器激活时) */
body.h5 .hint-bar { margin-bottom: 70px; }

/* ---------- 软键盘弹起: 收掉提示噪音(平板同样需要, 系统键盘盖下半屏) ---------- */
body.h5-kb-open .hint-bar { display: none !important; }
body.h5-kb-open .start-guide { height: 0; margin-top: 0; opacity: 0; }
/* 指法图(键盘+手势)默认常显(2026-10-09 收起按钮已下线):
   需要隐藏走「打字设置」的 指法提示/键盘提示 开关(dz-hide-hands/dz-hide-keyboard, 见 dazi-typing-tools) */

/* ---------- 中文页 #imeCatch: 转正为输入条 ----------
 * >768 平板: 悬浮底栏; ≤768 手机: B 层覆盖回流式 */
#imeCatch.h5-ime {
  position: fixed !important;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  transform: none !important;
  display: block;
  width: auto !important;
  height: 48px !important;
  padding: 0 14px !important;
  opacity: 1 !important;
  z-index: 900 !important;
  border: 1.5px solid color-mix(in srgb, var(--neon-cyan, #6366f1) 28%, var(--border, #e9ecf3)) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.96);  background: color-mix(in srgb, var(--bg-light, #fff) 96%, transparent) !important;
  color: var(--text-primary, #1e2233) !important;
  font-size: 18px !important;
  letter-spacing: 2px !important;
  outline: none !important;
}
#imeCatch.h5-ime:focus {
  border-color: var(--neon-cyan, #6366f1) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neon-cyan, #6366f1) 14%, transparent);
}
#imeCatch.h5-ime::placeholder { color: #98a1b3; font-weight: 500; letter-spacing: 1px; }

/* 词卡类隐藏输入框: 原为 absolute+opacity:0, 转正为悬浮底部输入条(软键盘弹起由JS跟随) */
.qz-hidden-input.h5-ime {
  position: fixed !important;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  height: 48px;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 900;
  border: 1.5px solid #cfd6e4;
  border-radius: 14px;
  background: #fff;
  color: #1e2233;
  font-size: 18px;
  letter-spacing: 1.5px;
  padding: 0 14px;
  outline: none;
  box-shadow: 0 10px 30px -12px rgba(31,45,76,.4);
}
.qz-hidden-input.h5-ime:focus {
  border-color: var(--neon-cyan, #6366f1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neon-cyan, #6366f1) 14%, transparent);
}
.qz-hidden-input.h5-ime::placeholder { color: #98a1b3; font-weight: 500; letter-spacing: 1px; }

/* ---------- PC 专属模块手机/平板引导卡 ---------- */
.h5-pconly {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #f6f7fb, #eef0f7);
  padding: 24px;
}
.h5-pconly-card {
  max-width: 320px; width: 100%;
  background: #fff; border-radius: 20px;
  box-shadow: 0 24px 60px -20px rgba(31,45,76,.35);
  padding: 34px 26px 26px;
  text-align: center;
}
.h5-pconly-ico { font-size: 52px; line-height: 1; margin-bottom: 14px; }
.h5-pconly-card h3 { font-size: 19px; color: #1e2233; margin-bottom: 10px; }
.h5-pconly-card p { font-size: 14px; color: #5b6478; line-height: 1.7; margin-bottom: 6px; }
.h5-pconly-tip { margin-top: 16px !important; color: #98a1b3 !important; }
.h5-pconly-btn {
  display: block; margin-top: 8px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff !important; text-decoration: none !important;
  border-radius: 14px; padding: 13px 0;
  font-size: 16px; font-weight: 700;
}
.h5-pconly-link {
  display: block; margin-top: 12px;
  color: #8a93a8; font-size: 13px; text-decoration: none !important;
}


/* ===== 触屏设备性能(iPad等): 去掉毛玻璃模糊 =====
   backdrop-filter 在内容每键重绘时触发昂贵的重复合成, 是触屏设备打字卡顿来源之一;
   底色本就近乎不透明, 视觉差异极小 */
@media (pointer: coarse) {
  .ts-head, .dnl { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ========== B. 手机布局重排(仅 ≤768px; 平板走页面自身 PC 响应式) ========== */

/* H5 打字内容基准字号(弹性兜底档, 2026-10-11 方案B+): 随屏幕宽/高连续变化(竖屏看宽、
   横屏矮屏看高), 非固定值。A 层格子尺寸全部挂此变量; fit 引擎正常时由 C 层
   var(--dz-fit-fs)(内容感知 22~28px) 接管, 引擎缺位(JS 未执行/异常)时回落本档 ——
   不再出现旧的 40px 大字把行顶出屏外的"内容区空白"态 */
@media (max-width: 768px) {
  :root { --dz-h5-fs: clamp(20px, 4.6vw + 1.1vh, 28px); }
}

/* 仅触摸设备额外收紧(桌面窄窗口只享受宽度自适应, 不进手机模式) */
@media (max-width: 768px) {

  /* ---------- 环境: 视口高度/滚动/选中 ---------- */
  html { -webkit-text-size-adjust: 100%; }
  html, body { overscroll-behavior: none; }
  body {
    height: 100vh; /* 老浏览器(iOS<15.4)回退行 */
    height: 100dvh; /* 手机浏览器工具栏动态高度 */
    -webkit-user-select: none; user-select: none;
    touch-action: manipulation; /* 禁双击缩放, 保留双指 */
  }
  input { -webkit-user-select: text; user-select: text; }

  /* 手机: 注入输入条回到流式布局(stage 底部, 与原设计一致) */
  .h5-input-wrap {
    position: relative;
    left: auto; right: auto; bottom: auto;
    z-index: auto;
    margin: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  body.h5 .hint-bar { margin-bottom: 0; } /* 流式输入条自行让位, 无需悬浮预留 */

  /* 手机: #imeCatch 转正为流式输入条(原样式) */
  #imeCatch.h5-ime {
    position: static !important;
    left: auto; right: auto; bottom: auto;
    margin: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ---------- 胶囊导航: 自动换行直显全部工具按钮(不收进 ⋯ 面板, 与 PC 一致) ---------- */
  body.h5 .ts-title { flex: 0 1 auto !important; min-width: 0 !important; }
  body.h5-ios #btnFull { display: none !important; }
  body.h5 .ts-pick { margin-left: 22px !important; padding: 2px 8px !important; font-size: 11px !important; }
  body.h5 .ts-head {
    flex-wrap: wrap !important;        /* 覆盖各打字页胶囊的 nowrap!important(此处选择器更特异) */
    align-items: center;
    border-radius: 18px !important;    /* 多行胶囊圆角收小一圈 */
  }
  body.h5 .ts-tools {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
    justify-content: flex-end;        /* 换行后按钮靠右, 与标题左对齐呼应 */
  }

  /* 词卡页(english/essay): 手机隐藏左右侧词卡(上下词), 空间让给主词卡 */
  .wl-mid .wf-side { display: none !important; }
  /* PC 端词卡上提 8px 不适用于手机: 恢复原始留白 */
  .wl-mid { padding-top: 3vh !important; }

  /* ---------- 打字文本区: 缩小字号(行距由页面JS按DOM实测自适应) ---------- */
  .word-display { font-size: 23px; line-height: 54px; }
  .char { width: 25px; height: 48px; line-height: 48px; font-size: 21px; border-radius: 6px; }

  /* ---------- 键盘区: 与 PC 一致, 指法图+手势跟随页面设置(指法提示/隐藏键盘), 不做 H5 特殊默认 ---------- */
  .keyboard-section { zoom: 1 !important; flex-direction: column !important; gap: 4px; padding: 0 10px; }
  .kb-wrap { zoom: .5 !important; padding: 8px 10px !important; }

  /* 小键盘页(number): numpad 网格按内容自适应, 窄屏补缩放 */
  .numpad { zoom: .82; }

  /* 词卡页(english/essay): 48px大字与侧词卡缩排 */
  .wt-focus { padding: 4px 8px 8px; }
  .wt-focus .wf-img { width: 128px !important; height: 128px !important; }
  .wt-focus .wf-word-row { flex-wrap: wrap; row-gap: 2px; } /* 长词+音标一行放不下时换行兜底 */
  .wt-focus .wf-ph { font-size: 15px !important; }
  .wt-focus .wf-word { font-size: 26px; letter-spacing: 1px; }
  .wt-focus .wf-word .wch { min-width: 14px !important; padding: 1px 2px; } /* 收紧字母格, 给"词+音标+喇叭"一行腾位 */
  .wt-focus .wf-word .wch { min-width: 20px; padding: 2px 3px; }
  .wl-mid .wf-side { max-width: 92px; font-size: 11px; padding: 6px; }
  .wl-mid .wf-prev { left: 4px; }
  .wl-mid .wf-next { right: 4px; }

  /* 统计卡 → 横排紧凑胶囊 */
  .side-stats { flex-direction: row; gap: 8px; padding: 2px 0 0; }
  .side-stats .stat-card { min-width: 0; flex: 1; padding: 7px 4px 6px; border-radius: 12px; }
  .side-stats .stat-card .label { font-size: 10.5px; margin-bottom: 2px; letter-spacing: .5px; }
  .side-stats .stat-card .value { font-size: 17px; }
  .side-stats .stat-card .unit { font-size: 10px; }

  /* 中文页统计条同款 */
  .stat-strip { gap: 8px; padding: 6px 10px 2px; }
  .stat-strip .stat-card { min-width: 0; flex: 1; padding: 7px 6px; }
  .stat-strip .stat-card .label { font-size: 10.5px; margin-bottom: 2px; }
  .stat-strip .stat-card .value { font-size: 17px; }
  .stat-strip .stat-card .unit { font-size: 10px; }

  /* 中文页输入格微缩(原文/格子更大比例留给汉字) —— 尺寸挂弹性基准(方案B+) */
  .token { min-width: 20px; padding: 3px 2px 0; }
  .cell { width: calc(var(--dz-h5-fs) * 1.55); height: calc(var(--dz-h5-fs) * 1.55); line-height: calc(var(--dz-h5-fs) * 1.55); font-size: var(--dz-h5-fs); }
  .token .zh { font-size: calc(var(--dz-h5-fs) * 1.15); line-height: calc(var(--dz-h5-fs) * 1.7); }

  /* ---------- 双拼/五笔页屏幕键盘: 缩为教学图(编码教学是这些页核心, 默认显示) ---------- */
  .sp-kb-wrap { zoom: .52; margin-top: 6px; padding: 10px !important; }

  /* ---------- 钢琴游戏(game-piano): 琴键行 469px 固定宽, 整体缩放入屏 ---------- */
  .piano, .pw { zoom: .8; }

}

/* ============================================================
 * 工具栏合并「⋯」面板 —— 配套 dazi-h5.js setupToolMerge()
 * 激活条件: body.h5-toolmerge(仅手机形态 + TOOL_MERGE_PAGES 白名单页,
 * 如 /typing.html)。PC/平板无此类, 规则全部不生效。
 * 手机端: 隐藏原工具按钮与标题区选关按钮, 顶栏只留 ⋯ 入口;
 * 点击弹出遮罩+居中卡片列出全部按钮, 行点击转发原按钮,
 * 设置类弹层由 dz-pop-center 居中承接。
 * ============================================================ */
body.h5-toolmerge .ts-tools .ts-btn:not(.h5-more-btn),
body.h5-toolmerge .ts-title .ts-pick { display: none !important; }

/* ⋯ 入口(仅合并页手机端出现) */
.h5-more-btn { display: none !important; }
body.h5-toolmerge .h5-more-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 20px !important;
  line-height: 1;
  padding: 0 2px !important;
}

/* ⋯ 面板: 遮罩 + 居中卡片(与 pick-card 同范式, margin:auto 安全居中) */
.h5-tools-mask {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(22, 18, 40, .45);
  display: flex;
}
.h5-tools-card {
  margin: auto;
  width: min(88vw, 340px);
  max-height: 72vh;
  max-height: 72dvh; /* iOS 地址栏收放跟随 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--bg-light, #fff);
  border: 1px solid var(--border, #e8ecf3);
  border-radius: 18px;
  box-shadow: 0 26px 70px -18px rgba(60, 50, 110, .45);
  padding: 4px 8px 8px;
  animation: h5-tools-in .16s ease;
}
@keyframes h5-tools-in {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}
.h5-tools-head {
  display: flex;
  align-items: center;
  padding: 12px 10px 6px;
}
.h5-tools-head b { font-size: 15px; color: var(--text-primary, #3d3a34); }
.h5-tools-x {
  margin-left: auto;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted, #919191);
  padding: 4px 8px;
  cursor: pointer;
}
.h5-tools-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 11px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14.5px;
  color: var(--text-primary, #333);
  font-weight: 600;
  transition: background .13s ease;
}
.h5-tools-row:active { background: rgba(99,102,241,.10); background: color-mix(in srgb, var(--neon-cyan, #6366f1) 10%, transparent); }
.h5-tools-ico {
  flex: 0 0 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(99,102,241,.09);  background: color-mix(in srgb, var(--neon-cyan) 9%, transparent);
  color: var(--neon-cyan, #6366f1);
  font-size: 16px;
}
.h5-tools-ico svg { width: 18px; height: 18px; display: block; }
.h5-tools-lab { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h5-tools-st { flex: 0 0 auto; font-size: 11.5px; color: var(--text-muted, #919191); }

/* 暗色主题 */
html[data-theme="dark"] .h5-tools-card { background: #23273a; border-color: #3a3f58; }

/* ============================================================
 * 试点页手机端配套(dazi-h5.js setupHiddenInputBar / TOOL_MERGE_PAGES)
 * 1) 隐藏底部输入条: 转隐形捕获器(仍可编程聚焦), 点打字区唤起软键盘
 * 2) 打字字符放大两号: 19→24px, 气泡/行高同步(仅手机形态类, PC/平板无此类)
 * ============================================================ */
body.h5-input-hidden .h5-input-wrap {
  opacity: 0;
  pointer-events: none;
  width: 1px !important;
  height: 1px !important;
  left: 0 !important;
  bottom: 0 !important;
  right: auto !important;
}
body.h5-input-hidden .h5-input-hint { display: none !important; }
body.h5-input-hidden .hint-bar { margin-bottom: 0 !important; } /* 收回为输入条预留的70px */
body.h5-input-hidden .dzvk-wrap { /* dz-form 兜底输入条: 隐形化但保留可聚焦(双拼/五笔页为唯一输入通道) */
  opacity: 0 !important;
  pointer-events: none !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.h5-input-hidden .h5-ime, /* 词卡页 .qz-hidden-input 转正的流式输入条 */
body.h5-input-hidden #imeCatch.h5-ime { /* 中文页 #imeCatch(上方 B 层规则带 ID 特异度, 需同级 ID 压过): 同法隐形化 */
  opacity: 0 !important;
  pointer-events: none !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 键盘教学图竖屏贴满屏宽: 左右各留3px(缩放值由 dazi-h5.js setupKbFit 按自然宽计算) */
@media (orientation: portrait) {
  body.h5-toolmerge .keyboard-section { padding-left: 3px !important; padding-right: 3px !important; }
}

body.h5-toolmerge .word-display { font-size: 42px !important; line-height: 106px !important; }
body.h5-toolmerge .word-display .char {
  width: 46px !important;
  height: 86px !important;
  line-height: 86px !important;
  font-size: 40px !important;
}
body.h5-toolmerge .word-display .char.current::after { width: 5px !important; }

/* 打字文本区改弹性中段: 随手机视口高低伸缩(最少保一行), 键盘/提示恒在屏内 —— 整页内容完整可见 */
body.h5-toolmerge .poem-viewport {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 140px !important;
}

/* 矮视口(小屏手机): 压缩键盘区, 文本区保底一行 */
@media (max-height: 620px) and (orientation: landscape) {
  body.h5-toolmerge .keyboard-section { zoom: .74 !important; }
  body.h5-toolmerge .poem-viewport { min-height: 112px !important; }
}

/* 超矮视口(手机横屏): 键盘教学图强缩 + 收起次要区块(统计/引导/指法图), 保证整页完整入屏 */
@media (max-height: 460px) and (orientation: landscape) {
  body.h5-toolmerge .keyboard-section { zoom: .55 !important; }
  body.h5-toolmerge .kb-wrap { zoom: .68 !important; }
  body.h5-toolmerge .poem-viewport { min-height: 106px !important; }
  body.h5-toolmerge .start-guide { display: none !important; }
  body.h5-toolmerge .hand-stage { display: none !important; }
  body.h5-toolmerge .side-stats { display: none !important; }
  body.h5-toolmerge .ts-progress { margin-top: 4px !important; }
}

/* UA 默认 body margin 在移动端被放大成 9px, 把整页顶下去裁掉底部 9px: 试点页归零(顶栏 fixed 定位不受影响) */
body.h5-toolmerge { margin: 0 !important; }

/* ============================================================
 * 中文拼音系/词卡拼写格(方案B+ 2026-10-11): 原统一 40px 硬编码改为挂弹性基准
 * --dz-h5-fs(20~28px 随屏幕宽高连续), 宽高按原比例联动 —— fit 引擎正常时 C 层
 * var(--dz-fit-fs) 覆盖接管; 引擎缺位时回落弹性档, 不再把行顶出屏外成空白;
 * PC/平板无此类不受影响
 * ============================================================ */
body.h5 { --dz-h5-fs: clamp(20px, 4.6vw + 1.1vh, 28px); }
body.h5-toolmerge .cell {
  width: calc(var(--dz-h5-fs) * 1.15) !important;
  height: calc(var(--dz-h5-fs) * 1.35) !important;
  line-height: calc(var(--dz-h5-fs) * 1.35) !important;
  font-size: var(--dz-h5-fs) !important;
}
body.h5-toolmerge .token .zh {
  font-size: var(--dz-h5-fs) !important;
  line-height: calc(var(--dz-h5-fs) * 1.4) !important;
}

/* fit 缺位兜底布局(方案B+ 2026-10-11): 引擎未启动时(toolmerge 页且无 h5-fit),
   视口弹性居中+只显当前行 —— 行不再被 PC 锚定推到屏外成空白; 几何与 C 层同思路,
   由纯 CSS 保证。:has 定位当前行(现代浏览器), 不支持时首行兜底可见。
   .no-dzf-fallback = 有意不接 fit 的页(如 english-typing), 在 body 上标记豁免 */
body.h5-toolmerge:not(.h5-fit):not(.no-dzf-fallback) .poem-viewport {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: clip !important;
  max-height: none !important;
  flex: 1 1 auto !important;
}
body.h5-toolmerge:not(.h5-fit):not(.no-dzf-fallback) .poem-scroll { transform: none !important; padding: 0 !important; }
body.h5-toolmerge:not(.h5-fit):not(.no-dzf-fallback) .poem-line { flex-wrap: wrap !important; }
body.h5-toolmerge:not(.h5-fit):not(.no-dzf-fallback) .poem-line:not(:first-child) { display: none !important; }
body.h5-toolmerge:not(.h5-fit):not(.no-dzf-fallback) .poem-line:has(.token.active) { display: flex !important; }
/* 词卡页装饰渐变光斑绝对定位探出屏外, 同样触发整页自动缩小: 手机形态隐藏(纯装饰) */
body.h5-toolmerge .wl-blob { display: none !important; }

/* 手机白名单页解析期(boot 前)隐藏待合并按钮: 防首帧全按钮工具栏溢出触发浏览器扩视口(扩后不自动复原) */
html.dazi-h5-merge-early .ts-tools .ts-btn:not(.h5-more-btn),
html.dazi-h5-merge-early .ts-title .ts-pick { display: none !important; }
/* 手机形态横向溢出统一在 stage 层裁剪(键盘区/词卡区残余溢出都会触发浏览器扩视口且不自动复原)。
   注意必须双轴 clip: 只写 overflow-x: clip 时部分浏览器把另一轴的 visible 计算成 auto,
   stage 变成滚动容器 —— iOS 聚焦隐形输入框会强制滚动它, 打字内容整体错位(高亮背景跑到左上角) */
body.h5-toolmerge .ts-stage,
body.h5-toolmerge .sp-stage,
body.h5-toolmerge .keyboard-section { overflow: visible; }
/* 顶栏宽度显式约束(部分页 fixed 头在溢出布局下解出超宽, ⋯入口被顶出屏) */
body.h5-toolmerge .ts-head { width: auto !important; max-width: calc(100vw - 20px) !important; }
/* 长标题页(五笔等)标题会把工具容器连同⋯入口顶出屏: 工具容器不收缩占位、标题可截断 */
body.h5-toolmerge .ts-tools { flex: 0 0 auto !important; min-width: 0 !important; }
body.h5-toolmerge .ts-title { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 软键盘弹起(安卓布局视口被压缩): 教学键盘图位于屏幕底部已被系统键盘整个盖住——
   直接收起, 空间让给打字文本区(否则文本区被压到一行半, 当前字符高亮下半截被裁) */
body.h5-kb-open.h5-toolmerge .keyboard-section { display: none !important; }

/* ============================================================
 * C. 内容区 fit 布局层 —— dazi-fit.js 激活页(body.h5-fit, 2026-10-09 方案)
 * 骨架: 内容区 flex 居中只显当前行, 单元尺寸全 em 化跟随 --dz-fit-fs
 * (引擎按档位+fit算法写入); 键盘+手势只整体 zoom(铁律: 对应位置不变),
 * 软键盘弹起态不隐藏, 按剩余空间整体回缩后继续显示。
 * 旧的 toolmerge 固定大字(40px 系)与弹起隐藏规则由本层同名高特异度规则覆盖;
 * PC/平板无 body.h5-fit, 本层全部不生效。
 * ============================================================ */

/* ---- 骨架: 内容区弹性居中 + 溢出裁剪(fit 量测放大不触发浏览器扩视口) ---- */
body.h5-fit .ts-stage,
body.h5-fit .sp-stage,
body.h5-fit .keyboard-section { overflow: visible; }
body.h5-fit .poem-viewport {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: clip !important;
  height: auto !important;
  max-height: none !important;
  min-height: var(--dz-fit-minh, 104px) !important;
  flex: 1 1 auto !important;
  margin: 0 10px !important;
  transition: none !important;
}

/* ---- flow 模式(typing/number/computer): word-display = 当前行, flex 折行居中 ---- */
body.h5-fit .word-display {
  display: flex !important;
  flex-direction: column !important;   /* 行容器纵向堆叠(上文/当前/预告三行), 防止并排挤宽疯狂折行 */
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-content: center !important;
  align-items: center !important;
  row-gap: .12em !important;
  column-gap: .06em !important;
  transform: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  font-size: var(--dz-fit-fs, 40px) !important;
  line-height: 2.1 !important;
}
body.h5-fit .word-display .char {
  width: 1.15em !important;
  height: 2.05em !important;
  line-height: 2.05em !important;
  font-size: 1em !important;
  margin: 0 !important;
}
body.h5-fit .word-display .char.tabmark {
  width: auto !important; min-width: 1.6em !important; height: 1.4em !important;
  line-height: 1.4em !important; padding: 0 .3em !important; margin: 0 .15em !important;
  align-self: center;
}
body.h5-fit .word-display .char.linebreak { display: none !important; }
body.h5-fit .word-display .char.current::after { width: .12em !important; }

/* ---- lines 模式(ciyu/tangshi/zhongwen): 只显当前 .poem-line, 中文 token 全 em 化 ---- */
body.h5-fit .poem-scroll {
  display: block !important;
  transform: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}
body.h5-fit .poem-line {
  font-size: var(--dz-fit-fs, 40px) !important;
  flex-wrap: wrap !important; /* 行过宽折行: 平板横屏无页面级 900px 窄屏档, 由 C 层统一保证(手机档重复无害) */
  column-gap: .25em !important;
  row-gap: .12em !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}
body.h5-fit .dzf-off { display: none !important; }
body.h5-fit .token { padding: .08em .06em 0 !important; min-width: .55em !important; }
body.h5-fit .token .py { min-height: 1.4em; }
/* 标点token py 行高与拼音格同源: 压掉页面/主题 calc(var(--ts)*1.9) 等异构公式,
   否则标点 py 偏高会把下方标点汉字顶低(邻格 1.4em 而标点 74px → 标点汉字"掉下一行") */
body.h5-fit .token.punct .py { height: auto !important; min-height: 1.4em !important; }
body.h5-fit .py .cell {
  font-size: 1em !important;
  font-weight: 400 !important;
  height: 1.4em !important;
  line-height: 1.35em !important;
  min-width: .55em !important;
  padding: 0 .05em !important;
}
body.h5-fit .token .zh,
body.h5-fit .cy-hz .cell {
  font-size: 1em !important;
  height: 1.4em !important;
  line-height: 1.35em !important;
  min-width: 1em !important;
}
body.h5-fit .cy-py {
  font-size: 1em !important;
  line-height: 1.4em !important;
  min-height: 1.4em !important;
  letter-spacing: .05em !important;
}
/* essay 散文 token: 注解行(音标/中文)与字母格比例跟随 */
body.h5-fit .token .anno .ph { font-size: .45em !important; }
body.h5-fit .token .anno .cn { font-size: .45em !important; line-height: 1.2 !important; max-width: 100% !important; }

/* ---- focus 模式(sp 双拼/五笔): 目标音节放大, 编码/输入行比例跟随 ---- */
body.h5-fit .sp-target { font-size: var(--dz-fit-fs, 44px) !important; gap: .5em !important; margin: .3em 0 .15em !important; }
body.h5-fit .sp-syl { font-size: 1em !important; letter-spacing: .04em !important; }
body.h5-fit .sp-code { font-size: .4em !important; padding: .12em .32em !important; letter-spacing: .1em !important; }
body.h5-fit .sp-input-line { font-size: calc(var(--dz-fit-fs, 44px) * .48) !important; letter-spacing: .16em !important; }

/* ---- focus 模式(essay 词卡): 主词 fit, 音标/中文/图比例跟随 ---- */
body.h5-fit .wt-focus .wf-word { font-size: var(--dz-fit-fs, 44px) !important; }
body.h5-fit .wt-focus .wf-word .wch { padding: .05em .12em !important; min-width: .35em !important; }
body.h5-fit .wt-focus .wf-ph { font-size: calc(var(--dz-fit-fs, 44px) * .46) !important; }
body.h5-fit .wt-focus .wf-cn { font-size: calc(var(--dz-fit-fs, 44px) * .62) !important; }
body.h5-fit .wt-focus .wf-img { width: calc(var(--dz-fit-fs, 44px) * 3.2) !important; height: calc(var(--dz-fit-fs, 44px) * 3.2) !important; }

/* ---- 软键盘弹起态: 键盘+手势必须显示(覆盖旧"隐藏让位"规则), 缩放交给引擎 ---- */
body.h5-kb-open.h5-fit .keyboard-section { display: flex !important; }
body.h5-kb-open.h5-fit .hand-stage { display: block !important; }
body.h5-kb-open.h5-fit .kb-fingers { display: block !important; }
body.h5-kb-open.h5-fit .keyboard-section { zoom: 1 !important; } /* 外层不再缩; .kb-wrap 缩放=引擎内联 zoom(竖屏) / CSS 档(横屏) */
body.h5-kb-open.h5-fit .poem-viewport { max-height: none !important; }

/* ===== 平板输入条瘦身(2026-10-13): 769-1100px 把软键盘唤起条改为居中小胶囊,
   功能不变(点击仍唤起系统输入法), 不再横贯全宽像个空输入框; 手机≤768保持原大条 ===== */
@media (min-width: 769px) and (max-width: 1100px) {
  .h5-input-wrap {
    left: 50% !important; right: auto !important;
    transform: translateX(-50%) !important;
    width: 250px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .h5-input-wrap input {
    width: 100% !important; height: 34px !important;
    font-size: 12.5px !important;
    border-radius: 17px !important;
    background: rgba(255,255,255,.72) !important;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-color: rgba(99,102,241,.3) !important;
    box-shadow: 0 4px 14px -6px rgba(80,80,140,.35) !important;
    padding: 0 12px !important;
  }
  .h5-input-hint { font-size: 12px !important; }
  #imeCatch.h5-ime {
    left: 50% !important; right: auto !important;
    transform: translateX(-50%) !important;
    width: 240px !important;
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 12.5px !important;
    border-radius: 17px !important;
    background: rgba(255,255,255,.72) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-color: rgba(99,102,241,.3) !important;
    box-shadow: 0 4px 14px -6px rgba(80,80,140,.35) !important;
    z-index: 60;
  }
  #imeCatch.h5-ime::placeholder { color: #98a0b3 !important; }
}

/* ===== H5统计上移(2026-10-13, 借鉴小程序打字页): 速率/准确率胶囊置于键盘上方 ===== */
body.h5 .side-stats {
  order: -1;                       /* 移到键盘上方(keyboard-section为纵向) */
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px 8px !important;
  margin: 0 !important;
}
body.h5 .stat-card {
  min-width: 0 !important;
  flex: 0 1 auto;
  max-width: 46vw;
  padding: 5px 12px 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.9);
  box-shadow: 0 3px 10px -4px rgba(80,80,140,.35);
  display: flex; align-items: center; gap: 6px;
}
body.h5 .stat-card .label { font-size: 11px !important; margin: 0 !important; }
body.h5 .stat-card .value { font-size: 17px !important; }

/* ===== 进度条防裁切(全局推广, 原ciyu页fit-fix 2026-10-11): 悬挂在键盘区上沿的进度条/球
   不被 overflow:clip 切掉上下半; 打字内容区(poem-viewport)自身已 clip, 视口不会扩 ===== */
body.h5-fit .keyboard-section { overflow: visible !important; }
body.h5-fit .kb-prog { height: 4px !important; border-radius: 4px; }
body.h5-fit .kb-prog .fill { border-radius: 4px !important; }

/* 行容器(flow预告模式): 行内字符居中折行 */
body.h5-fit .word-display .dzf-line {
  display: flex; flex-wrap: wrap; justify-content: center;
  row-gap: .12em; max-width: 100%;
}
body.h5-fit .word-display .dzf-ph { width: 100%; }

/* 行容器(flow预告模式): 行内字符居中折行 */
body.h5-fit .word-display .dzf-line {
  display: flex; flex-wrap: wrap; justify-content: center;
  row-gap: .12em; max-width: 100%;
}
body.h5-fit .word-display .dzf-ph { width: 100%; }

/* ===== CSS zoom 不支持(Firefox<126)兜底(2026-10-13): 键盘缩放档全部失效时允许横向滑动, 防溢出破版 ===== */
html.no-css-zoom .kb-wrap,
html.no-css-zoom .sp-kb-wrap,
html.no-css-zoom .numpad { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
 * 学英语打字页自建弹层 H5 屏幕居中(2026-10-22)
 * 页内 #accentPop/#voiceGPop 为锚按钮的 fixed 定位(按钮被 ⋯ 面板收纳后锚点失真),
 * 编排弹窗为 body>.dz-pop(absolute 无坐标); 设置/声音/键盘类弹窗走 dazi-typing-tools
 * 的 popCenterMode 已居中不受影响(.dz-pop 在遮罩内, 非 body 直下)。
 * ============================================================ */
body.h5 #accentPop,
body.h5 #voiceGPop,
body.h5 > .dz-pop {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  max-width: min(88vw, 360px) !important;
  max-height: 62vh !important;
  overflow-y: auto !important;
  margin: 0 !important;
  z-index: 10001 !important;
}