/*!
 * mobile.css — 手机端响应式补丁（零侵入）
 *
 * 只对移动设备（≤768px）生效；桌面端完全不受影响。
 * 修复原版固定 650×425px 对话框在手机上显示不全的问题。
 * 不修改任何原版 CSS 文件。
 */
@media (max-width: 768px) {

  /* ---- 1. 主对话框：适配手机屏幕（原版固定 650x425px） ---- */
  dialog {
    width: 92vw !important;
    max-width: 92vw !important;
    height: 82vh !important;
    max-height: 82vh !important;
    top: 9vh !important;
    padding: 0.8rem !important;
  }

  /* ---- 2. 标题 ---- */
  #title {
    font-size: 3.4vh !important;
    max-width: 88% !important;
  }
  #hoverTitle {
    font-size: 2.8vh !important;
  }

  /* ---- 3. 语言选择区：压缩间距 + 可滚动兜底 ---- */
  .wrapper {
    padding-top: 5% !important;
    height: 76% !important;
    grid-gap: 6px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- 4. 语言按钮：触屏友好尺寸 ---- */
  .box {
    padding: 9px 4px !important;
    font-size: 12.5px !important;
  }

  /* ---- 5. 教程区域 ---- */
  .tutBox {
    padding: 10px !important;
    font-size: 13px !important;
  }
  #startGrid {
    height: 112px !important;
    left: 4% !important;
    width: 92% !important;
  }

  /* ---- 6. 开始按钮 ---- */
  #startBtn {
    width: 170px !important;
    font-size: 17px !important;
    right: 12px !important;
    bottom: 12px !important;
  }

  /* ---- 7. 顶部工具按钮 ---- */
  .lang {
    left: calc(100% - 100px) !important;
    top: 14px !important;
  }
  #muteToggle {
    left: calc(100% - 72px) !important;
    top: 10px !important;
  }
  .hd {
    right: 2px !important;
    top: -20px !important;
    font-size: 18px !important;
    width: 56px !important;
    height: 42px !important;
  }
  .backarrow {
    top: 8px !important;
    left: 8px !important;
    font-size: 11px !important;
  }

  /* ---- 8. 前后箭头（自动浏览按钮）---- */
  .forward,
  .backward {
    bottom: 28px !important;
  }
  .forward {
    right: 42px !important;
  }
  .backward {
    right: 92px !important;
  }
}