/* ============================================================
   移动端适配层 (mobile.css)
   ------------------------------------------------------------
   分层约定（改这个文件之前先读这段）：
     1. 桌面端（>768px）必须逐像素不变 —— 所以本文件所有规则一律写在
        @media (max-width: 768px) / (hover: none) / (pointer: coarse) 里。
        如果某条规则没法满足这一条，就说明它不该放这里。
     2. APP 专属的东西（刘海屏安全区、顶栏、迷你播放条、iframe 外壳）不放这，
        放 css/app.css，用 html.is-app 作用域隔离。
     3. 加载顺序：style.css → sidebar.css → 各页 css → anim.css → mobile.css → app.css。
        注意：**app.css 才是最后加载的那个**（校验于 music.html:26-29 的 <link> 顺序），
        所以同权重平手时赢的是 app.css，不是本文件。
        旧注释写「本文件最后加载」是错的 —— 这个差别是会咬人的：
        app.css 里给 .pl-drawer/.pl-drawer-mask 提 z-index（10006/10005，把抽屉
        抬到二级页之上）之所以生效，正是因为它在最后。若哪天有人调整 <link> 顺序，
        那些提升会静默失效，抽屉又钻回全屏播放页背后。
        本文件里想赢 app.css 的规则，要么提高特异性，要么带 !important。
        唯一的例外是 music.html：它在 app.css 之后还挂了 css/music-mobile.css
        （阶段一新增，只收音乐页专属的移动端规则），所以那一页的"最后一名"
        是 music-mobile.css 而不是 app.css。其余 8 页不受影响。

   层级(z-index)一览，改之前先看这里，别再随手加 99999：
     99999  #offline-bar / .js-lb-mask / #page-progress / #sakura-loading-layer
     99998  .sakura-tail（装饰拖尾）
     99997  #an-scrollbar（顶部滚动进度）
     99996  .an-ripple（点击涟漪）
      9998  .bot-tab（底部导航）
        96  .sidebar-toggle-btn
        95  .site-sidebar
        20  各页主容器 / 页脚
        10  .sakura-flurry / 花瓣
         0  .anon-bg-layer / #particles-js

   断点：768px(平板/手机) 420px(小屏手机)
   ============================================================ */

/* ---- 变量：tab 高度与安全区，全文件统一引用，别再散落写魔法数字 ----
   安全区提示：没有 viewport-fit=cover 时 env() 恒为 0。
   现在 9 个页面的 <meta viewport> 都自带 viewport-fit=cover（index.html 本来就有，
   其余 8 页补齐），所以手机浏览器里 --sat / --sab 也能拿到真正的刘海与手势条高度，
   桌面端不受影响（viewport-fit 在桌面浏览器里没有作用）。
   app-shell.js 里那段「没有就补上」的兜底保留，防止以后新增页面漏写。 */
@media (max-width: 768px) {
  :root {
    --tab-h: 56px; /* 底部 tab 高度；原来是写死的 46px */
    --sat: 0px;    /* 兜底值：不支持 env() 时用这里，顺序必须在 @supports 之前 */
    --sab: 0px;
  }
}
/* 支持 env() 时再覆盖成真实安全区数值（顺序很关键：兜底在前，覆盖在后） */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    :root {
      --sat: env(safe-area-inset-top, 0px);
      --sab: env(safe-area-inset-bottom, 0px);
    }
  }
}

/* A5 刘海屏安全区（底部） */
@supports (padding: max(0px)) {
  .site-footer,
  footer {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px) !important;
  }
}

/* 万能横向溢出兜底（不裁垂直内容）+ 禁回弹 / 禁下拉刷新链 */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }
  /* 注意：overscroll-behavior（禁下拉刷新/回弹）不在这里 —— 那是 APP 行为，
     只写在 css/app.css 的 html.is-app 下。手机浏览器访客要能下拉刷新。 */
  /* 触屏去掉双击缩放带来的 300ms 点击延迟；双指缩放仍然可用 */
  a,
  button,
  input,
  select,
  textarea,
  [role="button"] {
    touch-action: manipulation;
  }
}

/* A1 修复 Guestbook 390px 内容贴右缘 */
@media (max-width: 768px) {
  .guestbook-container {
    padding-right: 1.2rem !important;
    padding-left: 1.2rem !important;
    box-sizing: border-box !important;
  }
  .guestbook-main,
  .message-card,
  .guest-quote,
  .gb-form {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* A2 修复 Archives 390px 右缘深色压边（容器内留白 + 卡片收缩） */
@media (max-width: 768px) {
  .archive-container,
  .archive-sections,
  .section-block {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    box-sizing: border-box !important;
  }
  .card-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .media-card,
  .video-wrapper {
    max-width: 100% !important;
  }
}

/* A6 长内容与媒体自适应
   改动说明：原来这里给 pre/code/table/.tool-panel/.blog-content/.terminal/
   .work-card/.ns-item/.stat-card/.unlock-results 一律加了 overflow-x:auto，
   等于把「内容可能超宽」当成「制造一个横向滚动容器」来治。这些容器内部
   本来没有超宽内容，被强制成滚动容器后在手机上会产生嵌套横向滚动，
   和纵向手势互相抢，还容易把圆角/阴影裁掉。现在只给真正会超宽的元素
   （代码块、表格、结果输出）开横向滚动，其余只限制最大宽度。 */
@media (max-width: 768px) {
  pre,
  table,
  .result-area,
  .bili-code {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  code,
  .tool-panel,
  .blog-content,
  .terminal,
  .work-card,
  .ns-item,
  .stat-card,
  .unlock-results {
    max-width: 100% !important;
  }
  iframe,
  video,
  canvas,
  svg,
  img {
    max-width: 100% !important;
  }
  .video-wrapper {
    aspect-ratio: 16 / 9;
  }
  .video-wrapper iframe {
    width: 100% !important;
    height: 100% !important;
  }
  /* .works-grid / .filter-tabs 已从这里摘除（阶段一 T1.2）
     ------------------------------------------------------------
     · .works-grid 是音乐页的作品网格，music.css:854-857 早就给它写了
       「≤768 两列 repeat(2,1fr) !important」。本行同特异性、同为 !important，
       但 mobile.css 后加载 —— 于是静默把两列压成一列。实测 390 宽下
       .work-card 362×456，128 个作品变成长龙；把 .works-grid 摘掉后
       恢复成 176×270 两列。网格选择器混进这条通用批量规则里本身就是错的。
     · .filter-tabs 是 flex 容器（music.css:594 display:flex），在它身上写
       grid-template-columns 是死代码，留着只会误导后来人。 */
  .grid,
  .format-grid {
    grid-template-columns: 1fr !important;
  }
}

/* A4 触控目标放大
   原来统一给 40px，现在分级：一般工具按钮/筛选 44px，
   主行动按钮（提交、解锁、搜索）48px。
   注意：刻意不含 .mode-chip / .ctrl-btn —— 音乐页的控件行是 music.css
   特意排成「永不换行的一行」的，抬高它们会把那一行挤断。 */
@media (max-width: 768px) {
  .tool-btn, .filter-tab, .pl-view, .ns-play, .ns-add, .ns-dl, .wf-side-btn, .bili-btn, .btn-sm, .btn-cherry, .btn-secondary, .pl-hist-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn,
  .btn-primary,
  .gb-submit,
  .unlock-btn,
  .search-btn {
    min-height: 48px;
  }
  /* 工具页里那些 4px 12px 的小圆钮，单点太小 */
  .bili-btn-row .btn-cherry,
  .button-group .btn-sm {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* style.css 里那条 44px 只管 button 与 .btn，锚点是漏网的。
     实测剩下的 23 个不达标控件全是 <a>：App Bar 的回首页/分享（36x36）、
     页脚分享（40x24）、归档的「点击访问网站」（224x40）、
     以及 <a class="btn-cherry"> 这种锚点按钮（123x40）。 */
  .app-bar-home,
  .app-bar-share,
  .footer-share,
  a.external-link,
  a.btn,
  a.btn-primary,
  a.btn-secondary,
  a.btn-cherry,
  a.cherry-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 音量条：可视轨道只有 4px 高，手指根本按不准。
     不能直接把它撑到 44px —— 它在 .mixer（105x15，flex nowrap）里，
     抬高会把音乐页那行特意排成不换行的控件挤断（见本节开头的注释）。
     所以撑高元素本身、再用等量负外边距把占位抵消掉：
     触控区 44px，行高和轨道厚度都不变（background-clip 把粉条
     限回 4px 的内容盒，观感与改动前一致）。 */
  .volume-slider {
    height: 44px !important;
    padding: 20px 0 !important;
    margin: -20px 0 !important;
    box-sizing: border-box !important;
    background-clip: content-box;
  }
}

/* 通用小屏细节：文字断词、密度 */
@media (max-width: 768px) {
  .card-title,
  .post-title,
  .ns-name,
  .tool-title,
  .section-title,
  .info-label,
  .info-desc,
  .card-desc {
    word-break: break-word;
  }
}

/* ============================================================
   触屏：清掉 :hover 的「粘住」效果
   ------------------------------------------------------------
   触屏浏览器在点按后会保留 :hover 状态，于是按钮/图标会一直停在
   「抬起 3px + 发光」的样子，看起来像卡住了。这些规则在桌面端
   （hover:hover）完全不匹配，所以那 26 处 :hover 的桌面手感不变。
   ============================================================ */
@media (hover: none) {
  .social-links a:hover, .btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-cherry:hover, .cherry-btn:hover, .tool-tab:hover, .pl-hist-chip:hover, .mood-btn:hover, .social-links a:hover i {
    translate: none !important;
    scale: none !important;
    rotate: none !important;
  }
  /* 卡片类 hover 在 style.css 里本来就有 (hover:hover) 守卫，这里兜底一次 */
  .post-card:hover,
  .media-card:hover,
  .message-card:hover,
  .stat-item:hover,
  .clock-item:hover,
  .hot-item:hover,
  .gh-event:hover {
    translate: none !important;
  }
}

/* ===== 底部 Tab 导航（仅移动端显示，桌面隐藏）=====
   改动：4 项（日记/归档/音乐/工具），高度走 --tab-h，热区 56px。 */
.bot-tab {
  display: none;
}
@media (max-width: 768px) {
  .bot-tab {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    background: rgba(255, 250, 252, 0.96);
    border-top: 1px solid #ffd6e0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0 2px var(--sab);
    min-height: var(--tab-h);
    box-sizing: border-box;
    box-shadow: 0 -2px 12px rgba(255, 130, 160, 0.18);
    transform: none !important; /* 免疫入场 reveal 动画残留的 translateY(26px) */
    opacity: 1 !important;
  }
  /* 实测：导航从 4 项加到 7 项之后，每项的最小内容宽约 70px，
     7 × 70 = 490px > 390px 视口 —— 而 .bot-tab 是 position:fixed，
     溢出部分直接跑到屏幕外，「游戏」「影视」被裁掉（截图可见）。
     根因是 flex 项默认 min-width:auto，不允许收缩到内容宽以下。
     这里三件事一起做：允许收缩、禁止文字撑破、窄屏把字号收一档。 */
  .bot-tab a {
    flex: 1 1 0;
    min-width: 0;            /* 关键：允许收缩到内容宽以下 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--tab-h) - 4px);
    color: #96576b;
    text-decoration: none;
    font-size: 12px;
    gap: 3px;
  }
  .bot-tab a span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bot-tab a i {
    font-size: 20px;
  }
  .bot-tab a.active {
    color: #e85d86;
    font-weight: 600;
  }
  /* 7 项在 390px 下每项约 55px：图标 20px 已偏挤，标签 12px 也容易触边。
     这里按屏宽分两档收字号，保证 7 项都完整显示、不裁切。 */
  @media (max-width: 400px) {
    .bot-tab a {
      font-size: 11px;
      gap: 2px;
    }
    .bot-tab a i {
      font-size: 18px;
    }
  }
  @media (max-width: 340px) {
    .bot-tab a {
      font-size: 10px;
    }
    .bot-tab a i {
      font-size: 16px;
    }
  }
  .bot-tab a.active span {
    background: linear-gradient(180deg, #ff8fab, #e85d86);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  body {
    padding-bottom: calc(var(--tab-h) + var(--sab) + 6px);
  }
  /* 悬浮球站位兜底。注意级联实情：看板娘脚本（waifu.js，CDN 外部脚本）
     运行时会往文档里注入一条自己的
       #waifu-fab { bottom: calc(60px + env(safe-area-inset-bottom,0px)) !important }
     同样是单 id 选择器、同样 !important，但它是**运行时追加**的内联 <style>，
     源码顺序靠后 → 实际生效的是它，不是下面这条。这条只在脚本没跑到（CDN 被墙 /
     加载失败）时兜底，数值 68px 与脚本的 60px 都稳稳高于底栏，不会压到导航。 */
  #waifu-fab {
    bottom: calc(var(--tab-h) + var(--sab) + 12px) !important;
  }

  /* ---------- 看板娘缩小 ----------
     实测：看板娘是 200x280 的固定层（bottom:60px right:6px, z-index 9999），
     在 390px 宽的屏上横向独占 51%，正文一律被它压住 ——
     音乐页压歌词面板和进度条，TV 页压失败卡的重试按钮。
     它是 position:fixed、不参与布局，所以没法「绕开」，只能让它变小。

     缩放走 transform 而不是改 width/height：waifu.js 的拖拽写的是
     left/top，也不读自己的尺寸，用 transform 不会和它打架；
     而且 transform-origin 定在右下角，缩完仍然贴着屏幕右下角，
     不会飘到中间去。0.62 之后约 124x174，正文区基本全让出来了。

     !important 是必需的、而且必须放在窄屏断点里：
     waifu.js 会往 <head> 追加一条自己的内联 <style>
       #waifu-fab { bottom: calc(60px + env(safe-area-inset-bottom,0px)) !important }
     它是运行时插入、源码顺序最靠后，同权重下会压过我们。 */
  #waifu-fab {
    transform: scale(0.55) !important;
    transform-origin: 100% 100% !important;
  }
  /* 气泡挂在 fab 上一起被缩，字太小；单独放大回接近原始观感 */
  #waifu-fab .wf-bubble {
    font-size: 13px !important;
    max-width: 168px !important;
  }

  /* ---------- 看板娘避让（与 js/music-app.js 的 bindWaifuDodge 配套） ----------
     缩到 0.62 之后在 TV 页已经完全不挡内容了（那片正文是列表流，
     看板娘落在右下角的空白里）。但音乐页的播放器就在首屏中央，
     实测仍与歌词面板 / 进度条 / 控制行 / 音量行各重叠 101px 宽。

     所以再退一步：当 fab 与播放器/歌单卡片相交时，额外缩到 0.42
     并把不透明度降到 .55，让它退成背景。滑开之后恢复。
     用 opacity 而不是 display:none —— 后者会让 waifu.js 自己的
     显隐状态与我们的判断打架，而且淡出比"啪"地消失自然。 */
  /* 试过一路缩小（0.42 -> 0.3），但播放器是横跨整屏的，
     只靠缩小永远会压到控制行右半边（0.3 时仍重叠 41px 宽）。

     所以换思路：不是「缩到不挡」，而是「退出这条带」——
     往右下角塞到屏幕外侧，只露出一条边。transform-origin 在右下角，
     translate 用百分比是相对 fab 自身尺寸（200x280），
     translate(38%, 16%) 约等于右下各移 76px / 45px，
     配合 0.55 的缩放正好缩进右下角的圆角里，露出的部分贴边、
     不压任何控件。滑走之后再整个弹回来。

     这个位移只在 dodge 状态生效，不写进 waifu.js 拖拽用的 left/top，
     所以用户自己拖动过的位置不会被改掉。 */
  /* 位移这条路走不通，记一下原因免得下次再试：
     transform-origin: 100% 100% 会让 translate 在**缩放之后**的坐标系里
     解析，写 -190px 实际只挪 95px（还有一半被 origin 抵消），
     想把 200px 宽的图层挪出屏幕得给到 -400px 左右，非常难调。
     而播放器横跨整屏，缩小也永远挡得住（0.3 时仍重叠 41px）。

     所以不跟它较劲了：dodge 时就把它整个淡化下去。它是装饰，
     与正文冲突时让路的应该是装饰，不是歌词和进度条。
     .12 基本看不见，只留一点点影子暗示"它还在那儿"；
     滑开播放器后 0.24s 淡回完整状态，动效不会突兀。 */
  html.waifu-dodge #waifu-fab {
    opacity: 0.12 !important;
    transition: opacity 0.24s ease;
  }
  /* 淡化期间别再吃指针事件：用户想点的是它底下的播放控件。
     恢复显示时这个属性一并撤掉（规则不再匹配）。 */
  html.waifu-dodge #waifu-fab {
    pointer-events: none !important;
  }
  /* 拖动中的看板娘不参与避让：用户正在摆它，突然缩一下很怪 */
  html.waifu-dodge #waifu-fab.wf-dragging {
    transform: scale(0.62) !important;
    opacity: 1 !important;
  }
  /* 播放器进二级页（全屏播放）时正文已经不在原位，避让没有意义 */
  html.detail-open.waifu-dodge #waifu-fab,
  html.tvp-open.waifu-dodge #waifu-fab {
    transform: scale(0.62) !important;
    opacity: 1 !important;
  }
}

/* ===== 装饰动效降级（移动端）=====
   卡片浮动 / 按钮辉光 / 标题流光在 style.css 的 768 断点里已经是
   animation:none 了，这里只补还没被关掉的三样：
     1. #an-aurora 全屏 blur(58px) 光斑层 —— 最贵的一块，手机上几乎看不出来
     2. 花瓣动画与粒子的数量在 JS 里降（见 js/common.js、js/particles-config.js）
     3. 页面切到后台时把装饰性动画全停掉（common.js 里的 visibilitychange
        会加 html.page-hidden），不要在黑屏后台白烧电 */
@media (max-width: 768px) {
  #an-aurora {
    display: none !important;
  }
}
/* 切到后台时把装饰层整体摘掉。.page-hidden 由 js/common.js 的
   visibilitychange 维护（切回来会立刻移除），只在 ≤768px 生效，
   桌面端一行都不匹配。 */
@media (max-width: 768px) {
  html.page-hidden #sakura-flurry,
  html.page-hidden #particles-js,
  html.page-hidden #an-aurora,
  html.page-hidden #an-scrollbar,
  html.page-hidden #waifu,
  html.page-hidden #waifu-fab {
    display: none !important;
  }
}

/* ===== 页脚分享链接 ===== */
.footer-share {
  display: inline-block;
  margin: 0 0 4px 8px;
  color: inherit;
  opacity: 0.85;
  font-size: 0.9em;
  text-decoration: none;
  cursor: pointer;
}
.footer-share:hover {
  opacity: 1;
  color: #e85d86;
}

/* ===== 大图 Lightbox =====
   max-height 用 dvh：手机浏览器地址栏收起/展开时 vh 不变，dvh 才是真实可视高度 */
.js-lb-mask {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(20, 8, 14, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: js-lb-fade 0.18s ease;
}
.js-lb-img {
  max-width: 92vw;
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
@supports (height: 100dvh) {
  @media (max-width: 768px) {
    .js-lb-img {
      max-height: 86dvh;
    }
  }
}
@keyframes js-lb-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
img.js-lightbox {
  cursor: zoom-in;
}

/* ===== 移动端：音乐歌单抽屉用真实可视高度 ===== */
@supports (height: 100dvh) {
  @media (max-width: 768px) {
    .pl-drawer {
      height: 100dvh;
      padding-bottom: calc(1rem + var(--sab));
    }
  }
}

@media (max-width: 480px) {
  .info-item {
    padding: 0.7rem 0.5rem !important;
  }
}

/* ============================================================
   有顶栏时（html.has-appbar）的「去网页化」排版
   ------------------------------------------------------------
   app-shell.js 在移动端注入顶部 App Bar 并给 <html> 加 .has-appbar。
   一旦有了顶栏，原来那套网页端排版线索就成了噪音：
     · 每页自己的大标题 <h1 class="blog-title"> 会和顶栏标题重复
     · main 带 margin:0.5rem 0.4rem 的外框，看着像网页里嵌了一张卡片
     · 卡片又各带一圈左右外边距，和容器内边距叠成双层留白
     · 32px 的大圆角在满宽卡片上很「网页」
   这里把它们收掉：内容贴边只留 14px 呼吸位，标题交给顶栏，
   原来的副标题 .subhead 降级成左对齐小字保留（那点可爱劲儿别丢）。
   注意：这些规则一律以 html.has-appbar 为前提 —— JS 没跑或桌面端
   都不命中，所以页面标题不会出现「消失了又没顶栏」的情况。
   ============================================================ */
@media (max-width: 768px) {
  html.has-appbar .about-container,
  html.has-appbar .blog-container,
  html.has-appbar .archive-container,
  html.has-appbar .guestbook-container,
  html.has-appbar .music-container,
  html.has-appbar .toolbox-container,
  html.has-appbar .notfound-wrap,
  html.has-appbar main {
    margin: 0 !important;
    padding: 12px 14px 1.5rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 卡片不再自带左右外边距，避免和容器内边距叠成双层留白 */
  html.has-appbar .profile-card,
  html.has-appbar .card,
  html.has-appbar .post-card,
  html.has-appbar .page-card,
  html.has-appbar .message-card,
  html.has-appbar .media-card,
  html.has-appbar .player-card,
  html.has-appbar .tool-panel,
  html.has-appbar .info-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  /* 满宽卡片上 32px 圆角太「网页」，收到接近原生卡片的 18px */
  html.has-appbar .profile-card,
  html.has-appbar .card,
  html.has-appbar .post-card,
  html.has-appbar .page-card,
  html.has-appbar .message-card,
  html.has-appbar .media-card,
  html.has-appbar .player-card {
    border-radius: 1.1rem !important;
  }

  /* 页头条：只对 APP（html.is-app）去网页化 —— 手机网页必须保住 H1。
     原因：搜索引擎是「移动优先索引」，抓取与排名用的是手机版渲染结果，
     在手机网页上 display:none 掉 H1 等于直接伤排名，而网页端是最高优先级。
     APP 里相反：顶栏标题已经把页面名说清楚了，页面再重复一遍大标题才是噪音。 */
  html.is-app.has-appbar .about-header,
  html.is-app.has-appbar .blog-header,
  html.is-app.has-appbar .archive-header,
  html.is-app.has-appbar .guestbook-header,
  html.is-app.has-appbar .music-header,
  html.is-app.has-appbar .toolbox-header {
    text-align: left !important;
    margin: 0 0 0.9rem !important;
    padding: 0 !important;
    border-bottom: none !important;
  }
  /* 标题交给顶栏，APP 里不再重复一遍 */
  html.is-app.has-appbar .about-header h1.blog-title,
  html.is-app.has-appbar .blog-header h1.blog-title,
  html.is-app.has-appbar .archive-header h1.blog-title,
  html.is-app.has-appbar .guestbook-header h1.blog-title,
  html.is-app.has-appbar .music-header h1.blog-title,
  html.is-app.has-appbar .toolbox-header h1.blog-title {
    display: none !important;
  }
  html.is-app.has-appbar .subhead {
    display: block !important;
    margin: 0 0 0.6rem !important;
    padding: 0 !important;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    font-size: 0.8rem !important;
    color: #b5768c !important;
    text-align: left !important;
    line-height: 1.5 !important;
  }
}

/* ===== iOS 聚焦缩放 =====
   input / select / textarea 的字号小于 16px 时，Safari 会在聚焦的瞬间把整个
   页面放大，用户得双指缩回去才行 —— 移动端最容易踩的坑之一。全站实测 142 个
   控件踩中（Tools 135、music 4、Journal 2、TV 1）。
   桌面端没有这个问题，所以只在窄屏统一兜住，桌面端保留原来的 0.9rem 观感。

   两个细节：
   · 逐个列 type，不用 :not() 的选择器列表 —— 后者要到 Safari 14.1 才支持，
     而且一旦解析不了整条规则会被直接丢掉（等于没改），列 type 在哪都能解析。
   · !important 是必需的：Tools 的 .xt-row input[type="number"]（0,2,1）、
     .bili-input-row input[type="text"] 和 Journal 的 #gbView .input-group input
     都比这条（0,1,1）更具体，不加重写就压不住。
   range / checkbox / radio / color / file 聚焦不会触发缩放，一律不碰。 */
@media (max-width: 768px) {
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ===== 点按反馈统一 =====
   先做了普查（9 个页面逐元素量计算值 + 遍历 CSSOM 找 :active 规则），
   结论和最初的假设相反：全站 a / button 其实都已经有粉色高亮和 :active
   反馈，覆盖是完整的。真正不一致的只有两处：

   1) 表单控件的点按高亮是安卓 UA 默认的蓝色 rgba(51,181,229,0.4)。
      style.css 里那条粉色高亮的清单写的是
      a,button,.btn,input[type="submit"],input[type="button"] ——
      文本框 / 多行框 / 下拉框都不在里面。在粉色站点上点一下闪一片蓝。
   2) 按压幅度实际有三档。style.css:455 给 button 的是
      transform:scale(.96)，anim.css:219 又给同一批元素加了 scale:.972
      （那里刻意用独立属性，好和动画用的 translate/transform 叠加），
      两个相乘实际是 .933；没被 anim.css 列到的普通链接只有 .96；
      被列到的卡片只有 .972。三档肉眼分不出来，但一套手感应该只有一个数。

   统一到 .96：这是 style.css 已经给链接和按钮定下的值，也就是保留占多数
   的既有手感，只把卡片和叠加那份拉齐。scale:1 是为了关掉 anim.css 那一份，
   否则又会乘出第二档。 */
@media (max-width: 768px) {
  input,
  textarea,
  select {
    -webkit-tap-highlight-color: rgba(255, 182, 193, 0.25) !important;
  }

  a:active,
  button:active,
  .btn:active,
  .page-tab:active,
  .ctrl-btn:active,
  .mode-chip:active,
  .mood-btn:active,
  .emoji-item:active,
  .card:active,
  .post-card:active,
  .media-card:active,
  .page-card:active,
  .player-card:active,
  .work-card:active,
  .link-card:active {
    transform: scale(0.96) !important;
    scale: 1 !important;
  }
}