/* ============================================================
   青云剑宗 · 移动端基础优化（2026-09-14）
   只做手机端体验增强，不改动各页面本身的视觉风格。
   需要配合 <meta name="viewport" ... viewport-fit=cover> 使用。
   ============================================================ */

/* 1. 防止 iOS 横竖屏切换时字号被自动放大 */
html{ -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; text-size-adjust:100%; }

/* 2. 移动端最容易出的问题：某个元素撑破宽度导致整页可左右拖动 */
html, body{ overflow-x:hidden; }

/* 3. 媒体元素自适应，避免超出屏幕 */
img, svg, video, canvas, iframe{ max-width:100%; }

/* 4. 输入类控件字号不低于 16px —— iOS 聚焦时若小于 16px 会自动放大整页 */
input, textarea, select{ font-size:16px; }

/* 5. 触控目标：主要可点区域保证足够的可点高度，减少误触 */
.btn, .nav-item, .task-btn, .tab, .stat, .bind-btn, .chip{ min-height:44px; }

/* 6. 屏幕上有鼠标时才依赖 hover；触摸屏用按下反馈代替 */
@media (hover:hover){
  .nav-item:hover{ }
}
button:active, .btn:active, .nav-item:active, .task-btn:active,
.tab:active, .stat:active{ opacity:.72; transition:opacity .1s; }

/* 7. 全面屏安全区适配（配合 viewport-fit=cover） */
@supports (padding: env(safe-area-inset-bottom)){
  body{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  /* 吸底元素需要额外留出底部安全区 */
  .active-timer-bar, .tabs, .bottom-bar{
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }
}

/* 8. 长单词 / 长链接不撑破卡片 */
.rec-words, .task-name, .value, .card, .mini{ word-break:break-word; }

/* 9. 顶部栏「返回」按钮：统一成 44px 触控区（原来只有 20px，手机上很难点准） */
.back, .back-btn{
  min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
}
.back{ margin-left:-8px; }            /* 补偿内边距，视觉上仍贴左对齐 */
.back-btn{ flex-shrink:0; }

/* 10. 子页面顶部栏统一：标题不换行、箭头与标题基线对齐 */
.head, .header, .top-row{ align-items:center; }
.head > *, .top-row > *{ flex-shrink:0; }
.head .title, .top-row .title, .page-title{
  flex:1 1 auto; min-width:0;
  font-size:18px; font-weight:500; color:#191919;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ============================================================
   11. 主系统底部导航（由 /js/bottomnav.js 自动注入）
   ============================================================ */
.bn-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; background:#fff; border-top:1px solid #E5E5E5;
  padding-bottom:env(safe-area-inset-bottom);
}
.bn-item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:7px 2px 8px; text-decoration:none;
  color:#888888; font-size:11px; -webkit-tap-highlight-color:transparent;
}
.bn-item .bn-ico{ font-size:19px; line-height:1; opacity:.7; }
.bn-item .bn-txt{ line-height:1; }
.bn-item.bn-on{ color:#07C160; font-weight:500; }
.bn-item.bn-on .bn-ico{ opacity:1; }
.bn-item:active{ opacity:.7; }
/* 有底部导航的页面留出空间，避免内容被遮挡 */
body.bn-has{ padding-bottom:84px; }

/* 计时条 / 其它吸底元素：上移到导航栏之上，避免与底部导航重叠
   导航栏本身高度约 48px（图标19 + 文字11 + 上下内边距15） */
body.bn-has .active-timer-bar,
body.bn-has .bottom-bar{
  bottom:calc(49px + env(safe-area-inset-bottom));
  padding-bottom:10px;          /* 抵消全局给吸底元素加的 safe-area 内边距 */
}
/* 让内容再往下留一点，保证计时条不会压住最后一张卡片 */
body.bn-has.has-timer{ padding-bottom:150px; }