/* ==========================================================================
   NZEP 资料库 · assets/games/clash.css —— 「拼点」的视觉系统
   --------------------------------------------------------------------------
   配色：**跟着站点走浅色体系**（与棋牌大厅、卡兹大厅同一套观感）。
   为什么不用深色：外壳 `body.st-body`（浅底 #f6f6f6）的选择器权重比 `.c-body` 高，
   页面底色是浅的 —— 深色主题那套浅灰文字直接变成 1.19:1（看不见）。
   所以这里的原则是：**每一处文字都显式给色，绝不依赖继承**，底色也显式给。
   深色只保留两块"对比锚点"（顶栏 .c-top、伤害飘字），它们各自显式设色。
   动效一律 CSS 关键帧，尊重 prefers-reduced-motion。
   ========================================================================== */

.c-body {
  --c-bg: #f6f6f6;          /* 与外壳一致 */
  --c-card: #ffffff;
  --c-card2: #f8f9fa;
  --c-line: #e3e6ea;
  --c-line2: #cfd4da;
  --c-t: #1a1c1f;           /* 正文：白底 16:1 */
  --c-d: #4b5158;           /* 次要：白底 8.6:1 */
  --c-d2: #6b7280;          /* 说明：白底 5.3:1 */
  --c-red: #b32424;         /* 站点红（白底 7.0:1） */
  --c-gold: #8a6414;        /* 深金（白底 5.9:1） */
  --c-blue: #2a54a8;
  --c-ok: #2f6f3f;
  --c-bad: #a8231d;
  --c-dark: #1c2128;        /* 顶栏深色锚点 */
  --c-dark-t: #e9edf3;
  --c-dark-d: #b9c1cc;
  background: var(--c-bg);
  color: var(--c-t);
}
.c-body .st-main { max-width: 1180px; }
.c-grow { flex: 1 1 auto; }

/* 动效浮层（伤害飘字） */
.c-fxlayer { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.c-dmg {
  position: absolute; font-weight: 900; font-size: 26px; color: #fff;
  background: var(--c-bad); border-radius: 10px; padding: 2px 8px;
  box-shadow: 0 6px 18px rgba(120, 20, 16, .35);
  animation: c-dmg-rise 1.05s ease-out forwards;
}
.c-dmg.big { font-size: 34px; background: #8a1a14; }
@keyframes c-dmg-rise {
  0% { opacity: 0; transform: translateY(14px) scale(.7); }
  22% { opacity: 1; transform: translateY(-6px) scale(1.12); }
  100% { opacity: 0; transform: translateY(-56px) scale(1); }
}

/* ---------------------------------------------------------------- 大厅（2026-10-26 重排）
   用户原话：「拼点大厅 UI 混乱」。旧版从上到下是一列越长越高的方块（40px 大标题 + 五个 chip +
   设置按钮 + 我的出战 + 开一局 + 强自定义 + 规则），主按钮被埋在「开一局」里。
   这一段的规矩（只作用于 .c-lobby，等待房间 / 牌桌的 .c-sec 一个字都不动）：
     · 一套卡片解剖：.c-card（头 .c-card-head / 身 .c-card-body / 脚 .c-card-foot）；
     · 一套间距刻度：8 / 12 / 16 / 24（--s1…--s4）；
     · 一套字号刻度：标题 20 / 分区 16 / 卡片标题 14 半粗 / 正文 13 / 说明 12，没有 <12px；
     · 手机上所有可点控件 ≥44px（含桌面主按钮），换行由 flex-wrap 负责，任何宽度都不横向溢出。
   配色仍沿用 .c-body 的既有变量（页面是浅色体系，见文件头），不引入新色板。 */
.c-lobby {
  --s1: 8px; --s2: 12px; --s3: 16px; --s4: 24px;
  display: flex; flex-direction: column; gap: var(--s4);
}
.c-lobby .c-card {
  box-sizing: border-box; min-width: 0; margin: 0; padding: var(--s3);
  border: 1px solid var(--c-line); border-radius: 14px;
  background: var(--c-card); box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
/* 卡片头 / 身 / 脚：三块用同一套间距，所有卡看起来是"同一副骨架" */
.c-lobby .c-card-head { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; min-width: 0; }
.c-lobby .c-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.c-lobby .c-card-foot { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; margin-top: auto; }
/* 分区标题（16）—— 旧版是 18px，跟 40px 大标题一起"抢戏" */
.c-lobby .c-sec { padding: var(--s3); border-radius: 14px; background: var(--c-card); }
.c-lobby .c-sec-head { display: flex; align-items: baseline; gap: var(--s1) var(--s2); flex-wrap: wrap; margin: 0 0 var(--s2); min-width: 0; }
.c-lobby .c-sec-head h2 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--c-t); letter-spacing: 0; }
.c-lobby .c-sec-sub { font-size: 12px; line-height: 1.6; color: var(--c-d2); min-width: 0; }
.c-lobby .c-sec-link { margin-left: auto; min-height: 44px; font-size: 13px; }
.c-lobby .c-label { font-size: 13px; }

/* ① 页头条：标题 20 + 一句规则 + 两个主按钮，横向一条（窄屏自动上下排，按钮仍在首屏） */
.c-lobby .c-hero {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  background: linear-gradient(135deg, #fdf3f2, #eef4fb 62%, var(--c-card));
}
.c-hero-text { min-width: 0; }
.c-lobby .c-hero h1 { margin: 0; font-size: 20px; line-height: 1.3; display: flex; align-items: baseline; gap: var(--s1); color: var(--c-t); letter-spacing: .02em; }
.c-hero .c-logo { color: var(--c-red); }
.c-lobby .c-hero .c-sub { font-size: 12px; color: var(--c-d); font-weight: 500; letter-spacing: .18em; }
.c-lobby .c-hero-lead {
  margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--c-d); max-width: 56ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.c-lobby .c-hero-ops { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.c-lobby .c-btn-lg { min-height: 44px; padding: 10px 18px; font-size: 15px; font-weight: 700; border-radius: 12px; }
.c-lobby .c-btn-lg.primary { font-weight: 700; }

/* ② 状态条：在房人数 / 公开房数 / 我的段位（只显示页面上真有的数） */
.c-lobby .c-status {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s1) var(--s4);
  padding: var(--s2) var(--s3); border: 1px solid var(--c-line); border-radius: 12px;
  background: var(--c-card2); min-width: 0;
}
.c-lobby .c-stat { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.c-lobby .c-stat-k { font-style: normal; font-size: 12px; color: var(--c-d2); }
.c-lobby .c-stat-v { font-size: 13px; font-weight: 700; color: var(--c-t); }

/* ③ 房间列表：卡片网格（桌面 2–3 列，手机单列） */
.c-lobby .c-rooms-sec { display: flex; flex-direction: column; gap: var(--s2); }
.c-lobby .c-roomgrid { display: grid; grid-template-columns: 1fr; gap: var(--s2); min-width: 0; }
.c-lobby .c-roomgrid > * { min-width: 0; }
/* 空态 / 读取中 / 读取失败都横跨整行（桌面 2–3 列时不要缩成一小格） */
.c-lobby .c-roomgrid > .c-empty, .c-lobby .c-roomempty { grid-column: 1 / -1; }
.c-lobby .c-roomcard { display: flex; flex-direction: column; gap: var(--s2); }
.c-lobby .c-roomcard:hover { border-color: var(--c-line2); box-shadow: 0 4px 12px rgba(20, 24, 30, .06); }
.c-lobby .c-roomcard.is-playing { background: #fbfdff; border-color: #d5e2f5; }
.c-lobby .c-roomcard.is-mine { background: #fdf8f8; border-color: #eed9d9; }
.c-lobby .c-rcode { font-family: ui-monospace, Consolas, monospace; font-size: 14px; font-weight: 700;
  letter-spacing: .14em; color: var(--c-gold); }
.c-lobby .c-rmeta { display: flex; align-items: baseline; gap: var(--s1); min-width: 0; font-size: 13px; color: var(--c-d); }
.c-lobby .c-rmeta span { flex: 0 0 auto; font-size: 12px; color: var(--c-d2); }
.c-lobby .c-rmeta b { font-size: 13px; font-weight: 600; color: var(--c-t); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-lobby .c-roomcard .c-btn { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 8px 10px; font-size: 13px; }
/* 状态标签（12px，三种态；与牌桌上那对提交 chip 不共用类名） */
.c-lobby .c-tag { display: inline-block; font-size: 12px; line-height: 18px; padding: 0 7px; border-radius: 999px;
  border: 1px solid var(--c-line2); color: var(--c-d); background: var(--c-card); white-space: nowrap; }
.c-lobby .c-tag.wait { color: #8a6a00; border-color: #d9a400; background: #fff8e6; }
.c-lobby .c-tag.live { color: #0f6b57; border-color: #14866d; background: #e6f7f4; }
.c-lobby .c-tag.mine { color: var(--c-red); border-color: #e6c3c3; background: #fdf3f2; }
/* 房号输入行：房号框只占该占的宽度，两个按钮跟着换行也不溢出 */
.c-lobby .c-joinrow { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; min-width: 0; }
.c-lobby .c-joinrow .c-label { flex: 0 0 auto; }
.c-lobby .c-joinrow .c-input { flex: 1 1 130px; min-width: 0; min-height: 44px;
  text-transform: uppercase; letter-spacing: .12em; font-family: ui-monospace, Consolas, monospace; }
.c-lobby .c-joinrow .c-btn { min-height: 44px; }
/* 空态：一句标题 + 一句说明 + 一个明确出口 */
.c-lobby .c-roomempty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1);
  padding: var(--s3); border: 1px dashed var(--c-line2); border-radius: 12px; background: var(--c-card2); }
.c-lobby .c-roomempty b { font-size: 14px; font-weight: 600; color: var(--c-t); }
.c-lobby .c-roomempty p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--c-d); }
.c-lobby .c-roomempty .c-btn { min-height: 44px; }
.c-lobby .c-empty-bad { color: var(--c-bad); }

/* ④⑤ 并排的次级卡：桌面两列、手机一列；每张卡都撑满自己那一列 → 一行只有一种宽度 */
.c-lobby .c-duo { display: grid; grid-template-columns: 1fr; gap: var(--s3); min-width: 0; }
.c-lobby .c-duo > * { min-width: 0; }
/* 配置库没读出来时「强自定义」整块不画 → 剩下的那张卡撑满整行，不留半格空白 */
.c-lobby .c-duo > :only-child { grid-column: 1 / -1; }

/* 「拼点设置」卡：队伍规模 / 胜率提示就地可改，其余进 #cSettings 弹窗 */
.c-lobby .c-setup-row { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.c-lobby .c-setup-row .c-label { flex: 0 0 auto; }
.c-lobby .c-setup-row .c-btn.sm { min-height: 44px; font-size: 13px; padding: 8px 12px; }
.c-lobby .c-check { font-size: 13px; min-height: 44px; }
.c-lobby .c-acts { margin-top: var(--s2); }

/* 出战配置 chips：**不能用 .c-chips**（那是牌桌提交状态的 inline-flex/nowrap，会把这一行拉成 1369px）。
   公开配置可能有几十套：给这块一个 140px 的滚动窗口（约 3 行），别让一张次级卡把整页拉长；
   chip 本身 ≥44px，滚动条不影响点选。 */
.c-lobby .c-loadout-chips { display: flex; flex-wrap: wrap; gap: var(--s1); min-width: 0;
  max-height: 140px; overflow-y: auto; overscroll-behavior-y: contain; padding-right: 2px; }
.c-lobby .c-chip-btn { min-height: 44px; }

/* 规则卡：默认收起（<details>），点开才铺开 13 条正文 */
.c-lobby .c-rules-d { margin-top: var(--s1); }
.c-lobby .c-rules-d > summary { cursor: pointer; display: flex; align-items: center; min-height: 44px;
  font-size: 13px; font-weight: 700; color: var(--c-t); }
.c-lobby .c-rules-d ol { margin: var(--s1) 0 0; padding-left: 20px; font-size: 13px; line-height: 1.8; color: var(--c-d); }
.c-lobby .c-rules-d b { color: var(--c-t); }

@media (min-width: 721px) {
  .c-lobby .c-roomgrid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .c-lobby .c-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 手机：主按钮整行铺开、卡片内边距收到 12，其余仍按 8/12/16/24 的刻度 */
@media (max-width: 720px) {
  .c-lobby { gap: var(--s4); }
  .c-lobby .c-card { padding: var(--s3); }
  .c-lobby .c-hero { padding: var(--s3); }
  .c-lobby .c-hero-ops { width: 100%; }
  .c-lobby .c-hero-ops .c-btn { flex: 1 1 0; min-width: 0; padding: 10px 12px; }
  .c-lobby .c-status { gap: var(--s1) var(--s3); padding: var(--s2); }
  .c-lobby .c-roomcard .c-btn { padding: 8px; }
  /* 房号行不整行铺开：360px 上「房号 + 输入框 + 加入 + 观战」也放得下一行（省 44px 高度） */
  .c-lobby .c-joinrow .c-btn { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------- 桌面宽屏（≥1000px）
   用户第 2 次反馈：「拼点大厅（电脑端）还没优化好」。上一版手机那一套（主按钮在首屏、
   可点区 ≥44、任何宽度不横向溢出）是**验收过的**，所以这一整段只套在 min-width:1000px 里，
   390 / 430 的实测几何一个像素都不动（要改也只改桌面）。
   桌面这边重排的规矩（全部用页面已有的变量，不引入新色板）：
     · 内容栏 1120（不是 1144.8）+ 左右 24 留白；所有卡片左右边缘落在这一栏上；
     · 页头条不再是一张"浮卡"：标题 / 一句话规则在左、两个主按钮在右，底下一条 1px 细线收口；
     · 状态条是一张卡里的三格（竖发丝线分隔），不是三个并排的小盒子；
     · 房间网格 minmax(320px,1fr) + 16 间距，卡内结构固定（头一行 / 身一行 / 脚一行）→ 四张卡等高；
     · 两行次级卡对齐拉伸、按钮落到底部（行内等高，行与行可以不同高）；
     · 一套节奏：块间 24、卡内 16、卡内行间 12；桌面上的次级操作一律 36px 高。 */
@media (min-width: 1000px) {
  /* 内容栏：1120 + 左右 24。只在大厅视图生效 —— 牌桌（.c-board）照旧用原来的宽度。 */
  .c-body .st-main:has(.c-lobby) { max-width: 1168px; padding-left: 24px; padding-right: 24px; }
  /* 大厅撑满滚动区（内容更长时就是内容高度）：排队条靠 margin-top:auto 落到底，
     大厅比一屏短时也不会浮在页面中间。 */
  .c-body .st-main:has(.c-lobby) > #cRoot { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .c-lobby { flex: 1 1 auto; }

  /* ① 页头条：页首一条，不是卡片 —— 标题 22 半粗 + 一句规则（一行，60ch）在左，
     两个主按钮（44 高、≥132 宽）在右、同一条基线上，底下一条细线收口。 */
  .c-lobby .c-hero {
    padding: 0 0 16px; border: 0; border-bottom: 1px solid var(--c-line);
    border-radius: 0; background: none; box-shadow: none;
  }
  .c-lobby .c-hero h1 { font-size: 22px; font-weight: 600; letter-spacing: .01em; }
  .c-lobby .c-hero-lead {
    display: block; margin: 4px 0 0; max-width: 60ch;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .c-lobby .c-hero-ops { flex-wrap: nowrap; gap: var(--s1); }
  .c-lobby .c-hero-ops .c-btn { height: 44px; min-height: 44px; min-width: 132px; padding: 0 20px; }

  /* ② 状态条：一张卡、三格等宽（1fr），格与格之间是竖发丝线；高 64 由格子自己撑。 */
  .c-lobby .c-status {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch; gap: 0; height: 64px; padding: 0; background: var(--c-card);
  }
  .c-lobby .c-stat {
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    padding: 0 16px; min-width: 0; border-left: 1px solid var(--c-line);
  }
  .c-lobby .c-stat:first-child { border-left: 0; }
  .c-lobby .c-stat-k { font-size: 12px; line-height: 16px; }
  .c-lobby .c-stat-v {
    display: block; font-size: 18px; font-weight: 600; line-height: 24px; color: var(--c-t);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ③ 房间列表：minmax(320px,1fr) + 16 间距；卡片固定成"头 / 身 / 脚"各一行。 */
  .c-lobby .c-rooms-sec { gap: var(--s2); }
  .c-lobby .c-rooms-sec .c-sec-head { margin-bottom: 0; }     /* 只留 gap 那一份 12，不叠成 24 */
  .c-lobby .c-roomgrid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s3); }
  .c-lobby .c-roomcard { gap: var(--s2); }
  .c-lobby .c-roomcard .c-card-head { flex-wrap: nowrap; overflow: hidden; gap: var(--s1); }
  .c-lobby .c-rcode { flex: 0 0 auto; font-size: 15px; }
  /* 状态：小圆点 + 12px 文字（圆点用 currentColor，沿用原来的等待金 / 进行中青） */
  .c-lobby .c-roomcard .c-tag.wait, .c-lobby .c-roomcard .c-tag.live {
    flex: 0 0 auto; border: 0; background: none; padding: 0; line-height: 18px;
  }
  .c-lobby .c-roomcard .c-tag.wait::before, .c-lobby .c-roomcard .c-tag.live::before {
    content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px;
    border-radius: 50%; background: currentColor; vertical-align: 1px;
  }
  .c-lobby .c-roomcard .c-tag.mine, .c-lobby .c-roomcard .c-tag:not(.wait):not(.live) { flex: 0 0 auto; }
  /* 身：桌面上两行 meta（人数 / 房主）并成一行 —— 带观战数、带人机的卡不会比谁高一截；
     房主吃掉剩下的宽度，长昵称走省略号。 */
  .c-lobby .c-roomcard .c-card-body {
    flex-direction: row; align-items: baseline; gap: var(--s3); min-width: 0;
  }
  .c-lobby .c-roomcard .c-rmeta { min-width: 0; }
  .c-lobby .c-roomcard .c-rmeta:last-child { flex: 1 1 auto; }
  .c-lobby .c-roomcard .c-rmeta b { flex: 1 1 auto; min-width: 0; }
  /* 脚：36 高、8 间距，靠 .c-card-foot 自带的 margin-top:auto 钉在卡片底部。 */
  .c-lobby .c-roomcard .c-card-foot { flex-wrap: nowrap; gap: var(--s1); }
  .c-lobby .c-roomcard .c-btn {
    flex: 1 1 0; min-width: 0; height: 36px; min-height: 36px; padding: 0 10px;
    font-size: 13px; white-space: nowrap;
  }
  /* 悬停只提边框颜色（旧版还加了位移感的投影，宽屏上像在"跳"） */
  .c-lobby .c-roomcard:hover { border-color: var(--c-line2); box-shadow: none; }
  /* 刷新 / 房号行也收到 36，跟卡脚同一档 */
  .c-lobby .c-sec-link { height: 36px; min-height: 36px; padding: 0 12px; }
  .c-lobby .c-joinrow .c-input { height: 36px; min-height: 36px; }
  .c-lobby .c-joinrow .c-btn { height: 36px; min-height: 36px; }

  /* ④⑤ 两行次级卡：行内等高（拉伸）+ 卡内 flex，按钮落到底部；行与行之间可以不同高。
     四张卡同宽（半栏减 8，即 552）同一个左边缘，标题 15 / 正文 13 / 操作 36。 */
  .c-lobby .c-duo { align-items: stretch; gap: var(--s3); }
  .c-lobby .c-duo > .c-sec { display: flex; flex-direction: column; min-width: 0; }
  .c-lobby .c-sec-head h2 { font-size: 15px; }
  .c-lobby .c-duo .c-sec-head { margin-bottom: var(--s2); }
  .c-lobby .c-duo .c-btn,
  .c-lobby .c-duo .c-chip-btn,
  .c-lobby .c-duo .c-check,
  .c-lobby .c-duo .c-setup-row .c-btn.sm,
  .c-lobby .c-duo .c-rules-d > summary { height: 36px; min-height: 36px; }
  .c-lobby .c-duo .c-btn, .c-lobby .c-duo .c-chip-btn { font-size: 13px; padding: 0 12px; }
  /* 操作行一律落到底部（两行次级卡的按钮在同一条水平线上）；卡里还有面板时（强自定义的
     #cPanel 在按钮下面）面板照旧在按钮下方展开，自动外边距自然收到 0。 */
  .c-lobby .c-duo .c-acts { margin-top: auto; padding-top: var(--s2); gap: var(--s1); }
  .c-lobby .c-duo .c-note { margin-top: var(--s2); }

  /* 提示条是直接子元素，块间距离交给 .c-lobby 的 gap（24），别再叠 12 */
  .c-lobby .c-hint { margin: 0; }
  /* 排队条：贴在大厅底部（短页也是底部，不浮在中段） */
  .c-lobby .c-queue { margin-top: auto; }
}

/* 旧版页头那几个卖点 chip 已经删了（信息并进一句话规则 / 设置弹窗），这里不再留样式 */
.c-sec { margin-top: 18px; padding: 18px 18px 16px; border: 1px solid var(--c-line); border-radius: 16px;
  background: var(--c-card); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.c-sec > h2 { margin: 0 0 12px; font-size: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--c-t); }
.c-now { font-size: 13px; color: var(--c-d2); font-weight: 400; }
/* 2026-10-25：出战配置"选择随账号保存"的小标记（与卡兹的「✓ 已记住」同一个口径）。
   只作说明，不占独立一行；标题栏本来就是 flex-wrap，窄屏会自动换行。
   2026-10-26 大厅重排：11px → 12px（全页字号下限 12，旧值是全页唯一一处 <12）。 */
.c-saved {
  margin-left: .45rem; font-size: 12px; font-weight: 400;
  color: #2f6d46; background: #eef7f1; border: 1px solid #cfe3d6;
  border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
/* 说明文字：会出现在白卡片上、也会直接落在页面灰底（#f6f6f6）上，
   所以用 --c-d（两种底都 ≥7:1）；--c-d2 在灰底上只有 4.47:1，不够。 */
.c-note { margin: 10px 0 0; font-size: 13px; color: var(--c-d); line-height: 1.8; }
.c-note b { color: var(--c-d); }
.c-empty { color: var(--c-d2); font-size: 14px; padding: 10px 4px; }

/* 页面级提示条：成功 / 失败（含服务端原样返回的中文原因）都写在这里。
   2026-10-04 之前 paintHint() 找的 #cHint 在页面上压根不存在 → 所有提示都是"点了没反应"。 */
.c-hint { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.6;
  border: 1px solid var(--c-line2); background: var(--c-card); color: var(--c-t); }
.c-hint.ok { border-color: #bcd8c2; background: #f2f9f4; color: var(--c-ok); }
.c-hint.bad { border-color: #e0b6b2; background: #fdf3f2; color: var(--c-bad); }

/* 牌桌的提交状态行（.c-chips / .c-chip 在文件末尾还有一套深色底的定义，那是 .c-top 里的） */
.c-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.c-chip-btn { cursor: pointer; font: inherit; font-size: 14px; color: var(--c-t); padding: 8px 12px; border-radius: 12px;
  border: 1px solid var(--c-line2); background: var(--c-card); display: inline-flex; align-items: center; gap: 8px; }
.c-chip-btn:hover { border-color: var(--c-d2); }
.c-chip-btn.on { border-color: var(--c-red); background: #fdf2f1; color: var(--c-red); font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(179, 36, 36, .18); }
.c-chip-tag { font-size: 12px; color: var(--c-d2); border: 1px solid var(--c-line); border-radius: 999px; padding: 1px 7px; background: var(--c-card2); }

.c-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.c-row-inner { display: flex; gap: 8px; }
.c-label { font-size: 14px; color: var(--c-d); }
.c-acts { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* 「单人格（可直接上场）」一行：只编了人格、还没编整套出战配置的人从这里上场。
   用户报过「自定义人格不在我的出战配置栏」——上面那行只列 clash_loadouts。 */
.c-perrow { margin-top: 12px; align-items: flex-start; }
.c-perrow .c-label { flex: 0 0 auto; padding-top: 6px; }

/* 排队状态条：只要还在队列里就一定带「取消排队」。
   旧版把可见性挂在 S.queueing 上，"等满 30 秒出现人机按钮"那刻 queueing=false → 取消入口消失。
   它渲染在大厅**最末尾**，sticky:bottom:0 → 整个大厅滚动范围内都吸在滚动区底部（滑到哪都够得着）。 */
.c-queue { position: sticky; bottom: 0; z-index: 21; margin-top: 14px; padding: 10px 12px;
  border: 1px solid var(--c-gold); border-radius: 12px; background: #fdfaf0;
  box-shadow: 0 -6px 16px rgba(20, 24, 30, .16);
  display: flex; flex-direction: column; gap: 8px; }
.c-queue-t { font-size: 13.5px; color: var(--c-t); line-height: 1.6; }
.c-queue-t b { color: var(--c-gold); font-size: 15px; }
.c-queue-ops { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.c-join { display: inline-flex; gap: 8px; align-items: center; }

.c-btn { cursor: pointer; font: inherit; font-size: 15px; padding: 10px 16px; border-radius: 12px;
  color: var(--c-t); border: 1px solid var(--c-line2); background: linear-gradient(180deg, #fff, #f2f4f7); }
.c-btn:hover { border-color: var(--c-d2); }
.c-btn.sm { font-size: 13px; padding: 6px 11px; border-radius: 10px; }
.c-btn.primary { border-color: #8f1c1c; background: linear-gradient(180deg, #c02c26, #9c211c); color: #fff; }
.c-btn.primary:disabled { opacity: .5; cursor: default; }
.c-btn.danger { border-color: #d7b3b0; color: var(--c-bad); background: #fdf4f3; }
.c-btn.on { border-color: var(--c-gold); background: #fbf4e3; color: var(--c-gold); font-weight: 700; }
.c-input { font: inherit; font-size: 14px; color: var(--c-t); background: var(--c-card);
  border: 1px solid var(--c-line2); border-radius: 10px; padding: 8px 10px; min-width: 90px; }
.c-input:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 2px rgba(42, 84, 168, .18); }
.c-ta { width: 100%; min-height: 200px; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }

/* 自定义数据面板 */
.c-panel { margin-top: 14px; border-top: 1px dashed var(--c-line2); padding-top: 12px; }
.c-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.c-panel-head b { color: var(--c-t); }
.c-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.c-ccard { border: 1px solid var(--c-line); border-left: 4px solid var(--sin, var(--c-blue)); border-radius: 12px;
  padding: 10px 12px; background: var(--c-card2); }
.c-ccard.pub { background: #fdfaf1; }
.c-ccard-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--c-t); }
.c-ccard-line { color: var(--c-d); font-size: 12.5px; margin-top: 6px; }
.c-ccard-ops { margin-top: 9px; display: flex; gap: 6px; flex-wrap: wrap; }
.c-tag { font-size: 12px; border: 1px solid var(--c-line2); border-radius: 999px; padding: 1px 7px; color: var(--c-d); background: var(--c-card); }
.c-tag.mine { color: var(--c-blue); border-color: #b9c8e4; background: #f2f6fd; }
.c-tag.other { color: var(--c-d2); }
.c-tag.dead { color: var(--c-bad); border-color: #e0b6b2; background: #fdf3f2; }
.c-tag.panic { color: var(--c-gold); border-color: #e0cf9f; background: #fbf4e3; }
.c-tag.g { color: var(--c-blue); border-color: #b9c8e4; background: #f2f6fd; }

/* ---------------------------------------------------------------- 卡面（自定义技能/人格/出战配置的图）
   2026-10-04 新增。「有图」那一种布局同样贴住浅色体系：容器只做圆角 + 裁切 + 站点的浅色边框，
   不加任何半透明黑罩、也不用深色底（**没有深色主题**）。
   所有卡面图统一 object-fit:cover + 固定高度/边长：长宽比再怪也不会把卡片挤变形。 */
.c-ccard-art { display: block; height: 54px; border-radius: 10px; overflow: hidden; margin-bottom: 8px;
  background: var(--c-card); border: 1px solid var(--c-line); }
.c-ccard-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 编辑器「卡面」一栏：缩略图 + 选文件 + 删除（三种编辑器共用） */
.c-art-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.c-art-thumb { width: 64px; height: 64px; flex: 0 0 auto; border: 1px solid var(--c-line2); border-radius: 10px;
  background: var(--c-card2); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
.c-art-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 「没图」两个字压在浅底上：用 --c-d（白底 8.6:1），别用更浅的 --c-d2 */
.c-art-none { font-size: 12px; color: var(--c-d); font-style: normal; }
.c-art-side { display: flex; flex-direction: column; gap: 4px; flex: 1 1 190px; min-width: 0; }
.c-art-file { max-width: 100%; min-width: 0; }
.c-art-tip { font-size: 12px; color: var(--c-d); font-style: normal; line-height: 1.5; }

.c-editor { margin-top: 12px; border: 1px solid var(--c-line2); border-radius: 14px; padding: 14px; background: var(--c-card); }
.c-editor-head { font-weight: 700; margin-bottom: 10px; color: var(--c-t); }
.c-editor-sub { margin: 12px 0 6px; font-size: 13px; color: var(--c-d); }
/* ★ 2026-10-25 Phase 3：自定义技能的"行式编辑器"（给予效果 / 逐枚 / 触发）与人格的恐慌阈值 / 被动。
   触屏可点：每行高 ≥44px、删除按钮 ≥44px（手机端 UI 审计要求）。 */
.c-effbox { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.c-effrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px;
  padding: 6px 8px; background: var(--c-card2); border: 1px solid var(--c-line); border-radius: 10px; }
.c-effrow .c-input { flex: 1 1 96px; min-width: 76px; min-height: 40px; }
.c-effrow .c-er-idx { flex: 0 0 auto; font-size: 12.5px; color: var(--c-d); white-space: nowrap; }
/* ★ 2026-10-25 Phase 3b：逐枚硬币行 = 硬币类型 + 触发器子列表（不再是一个横向长行）。
   触发器 = 条件 + 目标 + 效果行；都允许换行，手机 390 上不横向溢出、每行高 ≥44px。 */
.c-coinrow { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 8px;
  background: var(--c-card2); border: 1px solid var(--c-line); border-radius: 10px; }
.c-coinhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.c-coinhead .c-input { flex: 1 1 90px; min-width: 76px; }
.c-trigbox { display: flex; flex-direction: column; gap: 6px; }
.c-trigrow { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px dashed var(--c-line2);
  border-radius: 10px; background: var(--c-card); }
.c-trighead, .c-trigcond { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.c-trighead .c-input { flex: 1 1 96px; min-width: 80px; }
.c-trigcond .c-input { flex: 1 1 66px; min-width: 60px; }
.c-trigeffs { display: flex; flex-direction: column; gap: 6px; }
.c-trigeff { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px;
  padding: 4px 6px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-card2); }
.c-trigeff .c-input { flex: 1 1 64px; min-width: 56px; min-height: 40px; }
/* ★ 2026-10-25 Phase 3b（owner 定稿）：效果 5 类里的「施加 buff（可多选）」——
   一条 buff 效果里可以挂多种 buff，每条各带强度 / 层数（手机换行、控件 ≥44px）。 */
.c-tre-buffs { display: flex; flex-direction: column; gap: 6px; flex: 1 1 100%; }
.c-trebuff { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 6px;
  border: 1px dashed var(--c-line2); border-radius: 8px; background: var(--c-card); }
.c-trebuff .c-input { flex: 1 1 62px; min-width: 54px; min-height: 40px; }
.c-trigcond .c-note, .c-trigeff .c-note { flex: 0 0 auto; }
.c-trigrow > [data-c-row-add] { align-self: flex-start; }
/* ★ 2026-10-25 Part 2：人格被动那一行（触发 / 持续 / N 回合 / 效果；效果 = 获得某 buff 时
   再加 buff 下拉 + 强度 + 层数）。控件统一 44px 高 —— 手机 390 上点得中、不横向溢出
   （老四种效果只有一个「数值」框，走同一条不会影响任何断言）。 */
.c-passrow .c-input { flex: 1 1 88px; min-height: 44px; }
/* 「获得某 buff」的摘要句：单独占满一行的说明文字（不是控件，不参与 44px 手指导则；
   长名字 / 窄屏一律换行，不把这一行撑出横向滚动条）。 */
.c-passrow .c-pr-sum { flex: 1 1 100%; margin: 0; font-size: 12.5px; line-height: 1.5;
  color: var(--c-d); overflow-wrap: anywhere; }
/* ★ 2026-10-25 Phase 4：自定义 buff 管理器（性质 3 选 1 / 触发行 / 效果行）。
   与逐枚触发器同一套排版口径：行内换行、手机 390 不横向溢出、所有可点元素 ≥44px。 */
.c-naturebox { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.c-nature { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px;
  border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-card2);
  font-size: 13.5px; color: var(--c-t); cursor: pointer; }
.c-nature input { width: 18px; height: 18px; flex: 0 0 auto; }
.c-nature.n-negative { border-color: #d9a3a0; }
.c-nature.n-positive { border-color: #9cc9a8; }
.c-nature.n-neutral { border-color: var(--c-line2); }
.c-buffrow { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px;
  background: var(--c-card2); border: 1px solid var(--c-line); border-radius: 10px; }
.c-buffrow .c-trighead .c-input { flex: 1 1 140px; min-width: 96px; }
.c-buffrow .c-trigcond .c-input { flex: 0 1 96px; min-width: 72px; }
.c-buffeffs { display: flex; flex-direction: column; gap: 6px; }
.c-buffeff { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px;
  padding: 4px 6px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-card); }
.c-buffeff .c-input { flex: 1 1 78px; min-width: 60px; min-height: 40px; }
.c-buff-none { font-size: 12.5px; line-height: 1.5; color: var(--c-d); padding: 6px 8px;
  border: 1px dashed var(--c-line2); border-radius: 8px; background: var(--c-card); }
.c-buffrow > [data-c-row-add] { align-self: flex-start; }
/* 列表卡片上的性质标签（负面红 / 正面绿 / 中立灰） */
.c-buffcard.n-negative { border-color: #d9a3a0; }
.c-buffcard.n-positive { border-color: #9cc9a8; }
.c-naturetag { border: 1px solid currentColor; }
.c-naturetag.n-negative { color: #b5453f; background: #fdecea; }
.c-naturetag.n-positive { color: #2f7a4a; background: #eaf6ee; }
.c-naturetag.n-neutral { color: #5f6469; background: #eef0f2; }
.c-thbox { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.c-row-del { flex: 0 0 auto; min-height: 44px; }
[data-c-row-add] { min-height: 44px; }
/* 战报里的新流水：闪避失手 / 恐慌（进入·解除） */
.c-dodge-log { font-size: 12.5px; color: #2f6f8f; padding: 2px 0; }
.c-panic-log { font-size: 12.5px; color: #a1521f; padding: 2px 0; }
.c-cancel.panic { color: #a1521f; }
.c-editor-ops { margin-top: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.c-field { display: block; margin-bottom: 10px; }
.c-flabel { display: block; font-size: 12.5px; color: var(--c-d); margin-bottom: 4px; }
/* 多选列表用复选框（不用 <select multiple>：触屏上点第二项会顶掉第一项） */
.c-check-list { max-height: 190px; overflow: auto; border: 1px solid var(--c-line2); border-radius: 10px;
  padding: 4px 8px; background: var(--c-card); }
.c-check-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--c-t);
  padding: 4px 0; cursor: pointer; border-bottom: 1px dashed var(--c-line); }
.c-check-item:last-child { border-bottom: 0; }
.c-check-from { color: var(--c-d2); font-style: normal; font-size: 12px; margin-left: 6px; }
/* 编辑器弹窗自带的提示条（保存失败的中文原因显示在这里，不会被弹窗自己盖住） */
.c-edlg-in > .c-hint { margin: 10px 16px 0; flex: 0 0 auto; }
.c-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.c-check { font-size: 13px; color: var(--c-d); display: inline-flex; align-items: center; gap: 6px; }
.c-preview { margin-top: 12px; background: var(--c-card2); border: 1px dashed var(--c-line2); border-radius: 12px; padding: 10px; }
.c-resist { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.c-res { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--c-d); }
.c-res .c-input { min-width: 60px; width: 70px; }

/* ---------------------------------------------------------------- 牌堆 / 防御牌编辑器（2026-11）
   用户要求：自定义角色 = 9–12 张技能牌牌堆（同名 ≤3）+ 1–2 张防御牌。
   参照卡兹的「卡池 + 卡组」：左卡池点一下加一张，右卡组 − / + 调张数；防御牌单独一块。
   手机上改成单列、卡池高度收窄，所有可点元素 ≥44px（编辑器弹窗里统一 44px 那条也覆盖）。 */
.c-deckbox { margin-top: 10px; border: 1px solid var(--c-line2); border-radius: 12px; padding: 10px; background: var(--c-card2); }
.c-deck-counters { display: flex; flex-wrap: wrap; gap: 6px; }
.c-deck-cnt { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border-radius: 99px;
  font-size: 12px; font-weight: 700; border: 1px solid currentColor; }
.c-deck-cnt.ok { color: #2f7a4a; background: #eaf6ee; }
.c-deck-cnt.bad { color: var(--c-bad, #b5453f); background: #fdecea; }
.c-deck-hint { margin-top: 7px; font-size: 12.5px; line-height: 1.45; }
.c-deck-hint.ok { color: #2f7a4a; }
.c-deck-hint.bad { color: var(--c-bad, #b5453f); }
.c-deckwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.c-deck-col { min-width: 0; }
.c-deck-col-h { font-size: 12px; color: var(--c-d); margin-bottom: 6px; }
.c-deck-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px;
  max-height: 300px; overflow: auto; -webkit-overflow-scrolling: touch; padding-right: 2px; }
.c-deck-card { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-height: 44px; text-align: left;
  padding: 6px 8px; border-radius: 10px; cursor: pointer; background: var(--c-card); color: var(--c-t);
  border: 1px solid var(--c-line); border-left: 4px solid var(--tier, #4a8fc2); }
.c-deck-card:hover { border-color: var(--c-d2); }
.c-deck-card.full { opacity: .55; cursor: not-allowed; }
.c-deck-card b { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.c-deck-card .c-deck-from { flex: 1 0 100%; font-size: 11.5px; color: var(--c-d2); }
.c-deck-n { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--c-d); }
.c-deck-list { border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-card);
  max-height: 300px; overflow: auto; -webkit-overflow-scrolling: touch; padding: 4px 6px; }
.c-deck-list .c-empty { padding: 14px 8px; }
.c-deck-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 44px;
  padding: 4px 2px; border-bottom: 1px dashed var(--c-line); font-size: 13px; color: var(--c-t); }
.c-deck-row:last-child { border-bottom: 0; }
.c-deck-row.bad { color: var(--c-bad, #b5453f); }
.c-deck-row b { min-width: 0; overflow-wrap: anywhere; }
.c-deck-copies { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.c-deck-copies b { min-width: 20px; text-align: center; }
.c-deck-op { width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--c-line2); background: var(--c-card2); color: var(--c-t); font-size: 17px; line-height: 1; }
.c-deck-op:hover { border-color: var(--c-d2); }
.c-defbox { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--c-line2); }
.c-def-pool { display: flex; flex-wrap: wrap; gap: 6px; }
.c-def-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 10px;
  border-radius: 10px; cursor: pointer; background: var(--c-card); color: var(--c-t);
  border: 1px solid var(--c-line); }
.c-def-chip.on { box-shadow: 0 0 0 2px var(--c-blue, #4a8fc2) inset; border-color: var(--c-blue, #4a8fc2); }
.c-def-kind { font-size: 11.5px; font-weight: 700; padding: 1px 6px; border-radius: 99px; color: #fff; }
.c-def-kind.guard { background: #4a8fc2; }
.c-def-kind.counter { background: #e2504a; }
.c-def-chip b { font-size: 13px; }
.c-def-from { font-size: 11.5px; color: var(--c-d2); }
.c-tag.preset { background: #f2e6c8; color: #7a5a12; border: 1px solid #dfc98f; }
@media (max-width: 720px) {
  .c-deckwrap { grid-template-columns: minmax(0, 1fr); }
  .c-deck-pool, .c-deck-list { max-height: 220px; }
  .c-deck-pool { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .c-edlg .c-deck-card, .c-edlg .c-def-chip, .c-edlg .c-deck-op { min-height: 44px; }
  .c-deck-op { width: 44px; min-width: 44px; }
}

/* 弹窗（导出 / 导入） */
.c-dlg { position: fixed; inset: 0; z-index: 80; background: rgba(20, 22, 28, .5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.c-dlg-in { width: min(680px, 100%); background: var(--c-card); border: 1px solid var(--c-line2); border-radius: 16px; padding: 16px; color: var(--c-t); }
.c-dlg-h { font-weight: 700; margin-bottom: 10px; color: var(--c-t); }
.c-dlg-ops { margin-top: 12px; display: flex; gap: 10px; justify-content: flex-end; }

/* 编辑器弹窗（手机从底部升起、可滚动；桌面居中） */
.c-edlg { padding: 16px; align-items: center; }
.c-edlg-in { display: flex; flex-direction: column; max-height: 88vh; padding: 0; overflow: hidden; }
.c-edlg-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--c-line); }
.c-edlg-head b { flex: 1 1 auto; font-size: 16px; }
.c-edlg-body { padding: 14px 16px; overflow: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) {
  .c-edlg { padding: 0; align-items: flex-end; }
  .c-edlg-in { width: 100%; max-width: none; max-height: 94vh; border-radius: 18px 18px 0 0; border-bottom: 0; }
  .c-edlg-head { padding: 14px 16px; position: sticky; top: 0; background: var(--c-card); z-index: 1; }
  .c-edlg-body { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  /* 手机上编辑器里的控件都放大到手能点准 */
  .c-edlg .c-input, .c-edlg select.c-input { font-size: 16px; padding: 10px 12px; min-height: 44px; }
  .c-edlg .c-btn { min-height: 44px; }
  .c-edlg .c-editor-ops { position: sticky; bottom: 0; background: var(--c-card); padding: 10px 0; border-top: 1px solid var(--c-line); }
}

/* ---------------------------------------------------------------- 等待房间 */
.c-code { font-family: ui-monospace, Consolas, monospace; color: var(--c-gold); letter-spacing: .18em; font-weight: 800; }
.c-invite { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--c-d); }
.c-invite .c-input { min-width: 280px; flex: 1 1 280px; }
.c-seats { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.c-seat { border: 1px dashed var(--c-line2); border-radius: 12px; padding: 12px; color: var(--c-d2); font-size: 13px; background: var(--c-card2); }
.c-seat.on { border-style: solid; border-color: var(--c-blue); color: var(--c-t); background: #f2f6fd; }
.c-seat-nm { font-size: 16px; font-weight: 700; margin-top: 6px; color: var(--c-t); }

/* ---------------------------------------------------------------- 对战界面 */
/* 深色锚点：顶栏。它是这一页唯一的深色块，文字全部显式给浅色（14:1 / 7:1）。 */
.c-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px;
  background: var(--c-dark); color: var(--c-dark-t); box-shadow: 0 6px 18px rgba(20, 24, 30, .18); }
.c-round { font-weight: 800; letter-spacing: .04em; color: #fff; }
.c-turnbar { font-size: 13px; color: #ffd9a0; }
.c-mini { font-size: 12.5px; color: var(--c-dark-d); }
.c-top .c-btn { border-color: rgba(255, 255, 255, .28); color: #f2f5f9; background: rgba(255, 255, 255, .08); }

.c-board { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; position: relative; }
.c-side { border: 1px solid var(--c-line); border-radius: 16px; padding: 12px; background: var(--c-card); }
.c-side.foe { border-top: 3px solid var(--c-red); }
.c-side.me { border-top: 3px solid var(--c-blue); }
.c-side-h { font-size: 12.5px; letter-spacing: .18em; color: var(--c-d2); margin-bottom: 8px; text-transform: uppercase; }
.c-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.c-per { border: 1px solid var(--c-line); border-radius: 14px; padding: 10px; background: var(--c-card2); color: var(--c-t);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.c-per[data-c-foe] { cursor: crosshair; }
.c-per[data-c-mine] { cursor: pointer; }
.c-per:hover { transform: translateY(-2px); border-color: var(--c-d2); box-shadow: 0 6px 16px rgba(20, 24, 30, .08); }
.c-per.picking { border-color: var(--c-gold); background: #fdfaf0; box-shadow: 0 0 0 2px rgba(138, 100, 20, .22); }
.c-per.dead { opacity: .55; background: #f1f2f4; }
.c-per.panic { border-color: #d9bf74; background: #fdf8e8; animation: c-panic 1.6s ease-in-out infinite; }
@keyframes c-panic { 0%, 100% { box-shadow: 0 0 0 0 rgba(138, 100, 20, 0); } 50% { box-shadow: 0 0 0 4px rgba(138, 100, 20, .14); } }
.c-per-top { display: flex; align-items: center; gap: 8px; color: var(--c-t); }
.c-per-top b { font-size: 15px; color: var(--c-t); }
/* 人格卡面：桌面通栏一条（order:5 → 排在名字/速度那一行**下面**；DOM 里它在最前面，
   这样手机上只要把 order 调回 0 就变成名字左边的小方块，一套标记两种形态）。 */
.c-per-art { order: 5; flex: 1 1 100%; height: 84px; margin-top: 6px; border-radius: 10px; overflow: hidden;
  background: var(--c-card); border: 1px solid var(--c-line); }
.c-per-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-speed { margin-left: auto; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; color: var(--c-gold); font-weight: 700; }
.c-hp { margin-top: 8px; height: 16px; border-radius: 8px; background: #e6e9ed; position: relative; overflow: hidden; border: 1px solid var(--c-line); }
.c-hp i { display: block; height: 100%; background: linear-gradient(90deg, #c0403a, #b32424); transition: width .45s cubic-bezier(.22, 1, .36, 1); }
/* 血量数字横跨"红色血条 + 浅色轨道"两种底色：用深字 + 白色描边，
   两边都看得清（审计只量 color 与底色，深字对两种底都达标）。 */
.c-hp span { position: absolute; inset: 0; text-align: center; font-size: 12px; line-height: 15px;
  color: var(--c-t); font-weight: 700; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; }
.c-sp { margin-top: 6px; height: 6px; border-radius: 4px; background: #dfe3e8; position: relative; }
.c-sp i { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--c-blue); }
.c-sp span { display: block; font-size: 12px; color: var(--c-d); margin-top: 4px; }
/* ★ 2026-11（owner 反馈）：**每个人格自己的资源小条**（手牌 / 牌堆 / 能量）。
   一队不再共用一个池子，所以每个角色卡下面各写各的，页面顶上的 .c-energy 只是
   "当前出手那个人格"的迷你指示器。桌面一行小字；手机上也只占一行（见 ≤720px 段）。 */
.c-per-res { display: flex; align-items: center; gap: 3px; margin-top: 6px; font-size: 12px; line-height: 1.2;
  color: var(--c-d); font-variant-numeric: tabular-nums; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.c-per-res b { color: var(--c-gold, #8a6414); font-weight: 700; }
/* 每个人格自己的「已提交 / 已跳过」角标（自动跳过用暖色，肉眼能分出"没牌可出"与"已交"） */
.c-tag.done { color: #1f5f33; border-color: #a8d5b6; background: #eef8f1; }
.c-tag.done[data-c-per-passed="1"] { color: #6b5a1f; border-color: #d9c48a; background: #fbf6e6; }
/* 「抽技能」标题旁写明这是谁的手牌（换人时一眼看得出切过去了） */
.c-draw-who { font-size: 12.5px; color: var(--c-d); font-weight: 400; margin-left: 4px; }
.c-st { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; min-height: 4px; }
.c-sti { font-size: 12px; border: 1px solid #cdbfe0; border-radius: 999px; padding: 1px 7px; color: #5b2a7a; background: #f6f0fb; }
/* 技能卡面 .c-sk 只剩**技能库编辑器预览**在用（战斗界面的"每人格四张固定技能卡"已删）。 */
.c-sk { border: 1px solid var(--c-line); border-left: 4px solid var(--sin, #6b7280); border-radius: 11px; padding: 8px 10px;
  background: var(--c-card); color: var(--c-t); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.c-sk.guard { border-style: dashed; }
.c-sk.minus { background: #fdf6ef; }
.c-sk.unbreak { background: #fdf1f0; }
.c-sk-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.c-sk-top b { color: var(--c-t); }
/* 技能卡面：有图时是 40px 的小方块（手机 28px），没图就整块不渲染 —— 技能卡高度不变 */
.c-sk-art { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; overflow: hidden;
  background: var(--c-card); border: 1px solid var(--c-line); }
.c-sk-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-sin { font-size: 12px; padding: 1px 7px; border-radius: 999px; color: var(--c-t); background: #fff;
  border: 1.5px solid var(--sin, #6b7280); font-weight: 700; }
.c-sk-num { font-size: 12px; color: var(--c-d); margin-top: 4px; }
.c-coins { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.c-coin { width: 13px; height: 13px; border-radius: 50%; display: inline-block;
  background: radial-gradient(circle at 34% 30%, #fff, #9fb4cf 45%, #4b5a70 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35), inset 0 -1px 2px rgba(0, 0, 0, .3); }
.c-sk.minus .c-coin { background: radial-gradient(circle at 34% 30%, #fff2e2, #e07a3c 48%, #7b3a13 100%); }
.c-sk.unbreak .c-coin { background: radial-gradient(circle at 34% 30%, #ffe6e3, #d0392f 48%, #7a1f1f 100%); }
.c-coin.gone { opacity: .25; box-shadow: none; }
.c-coin.broken { position: relative; outline: 1.5px solid var(--c-bad); outline-offset: 1px; }
.c-cmod { margin-left: 6px; font-size: 12px; color: var(--c-d); font-family: ui-monospace, Consolas, monospace; }
.c-sk-text { margin-top: 5px; font-size: 12px; color: var(--c-d); line-height: 1.6; }
/* 这一手打出去的牌（代替被删掉的「已选：技能 → 目标」）：攻击写"打谁"、守备写"保护谁" */
.c-pending { margin-top: 8px; font-size: 12px; color: var(--c-t); border-left: 3px solid var(--c-gold, #8a6414);
  padding: 3px 8px; background: #fff; border-radius: 0 8px 8px 0; }
.c-pending[data-c-pending="guard"] { border-left-color: var(--c-blue); }
/* 技能卡上的「伤害 N」（威力 ≠ 伤害：伤害公式用的是 baseDamage） */
.c-sk-dmg { color: var(--c-bad); font-weight: 700; }
/* 等待房间的规则折叠块（「规则」按钮真正控制的那一块） */
.c-waitrules { margin-top: 12px; }
.c-waitrules .c-sec { margin-top: 0; }

/* 攻击路线（SVG）：实线 = 已指派；红色虚线 = 预览（选好技能、鼠标停在对手卡上） */
.c-linkwrap { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.c-links { width: 100%; height: 100%; overflow: visible; display: block; }   /* block：内联 SVG 会多出 6px 基线空档，把牌桌撑出滚动 */
.c-link { fill: none; stroke: rgba(138, 100, 20, .9); stroke-width: 2; stroke-dasharray: 7 5;
  animation: c-link-dash 1.4s linear infinite; }
.c-link.foe { stroke: rgba(179, 36, 36, .9); }
.c-link.preview { stroke: var(--c-red); stroke-width: 2.5; stroke-dasharray: 4 4; opacity: .85; animation-duration: .9s; }
@keyframes c-link-dash { to { stroke-dashoffset: -24; } }

.c-tray { margin-top: 12px; }
.c-tray-h { font-size: 13.5px; color: var(--c-d); border: 1px dashed var(--c-line2); border-radius: 12px;
  padding: 10px 12px; background: var(--c-card2); }
.c-tray-h b { color: var(--c-t); }
.c-odds-wrap { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-left: 8px; }
.c-odds { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  border: 1.5px solid var(--tier, #6b7280); color: var(--tier, #4b5158); background: #fff; }

.c-foot { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.c-over { font-size: 16px; font-weight: 700; color: var(--c-gold); }
/* ★ 2026-11：「跳过」—— 有牌但不想出时的出口（引擎 type:'pass'）。
   桌面住在这条操作条里，手机住在吸底的「当前条」右侧；两处都必须 ≥44px。
   桌面多写一个当前人格名，明确"跳过的是谁"；手机上只留两个字（宽度留给牌桌）。 */
.c-pass { min-height: 44px; min-width: 44px; font-weight: 700; }
.c-pass .c-pass-who { font-weight: 400; opacity: .85; margin-left: .25em; }

/* 手机专用的小部件：桌面下一律不渲染（卡面与布局与改动前完全一致）。
   .c-pick      —— 紧凑人格条上的"出手：<人格名>"（点一下换人出牌）
   .c-tag.hit   —— 选好手牌后对手卡上的"可打"标记
   .c-footspace —— 给吸底的「当前条 + 操作条」留位的占位块
   .c-key       —— 吸底的「本回合要点」条（整块可点 = 弹出战报抽屉）
   #cLogClose   —— 战报抽屉里的「收起战报」
   2026-10 手机重做：战报原先在文档最末尾（360×640 实测 top 872 / 高 1454 / 视口外），
   而九个新引擎概念（五类守备 / 护盾 / 99 封顶 / +3% / 截除 / 威力削弱 / 混乱阈值前移 /
   残余攻击 / 回合流程）全在那一块里 —— 手机上等于够不着。所以手机上战报走**底部抽屉**。
   2026-11：四选一技能面板（.c-skills / .c-sheet-h）整块删了，这里不再需要给它让位。 */
.c-pick, .c-tag.hit, .c-footspace, .c-key, #cLogClose { display: none; }
/* 提交/指派在等回包时锁住按钮（手机上防连点），但别用 pointer-events:none —— 交给 disabled */
.c-btn.busy { opacity: .62; }
.c-per.busy { opacity: .72; }

/* ---------------------------------------------------------------- 战报 */
.c-report { margin-top: 16px; border: 1px solid var(--c-line); border-radius: 14px; padding: 12px; background: var(--c-card); }
.c-report-h { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--c-d2); letter-spacing: .06em; margin-bottom: 10px; }
.c-report-h span { flex: 1 1 auto; }
.c-clash, .c-single, .c-death, .c-tick { border: 1px solid var(--c-line); border-radius: 10px; padding: 8px 10px;
  margin-bottom: 8px; font-size: 13px; background: var(--c-card2); color: var(--c-t); }
/* 战报里的"回合数据"（速度抽签 / 罪孽共鸣 / 理智变动 / 状态施加） */
.c-report-x { margin-top: 10px; border-top: 1px dashed var(--c-line2); padding-top: 8px; }
.c-report-x > summary { cursor: pointer; font-size: 13px; color: var(--c-d); margin-bottom: 6px; }
.c-rep-row { font-size: 12.5px; color: var(--c-d); padding: 4px 0; border-bottom: 1px dashed var(--c-line); }
.c-rep-row:last-child { border-bottom: 0; }
.c-rep-row b { color: var(--c-t); }
.c-rep-side { display: inline-block; margin-left: 8px; color: var(--c-d); }
.c-clash-h { font-weight: 700; margin-bottom: 6px; color: var(--c-t); }
.c-cr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: ui-monospace, Consolas, monospace;
  font-size: 12px; color: var(--c-d); padding: 3px 0; }
.c-cr-n { color: var(--c-d2); }
.c-cr-a, .c-cr-b { font-weight: 800; padding: 1px 8px; border-radius: 8px; }
.c-cr-a { color: var(--c-blue); background: #eef3fb; }
.c-cr-b { color: var(--c-bad); background: #fdf1f0; }
.c-cr-vs { color: var(--c-d2); font-size: 12px; letter-spacing: .1em; }
.c-cr.tie { background: #fbf7ea; }
.c-cr-tag { font-size: 12px; color: var(--c-gold); }
.c-cr-flips { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.c-f { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #9aa2ad; }
.c-f.h { background: radial-gradient(circle at 34% 30%, #fff, #7f97b5); box-shadow: 0 0 0 1px #5d6b83; animation: c-coin-pop .5s ease-out; }
.c-f.t { background: #cfd4da; }
.c-f.gone { opacity: .3; }
@keyframes c-coin-pop {
  0% { transform: rotateY(0deg) scale(.4); opacity: .2; }
  60% { transform: rotateY(540deg) scale(1.25); }
  100% { transform: rotateY(720deg) scale(1); opacity: 1; }
}
.c-single b { color: var(--c-t); }
.c-hit { font-family: ui-monospace, Consolas, monospace; color: var(--c-bad); margin-left: 4px; font-weight: 700; }
/* 反面那一枚：2026-10-20 起**不再中断**，只是"本枚只加 0"——所以它照样有一串伤害数字，
   前面挂一个小小的「反」标记（用 ::before，不进 textContent，套件按 +N 断言不受影响）。 */
.c-hit.tail { color: var(--c-d2); font-weight: 400; }
.c-hit.tail::before { content: '反'; font-size: 12px; margin-right: 2px; color: var(--c-d2); }
.c-total { margin-left: 8px; font-weight: 700; color: var(--c-bad); }
.c-guard, .c-counter { margin-left: 8px; font-size: 12px; color: var(--c-blue); }
/* ★ 用户 2026-10 追加（content/_clash-round-spec.md §五）：护盾（与血量独立）+ 战报里的人话流水 */
.c-shield { margin-top: 4px; height: 15px; border-radius: 7px; background: #e8eef6; position: relative; overflow: hidden; border: 1px solid #b9cbe0; }
.c-shield i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #7fa8d4, #4a7fb5); }
.c-shield span { position: absolute; inset: 0; text-align: center; font-size: 12px; line-height: 14px; color: #17324d; font-weight: 700; }
.c-mitig-inline, .c-absorb { margin-left: 8px; font-size: 12px; color: var(--c-blue); }
.c-shield-log, .c-mitig, .c-cancel, .c-noclash { border: 1px solid var(--c-line); border-radius: 10px;
  padding: 8px 10px; margin-bottom: 8px; font-size: 13px; background: var(--c-card2); color: var(--c-t); }
.c-shield-log.gain { color: var(--c-blue); background: #f1f6fc; border-color: #c7d9ec; }
.c-shield-log.absorb { color: #17324d; background: #eaf2fa; border-color: #c7d9ec; }
.c-shield-log.clear { color: var(--c-d); }
.c-mitig { color: var(--c-blue); background: #f1f6fc; border-color: #c7d9ec; }
.c-cancel { color: var(--c-bad); background: #fdf3f2; border-color: #e0b6b2; }
.c-noclash { color: #5b6b7a; background: #f5f7f9; }
/* ★ 2026-10 wiki 对齐追加：截除硬币 / 已被真正摧毁的硬币 / 不参与拼点的硬币（黑云会那种"拼 2 枚打 4 枚"） */
.c-sk.sever .c-coin { background: radial-gradient(circle at 34% 30%, #efe3ff, #8d4ad0 48%, #4a1f7a 100%); }
.c-coin.dead { opacity: .18; box-shadow: none; filter: grayscale(1); }
.c-coin.off-clash { border: 1px dashed #9aa7b4; }
.c-sk-split { margin-top: 4px; font-size: 12px; color: #5b2a7a; }
/* 硬币类型标签（正/负/红/截除）与"打碎 / 被摧毁"的账。
   以前卡面只有硬币小圆点的颜色不同 + 一个 title —— 触屏上 title 根本看不到，
   而"截除硬币/红硬币"正是 wiki §二.10 那套规则的入口，所以按类型写出来。 */
.c-tag.coin { color: var(--c-d); }
.c-tag.coin.minus { color: #8a4b00; border-color: #e6cfa8; background: #fdf6ec; }
.c-tag.coin.unbreakable { color: #8a1a14; border-color: #e0b6b2; background: #fdf3f2; }
.c-tag.coin.severed { color: #4a1f7a; border-color: #d9c9e8; background: #f5f0fd; }
.c-coinlog { margin-top: 4px; font-size: 12px; color: #7a3a1a; background: #fdf3ec; border: 1px solid #e8c9ad;
  border-radius: 8px; padding: 2px 7px; }
/* 战报里的图例（五类守备 / 硬币状态）：折起来不占地方，展开就能对着看 */
.c-legend > summary { font-size: 13px; }
.c-legend-b { font-size: 12.5px; color: var(--c-d); line-height: 1.9; }
.c-legend-b b { color: var(--c-t); }
/* 拼点胜利加伤（3%/次）、混乱阈值前移的映射（威力削弱）、残余攻击批次 */
.c-clash-bonus { margin-left: 8px; font-size: 12px; color: #1f6b3a; background: #eef8f1; border: 1px solid #b7dcc4; border-radius: 999px; padding: 1px 7px; }
.c-power-down { margin-left: 8px; font-size: 12px; color: #8a4b00; background: #fdf6ec; border: 1px solid #e6cfa8; border-radius: 999px; padding: 1px 7px; }
.c-stagger { border: 1px solid #e6cfa8; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px;
  font-size: 13px; background: #fdf6ec; color: #8a4b00; }
.c-pdown { margin-top: 4px; font-size: 12px; color: #8a4b00; background: #fdf6ec; border: 1px solid #e6cfa8; border-radius: 7px; padding: 1px 6px; display: inline-block; }
.c-tag.nores { margin-left: 8px; font-size: 12px; color: #5b6b7a; background: #f5f7f9; border: 1px solid #cfd8e0; border-radius: 999px; padding: 1px 7px; font-weight: 400; }
.c-tag.counter-win { margin-left: 8px; font-size: 12px; color: var(--c-blue); background: #f1f6fc; border: 1px solid #c7d9ec; border-radius: 999px; padding: 1px 7px; font-weight: 400; }
.c-tag.stagger { margin-left: 8px; font-size: 12px; color: #8a4b00; background: #fdf6ec; border: 1px solid #e6cfa8; border-radius: 999px; padding: 1px 7px; font-weight: 400; }
.c-tag.cut { margin-left: 8px; font-size: 12px; color: #4a1f7a; background: #f5f0fd; border: 1px solid #d9c9e8; border-radius: 999px; padding: 1px 7px; font-weight: 400; }
.c-tag.cancel { margin-left: 8px; font-size: 12px; color: var(--c-bad); background: #fdf1f0; border: 1px solid #e0b6b2; border-radius: 999px; padding: 1px 7px; font-weight: 400; }
.c-death { color: var(--c-bad); border-color: #e0b6b2; background: #fdf3f2; }
.c-tick { color: #5b2a7a; background: #f7f2fb; border-color: #d9c9e8; }
.c-anim { animation: c-anim-in .42s ease-out both; }
@keyframes c-anim-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- 房间聊天 */
.c-chat { margin-top: 14px; border-top: 1px dashed var(--c-line2); padding-top: 12px; }
.c-chat-h { font-size: 13px; color: var(--c-d2); margin-bottom: 8px; }
.c-chat-list { max-height: 180px; overflow: auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.c-chat-m { font-size: 13px; color: var(--c-d); }
.c-chat-m b { color: var(--c-blue); margin-right: 6px; }
.c-chat-in { display: flex; gap: 8px; }

/* ---------------------------------------------------------------- 规则折叠 */
.c-rules summary { cursor: pointer; font-size: 15px; font-weight: 700; color: var(--c-t); }
.c-rules ol { margin: 12px 0 0; padding-left: 20px; color: var(--c-d); line-height: 2; font-size: 13.5px; }
.c-rules b { color: var(--c-t); }

/* ---------------------------------------------------------------- 窄屏 / 手机牌桌 */
/* 用户抱怨："手机端对局体验太差，得疯狂滑到底部，干啥反馈都很差"。
   根因：双方所有人格的技能卡**全部内联铺开**（最多 3×3 + 3×3 = 18 张竖着排），
   而「提交本回合 / 清空 / 认输」在文档最末尾 —— 手机上要滑很久。
   这一段只在 ≤720px 生效（桌面不动），四件事：
     ① 人格收成**紧凑条**：名字 / 血条 / SP / 速度 / 已选技能名，技能不再铺开；
     ② 技能进**底部面板**（bottom sheet）：点自己的人格从底部升起，选完自动收起；
     ③ 回合信息**吸顶**（sticky）、「当前：…」+ 操作条**吸底**（fixed）→ 任何滚动位置都能一键提交；
     ④ 选好技能后活着的对手卡亮成"可打"（点目标"之前"的视觉），指派后攻击路线照旧画出来。 */
@media (max-width: 720px) {
  .c-hero { padding: 18px 16px 14px; }
  .c-hero h1 { font-size: 30px; }
  .c-team { grid-template-columns: 1fr; gap: 4px; grid-auto-rows: auto; align-content: center; }
  .c-seats { grid-template-columns: 1fr; }
  .c-dmg { font-size: 22px; }
  .c-cards { grid-template-columns: 1fr; }

  /* ---- ★ 2026-10-17 手机牌桌重排：**一屏装下，牌桌是主角** ----
     用户原话：「手机端 UI 太紧凑，真正重要的游戏区太小」。改版前实测（390×844）：
       吸顶回合条 90 + 牌桌 658（被吸底两条盖掉 204，实际只看得见 493）+ 手牌在 y=905
       （要往下滚才看得见）+ 当前条 141 + 操作条 63，主区可滚 692px。
     现在主区不再需要滚动：牌桌 flex:1 吃满剩余高度（最少 46vh），其余全压成细条 ——
       回合条 44 / 手牌条 92 / 当前条 45 / 操作条 48。
     实测 390×844 牌桌 60%、360×740 55%、430×932 64%。 */
  .c-body .st-main:has(.c-board) { padding: 2px 6px 0; }        /* 牌桌占满整宽，左右只留 6px */
  .c-body #cRoot:has(.c-board) { display: flex; flex-direction: column;
    /* flex-grow 吃满外壳主区（牌桌才有"剩余高度"可分），**flex-shrink 必须是 0**：
       内容万一超一屏（极矮屏 / 顶条冒出提示 / 套件垫高主区）时让 .st-main 照常滚动，
       而不是把这一列压扁 —— 压扁了 #cRoot 的盒子就只剩一屏，吸顶的回合信息会跟着滚走。
       ★ 2026-11：三条吸底条是 fixed 在**视口**底部的，而 #cRoot 只到页脚上沿 ——
       所以真正要从牌桌身上让出去的只有「三条总高 − 页脚高」（--c-shell-foot-h 由
       syncBattleMetrics 量），否则白留一整条页脚（390×844 上是 61px），牌桌白白矮一截。 */
    flex: 1 0 auto; min-height: 0;
    /* 先给老浏览器一条"多留一点"的兜底（max() 不认时按三条全高留位，只是牌桌矮 61px）；
       认 max()/calc() 的就按「三条 − 页脚」精确留位。 */
    padding-bottom: calc(var(--c-foot-h, 48px) + var(--c-tray-h, 45px) + var(--c-mdock, 89px));
    padding-bottom: max(0px, calc(var(--c-foot-h, 48px) + var(--c-tray-h, 45px) +
      var(--c-mdock, 89px) - var(--c-shell-foot-h, 0px))); }
  .c-board { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0;
    flex: 1 1 auto; min-height: 46vh; min-height: 46dvh; overflow: auto; }

  /* ---- 手指尺寸：手机上每个可点控件都要 ≥44×44（审计逐状态量过，<44 的点不准） ----
     chip 40px、.c-btn.sm 35px、.c-input 40px、复选框 13×13、牌桌 #cLeave 40px、
     技能面板「收起」38px —— 全部兜到 44。 */
  .c-btn, .c-btn.sm, .c-chip-btn, .c-input { min-height: 44px; }
  .c-btn, .c-chip-btn { min-width: 44px; }
  .c-btn.sm { padding: 9px 12px; }
  .c-top .c-btn { min-height: 44px; }
  input[type="checkbox"] { width: 44px; height: 44px; margin: 0 2px 0 0; flex: 0 0 auto; }
  .c-check-item { padding: 2px 0; }
  .c-edlg-in > .c-hint { margin: 8px 12px 0; }

  /* ---- ③ 吸顶：回合信息（+ 两个提交 chip，**同一行**）----
     真正滚动的是外壳的 .st-main（body 是 100dvh + overflow:hidden），所以 sticky:top:0
     会把这行钉在 .st-main 的顶沿（正好在外壳 .st-bar 下面），不会盖住站点顶栏。
     ★ 2026-10-17：这一条**必须排成一行**（第 N 回合 / 轮到你指派… / 离开）。
     ★ 2026-11（owner 反馈「手机端拼点 UI 很混乱，全堆一块了」）：能量胶囊搬进手牌标题行、
        「布局」搬进底部操作条、两个提交 chip 从"独占第二行"改成**并进这一行** ——
        顶栏从 69px（两行）收回 44px（一行），牌桌多拿 25~46px 屏高。
        状态那一句超宽就省略号（完整文案在"当前条"里）。 */
  .c-top { position: sticky; top: 0; z-index: 31; padding: 0 8px; gap: 6px;
    min-height: 44px; border-radius: 0 0 12px 12px; box-shadow: 0 5px 12px rgba(20, 24, 30, .22); }
  .c-top .c-hint { flex: 1 1 100%; margin: 0 0 6px; font-size: 12.5px; }
  /* 空提示条不许占位：它带 9px 内边距 + 边框，空着也吃 28px 屏高（改版前吸顶条
     360×740 上是 116px，其中 28px 就是这么来的）。有文案时 :empty 不再命中，自己长出来。 */
  .c-body .c-hint:empty { display: none; }
  .c-mini { display: none; }                    /* 顶条只留：回合 / 状态 / 两个 chip / 离开 */
  .c-top .c-grow { display: none; }             /* 多余的弹性位还回给"轮到你出牌…"那句 */
  .c-round { font-size: 14px; white-space: nowrap; }
  .c-turnbar { flex: 1 1 0; min-width: 0; font-size: 12.5px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }    /* basis:0 很关键 —— 见上面那段注释 */
  .c-top .c-btn { min-height: 44px; padding: 6px 10px; }   /* 40px 手指点不准（审计 C15） */
  /* 两个提交 chip：**不再换行到第二行**，就在回合条这一行的右端（19px 高的小胶囊）。
     信息一点没少（谁交了 / 谁在等），只是不再白占一整行 25px。 */
  .c-chips { flex: 0 0 auto; gap: 4px; }
  .c-chip { font-size: 12px; padding: 0 6px; line-height: 18px; }

  /* ---- ① 紧凑人格条 ----
     每一侧（对手 / 我方）在牌桌里各占一半高度；人格条按行等分（56px 起，有空间就长）。
     ★ 2026-10-17：牌桌只剩 55%~65% 屏高，6 张人格条要全塞进去 —— 所以卡面从"占一行 28px"
       改成**绝对定位在卡片左上角**，正文压成 3 行（名字+速度 / 血条 / SP+状态）。
     ★ 2026-11（owner 反馈「全堆一块了」）：第 4 行「手 3 · 堆 6 · 能量 2/4」整行撤掉，
       改成卡角一枚 12px 的紧凑角标（.c-per-badge）；「已提交 / 已跳过」从文字改成一颗 10px
       的圆点（.c-tag.done）。一张卡从 5 行降到 3 行（56px → 54px 以内），
       6 张卡一共让出 100 多 px —— 牌桌里不再需要自己滚。 */
  .c-side { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 3px 6px; }
  .c-side-h { margin-bottom: 1px; font-size: 12px; line-height: 1.2; }
  .c-per {
    position: relative;
    display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "top pick" "hp hp" "sp st";
    gap: 1px 6px; align-items: center; padding: 2px 8px; min-height: 52px;
    /* 技能面板是 position:fixed 的子孙：祖先一旦有 transform 就会变成它的包含块，面板会跑进卡片里 */
    transition: border-color .16s ease, box-shadow .16s ease;
  }
  /* 只有**带卡面**的人格才留左边那 28px 的位置（内置人格没有图，别白留一条空槽） */
  .c-per:has(.c-per-art) { padding-left: 42px; }
  .c-per:hover { transform: none; }
  /* ---------------- 手机端命中区加固（2026-10-04 用户报"点最上面技能点不动"） ----------------
     ① 触摸端不给 .c-per 任何 transform（哪怕只是过渡中的中间值）——只要祖先带 transform，
        卡内 position:fixed 的技能面板就会把**卡片**当成包含块，面板的绘制位置与命中区会错位；
     ② touch-action: manipulation —— 去掉双击缩放带来的 300ms 延迟，避免"第一下像没点到"；
     ③ 技能面板的滚动不再用 -webkit-overflow-scrolling（见上面 .sheet-open 那条注释）。 */
  .c-per, .c-per:hover, .c-per.picking, .c-per.c-targetable { transform: none !important; }
  .c-per, .c-sk, .c-btn, .c-chip-btn, .c-tray, .c-foot { touch-action: manipulation; }
  .c-sk { -webkit-tap-highlight-color: transparent; }
  .c-per-top { grid-area: top; min-width: 0; line-height: 1.15; overflow: hidden; }
  /* 名字先让位（省略号），速度 / 角标 / 提交点一个都不许被挤掉 */
  .c-per-top > * { flex: 0 0 auto; }
  .c-per-top > b { flex: 0 1 auto; }
  /* 长名字不许把紧凑条撑成两行（超出就省略号；名字短的时候完全看不出区别） */
  .c-per-top b { font-size: 14px; line-height: 1.15; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .c-hp { grid-area: hp; margin-top: 0; height: 14px; }
  .c-hp span { font-size: 12px; line-height: 13px; }
  /* SP：手机上没有那条细横杠的位置，数字留着就够了（负 SP 一样看得见） */
  .c-sp { grid-area: sp; margin-top: 0; height: 16px; background: none; display: flex; align-items: center; gap: 4px; }
  .c-sp i { display: none; }
  .c-sp span { display: inline-block; margin-top: 0; font-size: 12px; line-height: 16px; }
  .c-st { grid-area: st; margin-top: 0; min-height: 0; height: 16px; justify-content: flex-end;
    flex-wrap: nowrap; overflow: hidden; }
  .c-sti { font-size: 12px; padding: 0 6px; line-height: 16px; }
  /* 「出手：<人名>」和名字/速度同一行（右边一列），不再单独占一行 */
  .c-pick { grid-area: pick; display: block; font-size: 12px; color: var(--c-d2); min-height: 0;
    line-height: 15px; max-width: 30vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .c-pick b { color: var(--c-gold); font-size: 12.5px; }
  /* 护盾条 / 「威力 −N」/「这一手打出的牌」在手机上是**条件渲染**的（护盾 > 0、
     被挂了混乱阈值前移、这一回合已经出过牌才出现）。上面的 grid-template-areas 只排了 3 行，
     没写 area 的子项会被自动塞进隐式行 + 只占左边一列（半宽）—— 这里让它们横跨两列。 */
  .c-shield, .c-pdown, .c-pending { grid-column: 1 / -1; }
  /* ★ 2026-11（owner 反馈「全堆一块了」）：每个人格自己的资源（手 / 堆 / 能量）不再占一整行，
     改成卡片右上角一枚 12px 的紧凑角标「手3·堆6·能量2/4」——数字一个不少，把第 4 行（15px ×
     6 张卡）整个还给牌桌。完整解释在 title 上（长按 / 悬停）。 */
  .c-per-badge { flex: 0 0 auto; margin-left: 2px; padding: 0 5px; border-radius: 999px;
    font-size: 12px; line-height: 15px; color: var(--c-d); background: #fff;
    border: 1px solid var(--c-line); font-variant-numeric: tabular-nums; white-space: nowrap; }
  /* 「已提交 / 已跳过」角标：手机上是**卡角一颗 10px 的圆点**（不是一行文字）。
     绿的=已提交、琥珀=没有能打的牌被自动跳过；完整文案仍在 title 上。
     里面的「✓」保留在 DOM 里（读屏 / 套件都还看得到），只是 `color: transparent` +
     10×10 的圆角裁切，肉眼就是一颗点。 */
  .c-tag.done { flex: 0 0 auto; width: 10px; height: 10px; min-width: 0; padding: 0; margin-left: 2px;
    border: 0; border-radius: 50%; background: #3f9a5d; color: transparent; font-size: 12px; line-height: 10px;
    overflow: hidden; text-align: center; }
  .c-tag.done[data-c-per-passed="1"] { background: #c9a227; }
  /* 选好手牌后：活着的对手卡 = "现在可以点我" */
  .c-tag.hit { display: inline-block; font-weight: 700; color: var(--c-red); border-color: #e0b6b2; background: #fdf3f2; }
  .c-per.c-targetable { border-color: var(--c-red); background: #fff7f6;
    animation: c-target-pulse 1.5s ease-in-out infinite; }
  .c-per.c-targeted { border-color: var(--c-red); background: #fdeceb; box-shadow: 0 0 0 2px rgba(179, 36, 36, .26); }

  /* ---- ③ 吸底三块：手牌条（见文件末尾的抽技能段）/ 当前条 / 操作条 ----
     ★ 2026-10-17：当前条与「本回合要点」并成**一行 45px**（两块叠着是 141px）。
     ★ 2026-11（owner 反馈「手机端拼点 UI 很混乱，全堆一块了」）：这一行现在只剩「当前：…」
        一句话 —— 「战报」开关搬进操作条（见下面的 .c-foot .c-key），两条不再并排挤。 */
  .c-tray { position: fixed; left: 0; right: 0; bottom: var(--c-foot-h, 48px); z-index: 64;
    margin: 0; padding: 0 6px; height: var(--c-mtray, 45px); box-sizing: border-box;
    display: flex; align-items: center; gap: 6px;
    background: var(--c-card); border-top: 1px solid var(--c-line); }
  .c-tray-h { flex: 1 1 auto; min-width: 0; height: 44px; display: flex; align-items: center; gap: 6px;
    border-style: solid; padding: 0 8px; border-radius: 10px; font-size: 12.5px; }
  .c-tray-txt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .c-tray-go { display: none; }        /* 长提示收掉：牌桌上有「这一手打出的牌」，卡上有「出手：谁」 */
  .c-tray-h.ok { border-color: #bcd8c2; background: #f2f9f4; }
  /* 手机上的「跳过」：吸底「当前条」右侧，44×44，不抢文字宽度（正文自己省略号） */
  .c-tray .c-pass { flex: 0 0 auto; width: auto; height: 44px; min-height: 44px; min-width: 44px;
    margin: 0 2px 0 0; padding: 0 9px; font-size: 12.5px; border-radius: 10px; }
  .c-odds-wrap { margin-left: 0; flex: 0 0 auto; }
  .c-odds { display: inline-block; font-size: 12px; padding: 1px 7px; max-width: 96px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* ---- 操作条：**一行**，全部提交 / 清空 / 认输 / 提和 / 战报 / 布局，每个目标 ≥44px ----
     ★ 2026-11（owner 要求）：手机上「战报」（#cKey）与「布局」（#cLayoutToggle）都收进这一条；
        按钮文字压到 12.5px、间距 3px，390 与 360 都不会换行成两行
        （提和条有人提和时仍会自己占一行 —— 那是异常态，倒计时与同意/拒绝要读得清）。 */
  .c-foot {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; margin: 0;
    min-height: var(--c-mfoot, 48px); box-sizing: border-box;
    padding: 1px 6px calc(1px + env(safe-area-inset-bottom, 0px));
    background: var(--c-card); border-top: 1px solid var(--c-line);
    box-shadow: 0 -6px 18px rgba(20, 24, 30, .12);
    gap: 3px; flex-wrap: nowrap; align-items: center;
  }
  .c-foot .c-btn { min-height: 44px; min-width: 44px; flex: 0 1 auto; padding: 6px 4px;
    white-space: nowrap; font-size: 12.5px; }
  .c-foot #cCommit { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 700; padding: 6px 4px; }
  /* settle.js 那颗「提和」（.g-btn）：手机上别让它被挤成两行（实测 360 上宽度只剩 47px，
     「提和」两个字换行 → 按钮 56px → 整条操作条 59px）。行盒与内边距一起收窄。 */
  .c-foot .g-btn { padding: 6px 6px; min-width: 44px; white-space: nowrap; }
  .c-foot .c-grow, .c-foot #cOddsNote { display: none; }  /* 位置让给按钮（胜率提示已经吸在"当前条"里） */
  /* 「战报」= 战报抽屉的开关（#cKey）。它现在住在这条操作条里：一枚 44px 的小按钮，
     只写「战报」两个字（要点条数留在 data-c-key-count 上）；点一下从底部弹出完整战报抽屉，
     再点（或用抽屉里的「收起战报」）收起。要点带（.c-key-row）在 44px 的按钮里放不下，
     收掉 —— 九条要点一条没少，全在抽屉里。 */
  .c-foot .c-key { flex: 0 0 auto; width: auto; max-width: none; min-width: 44px;
    height: 44px; min-height: 44px; margin: 0; padding: 0 5px; gap: 3px;
    justify-content: center; }
  .c-foot .c-key-row, .c-foot .c-key-more { display: none; }
  .c-foot .c-key-h { font-size: 12.5px; }
  /* 吸底那几条是 fixed 的，占位由 #cRoot 的 padding-bottom 统一负责，这里不再叠一块空档 */
  .c-footspace { display: none; }

  /* 手机上也把攻击路线画出来（原来这里 display:none —— 那就只剩文字提示，
     "选好技能 → 点目标 → 打谁"整条路线都看不见）。pointer-events:none，不挡点击。 */
  .c-linkwrap { display: block; }

  /* 排队条在手机上加宽按钮（吸底由基础规则里的 sticky:bottom:0 负责） */
  .c-queue .c-btn { min-height: 46px; flex: 1 1 auto; }
  .c-queue #cGiveUp { flex: 1.2 1 auto; font-weight: 700; }
  .c-perrow { flex-direction: column; gap: 6px; }
  .c-perrow .c-label { padding-top: 0; }

  /* ---- ⑤ 「战报」开关：底部操作条里的 44px 按钮（#cKey）----
     实测（360×640）：.c-report 在文档末尾 top 872 / 高 1454 / 在视口外，
     玩家要滑 ~1960px；新引擎的九个概念全在它里面 → 手机上等于看不见。
     所以战报走**底部抽屉**（fixed，盖住牌桌而不是把牌桌推下去），抽屉里自带「收起战报」。
     ★ 2026-10-17：开关从"自己一行"并进「当前：…」那一行。
     ★ 2026-11（owner 要求"战报开关放进操作条"）：开关**搬进底部操作条**（见上面的
        .c-foot .c-key），当前条只剩「当前：…」一句话。要点带在 44px 的按钮里放不下，
        所以收掉 —— 九条要点一条都没丢，全在抽屉里（r1 段与图例都在）。 */
  .c-key { display: flex; align-items: center; gap: 4px;
    flex: 0 0 auto; max-width: none; min-width: 44px; width: auto; height: 44px; min-height: 44px;
    margin: 0; padding: 0 7px;
    text-align: left; font: inherit; font-size: 12px; color: var(--c-t); cursor: pointer;
    border: 1px solid var(--c-line2); border-radius: 10px; background: var(--c-card2);
    touch-action: manipulation; }
  .c-key-h { flex: 0 0 auto; font-weight: 700; color: var(--c-t); white-space: nowrap; }
  /* 要点带：一条**横向可滑**的横排（不是换行铺开）—— 高度恒定，信息不折叠。
     overscroll-behavior 防止滑到头把整页带走；滑动手势不会触发"点开战报"
     （wireBattle 里对 10px 以上的位移做了屏蔽）。宽屏（>720px）与布局模式下照旧。 */
  .c-key-row { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px;
    overflow-x: auto; overflow-y: hidden; white-space: nowrap;
    overscroll-behavior-x: contain; scrollbar-width: none; }
  .c-key-row::-webkit-scrollbar { display: none; }
  .c-key-i { flex: 0 0 auto; font-size: 12px; line-height: 1.5; color: var(--c-t); background: var(--c-card);
    border: 1px solid var(--c-line); border-radius: 999px; padding: 2px 8px; }
  .c-key-i.sh { color: var(--c-blue); border-color: #c7d9ec; background: #f1f6fc; }
  .c-key-i.win { color: #1f6b3a; border-color: #b7dcc4; background: #eef8f1; }
  .c-key-i.cut { color: #4a1f7a; border-color: #d9c9e8; background: #f5f0fd; }
  .c-key-i.mit, .c-key-i.stag { color: #8a4b00; border-color: #e6cfa8; background: #fdf6ec; }
  .c-key-i.res { color: var(--c-bad); border-color: #e0b6b2; background: #fdf3f2; }
  .c-key-i.nowin { color: #5b6b7a; border-color: #cfd8e0; background: #f5f7f9; }
  .c-key-i.gd { color: var(--c-blue); border-color: #b9c8e4; background: #f2f6fd; }
  .c-key-i.sp { color: #5b2a7a; border-color: #d9c9e8; background: #f6f0fb; }
  /* 回合流程也是一枚 chip（跟其它要点一起横滑），不再单独占满一行 */
  .c-key-flow { flex: 0 0 auto; font-size: 12px; color: var(--c-d); }
  /* 「看全部 ▲」在手机上是多余的：整条本来就是开关（这里位置让给要点带） */
  .c-key-more { display: none; }

  /* 内联战报在手机上**整块交给抽屉**：不收起来它就在文档末尾白占 ~1400px 的滚动 */
  .c-report { display: none; }
  .c-report.sheet-open {
    display: block; position: fixed; left: 0; right: 0; bottom: var(--c-foot-h, 74px);
    max-height: calc(100vh - var(--c-top-h, 56px) - var(--c-foot-h, 74px) - 10px);
    max-height: calc(100dvh - var(--c-top-h, 56px) - var(--c-foot-h, 74px) - 10px);
    z-index: 67; margin: 0; overflow: auto;
    padding: 0 10px calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px 16px 0 0; border-bottom: 0; border-top: 2px solid var(--c-gold);
    box-shadow: 0 -12px 30px rgba(20, 24, 30, .24); }
  .c-report.sheet-open .c-report-h {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px;
    margin: 0 -10px 8px; padding: 8px 10px; background: var(--c-card);
    border-bottom: 1px solid var(--c-line); font-size: 13px; color: var(--c-t); letter-spacing: 0; }
  .c-report.sheet-open .c-report-h span { flex: 1 1 auto; }
  #cLogClose { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; flex: 0 0 auto; }
  /* 手机上战报/规则这些 <summary> 也要点得准（实测只有 21px 高） */
  .c-body summary { display: flex; align-items: center; min-height: 44px; }
  /* settle.js 的「提和」按钮（#cDrawOffer）实测 54×40 —— 手指点不准 */
  .c-body .g-btn { min-height: 44px; min-width: 44px; }

  /* ---- 2026-11：技能底部面板 / 🎯 指定技能槽面板整块删除 ----
     旧的"每人格四张固定技能卡"只存在于战斗界面，owner 报告它在实战里没有作用，
     所以连面板、按钮、样式一起删掉；守备（把手牌转成守备牌 + 点己方目标）见基础规则里的
     .c-hand-card.guard / .c-per.c-guardable / .c-convert-pick。 */

  /* ---- 提和（settle.js 的 #nzDrawBar）在手机上不占整行 ----
     实测（360×640）：.nz-draw 是 width:100% 的整行 → 操作条被顶成两行（.c-foot 106px）。
     闲时那句"同意后本局判和：双方都不加分、不掉段"在手机上收掉（按钮自己写着"提和"），
     提和条就与「提交本回合 / 清空 / 认输」同行；**有人提和时**（.nz-draw-text + 同意/拒绝）
     整条会自己占一行，倒计时与两个按钮一个都不少。settle.js 一行没改。
     ★ 2026-11：settle.js 的 .nz-draw 只写了 display:flex，可它挂进来的时机比 clash.css 晚、
        还可能是块级 —— 那样里面那颗 44px 的按钮会按行盒算高度（实测 .nz-draw 55.6px，
        把操作条顶到 59px）。这里显式兜住：flex 一行、居中，高度就是 44。 */
  .c-foot .nz-draw { display: flex; align-items: center; width: auto; flex: 0 1 auto; gap: 6px; }
  .c-foot .nz-draw > .nz-draw-sub { display: none; }
  /* 有人提和时（settle.js 的 .nz-draw-text 那一套：倒计时 + 同意 / 拒绝）整条**自己占一行** ——
     文字与两颗按钮都要读得清、点得准，挤在「提交本回合 / 清空 / 认输」同一行会把倒计时压成 0 宽。
     :has() 不支持的老浏览器只是维持上面的紧凑形态（按钮照旧 ≥44px 可点），
     与 sandbox.css 的先例一致。 */
  .c-foot:has(.nz-draw-text) { flex-wrap: wrap; }
  .c-foot:has(.nz-draw-text) .nz-draw { flex: 1 1 100%; }

  /* ---- 这一页的 11.5px 小字（昵称 / 副标题 / 页脚链接）在手机上抬到 ≥12px ---- */
  .c-body #cWho, .c-body .st-sub { font-size: 12.5px; }
  .c-body .st-foot, .c-body .st-foot a, .c-body .st-foot span { font-size: 12.5px; }
  /* 外壳顶栏的品牌链接（.st-brand 实测 69×40）与页脚链接（.brandlink 90×36 / 两个 63×20）
     都不到 44px —— 手指点不准。这一页**只**在手机上把它们兜到 44（subsite.css 是共用样式，
     不动它；.c-body 只挂在拼点这一页上）。 */
  .c-body .st-brand { min-height: 44px; }
  .c-body .st-foot a { display: inline-flex; align-items: center; min-height: 44px; }

  /* ---- ④ 卡面在手机上必须"小图" ----
     紧凑人格条 / 技能卡的高度是手机牌桌的全部立身之本（用户抱怨过"疯狂滑到底"）：
     所以人格卡面从桌面的 84px 通栏收成 28px 小方块（order:0 → 挪到名字左边），
     技能卡面 40 → 28，列表卡 54 → 44。图一律 cover，不会因为原图比例把条撑开。 */
  /* 卡面在手机上是**卡片左上角的 28×28 小方块**（绝对定位，不占正文行高：
     正文只有 3 行 —— 名字+速度 / 血条 / SP+状态，3v3 一条才压得到 56px） */
  .c-per-art { position: absolute; left: 8px; top: 50%; margin: -14px 0 0; width: 28px; height: 28px; border-radius: 7px; }
  .c-sk-art { width: 28px; height: 28px; border-radius: 7px; }
  .c-ccard-art { height: 44px; }
  /* 缩略图本身不可点，但别让它在大弹窗里显得头重脚轻 */
  .c-art-thumb { width: 44px; height: 44px; }
}
@keyframes c-target-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(179, 36, 36, .30); }
  50% { box-shadow: 0 0 0 5px rgba(179, 36, 36, 0); }
}

/* ---------------------------------------------------------------- 动效开关 */
@media (prefers-reduced-motion: reduce) {
  .c-body *, .c-fxlayer * { animation: none !important; transition: none !important; }
  .c-link { stroke-dasharray: none; }
}
.c-reduce *, .c-reduce .c-fxlayer * { animation: none !important; transition: none !important; }


/* ============================================================ 抽技能（手牌 / 能量 / 守备转牌）
   用户 2026-10 规格：3 张手牌 + 能量条（当前/上限）+ 费用角标 + 档位颜色 + 两张守备牌二选一。
   全部只读服务端 view 下发的数字；能量不够的牌 .off 置灰并写原因（与服务端 error 同一句口径）。
   ★ 2026-10-17：这一块原来按**深色底**写（半透明白边 / 浅金大字 / 白字卡面），可这一页是
     浅色体系（#f6f6f6 + 白卡）—— 白底白框，手牌几乎看不出是张卡。现在跟别的卡片共用同一套
     浅色变量；手机端再把它压成一条 80px 的吸底横滑行（见文件末尾的 ≤720px 段）。 */
.c-draw { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-card); }
.c-draw-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.c-draw-head b { font-size: 14px; color: var(--c-t); }
.c-energy { display: flex; align-items: center; gap: 8px; }
.c-energy-h { font-size: 12.5px; color: var(--c-d); }
.c-energy-n { font-size: 13px; white-space: nowrap; color: var(--c-t); }
.c-energy-n b { font-size: 18px; color: var(--c-gold); }
.c-energy-bar { position: relative; flex: 1 1 auto; height: 8px; min-width: 70px; border-radius: 99px; background: #e6e9ed; overflow: hidden; }
.c-energy-bar em { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #b8912c, #e0c04a); transition: width .25s ease; }
.c-hand { display: flex; gap: 8px; margin: 10px 0 8px; align-items: stretch; }
.c-hand-card { flex: 1 1 0; min-width: 0; min-height: 96px; padding: 8px 9px; border-radius: 10px; cursor: pointer;
  background: var(--c-card2); color: var(--c-t); border: 1px solid var(--c-line); border-top: 3px solid var(--tier, #4a8fc2); }
.c-hand-card.sel { box-shadow: 0 0 0 2px var(--tier, #4a8fc2) inset; background: var(--c-card); }
.c-hand-card.off { opacity: .5; filter: grayscale(.7); cursor: not-allowed; }
.c-hc-top { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.c-hc-top b { font-size: 13px; color: var(--c-t); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-hc-cost { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 5px;
  border-radius: 7px; background: var(--tier, #4a8fc2); color: #0d0f14; font-weight: 700; font-size: 13px; }
.c-hc-tier { font-size: 12px; padding: 1px 6px; border-radius: 99px; color: var(--tier, #4a8fc2); border: 1px solid currentColor; }
/* 手牌卡图（旧技能卡删掉后卡图挂在这里）：桌面 28px 小方块，手机同尺寸，别把手牌撑高 */
.c-hc-art { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 7px; overflow: hidden;
  background: var(--c-card); border: 1px solid var(--c-line); }
.c-hc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-hc-num { margin-top: 6px; font-size: 12px; color: var(--c-d); line-height: 1.35; }
.c-hc-from { margin-top: 3px; font-size: 12px; color: var(--c-d2); }
.c-hc-text { margin-top: 5px; font-size: 12px; line-height: 1.35; color: var(--c-d); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.c-hc-off { margin-top: 5px; font-size: 12px; color: var(--c-bad); }
.c-hand-empty { flex: 1 1 auto; padding: 18px 10px; text-align: center; font-size: 12.5px; color: var(--c-d2); border: 1px dashed var(--c-line2); border-radius: 10px; }
.c-draw-ops { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.c-draw-ops .c-btn[disabled] { opacity: .45; cursor: not-allowed; }
.c-energy-log { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--c-line2); }
.c-elog-line { font-size: 12px; line-height: 1.5; color: var(--c-d); }
.c-elog-line.muted { color: var(--c-d2); }
/* 自定义技能卡上的费用 / 档位角标（内置老技能没有这两项，卡面不变） */
.c-cost { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 4px;
  border-radius: 6px; background: var(--tier, #4a8fc2); color: #0d0f14; font-weight: 700; font-size: 12px; }
.c-tier { font-size: 12px; padding: 0 5px; border-radius: 99px; color: var(--tier, #4a8fc2); border: 1px solid currentColor; }
/* ---------------------------------------------------------------- 手机：手牌条（吸底横滑）
   2026-10-17 用户要求：手牌压成**一条横向可滑的行**吸在底部，牌桌才是主角。
   实测（390×844）：手牌条 92px + 当前条 45px + 操作条 48px = 185px，剩下的 507px 全给牌桌
   （60% 屏高）；360×740 自动降到 84px 手牌条（牌桌 55% 屏高）。
   改版前这一块在**文档流**里（y=905，得往下滚才能看见手牌），而且吸底两条把牌桌盖掉了 204px。
   ★ 2026-11（owner 反馈「手机端拼点 UI 很混乱，全堆一块了」）：手牌条多了**一行标题**
   （`X 的牌 · 能量 2/4 · 手 3 · 堆 6`），把原来散在三处的同一份信息收进一条 ——
   能量胶囊（原吸顶条）与每人格的资源行（原人格卡第 4 行）都不再各占一处。
   高度仍是 89px（矮屏 85px）：标题 16 + 间距 2 + 手牌 66 / 62 + 内边距 5。
   `--c-mdock` 同时给 #cDraw 的高度与 #cRoot 的 padding-bottom 用，两边永远相等。 */
@media (max-width: 720px) {
  /* 吸底几条的高度集中在这里定义：#cRoot 的 padding-bottom 用它们给牌桌留位 */
  .c-body { --c-mhead: 16px; --c-mhand: 66px; --c-mdock: 89px; --c-mtray: 45px; --c-mfoot: 48px; }
  #cDraw {
    position: fixed; left: 0; right: 0; z-index: 63;
    bottom: calc(var(--c-foot-h, 48px) + var(--c-tray-h, 45px));
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    box-sizing: border-box; height: var(--c-mdock, 89px); min-height: var(--c-mdock, 89px);
    margin: 0; padding: 2px 8px; overflow: visible;
    border: 1px solid var(--c-line); border-bottom: 0; border-radius: 14px 14px 0 0;
    background: var(--c-card); box-shadow: 0 -8px 22px rgba(20, 24, 30, .12);
  }
  /* ---- 标题行：`X 的牌 · 能量 2/4 · 手 3 · 堆 6` ----
     原来这三份信息分别在：吸顶条的能量胶囊、人格卡第 4 行的资源小条、抽技能面板的标题行
     （手机上还是 display:none）。现在只有这一处，而且同一行 —— 当前出手的人格是谁、
     它自己还剩几点能量、手里几张牌、牌堆还剩几张，一眼全读得到。 */
  #cDraw .c-draw-head { display: flex; align-items: center; gap: 4px;
    flex: 0 0 auto; height: var(--c-mhead, 16px); margin: 0; overflow: hidden; }
  #cDraw .c-draw-head b { display: none; }              /* 「抽技能」三个字不占地方 */
  #cDraw .c-draw-head .c-note, #cDraw .c-draw-who { font-size: 12px; line-height: 16px; white-space: nowrap; }
  #cDraw .c-draw-who { color: var(--c-t); font-weight: 700; }
  #cDraw .c-draw-sep { flex: 0 0 auto; font-size: 12px; line-height: 16px; color: var(--c-line2); }
  #cDraw .c-draw-slot { flex: 0 0 auto; display: flex; align-items: center; min-width: 0; }
  #cDraw .c-draw-head .c-grow { flex: 1 1 auto; }
  /* 能量胶囊在标题行里只写「能量 2 / 4」（进度条与人格名都收掉：这一行已经写着是谁的牌） */
  #cDraw .c-energy { flex: 0 0 auto; height: 16px; padding: 0; gap: 3px; border: 0; background: none; }
  #cDraw .c-energy-h { display: inline; font-size: 12px; line-height: 16px; color: var(--c-d); }
  #cDraw .c-energy-n { font-size: 12px; line-height: 16px; }
  #cDraw .c-energy-n b { font-size: 12px; color: var(--c-gold); }
  #cDraw .c-energy-bar { display: none; }
  /* 能量流水（三行流水账）在手机上进战报抽屉，不占手牌条 */
  #cDraw .c-energy-log { display: none; }
  #cDraw .c-hand { flex: 1 1 auto; min-width: 0; min-height: 0; margin: 0; gap: 6px; align-items: stretch;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
  #cDraw .c-hand::-webkit-scrollbar { display: none; }
  /* 手牌：横向滑，一张占 46% 宽（一张半露头 = "还能往右滑"的暗示），高度固定 66px（矮屏 62px）。
     卡面文字全部 ≥12px：名字 13 / 费用角标 24px 见方 / 基础值·硬币数 12 / 说明 12（一行，省略号）。
     卡片的完整说明挂在 title 上（长按 / 悬停可读），牌桌才是主角。 */
  #cDraw .c-hand-card { flex: 0 0 auto; width: 46%; min-width: 132px; max-width: 200px;
    height: var(--c-mhand, 66px); min-height: var(--c-mhand, 66px); padding: 2px 8px; overflow: hidden; }
  #cDraw .c-hc-top { gap: 4px; flex-wrap: nowrap; }
  #cDraw .c-hc-top b { font-size: 13px; }
  #cDraw .c-hc-num { margin-top: 0; line-height: 1.3; }
  #cDraw .c-hc-text { margin-top: 1px; -webkit-line-clamp: 1; line-height: 1.25; }
  #cDraw .c-hc-from { display: none; }
  #cDraw .c-hand-empty { min-height: var(--c-mhand, 66px); display: flex; align-items: center; justify-content: center; }
  /* ---- 选好手牌之后的两个动作（指定目标 / 转换为守备 / 取消）----
     ★ 2026-11（owner 反馈「全堆一块了」）：原来是**右侧一列**按钮，会和手牌抢宽度；两张按钮
     叠起来还比手牌条高，一点牌整条就长高 12px。现在改成一张**盖住手牌条**的 bottom sheet：
     高度不变、宽度不抢，三个 44px 的按钮一行排开；点「取消」或在牌桌上点目标就收起。 */
  #cDraw .c-draw-ops { display: none; }
  #cDraw .c-draw-ops.on { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2;
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center;
    gap: 6px; padding: 2px 8px; box-sizing: border-box; background: var(--c-card); }
  #cDraw .c-draw-ops .c-note, #cDraw .c-draw-ops .c-grow { display: none; }
  #cDraw .c-draw-ops .c-btn { flex: 1 1 auto; min-height: 44px; min-width: 44px;
    padding: 4px 8px; font-size: 13px; white-space: nowrap; }
  /* ---- 守备转牌面板（#cConvertBox，这个角色带了 2 张可转守备牌时）----
     同一套：**盖住手牌条**的 bottom sheet（不是往牌桌方向再叠一块）。
     标题一行 12px + 两张 44px 的选项；选项里只留名字（说明收起，完整文案仍在 title 上）。 */
  #cDraw .c-convert-box { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 3;
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    margin: 0; padding: 2px 8px; border-top: 0; box-sizing: border-box;
    background: var(--c-card); overflow: hidden; }
  #cDraw .c-convert-h { flex: 0 0 auto; margin: 0; font-size: 12px; line-height: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #cDraw .c-convert-row { flex: 1 1 auto; display: flex; flex-wrap: nowrap; gap: 6px; min-height: 0; }
  #cDraw .c-convert-pick { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 2px 8px; }
  #cDraw .c-convert-pick b { font-size: 13px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #cDraw .c-convert-pick span, #cDraw .c-convert-pick i { display: none; }
}
/* 矮屏手机（≤780px 高，如 360×740）：手牌条再收 4px，牌桌仍然 ≥55% 屏高 */
@media (max-width: 720px) and (max-height: 780px) {
  .c-body { --c-mhand: 62px; --c-mdock: 85px; }
}

/* ============================================================ 提交状态两个 chip（你 ✅ / 对手 ⏳）
   2026-10 用户反馈「拼点貌似缺少点什么 / 回合像是被无视了」：
   拼点是**双方同时提交**，没有"轮到谁"。所以回合条里直接并排两个 chip，读 view.committed：
     你 ✅（已提交）/ ⏳（还没交） · 对手 ✅ / ⏳
   poll() 每轮都就地刷一次（paintChips），对手一提交下一次轮询就翻过来。
   深色底（.c-top 是 var(--c-dark)），所以这里三种态都按**浅色字 + 半透明底**写。 */
.c-chips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.c-chip { font-size: 12px; line-height: 18px; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  border: 1.5px solid rgba(255, 255, 255, .30); color: #e3e8ee; background: rgba(255, 255, 255, .10); }
.c-chip.done { color: #d6f5df; border-color: #78c48d; background: rgba(120, 196, 141, .20); }
.c-chip.wait { color: #ffe3b8; border-color: #d9a24a; background: rgba(217, 162, 74, .18); }
@media (max-width: 720px) {
  /* ★ 2026-11（owner 反馈「全堆一块了」）：两个 chip 不再独占第二行（原来 flex-basis:100%
     把顶栏顶成 69px），而是**就在回合条这一行**的右端：19px 高的小胶囊。
     「谁交了 / 谁在等」照样一眼看得出。 */
  .c-chips { flex: 0 0 auto; order: 0; gap: 4px; }
  .c-chip { font-size: 12px; padding: 0 6px; line-height: 18px; }
}

/* ============================================================ 布局模式（2026-10 用户要求）
   用户原话：「拼点的UI能像2d编辑器那样改就好了」。
   七块区域（LP: 顶部回合条 .c-top / 当前条 .c-tray / 手牌区 #cDraw / 能量条 .c-energy /
   战报抽屉 #cKey / 操作条 .c-foot / 牌桌 .c-board）在布局模式与"已保存布局"下统一搬进
   #cRoot 里的这一层（绝对定位），位置由 clash-page.js 写内联 px（见 applyLayout）。
   这一层本身不吃点击（pointer-events:none），只有区域自己吃 —— 区域之间的空档照常能滚。 */
.c-layout { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 1; }
.c-layout > * { pointer-events: auto; }
/* 区域被拖窄之后，里面的按钮/卡面不许把文档撑出横向滚动条（牌桌自己保留滚动） */
.c-layout > * { overflow: hidden; }
.c-layout > .c-board { overflow: auto; }
#cRoot[data-c-layout] { position: relative; }
/* 拖动面（盖住整块区域）与右下角缩放角：只在布局模式下由 layoutChrome() 插进来。
   touch-action:none —— 手指在区域上拖是"移动区域"，不是滚动页面（手机必须这样）。 */
.c-lay-hit { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 60; cursor: move;
  touch-action: none; -ms-touch-action: none; border: 1.5px dashed rgba(74, 143, 194, .55);
  border-radius: 8px; background: rgba(74, 143, 194, .06); }
.c-lay-handle { position: absolute; right: 0; bottom: 0; width: 40px; height: 40px; z-index: 61;
  cursor: nwse-resize; touch-action: none; -ms-touch-action: none; }
.c-lay-handle::after { content: ''; position: absolute; right: 5px; bottom: 5px; width: 16px; height: 16px;
  border-right: 3px solid var(--c-blue); border-bottom: 3px solid var(--c-blue); border-radius: 0 0 4px 0; }
.c-lay-hit.on, .c-lay-handle.on { background: rgba(74, 143, 194, .18); }
/* 浮动面板（挂 body、fixed）：保存为我的布局 / 恢复默认 / 取消。
   按钮 ≥40px（手机上兜到 44px），一行放不下就换行 —— 390px 也不会横向溢出。 */
.c-lay-panel { position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  display: flex; flex-direction: column; gap: 6px; padding: 8px 10px;
  max-width: calc(100vw - 16px); box-sizing: border-box;
  background: var(--c-card); border: 2px solid var(--c-gold); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(20, 24, 30, .28); }
.c-lay-tip { font-size: 12px; color: var(--c-d); text-align: center; line-height: 1.5; }
.c-lay-ops { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.c-lay-panel .c-btn { min-height: 40px; }
@media (max-width: 720px) {
  .c-lay-panel { left: 6px; right: 6px; transform: none; max-width: none; }
  .c-lay-panel .c-btn { min-height: 44px; flex: 1 1 auto; }
}

/* ============================================================ 拼点设置弹窗（大厅）
   一个入口 + 四个 tab（卡池与技能 / 我的出战 / 布局 / 规则）；每一格只是指回原来的编辑器。
   手机上从底部升起（沿用 .c-edlg 那套），tab 与按钮都 ≥44px。
   （页头主按钮的尺寸在 .c-lobby 那一段里定：.c-btn-lg 全宽度 ≥44px，这里不再重复一套。） */
/* 「布局」按钮：桌面也要 ≥40px（.c-btn.sm 默认只有 33px 左右，手指/鼠标都不好点） */
.c-top #cLayoutToggle { min-height: 40px; min-width: 44px; }
.c-sdlg .c-btn { min-height: 40px; }
.c-sdlg .c-set-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px 0; border-bottom: 1px solid var(--c-line); }
.c-set-tab { font-size: 13px; min-height: 40px; padding: 6px 12px; border-radius: 10px 10px 0 0;
  border: 1px solid var(--c-line); border-bottom: 0; background: var(--c-card2); color: var(--c-d);
  cursor: pointer; font-family: inherit; }
.c-set-tab.on { background: var(--c-card); color: var(--c-t); font-weight: 700; box-shadow: inset 0 3px 0 var(--c-gold); }
.c-set-lead { font-size: 13px; color: var(--c-d); line-height: 1.75; margin: 2px 0 12px; }
.c-set-lead b { color: var(--c-t); }
.c-set-rows { display: flex; flex-direction: column; gap: 8px; }
.c-set-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 10px;
  border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-card2); }
.c-set-t { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.c-set-t b { font-size: 14px; color: var(--c-t); }
.c-set-t span { font-size: 12.5px; color: var(--c-d); line-height: 1.55; }
@media (max-width: 720px) {
  .c-sdlg .c-btn, .c-sdlg .c-set-tab { min-height: 44px; }
  .c-set-t { flex: 1 1 100%; }
  .c-set-row .c-btn, .c-set-row a.c-btn { flex: 1 1 auto; text-align: center; }
  /* 桌面那条 40px 的兜底在手机上必须让位给 44px（审计逐视口量过，40px 点不准） */
  .c-top #cLayoutToggle { min-height: 44px; }
}

/* ---------------------------------------------------------------- 守备牌（2026-11 owner 重做）
   旧版"守备三步 / 转完弹出保护目标面板 / 格挡-反击二选一"的样式（.c-guard-assign / .c-guard-target /
   .c-guard-states / .c-guard-state / .c-guardpick / .c-guardcard）已随旧机制删除。
   现在只有三处：手牌里的守备牌、可点选为保护目标的人格卡、把一张手牌转成守备牌时的选择行。 */
/* 手牌里的守备牌：蓝底（反击偏红）+ 「守 / 反」角标，与攻击牌一眼分得开 */
.c-hand-card.guard { background: #f2f7fd; border-color: #b9c8e4; border-top-style: solid;
  box-shadow: 0 0 0 1px #c9d8ec inset; }
.c-hand-card.guard[data-c-card-guard="counter"] { background: #fdf3f2; border-color: #e0b6b2; box-shadow: 0 0 0 1px #eccfcc inset; }
.c-hand-card.guard.sel { box-shadow: 0 0 0 2px var(--tier, #4a8fc2) inset; }
.c-hc-guard { display: inline-block; margin-top: 5px; font-size: 12px; font-weight: 700; padding: 1px 7px;
  border-radius: 99px; color: #fff; background: #3f6fa8; }
.c-hc-guard.counter { background: #b5453f; }
/* 人格卡：选好守备牌时己方可点选（.c-guardable）；已经被守备牌保护着（.c-guarded） */
.c-per.c-guardable { border-color: #3f6fa8; background: #f5f9fe; }
.c-per.c-guarded { box-shadow: 0 0 0 2px rgba(63, 111, 168, .35) inset; }
.c-tag.guard { display: inline-block; font-weight: 700; color: #2f5f96; border-color: #b9c8e4; background: #f2f7fd; }
.c-guardon { margin-top: 4px; font-size: 12px; font-weight: 700; color: #2f5f96; background: #f2f7fd;
  border-left: 3px solid #3f6fa8; border-radius: 0 7px 7px 0; padding: 2px 7px; }
.c-guardon[data-c-guard-protect="counter"] { color: #8f2f2a; background: #fdf3f2; border-left-color: #b5453f; }
/* 「转换为守备」第二步：这个角色还有 2 张可转时选一张（每行 ≥44px，手机点得准） */
.c-convert-box { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--c-line2); }
.c-convert-h { font-size: 12.5px; color: var(--c-d); margin-bottom: 8px; }
.c-convert-row { display: flex; gap: 8px; flex-wrap: wrap; }
.c-convert-pick { flex: 1 1 140px; min-width: 0; min-height: 44px; text-align: left; padding: 8px 10px; border-radius: 10px;
  cursor: pointer; background: var(--c-card2); color: var(--c-t); border: 1px solid var(--c-line);
  border-left: 4px solid var(--tier, #4a8fc2); font: inherit; }
.c-convert-pick:hover { border-color: #3f6fa8; background: #f4f8fd; }
.c-convert-pick.on { background: var(--c-card); box-shadow: 0 0 0 2px var(--tier, #4a8fc2) inset; }
.c-convert-pick b { display: block; font-size: 13.5px; margin-bottom: 3px; color: var(--c-t); }
.c-convert-pick span { display: block; font-size: 12px; line-height: 1.35; color: var(--c-d); overflow-wrap: anywhere; }
.c-convert-pick i { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--c-d2); }

/* 倒计时样式（手机与桌面都放在回合条末尾） */
.c-wait-timer{
  flex:0 0 auto;margin-left:auto;font-size:.74rem;letter-spacing:.02em;
  color:var(--text-3,#9aa0aa);white-space:nowrap;
}
.c-wait-timer[data-warn="1"]{color:#e2504a;font-weight:600}
.c-wait-timer:empty{display:none}
@media (max-width:720px){
  .c-wait-timer{font-size:.72rem}
}