/* 公共移动端基础适配与可用性规则。页面专属断点应留在各自组件样式中。 */

/* v20.18.5：移动端全局适配 - 客户端 */
@media(max-width: 980px){
  html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
  .modern-site-header{
    padding:10px 10px 0!important;
  }
  .modern-navbar{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    min-height:auto!important;
    border-radius:28px!important;
    padding:10px!important;
    gap:10px!important;
    flex-wrap:wrap!important;
    align-items:center!important;
  }
  .logo{
    min-width:0;
    flex:1 1 auto;
    font-size:19px!important;
    gap:8px!important;
  }
  .logo-icon,
  .logo-mark{
    width:32px!important;
    height:32px!important;
    flex:0 0 32px;
  }
  .logo-text{
    max-width:calc(100vw - 190px)!important;
    font-size:18px!important;
  }
  .header-icons{
    margin-left:auto!important;
    gap:6px!important;
  }
  .icon-btn{
    width:38px!important;
    height:38px!important;
    flex:0 0 38px;
  }
  .container{
    width:100%;
    max-width:100%;
    padding:18px 12px 26px!important;
  }
  .page-grid{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  .sidebar{
    gap:16px!important;
  }
  .card,
  .page-hero,
  .hero-banner,
  .tool-card{
    border-radius:22px!important;
  }
  .section{
    margin-top:24px!important;
  }
  .section-head{
    gap:10px!important;
    flex-wrap:wrap!important;
    align-items:center!important;
  }
  .section-head h2{
    font-size:22px!important;
  }
  .toolbar-panel{
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  .toolbar-panel .searchbox,
  .searchbox,
  .tools-searchbox{
    width:100%!important;
    min-width:0!important;
  }
  .pill,
  .btn{
    min-height:38px;
  }
}

@media(max-width: 760px){
  .hero-banner{
    min-height:210px!important;
    padding:28px 20px!important;
    background-position:center!important;
  }
  .all-friends,
  .featured-friends,
  .tools-grid,
  .modern-tools-grid,
  .article-list{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .post-thumb{
    min-height:165px!important;
  }
  .post-card{
    grid-template-columns:1fr!important;
    min-height:0!important;
  }
  .post-card .post-thumb,
  .post-card > .post-thumb{
    min-height:170px!important;
    height:170px!important;
  }
  .post-info{
    padding:16px!important;
  }
  .post-info h3{
    font-size:19px!important;
  }
  .meta-row{
    flex-wrap:wrap!important;
    gap:8px!important;
  }

  /* 文章阅读页 */
  .article-shell{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  .article-reader,
  .markdown-body{
    min-width:0!important;
    width:100%!important;
  }
  .article-reader{
    padding:18px!important;
    border-radius:22px!important;
  }
  .article-reader h1{
    font-size:28px!important;
    line-height:1.22!important;
  }
  .markdown-body{
    font-size:15.5px!important;
    line-height:1.78!important;
  }
  .markdown-body pre{
    max-width:100%!important;
    overflow-x:auto!important;
  }
  .md-code-block{
    max-width:100%!important;
  }
  .article-toc{
    position:static!important;
    max-height:none!important;
    order:-1;
    border-radius:20px!important;
  }
  .article-toc .toc-body{
    max-height:220px!important;
    overflow:auto!important;
  }
  .back-icon{
    left:12px!important;
    top:auto!important;
    bottom:18px!important;
    width:44px!important;
    height:44px!important;
  }
  .back-to-top-button,
  .scroll-to-bottom-button{
    right:12px!important;
  }
  .pills{
    gap:8px!important;
  }
  .friend-search-box{
    grid-template-columns:auto minmax(0,1fr) auto!important;
    width:100%!important;
  }
  .friend-search-submit{
    min-width:54px!important;
    padding-inline:10px!important;
  }

  /* 工具页 */
  .tools-command-center,
  .random-tool-panel,
  .gacha-tool-panel,
  .snake-tool-panel{
    padding:16px!important;
  }
  .tools-search-row{
    grid-template-columns:1fr!important;
  }
  .snake-stage-wrap{
    width:100%!important;
    max-width:100%!important;
  }
  .snake-canvas{
    width:100%!important;
    height:auto!important;
  }
  .snake-mobile-pad{
    display:grid!important;
  }

  footer,
  .site-footer{
    padding-inline:14px!important;
  }
}

@media(max-width: 520px){
  .modern-navbar{
    border-radius:24px!important;
  }
  .logo-text{
    max-width:calc(100vw - 150px)!important;
  }
  .container{
    padding-inline:10px!important;
  }
  .page-hero h1{
    font-size:30px!important;
  }
  .section-head h2{
    font-size:20px!important;
  }
  .article-reader{
    padding:15px!important;
  }
  .article-reader h1{
    font-size:25px!important;
  }
  .markdown-body table{
    display:block!important;
    width:100%!important;
    overflow-x:auto!important;
  }
}


/* v20.18.5：移动端深度适配二轮 - 客户端可用性 */
@media(max-width: 820px){
  :root{
    --mobile-safe-x: max(10px, env(safe-area-inset-left));
    --mobile-safe-r: max(10px, env(safe-area-inset-right));
  }
  *{
    -webkit-tap-highlight-color: rgba(14,165,233,.18);
  }
  html{
    scroll-padding-top: 118px;
  }
  body{
    min-width:0!important;
    touch-action:manipulation;
  }
  a, button, .btn, .pill, input, textarea, select{
    touch-action:manipulation;
  }
  button,
  .btn,
  .pill,
  .icon-btn,
  .search-submit,
  .friend-search-submit{
    min-height:42px!important;
  }
  input,
  textarea,
  select{
    font-size:16px!important; /* 防止 iOS 自动放大 */
  }

  /* 顶部导航：手机端更像 App 顶栏，减少高度占用 */
  .modern-site-header{
    position:sticky!important;
    top:0!important;
    z-index:90!important;
    padding:8px var(--mobile-safe-r) 0 var(--mobile-safe-x)!important;
    background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, transparent), color-mix(in srgb, var(--bg) 70%, transparent), transparent)!important;
  }
  .modern-navbar{
    box-shadow:0 12px 32px rgba(15,23,42,.14)!important;
    backdrop-filter:blur(18px) saturate(1.12)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.12)!important;
  }

  /* 页面主体统一手机间距 */
  .container{
    padding-top:14px!important;
  }
  .page-hero,
  .hero-banner{
    margin-inline:0!important;
  }
  .page-hero{
    min-height:auto!important;
    padding:26px 18px!important;
  }
  .minimal-page-hero,
  .page-title-plain{
    padding:18px 16px!important;
  }
  .page-hero h1{
    word-break:break-word;
  }
  .post-info,
  .tool-card,
  .small-friend,
  .featured-card{
    min-width:0!important;
  }
  .post-info h3,
  .tool-card h3{
    overflow-wrap:anywhere;
  }
  .lazy-bg,
  .post-thumb{
    background-size:cover!important;
    background-position:center!important;
  }

  /* 阅读页：目录折叠式观感，减少首屏占用 */
  .article-shell{
    display:flex!important;
    flex-direction:column!important;
  }
  .article-toc{
    width:100%!important;
    padding:14px!important;
  }
  .article-toc .toc-head{
    cursor:pointer;
  }
  .article-toc .toc-body{
    max-height:190px!important;
    overflow:auto!important;
  }
  .markdown-body img{
    height:auto!important;
    max-width:100%!important;
    border-radius:14px!important;
  }
  .mobile-table-scroll{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin:16px 0;
  }
  .mobile-table-scroll table{
    min-width:620px;
    margin:0!important;
  }
  .mobile-scroll-x{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  .friend-search-box{
    display:grid!important;
    grid-template-columns:32px minmax(0,1fr) 56px!important;
  }
  .tools-search-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .snake-mobile-pad{
    max-width:260px;
    margin-inline:auto;
  }

  /* 浮动按钮避开手机边缘 */
  .back-to-top-button{
    bottom:82px!important;
  }
  .scroll-to-bottom-button{
    bottom:26px!important;
  }
}

@media(max-width: 430px){
  .logo-text{
    max-width:44vw!important;
  }
  .markdown-body{
    font-size:14.5px!important;
  }
  .article-reader h1{
    font-size:23px!important;
  }
  .post-card .post-thumb{
    height:150px!important;
    min-height:150px!important;
  }
}