/* 移动端适配(2026-08-09,公开上线准备)。
 *
 * 🔴 本文件推翻 chrome.css 顶部「min-width:1180px 桌面专供」的旧约定 —— 那是设计交付
 *    只画桌面时的权宜;公众开放后移动流量是大头,横向滚动的 1180px 页面等于劝退。
 *    旧注释担心的「塌缩毁掉雷达与球场比例」在这里用**等比缩放**解决,不重排内部。
 *
 * 为什么单独一个文件而不是分散到各屏 CSS:
 *   * 桌面样式零 diff —— 13 个文件一行不动,review 与回滚都干净;
 *   * 「移动端」是一个整体特性,断点、隐藏策略、触控尺寸要互相咬合,集中才看得见全貌;
 *   * 加载顺序在 index.html 里排最后,同特异性下天然覆盖桌面规则。
 *
 * 单断点 768px(决策记录见 docs/tasks/2026-08-09-public-launch-prep.md):
 *   双栏 shell 在 768 以下塌成单栏,平板横向(≥768)沿用桌面布局。
 *   多断点在没有真实流量数据前是过度设计。
 *
 * 隐藏策略红线:窄屏可以**少显示**,不可以**显示错**。数值列只隐藏、不压缩到换行 ——
 * 换行的数字表读起来像另一行的数据,比不显示更糟。
 */

@media (max-width: 768px) {
  /* ===== 全局骨架:解除桌面锁,双栏塌单栏 ===== */
  .app,
  .shell {
    min-width: 0;
  }
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .shell__main {
    padding: 16px 12px 32px;
  }
  .shell__rail {
    padding: 4px 12px 40px;
  }

  /* ===== Header:一行挤不下,换两行 ——
   * 🔴 不用横滚:屏幕外的 Sign in / Slips 用户根本不知道存在,可达性优先于 56px 定高。 */
  .hdr {
    gap: 6px 10px;
    padding: 8px 10px;
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    /* 🔴 blur 必须去掉:backdrop-filter 会把后代 fixed 元素的 containing block
     * 劫持成 header 本身,下面的 .slips 视口级 sheet 会错位。改实色背景等价可读。 */
    backdrop-filter: none;
    background: var(--bg);
  }
  .logo__word {
    display: none;             /* 留 logo 标记,词标让位给导航 */
  }
  .nav__btn {
    padding: 8px 7px;
    font-size: 12px;
  }
  /* 两行定版(2026-08-10 Ryan 验收拍板):
   *   第 1 行 logo + 导航;第 2 行 池/SLIPS/主题/头像/登录登出,整组右对齐。
   * spacer 桌面是行内弹簧,这里改成 100% 宽的断行器;pool 的 margin-left:auto
   * 把第二行整组推到右缘。
   * 🔴 只限 .hdr 的**直接子级**:.hdr__spacer 在 slips 行/betslip/predict 等
   * 9 处被复用为行内弹簧,不带 > 会把那些行全部撑爆成竖条(Ryan 真机截图)。 */
  .hdr > .hdr__spacer {
    flex: 0 0 100%;
    height: 0;
  }
  .pool {
    margin-left: auto;
    gap: 8px;
    padding: 5px 8px;
  }
  .pool__track,
  .pool__div,
  .pool__reset {
    display: none;             /* 额度进度条与重置时刻是补充信息,数字本身保留 */
  }
  .pool .label {
    display: none;             /* "Daily pool" 标签让位,数字 + 位置本身可辨 */
  }
  .avatar-btn__name {
    display: none;
  }
  .hdr__btn {
    padding: 6px 8px;
    white-space: nowrap;
  }
  /* 按钮第二个 span 是文字("SLIPS"/"Dark"/"Light"),窄屏只留图标;
   * cart 的数量徽章是第三个 span,不受影响。Sign in/out 无 span 子元素,保留文字。 */
  .hdr__btn > span:nth-child(2) {
    display: none;
  }

  /* ===== Matches(today):右栏下移,赛程行两段式 ===== */
  .today__cols {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 赛程卡网格(2026-08-10 改版):窄屏单列,卡片右缘不再画中缝线 */
  .fxgrid {
    grid-template-columns: 1fr;
  }
  .fxc:nth-child(odd) {
    border-right: none;
  }

  /* Matches 右列(积分榜/射手榜/价值票)→ 右缘滑出抽屉(2026-08-10 Ryan 验收拍板):
   * 单栏堆叠时这些表被 30+ 场赛程压到最底,没人滚得到。抽屉常驻把手,随点随看。 */
  .today__col--rail {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    width: min(340px, 88vw);
    background: var(--bg);
    border-left: 1px solid var(--border);
    padding: 16px 14px 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  .today__col--rail.is-open {
    transform: translateX(0);
  }
  /* 🔴 抽屉定高 + flex column:子项默认可收缩,而 .chips 因 overflow-x:auto
   * 失去 min-height:auto 保护,会被压扁把文字裁半(MLS 东西部切换实测)。
   * 内容一律原始高度,整体靠抽屉自身滚动。 */
  .today__col--rail > * {
    flex-shrink: 0;
  }
  .rail-handle {
    position: fixed;
    right: 0;
    top: 45%;
    z-index: 61;               /* 高于抽屉:开着时把手文字变 CLOSE,仍可点 */
    writing-mode: vertical-rl;
    padding: 12px 7px;
    background: var(--card);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 0.14em;
    cursor: pointer;
  }
  .rail-back {
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(0, 0, 0, 0.45);
  }

  /* ===== Leaderboards:数值列只留当前排序列 ===== */
  .board__head,
  .board__row {
    grid-template-columns: 32px minmax(0, 1fr) 92px;
    gap: 8px;
  }
  /* 四个数值列里只显示带 sorted 标记的那个(head 的 is-sorted 由 boards.js 同步)。
   * 🔴 隐藏而不是缩窄:四列数字挤 375px 必然换行,换行的表格数据会被读错行。 */
  .board__num:not(.board__num--sorted),
  .board__head .frame__th--r:not(.is-sorted) {
    display: none;
  }

  /* ===== Predict(赛程扫读表)===== */
  .slate__head,
  .slate__row {
    grid-template-columns: 56px minmax(0, 1fr) 74px;
    gap: 10px;
  }
  /* 第 3 列(150px 概率条)窄屏隐藏 */
  .slate__head > :nth-child(3),
  .slate__row > :nth-child(3) {
    display: none;
  }
  /* 队名允许截断:桌面 nowrap 无省略,窄屏长队名会顶穿 edge 列。
   * flex:1 1 0 让主客队名均分剩余宽度 —— 否则先到的长名会把短名挤到只剩省略号。 */
  .slate__team {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* pagehead 的 tab chips:竖排太占首屏,改单行横滚(chips 天然是同类切换,横滚可发现) */
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 4px;
  }
  /* 标了 .mobile-drop 的元素窄屏整体隐藏(2026-08-10 Ryan 真机验收反馈):
   * 标题/规则说明类文案在手机上挤占 tabs 与内容的位置,信息价值低于所占空间。 */
  .mobile-drop {
    display: none;
  }

  /* ===== Profile:身份栏塌到内容上方 ===== */
  .prof {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }
  /* 投注历史 8 列 → 5 列:隐藏市场/线/赔率(4/5/6 列),保留 日期/对阵/本金/结果/盈亏 */
  .hist__row,
  .hist__head {
    grid-template-columns: 20px 56px minmax(0, 1fr) 52px 64px;
    gap: 8px;
  }
  .hist__row > :nth-child(4),
  .hist__row > :nth-child(5),
  .hist__row > :nth-child(6),
  .hist__head > :nth-child(4),
  .hist__head > :nth-child(5),
  .hist__head > :nth-child(6) {
    display: none;
  }

  /* Profile 统计砖:一行四块被切 → 2×2;vs AI 三栏(你|天平|AI)间距收紧防溢出 */
  .tiles--4 {
    grid-template-columns: 1fr 1fr;
  }
  .vs__grid {
    grid-template-columns: 1fr 56px 1fr;
    gap: 10px;
  }
  .aggs {
    gap: 8px;
  }

  /* ===== Match detail ===== */
  /* hero(主队 | 中缝 | 客队)→ 窄屏三行竖排,客队行保持右对齐的镜像感 */
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 16px 14px;
  }
  .hero__mid {
    order: -1;               /* 联赛 + 开球时间放最上,两队卡片紧随 */
  }
  /* 顶部 LAYOUT 切换条:标签换行,seg 按钮等分整行 */
  .md__layout {
    flex-wrap: wrap;
  }
  .seg {
    flex: 1 1 100%;
    display: flex;
  }
  .seg__btn {
    flex: 1;
  }

  /* 八轴强度对比(雷达 336px | 明细):雷达列整宽独占一行,不塌缩内部比例 */
  .cmp {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 逐项对比条(48px 1fr 172px 1fr 48px)整体收窄 */
  .statrow {
    grid-template-columns: 36px 1fr 96px 1fr 36px;
    gap: 6px;
  }
  /* xG/比分双卡与三列盘口卡:并排在 375px 只剩 ~170px/卡,改竖排 */
  .md__pair,
  .mk__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ===== 阵容球场:横滚保比例 ——
   * 球场是横置双半场,375px 下球员名必然互相压字。旧注释(chrome.css)担心的
   * 「塌缩毁比例」在这正确:不塌,给球场一个最小宽度让容器横滚。 */
  .pitch-wrap {
    overflow-x: auto;
    padding: 16px 12px 6px;
  }
  .pitch {
    min-width: 560px;
    /* padding-top 百分比会跟着 wrap 宽算,min-width 撑开后高度需按 560px 锁定 */
    padding-top: 263px;
  }

  /* ===== 弹层与浮层:定宽面板不超出视口 ===== */
  /* slips 桌面挂在 cart 按钮下(absolute right:0);窄屏按钮不在屏右缘,
   * 浮层会向左伸出屏外 —— 改成视口级 sheet,自己滚动 */
  .slips {
    position: fixed;
    top: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: 85vh;
    overflow-y: auto;
  }
  .slip {
    width: min(476px, calc(100vw - 24px));
  }
  .login {
    width: min(404px, calc(100vw - 24px));
  }
  .sharemodal {
    width: min(520px, calc(100vw - 24px));
  }
}

/* 桌面:抽屉把手与遮罩不存在 —— 右列就是普通右栏。放本文件而不是 today.css:
 * 它们是移动端抽屉特性的组成部分,桌面隐藏是该特性的边界,不是 today 屏的样式。 */
@media (min-width: 769px) {
  .rail-handle,
  .rail-back {
    display: none;
  }
}

/* ===== CLV Tracker(06 新 tab):8 列 → 5 列,隐藏 选择/拿到价/收盘价(3/4/5 列),
 * 保留 日期/对阵/CLV/结果/删除 —— 手机上最要紧的是"这注 CLV 是多少"。 ===== */
@media (max-width: 768px) {
  .clv__row,
  .clv__head {
    grid-template-columns: 56px minmax(0, 1fr) 78px 52px 26px;
    gap: 8px;
  }
  .clv__row > :nth-child(3),
  .clv__row > :nth-child(4),
  .clv__row > :nth-child(5),
  .clv__head > :nth-child(3),
  .clv__head > :nth-child(4),
  .clv__head > :nth-child(5) {
    display: none;
  }
  .clv__form {
    grid-template-columns: 1fr 1fr;
  }
}