/* =========================================================
   mobile.css — 全站移动端适配（集中管理）
   ---------------------------------------------------------
   设计铁律（林哥拍板，最高优先级）：
   1) 所有规则必须包在 @media (max-width: 768px) 或
      @media (pointer: coarse) 内；桌面(>=1024px / 鼠标)
      不会命中 → 电脑观感零影响。
   2) 只加不删：绝不改/删通用样式，仅针对窄屏追加覆盖。
   3) 触摸优化用 (pointer: coarse)，鼠标设备同样零影响。
   ========================================================= */

/* ===================== 1. 基础 ===================== */
@media (max-width: 768px){
  /* 防止任何模块横向溢出产生滑动条 */
  html, body{ overflow-x: hidden; }
  body{ font-size: 14px; line-height: 1.55; }

  /* 容器不超出视口 */
  .app-shell, .content, .view, .container{ max-width: 100%; }

  /* 内容区内边距收紧（覆盖 theme.css 的 860 断点值） */
  .content{ padding: 14px 12px 80px; }

  /* 卡片内边距收紧 */
  .card{ padding: 14px; }
  .card-2{ padding: 14px; }

  /* 通用按钮：移动端更易点，但不强制整行以免破坏并排布局 */
  .btn{ min-height: 42px; padding: 11px 16px; font-size: 14px; }

  /* 输入框/选择/文本域：字号>=16px 防止 iOS 聚焦自动缩放 */
  .input, input.input, textarea.input, select.input,
  input, textarea, select{ font-size: 16px; }

  /* 区块标题缩小 */
  .section-title{ font-size: 17px; }
  .home-title{ font-size: 25px; }
  .home-sub{ font-size: 14px; margin-bottom: 20px; }
  .pr-types-title{ font-size: 19px; }
  .pr-types-sub{ font-size: 13.5px; }
  .bookbar-title{ font-size: 19px; }
}

/* ===================== 2. 触摸设备通用优化 ===================== */
@media (pointer: coarse){
  .btn{ min-height: 44px; padding: 12px 18px; }
  .nav-item{ padding: 12px 14px; }
  .pr-choice-item, .wd-battle-opt, .bb-btn,
  .auth-submit, .auth-input, .auth-code-btn{ min-height: 44px; }
  /* 触摸设备去掉点击高亮方块 */
  a, button, .nav-item, .clickable{ -webkit-tap-highlight-color: transparent; }
}

/* ===================== 3. 登录 / 注册 / 找回页 ===================== */
@media (max-width: 768px){
  .auth-card{ padding: 22px 16px; }
  .auth-title{ font-size: 20px; margin-bottom: 16px; }
  .auth-tabs{ gap: 6px; }
  .auth-tab{ flex: 1; padding: 10px 0; font-size: 14px; }
  .auth-input{ padding: 12px 14px; font-size: 16px; }
  .auth-row{ flex-direction: column; gap: 8px; }
  .auth-row .auth-input, .auth-row .auth-code-btn{ width: 100%; }
  .auth-code-btn{ min-height: 46px; width: 100%; font-size: 14px; }
  .auth-submit{ min-height: 48px; font-size: 15px; }
  .auth-back{ font-size: 13px; }
}

/* ===================== 4. 落地页 index.html ===================== */
@media (max-width: 768px){
  .navbar{ flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
  .navbar-left{ justify-content: center; }
  .navbar-right{ flex-wrap: wrap; justify-content: center; gap: 8px; }
  .container{ padding: 0 12px; }
  .btn-row{ display: flex; flex-direction: column; gap: 10px; }
  .btn-row .btn{ width: 100%; }
  /* 结果区/输入区内边距 */
  .input-section, .result-section{ padding: 14px; }
  textarea.input{ width: 100%; }
}

/* ===================== 5. 文章学习模块 ===================== */
@media (max-width: 768px){
  .input-section h2{ font-size: 17px; }
  .h2-btns{ width: 100%; flex-wrap: wrap; gap: 6px; }
  .h2-btn{ flex: 1 1 auto; justify-content: center; min-height: 38px; }
  .top-upload-bar{ width: 100%; margin-left: 0; }
  .article-tts-btns{ justify-content: flex-start; width: 100%; gap: 6px; }
  .tts-range-select{ max-width: 100%; }
  .result-section{ padding: 14px; }
  .sentence-card{ padding: 12px; margin-bottom: 12px; }
  /* 文本框最大化时避免被顶部条遮挡 */
  .textarea-wrapper.maximized{ padding: 10px 10px 14px; }
}

/* ===================== 6. 练习巩固模块 ===================== */
@media (max-width: 768px){
  .pr-type-grid{ grid-template-columns: 1fr; }
  .pr-filter-row{ gap: 6px; }
  .pr-bar{ flex-wrap: wrap; gap: 10px; }
  .pr-voice-btn{ min-width: 100px; padding: 12px 14px; }
  .pr-qbank-img{ max-width: 100%; }
  .pr-q-box{ padding: 14px; }
  .pr-answer-area, .pr-word-pool, .pr-analysis-area{ padding: 14px; }
  .pr-choice-item{ padding: 12px 14px; }
}

/* ===================== 7. 书吧模块 ===================== */
@media (max-width: 768px){
  .bookbar-wrap{ padding: 8px 4px 60px; }
  .bookbar-head{ flex-direction: column; align-items: flex-start; gap: 8px; }
  .bookbar-toolbar{ flex-direction: column; align-items: stretch; gap: 8px; }
  .bookbar-search{ width: 100%; }
  .bookbar-category{ width: 100%; }
  .bb-card{ flex-direction: column; padding: 12px; }
  .bb-cover-wrap{ width: 100%; }
  .bb-cover{ width: 100%; height: auto; max-height: 220px; object-fit: cover; border-radius: 8px; }
  .bb-cover-ph{ width: 100%; height: 160px; }
  .bb-actions{ flex-direction: column; gap: 8px; }
  .bb-btn{ width: 100%; min-height: 44px; justify-content: center; }
  .bb-row{ flex-direction: column; gap: 10px; }
  .bb-modal{ width: 92%; max-height: 88vh; overflow-y: auto; }
  .bb-tabs{ flex-wrap: wrap; }
  .bb-field input, .bb-field textarea, .bb-field select{ font-size: 16px; }
}

/* ===================== 8. 星空大战游戏 ===================== */
@media (max-width: 768px){
  /* 以下原散落在 words.css 的 @media(max-width:520px) 星空大战窄屏规则，
     按铁律统一收口至此（并入 768 断点） */
  .wd-battle-wrap{ margin-top: 6px; }
  .wd-battle-hud{ gap: 8px; font-size: 13px; padding: 8px 10px; }
  .wd-battle-field{ height: 300px; }   /* 原 380，手机屏更矮更跟手 */
  .wd-battle-opts{ gap: 8px; }
  .wd-battle-opt{ padding: 12px 4px; font-size: 14px; }
  .wd-battle-modes{ grid-template-columns: 1fr; }  /* 模式卡单列 */
  .wd-battle-ship{ font-size: 14px; padding: 6px 10px; }
  .wd-battle-wrap.rev .wd-battle-ship{ font-size: 12.5px; max-width: 200px; }
  .wd-battle-rec-list{ max-height: 200px; }
  .wd-battle-rec{ padding: 8px 10px; }
  .wd-battle-rec-w{ min-width: 78px; font-size: 14px; }
  .wd-battle-rec-bar{ gap: 6px; padding: 6px 8px; }
  .wd-battle-rec-btn{ font-size: 12px; padding: 5px 8px; }
  .wd-battle-rec-rep{ width: 42px; padding: 4px 5px; font-size: 13px; }
}

/* ===================== 8b. 植物大战僵尸游戏 ===================== */
@media (max-width: 768px){
  /* 场地用视口高度，手机屏自动收紧但不溢出；JS 读 clientHeight 动态适配，无需改 JS */
  .wd-zombie-field{ height: min(46vh, 360px); }
  /* 基地 / 出口列收窄，给通道让位 */
  .wd-zombie-base, .wd-zombie-spawn{ flex-basis: 40px; font-size: 11px; }
  /* HUD 紧凑 */
  .wd-zombie-hud{ gap: 6px; font-size: 12.5px; padding: 7px 10px; }
  /* 文字标签收窄防溢出 */
  .wd-zombie-label{ font-size: 12px; max-width: 108px; padding: 3px 7px; }
  .wd-zombie-face{ font-size: 22px; }
  /* 植物卡更贴手 */
  .wd-zombie-plant{ min-width: 72px; font-size: 14px; padding: 8px 4px 10px; }
  .wd-zombie-plant-ico{ font-size: 16px; }
  .wd-zombie-pea{ width: 12px; height: 12px; margin-left: -6px; }
  /* 模式卡单列 */
  .wd-zombie-modes{ grid-template-columns: 1fr; }
  /* 介绍 / 结算卡收紧 */
  .wd-zombie-intro, .wd-zombie-result{ padding: 18px 14px; }
  /* 托盘：横向滚动，避免窄屏换行挤压；每格≥56px 满足触摸目标 */
  .wd-zombie-tray{
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .wd-zombie-plant{ flex: 0 0 auto; min-width: 56px; min-height: 56px; }
  /* 全局禁选中 / 双击缩放，点按更干脆 */
  .wd-zombie-stage, .wd-zombie-field, .wd-zombie-tray, .wd-zombie-plant{
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
  }
}

/* 触摸设备：放大点击目标、去高亮、通道去十字光标 */
@media (pointer: coarse){
  .wd-zombie-plant{ min-width: 60px; min-height: 60px; padding: 10px 6px 12px; }
  .wd-zombie-base, .wd-zombie-spawn{ flex-basis: 44px; }
  .wd-zombie-lane{ cursor: default; }
  .wd-zombie-stage{ -webkit-tap-highlight-color: transparent; }
}

/* ===================== 9. 生词本 / 我的词典 等表格 ===================== */
@media (max-width: 768px){
  /* 表格允许横向滚动，避免挤压变形 */
  .content table, .card table, .table-wrap table,
  table.data, table.qb-table{
    display: block; width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* 通用弹层在窄屏占满 */
  .modal, .dialog, .overlay .panel, .cloze-dialog{
    width: 92% !important; max-width: 92% !important;
    max-height: 88vh; overflow-y: auto;
  }
}

/* ===================== 10. 阅读器（已是手机画布，仅微调） ===================== */
@media (max-width: 768px){
  .phone{ max-width: 100%; }
}

/* ===================== 11. SPA 外壳：手机下改为左侧窄图标栏 + 内容区两列 ===================== */
@media (max-width: 768px){
  /* 覆盖 theme.css 的 max-width:860px 顶部横条方案，改为左侧窄边栏 */
  .app-shell{ display:flex; }
  .app-shell .sidebar{
    width:64px;
    position:fixed; top:0; left:0; bottom:0;
    flex-direction:column; align-items:center;
    padding:10px 4px;
    overflow-x:hidden; overflow-y:auto;
    border-right:1px solid var(--border);
  }
  .app-shell .brand{
    padding:4px 0 10px;
    justify-content:center;
  }
  .app-shell .brand-name{ display:none; }
  .app-shell .brand-logo{ font-size:22px; }
  .app-shell .nav{
    flex-direction:column; align-items:center;
    gap:6px; margin:0; padding:0;
  }
  .app-shell .nav-item{
    flex-direction:column; align-items:center;
    gap:2px; padding:8px 2px;
    font-size:10px; white-space:normal;
    border-radius:10px;
  }
  .app-shell .nav-item span:not(.nav-ico){ display:none; }
  .app-shell .nav-ico{ font-size:20px; width:auto; }
  .app-shell .sidebar-foot{ display:none; }
  .app-shell .sidebar-toggle{ display:none; }
  .app-shell .top-username{ display:none; }
  /* 内容区让出窄边栏 */
  .app-shell .content{
    margin-left:64px;
    padding:14px 10px 80px;
    width:calc(100% - 64px);
    box-sizing:border-box;
  }
  /* 侧边栏收起时内容区占满（兼容 JS 切换状态） */
  .app-shell.sidebar-hidden .sidebar{ transform:translateX(-100%); }
  .app-shell.sidebar-hidden .content{ margin-left:0; width:100%; }

  /* 首页卡片改为两列，让窄屏并排显示 */
  .home-cards{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .home-card{ padding:14px 10px; }
  .home-card span{ font-size:26px; margin-bottom:8px; }
  .home-card b{ font-size:14px; margin-bottom:4px; }
  .home-card i{ font-size:11.5px; }
}

/* ===================== 12. 我的词典 / 浏览词典（拉宽单词显示区） ===================== */
@media (max-width: 768px){
  /* 词典切换 tab 更小 */
  .md-dict-tabs{ gap:6px; }
  .md-dict-tab{ padding:7px 12px; font-size:13px; }
  .md-tab-sub{ font-size:11px; }

  /* 两栏容器更紧凑 */
  .md-wrap{ gap:10px; }
  .md-panel{ border-radius:10px; }
  .md-panel-head{ padding:10px 12px; font-size:14px; }

  /* 字母导航改为单行横向滚动，不再换行占高 */
  .md-alpha{
    flex-wrap:nowrap;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:6px 8px;
    gap:3px;
  }
  .md-alpha::-webkit-scrollbar{ display:none; }
  .md-alpha-btn{ min-width:26px; padding:4px 6px; font-size:11px; }

  /* 列表项内边距收紧，给单词让出宽度 */
  .md-list{ padding:6px 8px 10px; gap:6px; }
  .md-item{ padding:8px 10px; border-radius:10px; }

  /* 单词本身允许换行，避免长单词被截断 */
  .md-item-main{ gap:6px; align-items:flex-start; }
  .md-word{
    flex:1 1 auto; min-width:0;
    font-size:15px; line-height:1.45;
    word-break:break-word; white-space:normal;
  }
  /* 小发音按钮缩小 */
  .md-item-spk{ flex:0 0 auto; }
  .md-spk-mini{ padding:2px 6px; font-size:10px; min-width:24px; }
  .md-item-sub{ font-size:12px; gap:6px; margin-top:2px; }

  /* 分页更紧凑 */
  .md-pager{ padding:8px 10px; gap:4px; }
  .md-page{ padding:4px 8px; font-size:11px; }
  .md-page-info{ font-size:11px; margin-left:auto; }

  /* 搜索框 */
  .md-search-box{ padding:10px 12px 6px; }
  .md-input{ padding:8px 10px; font-size:14px; }
  .md-btn{ padding:8px 14px; font-size:13px; }
}