/* 移动端课程页统一阅读样式（由 voice-picker.js 自动注入到所有课程页）
   目标：例句原文 / 拼音·转写 / 翻译 分行；词语下方显示简短释义；不横向溢出。 */
@media (max-width: 640px) {
  html, body { overflow-x: hidden !important; }
  body { padding: 10px !important; }
  .container, .lesson-page, .lesson-detail, main { max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; border-radius: 12px !important; }

  /* ---- 例句卡片 ---- */
  .example-box, .example-sentence, .sentence-card, .sentence {
    padding: 12px 10px !important; margin: 10px 0 !important; overflow-wrap: anywhere; word-break: break-word;
  }

  /* 原文行：独占一行，字号适中，允许换行 */
  .sentence-text, .sentence-main, .de-line, .lg-line, .ar-line, .ruby-line, .pz-line, .cn-line, .colloc-line {
    display: block !important; font-size: 1.15rem !important; line-height: 2 !important;
    margin: 0 0 6px !important; white-space: normal !important;
  }
  .ruby-line { display: flex !important; flex-wrap: wrap !important; align-items: flex-end !important; gap: 6px 8px !important; line-height: 1.3 !important; }
  .ar-line, .sentence-card[dir="rtl"] .sentence-main { line-height: 2.2 !important; }

  /* 拼音 / 转写行：独立小字行 */
  .translit, .sentence-transliteration, .latin-trans, .tr {
    display: block !important; font-size: .82rem !important; line-height: 1.5 !important;
    margin: 2px 0 6px !important; opacity: .85; white-space: normal !important;
  }
  ruby-group rb { font-size: 1.5rem !important; }
  ruby-group rt { font-size: .74rem !important; letter-spacing: 0 !important; }

  /* 翻译行：独立一行，颜色淡一点 */
  .translation-line, .zh-line, .en-line, .sentence-translation, .zh-meaning, .translation {
    display: block !important; font-size: .95rem !important; line-height: 1.6 !important;
    margin: 4px 0 6px !important; opacity: .9; white-space: normal !important;
  }
  .en-line { font-size: 1rem !important; }
  .example-box .de-line { font-size: 1.15rem !important; }

  /* ---- 词语 + 简短释义：词在上、释义在下 ---- */
  .sentence-text .word-clickable[data-meaning], .de-line .word-clickable[data-meaning],
  .lg-line .word-clickable[data-meaning], .ar-line .word-clickable[data-meaning],
  .sentence-main .sentence-word[data-tip] {
    display: inline-flex !important; flex-direction: column !important; align-items: center !important;
    vertical-align: bottom; margin: 3px 2px !important; padding: 2px 5px !important; line-height: 1.35 !important;
    max-width: 100%; border-radius: 8px;
  }
  .sentence-text .word-clickable[data-meaning]::after, .de-line .word-clickable[data-meaning]::after,
  .lg-line .word-clickable[data-meaning]::after, .ar-line .word-clickable[data-meaning]::after {
    content: attr(data-meaning); display: block; font-size: .68rem; line-height: 1.3; opacity: .78;
    font-weight: 400; font-style: normal; margin-top: 1px; max-width: 9em; text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr;
  }
  .word-clickable[data-meaning="—"]::after, .word-clickable[data-meaning=""]::after { content: none; }
  /* 汉语 ruby 结构：拼音在上、汉字居中、释义在下（随词宽撑开，不重叠） */
  ruby-group { align-items: center; }
  ruby-group rb .word-clickable[data-meaning] { display: inline-flex; flex-direction: column; align-items: center; }
  ruby-group rb .word-clickable[data-meaning]::after {
    content: attr(data-meaning); display: block; font-size: .6rem; line-height: 1.25; opacity: .72;
    white-space: nowrap; max-width: 4.5em; overflow: hidden; text-overflow: ellipsis; font-weight: 400; letter-spacing: 0;
  }
  ruby-group rb .word-clickable[data-meaning=""]::after, ruby-group rb .word-clickable[data-meaning="—"]::after { content: none; }

  /* ---- 控件与提示 ---- */
  .controls, .sentence-controls, .tbl-tools { display: flex !important; flex-wrap: wrap !important; gap: 6px 8px !important; }
  .audio-btn, .sentence-audio-btn, .en-audio-btn, .de-audio-btn, .btn-sm, .rec-btn { min-height: 36px; font-size: .85rem !important; padding: 6px 12px !important; }
  .speed-row, .speed-control { display: inline-flex !important; align-items: center; gap: 4px; margin: 4px 0 0 !important; font-size: .8rem !important; }
  .tooltip, .word-tooltip { max-width: calc(100vw - 20px) !important; left: 10px !important; right: 10px !important; font-size: .9rem !important; }
  table.overview, .summary-table, .tbl-wrap { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .toc { gap: 6px !important; }
}