/* gcmod-home-mobile.css — 首页手机端 100% 适配（2026-10-09）
   注入：nginx sub_filter（与 gcmod-dialog.css 同通道），独立文件防覆盖。
   修复点：
   1) 首屏动画大标题 GcmodAi 在 <640px 严重溢出（text-8xl 起跳过大）；
   2) 640px 以下按视口宽度缩放，360px 屏完整显示且保留动画；
   3) 跑马灯容器兜底裁剪，避免横向滚动；
   4) 代码块/长文本防溢出；
   5) 极小字号代码 token 在手机上提升可读性。
   注：用 overflow:hidden 而非 clip —— clip 会让 Playwright/Chromium 截图超时。 */

@media (max-width: 639px) {
  /* 动画大标题字母容器：7 字母按视口宽度缩放 */
  .flex.justify-center.space-x-1 {
    max-width: 94vw;
  }
  .flex.justify-center.space-x-1 > span,
  .flex.justify-center.space-x-1 > * {
    font-size: clamp(2.6rem, 13.5vw, 6rem) !important;
    line-height: 1 !important;
  }
  /* 兜住标题外层居中容器（audit 实测 517px 溢出）*/
  .relative.z-10.flex.flex-col.items-center.justify-center {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* ≤380px 小屏再收一点，保证 320px 老机型也不溢出 */
@media (max-width: 380px) {
  .flex.justify-center.space-x-1 > span,
  .flex.justify-center.space-x-1 > * {
    font-size: clamp(2.2rem, 13vw, 3.2rem) !important;
  }
}

/* 跑马灯：容器必须裁剪 */
.animate-marquee {
  will-change: transform;
}
[class*='marquee'] {
  max-width: 100vw;
}

/* 代码示例块：手机端允许横向滚动而不是顶破布局 */
@media (max-width: 639px) {
  pre, code, .font-mono {
    max-width: 100%;
  }
  pre {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  [class*='break'], .break-all {
    overflow-wrap: anywhere;
  }
  /* 代码 token 字号提到 11px 可读 */
  pre span, code span {
    font-size: max(11px, 1em) !important;
  }
}

/* 全局兜底：首页任何情况下都不出现横向滚动条 */
@media (max-width: 639px) {
  html, body {
    overflow-x: hidden;
  }
}