/* ==========================================================================
   AsherLab v2.1 · 手机端布局与动效收敛（仅 <=800px 生效）
   --------------------------------------------------------------------------
   设计原则：
   1. 只覆盖手机断点，桌面端样式一行不动。
   2. 保留品牌气质（青绿 / 橙 / 纸色），但把"层层叠叠的浮动导航""每页
      4 秒的入场动画""自动轮播"这类在手机上代价高、又容易错位的东西收掉。
   3. 布局尽量回到正常文档流，不再用绝对定位把标题、导航、提示线钉在固定
      像素上 —— 手机标题行数一变，固定 top 就会错位。
   ========================================================================== */

@media (max-width: 800px) {
  /* ------------------------------------------------------------------------
     0. 全局：去掉最耗性能的固定噪点层，长英文/URL 允许断行，输入框 16px
        （iOS 对 <16px 的输入框会自动放大页面，造成"整页错位"的假象）。
     ------------------------------------------------------------------------ */
  .noise { display: none !important; }
  html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
  body { -webkit-tap-highlight-color: transparent; }

  :where(.article-body, .showcase-panel, .note-card, .long-note, .musing-card,
         .project-content, .feedback-card, .comment-body) {
    overflow-wrap: anywhere;
  }

  /* 表单控件统一 16px：既防 iOS 聚焦缩放，也更好点按 */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
  }
  .site-search input::placeholder,
  .inpage-search-input::placeholder {
    font-size: 12px;
  }

  /* 正文里的宽表格改成可横向滚动，避免把页面撑出屏幕 */
  .article-body table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 触屏上悬停位移没有意义，统一取消（避免点按后"卡住"的位移） */
  .project-card:is(:hover, :focus-within),
  .tech-tile:is(:hover, :focus-within),
  .home-life-card a:is(:hover, :focus-visible) .home-life-media img {
    transform: none;
  }

  /* ------------------------------------------------------------------------
     1. 子页面顶栏：品牌 + 工具一行，导航胶囊单独一行。
        原来在 390px 下会变成"品牌 / 搜索 / 反馈 / 导航两行"共四行，
        既吃掉首屏又把内容顶下去。
     ------------------------------------------------------------------------ */
  .subpage-top-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "brand tools"
      "dock  dock";
    align-items: center;
    gap: 6px 10px;
    width: calc(100% - 24px);
    min-height: 0;
    padding: 8px 0 4px;
    flex-wrap: nowrap;
  }
  .subpage-top-bar .brand {
    grid-area: brand;
    gap: 7px;
    font-size: 12px;
    letter-spacing: .14em;
  }
  .subpage-top-bar .brand-mark {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }
  .subpage-top-bar .site-tools {
    grid-area: tools;
    justify-self: end;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0 6px;
    min-width: 0;
    margin: 0;
    min-height: 32px;
  }
  .subpage-top-bar .site-search {
    flex: 0 1 auto;
    height: 32px;
    min-height: 32px;
    padding: 0 3px 0 8px;
  }
  .subpage-top-bar .site-search input {
    width: clamp(52px, 17vw, 74px);
    height: 30px;
    min-height: 30px;
    line-height: 30px;
    padding: 0 2px;
    font-size: 16px;
  }
  .subpage-top-bar .site-search:hover input,
  .subpage-top-bar .site-search:focus-within input {
    width: min(150px, 42vw);
    padding: 0 8px;
  }
  .subpage-top-bar .site-search button {
    min-width: 32px;
    height: 24px;
    padding: 0 7px;
    font-size: 10.5px;
  }
  .subpage-top-bar .site-tools > a,
  .subpage-top-bar .feedback-pill {
    flex: 0 0 auto;
    white-space: nowrap;
    height: 32px;
    min-height: 32px;
    line-height: 32px;
    padding: 0 10px;
    font-size: 11px;
  }
  .subpage-nav-dock-wrap {
    grid-area: dock;
    order: 0;
    width: 100%;
    min-width: 0;
    margin: 0;
  }
  .subpage-nav-dock {
    width: 100%;
    justify-content: center;
    gap: 2px;
    padding: 3px 5px;
    border-radius: 16px;
  }
  .subpage-nav-dock .dock-pill {
    height: 30px;
    min-height: 30px;
    line-height: 30px;
    padding: 0 8px;
    font-size: 10.5px;
  }
  .subpage-nav-dock .dock-divider { margin: 0 3px; }

  /* 子页面首屏少留一点空白，把内容提上来 */
  .ce-entry main { padding-top: 18px; }
  .page-hero { padding: 44px 0 40px; }
  .page-hero h1 { font-size: clamp(42px, 14vw, 64px); }

  /* ------------------------------------------------------------------------
     2. 首页：导航回到文档流，标题不再是"被胶囊压住"的那一行；
        人机之手 / 开场电影 / 线框提示在手机上收起，保留静态线框主视觉。
     ------------------------------------------------------------------------ */
  .home-showcase .site-header {
    height: 56px;
    min-height: 56px;
  }
  /* 681–800px 也要让首页自然增高：否则内容流到 100svh 之外会被裁掉 */
  html.showcase-enhanced body.home-showcase,
  body.home-showcase {
    height: auto;
    min-height: 100svh;
  }
  html.showcase-enhanced .home-showcase .showcase,
  .home-showcase .showcase {
    height: auto;
    min-height: 0;
    overflow: clip;
  }
  .home-showcase .brand { font-size: 12px; }
  .home-showcase .site-tools {
    min-height: 32px;
    margin-top: 2px;
  }
  .home-showcase .site-search {
    height: 32px;
    min-height: 32px;
    padding: 0 3px 0 8px;
  }
  .home-showcase .site-search input {
    width: clamp(64px, 20vw, 88px);
    height: 30px;
    min-height: 30px;
    line-height: 30px;
    font-size: 16px;
  }
  .home-showcase .site-search:hover input,
  .home-showcase .site-search:focus-within input {
    width: min(150px, 40vw);
    padding: 0 8px;
  }
  .home-showcase .site-tools > a {
    height: 32px;
    min-height: 32px;
    line-height: 32px;
    padding: 0 11px;
  }

  /* 导航胶囊：从绝对定位改成正常流，换行也不再盖住标题 */
  .showcase-nav-dock-wrap {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    display: flex;
    justify-content: center;
    margin: 6px auto 0;
    padding: 0 10px;
  }
  .showcase-nav-dock {
    width: 100%;
    max-width: 370px;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px 5px;
    border-radius: 16px;
  }
  .showcase-nav-dock .dock-pill {
    height: 30px;
    min-height: 30px;
    line-height: 30px;
    padding: 0 8px;
    font-size: 10px;
  }
  .showcase-nav-dock .dock-divider { margin: 0 3px; }

  .showcase-heading,
  html.showcase-enhanced .showcase-heading {
    position: relative;
    inset: auto;
    padding: 16px 14px 0;
  }
  .showcase-heading .eyebrow { margin-bottom: 5px; }
  .showcase .hero-title,
  html.showcase-enhanced .showcase .hero-title {
    font-size: clamp(27px, 7vw, 34px);
    line-height: 1.1;
  }

  /* 主视觉回到文档流：标题多一行也不会和线框/导航打架 */
  html.showcase-enhanced .home-showcase .showcase .hero-visual {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(240px, 66vw, 300px);
    min-height: 0;
    margin: 0;
    z-index: 2;
  }
  .showcase .hero-static,
  html.showcase-enhanced .showcase .hero-static {
    top: 8%;
    height: 84%;
    width: min(330px, 86%);
  }
  /* 手机上不再渲染 canvas（也停止 20fps 重绘），改用同一份静态线框 SVG */
  .home-showcase .hero-wireframe { display: none !important; }
  .home-showcase .hero-visual.has-canvas .hero-static { display: block; }
  .home-showcase .hero-halo { display: none; }
  .showcase-hands { display: none !important; }

  /* 模块切换：变成正常流里的一行胶囊 */
  html.showcase-enhanced .showcase-module-nav {
    margin-top: 0;
    padding: 16px 14px 0;
    gap: 6px;
    flex-wrap: wrap;
  }
  .showcase-module-nav button {
    flex: 0 1 auto;
    min-height: 40px;
    padding: 8px 8px;
    font-size: 10.5px;
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* 用户要求删掉首页"点选下方模块，探索 AsherLab"提示（含重播按钮） */
  .showcase-hint { display: none !important; }

  /* 展开模块后的"返回全景"改成流内按钮，不再钉在 478px 的固定位置 */
  html.showcase-enhanced .showcase-reset {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    display: none;
    margin: 10px auto 0;
    padding: 8px 14px;
    min-height: 40px;
  }
  html.showcase-enhanced .showcase.is-focused .showcase-reset { display: block; }
  html.showcase-enhanced .showcase-reset span { display: none; }

  html.showcase-enhanced .showcase-panels,
  .showcase-panels {
    margin-top: 14px;
    padding: 0 18px;
  }
  html.showcase-enhanced .showcase-panel {
    padding-bottom: 14px;
  }
  .showcase-panel h2 { font-size: clamp(28px, 8vw, 38px); }
  .showcase-summary { font-size: 12.5px; line-height: 1.75; }
  .showcase-enter {
    width: 100%;
    justify-content: center;
    min-height: 42px;
  }

  /* 开场动画在手机上直接结束（JS 也会跳过），这里再兜一层底：
     即使脚本很慢，标题和主视觉也不会长时间停在透明状态。 */
  body.home-intro-pending .showcase-heading,
  body.page-transitioning .showcase-heading {
    opacity: 1 !important;
    transform: none !important;
  }
  body.home-intro-pending .hero-visual,
  body.page-transitioning .hero-visual {
    opacity: 1 !important;
    transform: none !important;
  }
  body.home-intro-pending .showcase-hands,
  body.page-transitioning .showcase-hands {
    display: none !important;
  }

  /* ------------------------------------------------------------------------
     3. 项目页：自动翻牌停止，卡片与点按目标保持稳定
     ------------------------------------------------------------------------ */
  .ce-projects .poker-stage-wrap { overflow: clip; }
  .ce-projects .poker-card {
    transition: transform .28s ease, opacity .18s ease !important;
  }

  /* ------------------------------------------------------------------------
     4. 教程页：手机上收起被卡片压住的超大描边字，指南针卡片保持完整
     ------------------------------------------------------------------------ */
  .showcase-wordmark.tutorial-wordmark { display: none; }
  .compass-stage { height: 600px; }
  .compass-card-north { top: 8%; }
  .compass-card-south { top: 84%; }
  /* 轮播/查看全部收成右上角竖排小工具，避开北向与南向卡片 */
  .compass-bottom-bar {
    top: 8px;
    right: 8px;
    bottom: auto;
    left: auto;
    transform: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }

  /* 技术栈：默认手动横向浏览，不再自动滚动 */
  .ce-stack-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ce-stack-viewport::-webkit-scrollbar { display: none; }
  .ce-stack-track { animation: none !important; transform: none !important; }
  .ce-stack-clone { display: none !important; }
  .ce-stack-toggle { display: none; }

  /* ------------------------------------------------------------------------
     5. 笔记页：手机上一页只留最必要的信息，书页别空半页
     ------------------------------------------------------------------------ */
  .nb-page-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .nb-page-description + .nb-page-keywords { display: none; }
  .nb-book-controls { margin-top: 26px; }

  /* ------------------------------------------------------------------------
     6. ME&LIFE：筛选/搜索从照片上移开，照片舞台不再被顶栏压住
     ------------------------------------------------------------------------ */
  .cylinder-showcase-fullscreen {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
  }
  .cylinder-showcase-fullscreen .cylinder-top-actions {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    order: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 4px 16px 12px;
  }
  .life-photo-search.inpage-mini-search {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    order: 1;
  }
  .life-spin-toggle {
    order: 2;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 11px;
  }
  .cylinder-filter-tabs {
    order: 3;
    flex: 1 1 100%;
    justify-content: space-between;
    padding: 4px;
  }
  .cylinder-filter-tab {
    flex: 1 1 0;
    justify-content: center;
    padding: 7px 6px;
    font-size: 11.5px;
  }
  .cylinder-stage-wrap.cylinder-stage-borderless {
    order: 2;
    height: 560px;
  }
  .life-signature > span { font-size: 30px; }
  .life-signature > small { font-size: 16px; }

  /* ------------------------------------------------------------------------
     7. 动效收敛：装饰性无限循环动画在手机上停掉；保留必要的状态过渡
     ------------------------------------------------------------------------ */
  .page-motion svg *,
  .hero-halo,
  .core-glow-pulse,
  .compass-jewel-pulse,
  .compass-card.is-active .compass-card-figure img,
  .scan-line,
  .hands-spark,
  .nb-turn-shadow,
  .dendro-crystal-core,
  .core-card-img {
    animation: none !important;
  }
  .project-card,
  .tech-tile,
  .journal-card,
  .note-card,
  .long-note,
  .showcase-enter,
  .dock-pill,
  .back-top {
    transition-duration: .15s;
  }

  /* 手机端减少"阅读时被装饰打断"：离屏的示意图保持静态即可 */
  .page-motion[data-motion-state] svg * { animation: none !important; }
}

/* 超窄屏（<=380px）再收紧一点，不让顶栏和导航溢出 */
@media (max-width: 380px) {
  .subpage-top-bar .brand { font-size: 11px; letter-spacing: .1em; }
  .subpage-top-bar .brand-mark { width: 22px; height: 22px; font-size: 12px; }
  .subpage-top-bar .site-tools > a,
  .subpage-top-bar .feedback-pill { padding: 0 8px; font-size: 10.5px; }
  .showcase-nav-dock .dock-pill { padding: 0 6px; font-size: 9.5px; }
  .showcase-module-nav button { padding: 8px 6px; font-size: 10px; }
  .cylinder-filter-tab { font-size: 10.5px; }
}

/* 系统开启"减少动态效果"时，手机端同样保持静态 */
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .page-motion svg *,
  .hero-halo,
  .core-glow-pulse,
  .compass-jewel-pulse,
  .hands-spark {
    animation: none !important;
  }
}