/* ═══════════════════════════════════════════════════════════════════════════
   pool.css —— 卡池一览屏
   ───────────────────────────────────────────────────────────────────────────
   双端形态：
     · 手机：搜索框吸顶 + 筛选走**底部 sheet**（不占屏），卡牌 3~4 列，
             滚到底自动加载更多
     · 桌面：左侧固定筛选栏 + 右侧自适应网格（auto-fill，屏越宽列越多）
   ═══════════════════════════════════════════════════════════════════════════ */

.pool {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ══ 工具条 ═════════════════════════════════════════════════════════════ */
.pool__bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-bottom: 1px solid var(--c-line-soft);
    background: rgba(10, 8, 16, .82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.search {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    height: var(--tap-min);
    padding: 0 var(--sp-3);
    border: 1px solid var(--c-line);
    background: rgba(255, 255, 255, .045);
    color: var(--c-dim);
}
/* 聚焦：改成金色 —— 全站"你在操作这里"的反馈色。
   （原来是 `--c-purple` + 紫色外发光，属于旧紫视觉残留） */
.search:focus-within { border-color: var(--c-gold); box-shadow: 0 0 0 1px rgba(217, 187, 135, .32); }
.search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: none;
    color: var(--c-text);
    font: inherit;
    font-size: var(--fs-md);      /* ⚠️ ≥16px 才不会让 iOS 聚焦时自动放大页面 */
    outline: none;
}
.search input::placeholder { color: var(--c-faint); }
.search__x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; color: var(--c-dim); }

.pool__count {
    flex: none;
    padding: 0 var(--sp-2);
    font-family: var(--font-num);
    font-size: var(--fs-xs);
    color: var(--c-dim);
    white-space: nowrap;
}

/* ══ 主体：左侧筛选 + 右侧网格 ═════════════════════════════════════════ */
.pool__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.pool__side { display: none; }        /* 手机隐藏，桌面才显示 */

/* 右侧主体：网格（滚动）+ 分页条（常驻）。
   ⚠️ 分页条挂在网格**外面**，所以这一层必须是 flex 列容器 ——
      别把分页条塞回 `.pool__grid` 里面去。 */
.pool__main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.pool__grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--sp-3);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--pool-card), 1fr));
    gap: var(--sp-3);
    align-content: start;
    overscroll-behavior: contain;     /* 滚到底不要带动整个页面 */
}

.pool__item { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pool__item .card { width: 100%; height: auto; aspect-ratio: 1 / 1.46; }
.pool__id {
    font-family: var(--font-num);
    font-size: var(--fs-2xs);
    color: var(--c-gold);          /* 原为 --c-purple-soft：卡号是结构信息，走金色 */
    letter-spacing: .02em;
}
.pool__name {
    font-size: var(--fs-xs);
    color: var(--c-text);
    line-height: 1.25;
    /* 卡名最多两行（原来是单行省略号，长名字全变成"流星之剑使 大…"）*/
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pool__sys { font-size: var(--fs-2xs); color: var(--c-faint); }
/* 日语卡名（用户要求加上）：比中文名更小更暗，单行省略 —— 它是给"对着卡面认卡"用的辅信息 */
.pool__jp {
    font-size: var(--fs-2xs);
    line-height: 1.2;
    color: var(--c-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pool__empty {
    grid-column: 1 / -1;
    padding: var(--sp-7) var(--sp-4);
    text-align: center;
    color: var(--c-dim);
}
.pool__more {
    grid-column: 1 / -1;
    justify-self: center;
    margin: var(--sp-3) 0;
}

/* ── 分组标题（按卡号系列分组时用）─────────────────────────────────── */
.pool__group {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
    font-family: var(--font-num);
    font-size: var(--fs-xs);
    color: var(--c-gold);          /* 原为 --c-purple-soft：结构信息走金色 */
    letter-spacing: .16em;
}
.pool__group::after { content: ''; flex: 1; height: 1px; background: var(--c-line); }

/* ══ 筛选控件（桌面的侧栏 / 手机的 sheet 共用）════════════════════════ */
.fgroup { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--c-line-soft); }
/* 「重置全部条件」那一组：**默认藏起来**（手机端的 sheet 头部已经有「重置」了，
   同屏两个同名按钮会让人不知道该点哪个）——桌面版由 min-width:900 的媒体查询打开。 */
.fgroup--reset { display: none; }
.fgroup__t {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tracking-widest);
    color: var(--c-gold);
    opacity: .82;
    text-transform: uppercase;
}
.fgroup__t::after { content: ''; flex: 1; height: 1px; background: var(--c-line-soft); }
/* ★ 等宽网格（学参考站的分段控件）
   原来用 `flex-wrap` + `gap`，chip 宽度跟着文字走 ⇒「红/紫/绿/白」和
   「黄/蓝」两行长短不一，整栏看着毛。改成固定 3 列等宽，扫下去是整齐方阵。 */
.chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.chip {
    display: flex;
    align-items: center;
    justify-content: center;      /* 等宽格子里居中，长短文字都不跑偏 */
    gap: 5px;
    min-height: 38px;
    padding: 0 4px;
    border: 1px solid var(--c-line);
    background: rgba(255, 255, 255, .04);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-dim);
    transition: background .14s, border-color .14s, color .14s;
}
.chip:hover { background: rgba(255, 255, 255, .08); }
.chip--on {
    color: #fff;
    border-color: currentColor;
    background: rgba(162, 77, 255, .18);
}
/* 属性 chip 用**属性色**点亮 —— 六色在这里是信息色（见 tokens.css 的口径） */
.chip__dot { width: 10px; height: 10px; flex: none; }
.dot--red    { background: var(--c-red); }
.dot--purple { background: var(--c-purple); }
.dot--green  { background: var(--c-green); }
.dot--white  { background: var(--c-white); }
.dot--yellow { background: var(--c-yellow); }
.dot--blue   { background: var(--c-blue); }

.chip--attr.chip--on[data-attr="red"]    { background: rgba(255, 43, 78, .22);  border-color: var(--c-red); }
.chip--attr.chip--on[data-attr="purple"] { background: rgba(162, 77, 255, .24); border-color: var(--c-purple); }
.chip--attr.chip--on[data-attr="green"]  { background: rgba(47, 208, 122, .2);  border-color: var(--c-green); }
.chip--attr.chip--on[data-attr="white"]  { background: rgba(232, 238, 245, .2); border-color: var(--c-white); }
.chip--attr.chip--on[data-attr="yellow"] { background: rgba(255, 198, 61, .2);  border-color: var(--c-yellow); }
.chip--attr.chip--on[data-attr="blue"]   { background: rgba(61, 155, 255, .22); border-color: var(--c-blue); }

/* ── 费用区间：两个数字输入框（照本地封装应用的 `.cost-range`）──────────
   ★ 2026-10-16：这一段的形态换过三次，留个记录免得以后又绕回来 ——
       ① 最初 = 「全部 / 0-3 / 4-6 / 7-9 / 10+」5 个预设按钮
          （`.costrow` / `.costbtn`，已删）—— 粒度太粗，想筛 2 费以下根本选不出来；
       ② 中间试过双滑条 —— 手感有了，但轨道只有 4px、区间读不准，
          「我要 3 费以下」这种精确需求，打字比拖拽靠谱；
       ③ 现在 = **两个数字框**（`最小 ~ 最大`），留空即不限。
          与本地封装应用（library.html 的 `.cost-range`）完全一致。
   两端互相独立，都留空 = 不限；store.js 里用 `null` 表达，不再拿 10 当哨兵。 */
.costrange {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}
.costrange__in {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 40px;
    padding: 0 var(--sp-2);
    background: #100e0d;
    border: 1px solid var(--c-line);
    color: var(--c-text);
    font-family: var(--font-num);
    font-size: var(--fs-md);
    text-align: center;
    outline: none;
    transition: border-color .14s;
}
.costrange__in:focus { border-color: var(--c-gold); }
.costrange__in::placeholder { color: var(--c-faint); font-size: var(--fs-xs); }
/* 数字框自带的上下箭头：暗底上很难看，触屏也用不到（键盘上下键仍可调） */
.costrange__in::-webkit-outer-spin-button,
.costrange__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.costrange__in { -moz-appearance: textfield; appearance: textfield; }
.costrange__dash { flex: none; color: var(--c-faint); font-family: var(--font-num); }
.costrange__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}
/* 条件回读：`不限` / `3 – 5 费` / `7 费以上`
   —— 数字框本身看不出"空着代表什么"，这行字必须留 */
.costrange__val {
    font-family: var(--font-num);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--c-gold);
}
.costrange__reset {
    height: 30px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--c-line);
    background: rgba(255, 255, 255, .04);
    color: var(--c-dim);
    font-size: var(--fs-2xs);
    letter-spacing: .06em;
    transition: background .14s, color .14s, border-color .14s;
}
.costrange__reset:hover { color: var(--c-text); background: rgba(255, 255, 255, .09); border-color: var(--c-line-strong); }

/* ── 环境：永恒 / 标准 / 自定义（单选）──────────────────────────────────
   取值来自卡库的 `env` 字段（与本地封装应用的 `#f-environment` 同一套口径）。
   ⚠️ 有 2,012 张卡**根本没有 env**（衍生物、契约卡一类），
      它们只在「全部」里出现 —— 选了具体环境就等于把它们排除，这是有意的。 */
.envrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.envrow .chip { min-height: 40px; padding: 0 2px; }
/* 数据里张数为 0 的那一档（现在是「标准」「自定义」）：压暗但**仍可点** ——
   点下去会如实显示"没有符合条件的卡"，比直接禁用更能说明
   "是数据还没分环境，不是按钮坏了"（现状与原因见 store.js 的 ENVS）。 */
.chip--off { opacity: .42; }

/* ── 系统：一只框，既能打字又能点开下拉 ──────────────────────────────────
   ★ 候选面板是**自己做**的，没用原生 `<input list>` + `<datalist>` ——
     原生那套（输入框右侧的小三角、白底候选列表）由浏览器 UA 绘制，
     CSS 完全改不动，和全站的暖黑直角不搭，手机上各家表现还不一样。
     ⚠️ 改这里时注意：`.sysbox__pop` 是 absolute，靠 `.sysbox` 的 relative 定位。 */
.sysbox { position: relative; display: flex; }
.sysbox__in {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 var(--sp-3);
    background: #100e0d;
    border: 1px solid var(--c-line);
    border-right: 0;                    /* 与右侧箭头拼成一只控件 */
    color: var(--c-text);
    font-size: var(--fs-sm);
    outline: none;
    transition: border-color .14s;
}
.sysbox__in:focus { border-color: var(--c-gold); }
.sysbox__in::placeholder { color: var(--c-faint); }

/* 下拉箭头：自己画的 ▾（原生那个小三角已经随 list 属性一起去掉） */
.sysbox__caret {
    flex: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--c-line);
    background: rgba(255, 255, 255, .04);
    color: var(--c-gold);
    font-size: 11px;
    line-height: 1;
    transition: background .14s;
}
.sysbox__caret:hover { background: rgba(217, 187, 135, .16); }

/* 候选面板：暖黑底、直角、贴着输入框下沿 */
.sysbox__pop {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 1px);
    z-index: 8;
    max-height: 264px;
    overflow-y: auto;
    background: #14120f;
    border: 1px solid var(--c-line);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .66);
}
.sysbox__opt {
    display: block;
    width: 100%;
    min-height: 38px;                   /* 触控够点 */
    padding: 0 var(--sp-3);
    text-align: left;
    font-size: var(--fs-xs);
    color: var(--c-text);
    border-bottom: 1px solid var(--c-line-soft);
}
.sysbox__opt:last-child { border-bottom: 0; }
.sysbox__opt:hover, .sysbox__opt:focus-visible { background: rgba(217, 187, 135, .16); color: #fff; }
.sysbox__none {
    padding: var(--sp-4) var(--sp-3);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--c-faint);
}

/* 已选系统：一排可点掉的小块 —— 327 个 chip 展开后，
   没有这一排就认不出"亮着的是哪几个" */
.syspicked { display: flex; flex-wrap: wrap; gap: 4px; }
.syspicked__i {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 var(--sp-2) 0 var(--sp-3);
    border: 1px solid var(--c-gold);
    background: rgba(217, 187, 135, .16);
    color: var(--c-text);
    font-size: var(--fs-xs);
    font-weight: 600;
}
.syspicked__i i { font-style: normal; font-size: 10px; color: var(--c-gold); }
.syspicked__i:hover { background: rgba(207, 58, 48, .2); border-color: var(--c-red); }

/* 分组标题右侧的补充说明（如系统的「按「与」筛选」）
   ⚠️ 必须 `order:1` —— `.fgroup__t::after` 那条分隔线是最后一个伪元素，
      不抬 order 的话小字会被挤到线的左边 */
.fgroup__n {
    order: 1;
    font-style: normal;
    font-size: var(--fs-2xs);
    letter-spacing: .04em;
    color: var(--c-faint);
    text-transform: none;
    white-space: nowrap;
}

/* 排序：三格等宽（与上面各组的方阵对齐）*/
.sortrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.sortrow .chip { min-height: 40px; }

/* ══ 桌面：筛选栏固定在左侧 ═══════════════════════════════════════════ */
@media (min-width: 900px) {
    :root { --pool-card: 116px; }

    .pool__body { flex-direction: row; }

    .pool__side {
        display: block;
        flex: none;
        width: 246px;
        /* 整栏滚 —— 「重置全部条件」已挪进筛选栏内部作为最后一组，
           不再需要"内层滚 + 底栏固定"那套（2026-10-17 用户口径：
           「重置按钮为什么不和筛选栏放一起」）。 */
        overflow-y: auto;
        border-right: 1px solid var(--c-line-soft);
        background: rgba(21, 19, 18, .55);   /* 原 rgba(18,14,28,.5) 深紫 → 暖黑 */
    }
    /* 「重置全部条件」那一组：桌面显示（手机版由基础规则藏起来）。
       ★ `position: sticky; bottom: 0`（2026-10-17）—— 同时满足两条要求：
         ① 用户口径「重置按钮为什么不和筛选栏放一起」⇒ 它在 DOM 上就是筛选栏的**一组**
            （不是另起的一条独立栏，那样视觉上会断成两块）；
         ② 侧栏内容很长，滚在顶部时看不到底部 ⇒ 让它**吸在侧栏下沿**，任何时候都在。
       背景必须**近乎不透明**（+ 模糊），否则滚动时下面的筛选控件会透上来。 */
    .fgroup--reset {
        display: flex;
        position: sticky;
        bottom: 0;
        z-index: 2;
        border-top: 1px solid var(--c-line-soft);
        border-bottom: 0;              /* 它是最后一组，下沿不需要分隔线 */
        background: rgba(16, 14, 13, .96);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .fgroup__reset { width: 100%; min-height: 38px; }
    .fgroup__reset[disabled] { opacity: .38; pointer-events: none; }
    .pool__grid { padding: var(--sp-4); gap: var(--sp-4); }

    /* 桌面不需要"筛选"按钮（侧栏常驻） */
    .pool__filterbtn { display: none; }
}

@media (max-width: 899px) {
    :root { --pool-card: 84px; }
    .pool__filterbtn .badge { margin-left: 4px; }
}

/* ══ 极窄屏：两列就够，别把卡挤成邮票 ═══════════════════════════════ */
@media (max-width: 360px) {
    :root { --pool-card: 72px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   分页条（2026-10-16：无限滚动 ⇒ 翻页）
   ───────────────────────────────────────────────────────────────────────────
   为什么必须改：卡库 15,058 张，**绝不能一次进 DOM**（手机上直接卡死）。
   原方案是「先渲染 120 张、滚到底再追加」，三个硬伤：
     ① 永远滚不到底 —— 想找卡号靠后的卡只能一直滚，没有"跳到第 N 页"；
     ② 滚到一半切屏再回来，位置全丢；
     ③ 卡图请求像开闸一样连续不断（一屏 60 张 × 每张 16 KB）。
   现在：一页 `CFG.PAGE_SIZE`（200）张 + 页码翻页，可选每页张数、可跳页。
   参数口径与官方一致（官方卡池也是 limit + offset 翻页，见 _tools/fetch-btp.js）。
   ═══════════════════════════════════════════════════════════════════════════ */
.pager {
    /* ★ 常驻卡池底部（挂在 `.pool__grid` **外面**），不跟着网格滚 ——
       一页 200 张要滚很久，控件若留在网格末尾就得滚到底才能翻页，
       那跟无限滚动一样难受。 */
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--c-line);
    background: rgba(10, 8, 16, .82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ⚠️ 卡池里的按钮**必须显式收回宽度**：
   `layout.css` 末尾有一条 `.btn { width:100%; height:42px }`，那是给大厅
   「建立房间」表单写的，但它命中**所有** `.btn` ⇒ 卡池里任何按钮不写 width
   就会撑满整行（原来那个"加载更多"就是这么变成长的）。 */
.pool .btn { width: auto; }

.pager__btn { min-width: 92px; }
.pager__btn[disabled] { opacity: .34; pointer-events: none; }

.pager__num {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding: 0 var(--sp-3);
    font-family: var(--font-num);
    font-size: var(--fs-sm);
    color: var(--c-dim);
}
.pager__num b { font-size: var(--fs-lg); font-weight: 800; color: var(--c-gold); }
.pager__num i { font-style: normal; color: var(--c-faint); }

/* `显示 401 – 600 / 共 15058 张` —— 让用户随时知道自己在哪一段 */
.pager__stat {
    flex: none;
    font-family: var(--font-num);
    font-size: var(--fs-xs);
    color: var(--c-faint);
    letter-spacing: .02em;
}

/* 跳页 + 每页张数：窄屏会自动折到第二行 */
.pager__jump { display: flex; align-items: center; gap: var(--sp-2); }
.pager__jump input {
    width: 66px;
    height: 36px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--c-line);
    background: #100e0d;
    color: var(--c-text);
    font-family: var(--font-num);
    font-size: var(--fs-sm);
    text-align: center;
}
.pager__jump input:focus { border-color: var(--c-gold); outline: none; }
.pager__k { font-size: var(--fs-2xs); color: var(--c-faint); white-space: nowrap; }

.pager__size { display: flex; gap: 3px; }
.pager__size button {
    height: 36px;
    min-width: 46px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--c-line);
    background: rgba(255, 255, 255, .04);
    color: var(--c-dim);
    font-family: var(--font-num);
    font-size: var(--fs-xs);
    transition: background .14s, border-color .14s, color .14s;
}
.pager__size button:hover { background: rgba(255, 255, 255, .08); color: var(--c-text); }
.pager__size button.is-on {
    color: #fff;
    border-color: var(--c-gold);
    background: rgba(217, 187, 135, .16);
}

/* ══ 手机：翻页控件重排 —— 页码居中独占一行，按钮拉满整行好按 ═════════ */
@media (max-width: 899px) {
    .pager { gap: var(--sp-3) var(--sp-2); }
    .pager__num { order: -2; width: 100%; justify-content: center; }
    .pager__stat { order: -1; width: 100%; text-align: center; }
    .pager__btn { flex: 1; min-width: 0; min-height: var(--tap-min); }
    .pager__jump { flex: 1; justify-content: flex-end; }
    .pager__size { flex: 1; justify-content: flex-start; }
    .pager__size button { min-height: 40px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   系统筛选
   ───────────────────────────────────────────────────────────────────────────
   卡库 `sys` 是**多值字段，用 `/` 分隔**（`诗姬/衣装`、`星丽/诗姬/衣装`、
   `造兵/NERV`…）。直接按整串统计会得到 2877 个"系统"，其中绝大多数是
   同一批系统的不同组合 ⇒ 必须**拆成原子系统**再用（store.js 里拆）。
   ⚠️ 系统名长短差很多（`诗姬` 2 字 vs `创界神/乌尔` 6 字），
      不能用属性那种三列等宽方阵，否则长名会被挤成两行。 */
.chips--sys { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.chips--sys .chip {
    /* 单行 + 省略号：grid 里 grid item 默认 min-width:auto 会撑破格子，
       所以配 min-width:0（下面的 .chip--sys 一并给） */
    display: block;
    min-width: 0;
    padding: 0 var(--sp-3);
    text-align: left;
    line-height: 38px;                 /* 与 min-height 对齐做垂直居中（display:block 后没法用 flex 居中） */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 「更多…」展开按钮：虚线 + 金字，和普通系统 chip 区分开 */
.chip--more {
    border-style: dashed;
    border-color: var(--c-line-strong);
    color: var(--c-gold);
    text-align: center;
}
.chip--more:hover { background: rgba(217, 187, 135, .12); }