/* ============================================================================
   16 手机端适配（≤768px，含横屏手机）
   ----------------------------------------------------------------------------
   桌面版一行放得下的东西，手机上必须换行、放大、收敛。这一层只做五件事：
   ① 顶栏拆成两行：品牌 + 按钮一行，四个标签一行横滑（不再挤成 178px 高）；
   ② 手指尺寸：可点元素一律 ≥44px，主按钮 48px，输入框 48px 且字号 16px
      （iOS 上 <16px 会自动放大页面）；
   ③ 字号底线：--fs-xs / --fs-sm 在手机上抬到 14px，脚注、角标也看得清；
   ④ 卡片：倾斜减半、胶带往内收、左右留白收紧，长英文/长链接不顶破屏幕；
   ⑤ 兜底 overflow-x: clip —— 手机上永远不出现左右拖动。
   横屏手机（844×390）宽度 >768，如果只按宽度判断会掉回桌面尺寸，所以这里
   再加一条「矮屏 + 横屏」的条件，让它也走这一层。
   只改排版，不动任何业务逻辑与主题色；颜色全部走已有令牌。
   ========================================================================== */

@media screen and (max-width: 768px),
  screen and (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
  /* ---------- 0. 底线：字号、横向溢出、长内容 ---------- */
  :root {
    --fs-xs: 14px; /* 12 → 14：备案号、提示语、角标 */
    --fs-sm: 14px; /* 13 → 14：按钮、正文辅文 */
  }

  html,
  body {
    overflow-x: clip;
  }

  img,
  svg,
  video,
  canvas,
  iframe,
  table {
    max-width: 100%;
  }

  /* 网格 / flex 子项默认 min-width:auto，长内容会把整行顶宽；这里统一归零 */
  .cols > *,
  .entries > *,
  .mini-list > *,
  .qas > *,
  .view__head > *,
  .entry__head > *,
  .mini__head > * {
    min-width: 0;
  }

  .entry__title,
  .entry__body,
  .mini__text,
  .qa__text,
  .view__sub,
  .field__hint,
  .foot__police-text,
  .space__hint {
    overflow-wrap: anywhere;
  }

  /* 长代码块 / 长串不撑破卡片 */
  pre,
  code {
    overflow-wrap: anywhere;
  }

  /* ---------- 1. 顶栏：两行网格 ---------- */
  .topbar__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand side"
      "tabs tabs";
    gap: var(--sp-2) 0;
    min-height: 0;
    padding: var(--sp-2) var(--sp-3);
  }

  .brand {
    grid-area: brand;
    font-size: var(--fs-md);
  }

  .brand__mark {
    width: 24px;
    height: 24px;
  }

  .topbar__side {
    grid-area: side;
    gap: var(--sp-1);
  }

  /* 四个标签一条横向滑带：不换行，也不再纵向吃掉半屏 */
  .tabs {
    grid-area: tabs;
    flex-wrap: nowrap;
    gap: var(--sp-1);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 var(--sp-2);
    font-size: var(--fs-base);
    scroll-snap-align: start;
  }

  /* ---------- 2. 顶栏按钮：都能一指点中 ---------- */
  .icon-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .space-open {
    min-height: 44px;
    padding-inline: var(--sp-2);
  }

  .skip-link {
    min-height: 44px;
  }

  /* ---------- 3. 内容区：留白收紧但不贴边 ---------- */
  .page {
    padding: var(--sp-4) var(--sp-3) var(--sp-6);
  }

  .view__head {
    gap: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-4);
  }

  .view__title {
    font-size: var(--fs-xl);
  }

  .view__sub {
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
  }

  /* 双列在 1040px 就已经并成一列，这里只收间距 */
  .cols {
    gap: var(--sp-4);
  }

  .entries,
  .mini-list,
  .qas {
    gap: var(--sp-4);
  }

  /* 正文在手机上要保持 17px：前一层 720px 的老规则会把它压到 15px，这里拉回来 */
  .entry__body {
    font-size: var(--fs-md);
    line-height: var(--lh-base);
  }

  /* ---------- 4. 手指尺寸：按钮、筛选片、输入框、链接 ---------- */
  .btn {
    min-height: 48px;
    padding-inline: var(--sp-4);
  }

  .chip {
    min-height: 44px;
    padding-inline: var(--sp-3);
    font-size: var(--fs-sm);
  }

  /* 迷你视图的标签贴纸本来被压到 32，这里一起抬到 44 */
  .tagbar__row .chip {
    min-height: 44px;
  }

  .entry__more {
    min-height: 44px;
    padding-inline: var(--sp-3);
  }

  /* 「赞 / 评论 / 公开-私密 / 删除」这一排：高度 44，行距放宽，允许换行 */
  .act {
    min-height: 44px;
    padding-inline: var(--sp-3);
    font-size: var(--fs-sm);
  }

  .entry__actions {
    gap: var(--sp-2) var(--sp-3);
  }

  .entry__meta,
  .entry__foot,
  .mini__foot,
  .qa__actions {
    flex-wrap: wrap;
    row-gap: var(--sp-1);
  }

  .field__input {
    min-height: 48px;
  }

  /* 手机输入框一律 16px：小于 16px 时 iOS Safari 会自动把页面放大 */
  .field__input,
  .field__input--area,
  .field__select,
  input,
  textarea,
  select {
    font-size: 16px;
  }

  .field__input--area {
    min-height: 140px;
  }

  .field__label {
    font-size: var(--fs-sm);
  }

  /* 页脚、登录页的文字链：撑到 44 高 */
  .foot__link,
  .gate__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* 协议句子里的行内链接：用 padding 撑热区，再用负 margin 抵消，行距不变 */
  .gate__agree-text a,
  .gate__note a,
  .gate__safe a {
    display: inline-block;
    padding-block: 12px;
    margin-block: -12px;
  }

  /* ---------- 5. 卡片：倾斜减半、胶带内收，转完仍在屏幕里 ---------- */
  .entries > .entry:nth-child(odd),
  .mini-list > .mini:nth-child(odd),
  .qas > .qa:nth-child(odd) {
    --tilt: -.3deg;
    --nudge: 0px;
    --lift: 0px;
  }

  .entries > .entry:nth-child(even),
  .mini-list > .mini:nth-child(even),
  .qas > .qa:nth-child(even) {
    --tilt: .28deg;
    --nudge: 0px;
    --lift: 0px;
  }

  .entries > .entry:nth-child(n)::before,
  .mini-list > .mini:nth-child(n)::before,
  .qas > .qa:nth-child(n)::before {
    --tape-x: 12px;
    --tape-w: 56px;
    --tape-rot: -3deg;
  }

  .qa__block::before {
    right: var(--sp-3);
    width: 44px;
  }

  /* ---------- 6. 我的空间：整屏抽屉 ---------- */
  .space__panel {
    width: 100%;
    max-width: 100%;
    padding: var(--sp-4) var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  }

  .space__close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  /* ---------- 7. 登录页：卡片留白收一点，按钮占满一行 ---------- */
  .gate__card {
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-4);
  }

  .gate__modes {
    gap: var(--sp-2);
  }

  .gate__mode {
    min-height: 44px;
    padding-inline: var(--sp-3);
  }

  .gate__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .gate__agree {
    align-items: flex-start;
  }

  /* 协议勾选框：24×24 的画框 + 整行可点的 label，热区在那行文字上 */
  .gate__agree-box {
    width: 24px;
    height: 24px;
  }

  /* ---------- 8. 页脚 ---------- */
  .foot {
    padding: var(--sp-4) var(--sp-3) calc(var(--sp-7) + 64px);
  }

  .foot__links {
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-3);
  }

  /* ---------- 9. 提示条与右下角小游戏入口 ---------- */
  .toast-region {
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
    translate: 0 0;
  }

  .toast {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: var(--fs-base);
  }

  .game-fab {
    min-height: 48px;
    font-size: var(--fs-sm);
  }

  /* ---------- 10. 小游戏弹窗：铺满，标题栏瘦身，把画面留给游戏 ---------- */
  .game-modal {
    padding: 0;
  }

  .game-modal__panel {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .game-modal__panel::before {
    display: none;
  }

  .game-modal__head {
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
  }

  .game-modal__title {
    font-size: var(--fs-md);
  }

  .game-modal__close {
    width: 44px;
    height: 44px;
  }

  .game-modal__hint {
    padding: var(--sp-4);
    font-size: var(--fs-base);
  }
}

/* 小屏（≤430px，绝大多数手机）：标签条再收一点，四页签尽量一行放得下 */
@media screen and (max-width: 430px) {
  .tab {
    gap: var(--sp-1);
    padding: 0 var(--sp-1);
    font-size: var(--fs-sm);
  }

  .tab__count {
    min-width: 20px;
    padding: 0 4px;
    line-height: 18px;
  }

  /* 卡片内边距 24 → 16：390 宽时正文多出 16px */
  .card {
    padding: var(--sp-4);
  }

  .entry,
  .mini,
  .qa {
    padding: var(--sp-4) var(--sp-3);
  }

  .page {
    padding-inline: var(--sp-3);
  }

  .tagbar {
    padding: var(--sp-3) var(--sp-4);
  }
}

/* 超小屏（320px）：只留图标，品牌字缩一号 */
@media screen and (max-width: 380px) {
  .space-open__text {
    display: none;
  }

  .brand {
    font-size: var(--fs-base);
  }

  .view__title {
    font-size: var(--fs-lg);
  }
}

/* 横屏手机（844×390 这类）：主层已经接管，这里只做「高度省着用」的压缩 */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .topbar__inner {
    padding-block: var(--sp-1);
    gap: var(--sp-1) 0;
  }

  .page {
    padding: var(--sp-3) var(--sp-3) var(--sp-5);
  }

  .view__head {
    margin-bottom: var(--sp-3);
  }

  /* 上下空间金贵：卡片留白收一档，一屏能多看见一条 */
  .card,
  .entry,
  .mini,
  .qa {
    padding: var(--sp-3) var(--sp-4);
  }

  .field__input--area {
    min-height: 96px;
  }

  .foot {
    padding-bottom: calc(var(--sp-6) + 56px);
  }

  /* 横屏宽度够：建房页的「新建 / 进屋」并排，少占一行 */
  .gate__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}