/* ============================================================
   KRONOS ZHOU · 全站移动端补丁
   路径：shared/mobile.css
   ------------------------------------------------------------
   为什么单独一个文件：
     顶栏那套窄屏样式已经在 shared/site-header-mobile.css 里管着
     「logo + 汉堡 + 下拉菜单」；这个文件管的是**除此之外**的一切：
       · 共用的页头 / 页脚 / 列表页骨架在手机上的收窄
       · 触屏设备（没有 hover）的点击热区与反馈
       · 360px 这种窄屏的兜底
     单独成文件是为了两件事：
       1. 8 个改版页面自己 <link> 它；
       2. 其余 30 多个子页面由 shared/site-header.js 自动挂上
          （和 site-header-mobile.css 同样的做法），
          所以老页面也能一起受益，不用一个个改 HTML。

   ⚠️ 两条规矩：
     · 只写 max-width / 形态判断，绝不写桌面尺寸 —— 它永远排在最后。
     · 子页面自己带主题变量（--kz-* 或 main-page.css 的别名），
       所以这里只用"带兜底值的 var()"，不写死颜色。
   ============================================================ */

/* ============================================================
   1. 触屏设备：没有 hover，改成"点了有反馈"
   ------------------------------------------------------------
   手机上 hover 会在点完之后粘住（比如卡片一直歪着），所以统一取消
   位移类 hover；同时把可点元素撑到 44px 以上（触屏可点性下限）。
   ============================================================ */
@media (hover: none) {
  /* --- 位移 / 缩放类 hover 一律取消 --- */
  .btn:hover,
  .btn-pill:hover,
  .btn-pill:hover .arrow,
  .tool-card:hover,
  .article-item:hover,
  .article-item:hover .article-arrow,
  .journal-item:hover,
  .journal-item:hover .journal-arrow,
  .nav-sayhi:hover,
  .nav-sayhi:hover .arrow,
  .nav-auth:hover,
  .filter-btn:hover,
  .index-chip:hover,
  .btn-enter-articles:hover,
  .contact-email:hover {
    transform: none;
  }

  /* --- 可点元素最小 44px --- */
  .nav-link,
  .btn,
  .btn-pill,
  .filter-btn,
  .btn-enter-articles,
  .tool-card,
  .article-item,
  .index-chip,
  .nav-auth,
  .mobile-menu-toggle,
  .mobile-menu-link {
    min-height: 44px;
  }

  .btn-pill,
  .filter-btn,
  .index-chip {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  /* --- 按下时给一个明确的反馈（替掉 hover） --- */
  .btn:active,
  .btn-pill:active,
  .filter-btn:active,
  .index-chip:active,
  .btn-enter-articles:active {
    transform: scale(0.97);
  }

  .tool-card:active,
  .article-item:active {
    background: hsl(var(--surface, 0 0% 8%));
    border-color: rgba(var(--accent-rgb, 78, 133, 191), 0.45);
  }

  /* --- 只靠 hover 才出现的内容，触屏上要有个说法 --- */
  /* 顶栏：悬停才压出的阴影，触屏改成"一直有"（否则浮在内容上分不清层） */
  .site-header-inner {
    box-shadow: var(--kz-shadow-panel, var(--shadow-panel, 0 8px 26px -10px rgba(0, 0, 0, 0.75)));
  }
}

/* ============================================================
   2. 页头 / 页脚共用部分（所有页面）
   ============================================================ */
@media (max-width: 900px) {
  /* 页脚信息行：手机上居中、行距放开一点 */
  .site-footer {
    padding: 2rem 1.15rem 1.25rem;
    gap: 0.4rem 0.9rem;
    font-size: 0.8125rem;
  }

  .footer-line {
    font-size: 0.78rem;
  }

  /* 备案号那一行：ICP 号 + 图标 + 网安号必须**始终在同一行**。
     ⚠️ 这里不要再写 flex-wrap: wrap —— 那会让这行在窄屏从内部折成两行。
        字号缩放由 shared/site-footer.js 注入的 @media 负责（那份在层叠里更靠后，
        它是最终生效的），这里只保证不抢它的 nowrap。
     360px 上整条约 400px，所以那边会按视口把字号缩到 ~10px。 */
  .footer-icp {
    max-width: 100%;
    line-height: 1.8;
    flex-wrap: nowrap;
    justify-content: center;
  }

  .footer-icp .footer-gongan {
    white-space: nowrap;
  }

  /* 表格 / 代码块这类"天然会溢出"的内容：允许横向滚，不要撑破页面 */
  .index-page table,
  .index-page pre,
  .index-page code {
    max-width: 100%;
    overflow-x: auto;
  }

  .index-page img,
  .index-page video {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 430px) {
  .site-footer {
    padding: 1.75rem 1rem 1.1rem;
  }
}

/* ============================================================
   1.1 全局防溢出 + 刘海屏 / 手势条安全区
   ------------------------------------------------------------
   手机上最烦的两件事：
     · 某个长单词 / 长表格把整页撑出横向滚动条 → 全局锁死横向
     · 屏幕上铺到刘海和手势条底下 → 用 env() 把内容拉回安全区
       （页面 viewport 都写了 viewport-fit=cover）
   不支持 env() / clip 的浏览器整条无效，不会出问题。
   ============================================================ */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 长内容默认允许在词内换行，避免撑破容器 */
.index-page .index-grid,
.index-page .index-toolbar,
.index-page .page-hero {
  min-width: 0;
}

.index-page .index-grid > * {
  min-width: 0;
}

/* 长单词 / URL 兜底断行 */
.footer-icp a,
.wp-link-url,
.index-page code {
  overflow-wrap: anywhere;
}

.site-header {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  /* 顶部：贴着状态栏的机型要往下让一点 */
  padding-top: max(1rem, env(safe-area-inset-top));
}

.site-footer {
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

/* 打印时不需要这些 */
@media print {
  .site-header,
  .site-footer {
    padding: 0;
  }
}

@media (max-width: 360px) {
  .site-footer {
    padding: 1.5rem 0.85rem 1rem;
  }

  .footer-line {
    font-size: 0.75rem;
  }
}

/* ============================================================
   3. 列表页骨架（.index-page）
   ------------------------------------------------------------
   列表页的卡片 / 工具条由各页 css 负责，这里只管六页共用的骨架：
   标题区、工具条换行、卡片内边距、以及"一条卡片的横向排版"。
   ============================================================ */
@media (max-width: 768px) {
  .index-page .page-hero {
    margin-top: 5.25rem;
    padding: 2rem 1.25rem;
  }

  .index-page .page-hero-title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  /* 工具条：搜索框独占一行，胶囊换行，计数靠左 */
  .index-page .index-toolbar {
    gap: 0.5rem;
  }

  .index-page .index-search {
    flex: 1 1 100%;
  }

  .index-page .index-count {
    margin-left: 0;
    width: 100%;
    font-size: 0.78rem;
  }

  /* 列表卡片：手机上内边距收一点，箭头别再单独占一列 */
  .index-page .index-grid {
    gap: 0.75rem;
  }
}

@media (max-width: 430px) {
  .index-page .page-hero {
    margin-top: 4.75rem;
    padding: 1.6rem 1rem;
    border-radius: 1.25rem;
  }

  .index-page .page-hero-title {
    font-size: clamp(1.6rem, 8vw, 2rem);
  }

  .index-page .page-hero-subtitle {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
  }

  .index-page .page-hero-desc,
  .index-page .vibe-hero-desc,
  .index-page .game-hero-desc,
  .index-page .know-hero-desc {
    font-size: 0.82rem;
    line-height: 1.7;
  }
}

@media (max-width: 360px) {
  .index-page .page-hero {
    margin-top: 4.5rem;
    padding: 1.4rem 0.9rem;
  }

  .index-page .index-chip {
    font-size: 0.75rem;
    padding: 0.45rem 0.7rem;
  }
}

/* ============================================================
   4. 登录页（它自带内联样式，这里只补通用的触屏与窄屏细节）
   ============================================================ */
@media (hover: none) {
  .login-btn:hover:not(:disabled),
  .code-btn:hover:not(:disabled) {
    transform: none;
  }

  .login-btn:active:not(:disabled),
  .code-btn:active:not(:disabled) {
    transform: scale(0.98);
  }
}

@media (max-width: 360px) {
  .login-panel {
    padding: 1.4rem 1rem 1.2rem;
  }

  .code-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .code-btn {
    padding: 0.7rem 1rem;
  }
}

/* ============================================================
   4.1 「我的」页面：窄屏下的卡片与操作区
   ------------------------------------------------------------
   这一页的 js 会往 .pf-data-item / .pf-confirm-slot 里塞内容，
   所以只收窄外壳，不动结构。
   ============================================================ */
@media (max-width: 430px) {
  /* 注销账号那个确认框：手机上两边留白太窄会顶到勾选框 */
  .pf-card {
    padding: 1.25rem 1.05rem 1.15rem;
    border-radius: 1.25rem;
  }

  .pf-card-title {
    font-size: 0.9375rem;
    gap: 0.4rem;
  }

  .pf-card-title small {
    font-size: 0.68rem;
  }

  /* 账号概览：头像 + 用户名在窄屏排成一列，别挤成两行 */
  .pf-account-head {
    gap: 0.9rem;
  }

  .pf-avatar {
    width: 54px;
    height: 54px;
    font-size: 1.1rem;
  }

  .pf-username {
    font-size: 1.25rem;
  }

  /* 统计格子：360px 也放得下两个 */
  .pf-account-stats {
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    gap: 0.45rem;
  }

  /* 按钮区：窄屏一行一个，点着不容易误触 */
  .pf-data-actions {
    gap: 0.45rem;
  }

  .pf-data-actions .pf-btn,
  .pf-data-actions .pf-btn-sm {
    min-height: 44px;
    flex: 1 1 auto;
    justify-content: center;
  }

  .pf-btn-sm {
    min-height: 44px;
  }

  .pf-input-row .pf-input,
  .pf-input-row .pf-btn {
    flex: 1 1 100%;
  }

  /* 提示条要避开手势条 */
  .pf-toast {
    bottom: max(2rem, env(safe-area-inset-bottom));
    left: 1rem;
    right: 1rem;
    transform: none;
    text-align: center;
    border-radius: 1rem;
  }
}

@media (max-width: 360px) {
  .pf-account-stats {
    grid-template-columns: 1fr 1fr;
  }

  .pf-card-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }

  .pf-rules,
  .pf-danger-note {
    font-size: 0.78rem;
  }
}

/* ============================================================
   5. 减少动态效果：移动端补丁里也不要有动效残留
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .btn:active,
  .btn-pill:active,
  .filter-btn:active,
  .index-chip:active,
  .btn-enter-articles:active,
  .login-btn:active:not(:disabled),
  .code-btn:active:not(:disabled) {
    transform: none;
  }
}