/* ============================================================
   mobile.css — 移动端增强样式
   为速背单词系统提供统一的移动端触控体验优化
   ============================================================ */

/* ===== 1. 按钮触摸反馈增强 ===== */
.btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* 移动端统一 active 缩放：scale(0.96) 作为全局基准 */
@media (hover: none) and (pointer: coarse) {
  .btn:active {
    transform: scale(0.96) !important;
    transition-duration: 0.08s;
  }
}

/* ===== 2. 全局触摸高亮消除 ===== */
*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
}

/* ===== 3. 移动端字体大小与间距优化 ===== */
@media (max-width: 480px) {
  /* 根字体微调：移动端可读性 */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* 正文字体 */
  body {
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.01em;
  }

  /* 按钮字体与间距（走 --btn-* 令牌，与全局 .btn 同源） */
  .btn {
    font-size: var(--btn-fs);
    padding: var(--btn-py) var(--btn-px);
    min-height: 44px; /* 苹果 HIG 最小触控面积 44pt */
  }

  .btn-sm {
    font-size: var(--btn-sm-fs);
    padding: var(--btn-sm-py) var(--btn-sm-px);
    min-height: 36px;
  }

  /* 学习页按钮区：加大触控面积 */
  .front-btns .btn,
  .back-btns .btn {
    padding: 14px 10px;
    font-size: 1.05rem;
    min-height: 48px;
  }

  /* 发音按钮 */
  .speak-btn-front,
  .card-back .speak-btn-back {
    min-height: 44px;
    padding: 10px 24px;
  }

  /* 单词列表项：增大触控行高 */
  .wordlist-item {
    padding: 12px 14px;
    min-height: 48px;
    margin-bottom: 8px;
  }

  /* 下拉选项 */
  .dd-item {
    padding: 11px 12px;
    min-height: 42px;
  }

  /* 弹窗 */
  .pop-head strong {
    font-size: 15px;
  }

  .pop-body {
    padding: 14px;
  }

  .pop-foot {
    padding: 12px 14px;
  }

  /* 输入框 */
  .input-group input,
  .input-group select,
  .dd-search {
    font-size: 16px; /* 防止 iOS Safari 自动缩放 */
    padding: 12px 14px;
    min-height: 44px;
  }

  /* 水平测评选项 */
  .place-options .place-opt {
    padding: 14px 12px;
    min-height: 48px;
    font-size: 15px;
  }

  /* 背面释义 */
  .card-back .back-meaning-lg {
    padding: 8px 12px;
    line-height: 1.4;
  }

  /* 学习进度条 */
  .study-progress .track {
    height: 6px;
  }

  /* 标题区域 */
  .home-header h1 {
    font-size: 26px;
  }

  .home-header .sub {
    font-size: 13px;
  }

  /* 摘要/文本 */
  .text-muted {
    font-size: 13px;
  }

  .badge {
    font-size: 12px;
    padding: 3px 10px;
  }

  /* 提示文本 */
  .study-status {
    font-size: 13px;
  }
  .hint-text {
    font-size: 12px;
  }
}

/* 中等屏幕（小平板）间距优化 */
@media (min-width: 481px) and (max-width: 768px) {
  .btn {
    min-height: 44px;
  }

  .input-group input,
  .input-group select,
  .dd-search {
    font-size: 16px; /* 防止 iOS 自动缩放 */
  }
}

/* ===== 4. 安全区域适配 ===== */

/* iOS 刘海屏底部横条 */
.app {
  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
}

/* 弹窗底部安全区 */
.pop-shell {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* 底部操作栏安全区 */
.pop-foot {
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
}

/* 模态框安全区 */
.modal-overlay {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.modal-box {
  padding-bottom: max(22px, env(safe-area-inset-bottom, 22px));
}

/* 顶部安全区（状态栏/刘海） */
.app {
  padding-top: max(16px, env(safe-area-inset-top, 16px));
}

/* ===== 5. 触摸手势增强 ===== */

/* 卡片容器：禁止文本选择，启用手势 */
.flip-container {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

/* 卡片面：禁止长按菜单 */
.card-face {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ===== 6. 滑动手势视觉反馈 ===== */

/* 卡片跟手滑动时的过渡效果 */
.flipper.swiping {
  transition: none !important; /* 跟手时禁用过渡，追求零延迟 */
}

/* 滑动中卡片略微旋转，增强跟手感 */
.flipper.swiping-left,
.flipper.swiping-right {
  will-change: transform;
}

/* 滑动提示：与全站约定一致 —— 左=不认识（danger）、右=认识（success）。
   注意：studyPage.js:197/202 用行内样式渲染这两个指示器（行内优先级更高），
   所以这里的配色是「Token 兜底层」：行内样式一旦被清理，仍不会放出反向地雷。 */
.swipe-indicator {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 100;
  white-space: nowrap;
}

/* 左滑 = 不认识 → 红（对齐 <button class="btn btn-unknown" id="btnUnknown"> 在左、危险色） */
.swipe-indicator-left {
  right: 12px;
  background: rgba(255, 51, 102, 0.15);
  color: var(--danger);
  border: 1px solid rgba(255, 51, 102, 0.3);
}

/* 右滑 = 认识 → 绿（对齐 <button class="btn btn-known" id="btnKnown"> 在右、成功色） */
.swipe-indicator-right {
  left: 12px;
  background: rgba(0, 255, 136, 0.15);
  color: var(--success);
  border: 1px solid rgba(0, 255, 136, 0.3);
}

/* 方向类 swiping-left / swiping-right 当前全项目零添加（studyPage.js 只加 .swiping，
   指示器显隐由行内 opacity 驱动，见 :270/:274）→ 本节为 TOKEN 兜底层，保留不删：
   删掉会在将来清理 CSS 时把「指示器只有底色没有文字」反向暴露出来。 */
.flipper.swiping-left .swipe-indicator-left,
.flipper.swiping-right .swipe-indicator-right {
  opacity: 1;
}

/* ===== 7. 移动端滚动优化 ===== */
.app {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.pop-body,
.dd-panel,
.modal-box .modal-body,
.card-content-scroll {
  -webkit-overflow-scrolling: touch;
}

/* ===== 8. 横屏适配 ===== */
@media (orientation: landscape) and (max-height: 500px) {
  .flip-container {
    min-height: 40vh;
    max-height: 55vh;
  }

  .flipper,
  .card-face {
    min-height: 40vh;
  }

  .front-btns .btn,
  .back-btns .btn {
    padding: 10px 8px;
    font-size: 0.95rem;
  }

  .speak-btn-front {
    padding: 8px 20px;
    font-size: 0.9rem;
  }

  .study-progress {
    margin-bottom: 6px;
  }
}

/* ===== 9. 暗色系统触摸增强 ===== */
@media (prefers-color-scheme: dark) {
  .btn:active {
    filter: brightness(0.88);
  }
}

/* ===== 10. 打印样式（移动端偶有打印需求） ===== */
@media print {
  .btn,
  .speak-btn-front,
  .card-back .speak-btn-back,
  .front-btns,
  .back-btns-wrap,
  .study-status,
  .hint-text {
    display: none !important;
  }
}

/* ===== 11. 禁止移动端双击缩放 ===== */
@media (hover: none) and (pointer: coarse) {
  html {
    touch-action: manipulation;
  }
}

/* ===== 12. PWA 全屏模式适配（standalone） ===== */
@media all and (display-mode: standalone) {
  .app {
    padding-top: max(20px, env(safe-area-inset-top, 20px));
    padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
  }

  body {
    padding-top: env(safe-area-inset-top, 0);
  }
}

/* ===== 13. body 安全区域兜底（非 .app 容器页面也受保护） ===== */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ===== 14. 按钮触摸反馈（通用 active 缩放） ===== */
@media (hover: none) and (pointer: coarse) {
  .btn:active {
    transform: scale(0.96) !important;
    transition: transform 0.1s ease-out !important;
  }
}

/* ===== 15. clickable / button 通用触摸反馈 ===== */
.clickable:active,
button:active {
  opacity: 0.85;
  transition: opacity 0.1s ease-out;
}

/* ===== 16. iOS 学习页面禁止橡皮筋效果 ===== */
.study-page,
.study-page .app,
.flip-container {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* ===== 17. 移动端单词/音标字体自适应 ===== */
@media (max-width: 480px) {
  .word-front {
    font-size: clamp(24px, 8vw, 40px);
  }
  .phonetic-front {
    font-size: clamp(12px, 4vw, 16px);
  }
  .back-word-lg {
    font-size: clamp(22px, 7vw, 36px);
  }
}

/* ===== 18. 手势操作提示条 ===== */
.gesture-hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--muted);
  opacity: 0.6;
  pointer-events: none;
  z-index: 50;
  white-space: nowrap;
  animation: gestureHintFade 3s ease-in-out forwards;
}

@keyframes gestureHintFade {
  0% { opacity: 0; transform: translateX(-50%) translateY(6px); }
  15% { opacity: 0.6; transform: translateX(-50%) translateY(0); }
  80% { opacity: 0.6; }
  100% { opacity: 0; }
}

/* ── 触控目标 ≥44px（Apple HIG）────────────────────────────────────────
   2026-09-12 由 visual-audit 量测报出：小屏下 .login-tab 123x40、#loginPhone 258x39、
   #loginPhoneBtn 258x40、#loginSkipBtn 124x40 均不足 44px。
   仅 ≤480px 生效，避免改变桌面端按钮密度。 */
@media (max-width: 480px) {
  .btn,
  .login-tab,
  button,
  input,
  select,
  textarea {
    min-height: 44px;
  }
}