/* ============================================================
   飞马自学堂 · 全站移动端适配（手机 / 平板）
   ------------------------------------------------------------
   作用：
   1) 小屏禁止页面横向溢出；
   2) 英语页顶栏 / 标签行在手机上换行或横向滚动；
   3) 加大触摸目标，适合手指点击；
   4) 收紧内边距、微调字号，排版在手机上更舒适。
   仅在小屏（≤820px 平板 / ≤560px 手机）生效，桌面端不受影响。
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }

/* ============ 平板 / 手机（≤ 820px） ============ */
@media (max-width: 820px) {
  /* 禁止横向溢出（修复个别页面 20~30px 的轻微溢出） */
  html, body { overflow-x: hidden; }

  /* 容器内边距收紧，避免左右留白过大 */
  .wrap,
  .game-machine,
  .sheet,
  .card {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* 大图 / 视频 / iframe 不撑破屏幕 */
  img, video, iframe { max-width: 100%; }
}

/* ============ 手机窄屏（≤ 560px） ============ */
@media (max-width: 560px) {
  body { font-size: 15px; }

  /* ---- 英语页：顶栏换行，右区堆叠填满 ---- */
  .sys-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }
  .sys-left { width: 100%; flex: none !important; justify-content: center !important; }
  .sys-mid { width: 100%; justify-content: center !important; flex: none !important; }
  .sys-right {
    width: 100%;
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 6px !important;
  }
  .sys-right select {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100% !important;
    height: 38px;
    font-size: .85rem;
  }
  .sys-right .speak-toggle,
  .sys-right button { min-height: 36px; }

  /* ---- 英语页：游戏标签行横向滚动（不换行挤压） ---- */
  #tabBar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    padding-bottom: 4px;
  }
  #tabBar .tab-btn { flex: none; }

  /* ---- 英语页：得分条 / 声音组 ---- */
  .stats { gap: 6px; flex-wrap: wrap; }
  .sound-group { flex-wrap: wrap; justify-content: flex-end; }

  /* ---- 通用：主要按钮加大触摸区 ---- */
  .btn, .primary, .speak-toggle, .tab-btn, .option-btn, .modebtn, .glevel { min-height: 40px; }
  .option-btn { min-height: 44px; }
  .word-block { min-height: 44px; }
  .memory-card, .flashcard-container { touch-action: manipulation; }

  /* ---- 标题字号微调 ---- */
  h1 { font-size: 1.5em !important; }
  .title { font-size: 1.5rem !important; }

  /* ---- 弹窗小屏适配：不超出屏幕、左右留边 ---- */
  .modal-box, .modal { max-width: 94vw !important; }
  .modal-box { margin: 0 auto; }
  #mQAModal { width: 94vw !important; min-width: 94vw !important; max-width: 94vw !important; }

  /* ---- 输入框/选择框字号 ≥16px，避免 iOS 聚焦自动放大 ---- */
  input, select, textarea { font-size: 16px; }

  /* ---- 英语游戏区小屏高度收紧（避免手机上一屏太高） ---- */
  .game-area { min-height: 320px !important; padding: 18px 14px !important; }

  /* ---- 答题选项在小屏更易点（两列排布，若容器为 flex） ---- */
  .option-btn { flex: 1 1 45%; }

  /* ---- 趣味背单词：顶部搜索条（输入框+按钮）手机适配 ---- */
  .fw-searchbar { flex-wrap: nowrap !important; }
  .fw-searchbar input { flex: 1 1 auto; min-width: 0; height: 40px; }
  .fw-searchbar button { flex: none; }
}