/* ============================================================================
 * 全局 UI 规范 · v2.0.0
 * 主色 #FF4655 · 背景 #0F1923 · 卡片 #1B2733 · 圆角 10/8px · 间距 4 的倍数
 *
 * v2.0.0 目标（本次 UI 优化）：
 *  ① 统一设计令牌（颜色 / 圆角 / 间距 / 阴影 / 焦点环），各页面视觉一致；
 *  ② 修复「用了但没定义」的样式类（首页列表间距、赛程卡状态、单场页标题、
 *     BP 面板网格溢出、表格窄屏溢出等）；
 *  ③ 移动端：表格横滚容器 + 次要列折叠、触控目标 ≥44px、安全区留白。
 * 约束：括号图（.bk-*）的竖向几何尺寸不得改动，否则小组图第 4 列对齐会偏移。
 * ========================================================================== */

/* ---------------------------------------------------------------- 设计令牌 */
:root {
  /* 颜色 */
  --red: #FF4655;
  --red-dark: #c9303e;
  --bg: #0F1923;
  --bg2: #0b131a;
  --card: #1B2733;
  --card2: #22303e;
  --card3: #2a3a49;
  --line: #2a3a49;
  --line2: #324250;
  --text: #FFFFFF;
  --text2: #8B97A3;
  --text3: #4A5561;
  --good: #3ddc84;
  --bad: #ff6b6b;
  --gold: #ffd166;
  --blue: #6fa8dc;

  /* 圆角 */
  --radius-card: 10px;
  --radius-btn: 8px;
  --radius-sm: 6px;
  --radius-pill: 999px;

  /* 间距（4 的倍数） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* 阴影 / 焦点 */
  --shadow-1: 0 2px 10px rgba(0, 0, 0, .25);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .4);
  --ring: 0 0 0 2px rgba(255, 70, 85, .55);

  /* 触控目标下限 */
  --tap: 44px;
}

/* ------------------------------------------------------------ 基础 / 复位 */
* { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, sans-serif;
  font-size: 14px; line-height: 1.6; overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
img { border-style: none; }
::selection { background: rgba(255, 70, 85, .35); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.container { max-width: 1120px; margin: 0 auto; padding: var(--sp-4); }

h1 { font-size: 24px; margin: var(--sp-6) 0 var(--sp-4); letter-spacing: .2px; }
h1 .sub, h2 .sub { font-size: 13px; font-weight: 400; color: var(--text2); margin-left: var(--sp-2); }
h2 { font-size: 17px; margin: 0 0 var(--sp-4); }
h3 { font-size: 15px; margin: 0 0 var(--sp-3); }
h4 { font-size: 13px; color: var(--text2); margin: var(--sp-2) 0; font-weight: 600; }

a { color: var(--text); }
.accent { color: var(--red); }
.sub { color: var(--text2); font-size: 13px; }
.hint { color: var(--text2); font-size: 12px; line-height: 1.65; }
.hint b { color: var(--text); }
.hint.warn { color: var(--bad); border-left: 2px solid var(--bad); padding-left: var(--sp-2); margin: var(--sp-2) 0; display: block; }
.empty { color: var(--text2); text-align: center; padding: var(--sp-6) var(--sp-3); margin: 0; }
.link { color: var(--red); font-size: 13px; text-decoration: none; display: inline-block; margin-top: var(--sp-2); }
.link:hover { text-decoration: underline; }
.good { color: var(--good); }
.bad { color: var(--bad); }
/* 名次升降徽标（v2.8.2）：▲ / ▼ 已经表达了方向，颜色只是强化（色觉障碍同样可读）；
   没有升降（0）或没有基准（新同学）时根本不渲染，不给整张表挂满无意义的「—」 */
.rk-delta {
  display: inline-block; margin-right: 5px; padding: 0 4px; border-radius: 4px;
  font-size: 11px; font-weight: 700; line-height: 16px; vertical-align: 1px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rk-delta.up { color: var(--good); background: rgba(61, 220, 132, .12); }
.rk-delta.down { color: var(--bad); background: rgba(255, 107, 107, .12); }
.disclaimer { color: var(--text3); font-size: 12px; text-align: center; margin: var(--sp-4) 0; }
code { font-family: ui-monospace, Consolas, monospace; background: var(--bg); padding: 1px 4px; border-radius: 4px; font-size: .92em; }

/* 窄屏表格横滚提示（与 .bk-scroll-hint 同款语气） */
.scroll-hint { display: none; margin: 0 0 var(--sp-2); font-size: 12px; color: var(--text2); text-align: center; }

/* ------------------------------------------------------------------- 导航 */
.nav {
  display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-6); background: rgba(27, 39, 51, .96);
  position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line);
}
.brand {
  font-weight: 800; font-size: 18px; text-decoration: none; letter-spacing: 1px;
  display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap;
}
.brand span { color: var(--red); font-size: 12px; margin-left: var(--sp-1); }
.nav-links { display: flex; gap: var(--sp-1); flex: 1; min-width: 0; }
.nav-links a {
  color: var(--text2); text-decoration: none; font-size: 14px;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-btn);
  min-height: 40px; display: flex; align-items: center; white-space: nowrap;
  transition: color .15s ease-out, background .15s ease-out;
}
.nav-links a:hover { color: var(--text); background: var(--card2); }
.nav-user { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.user-chip { color: var(--text2); font-size: 13px; white-space: nowrap; }
.nav-user .btn { padding: var(--sp-2) var(--sp-4); }

/* ----------------------------------------------------------- 按钮 / 表单 */
.btn {
  border: none; border-radius: var(--radius-btn); cursor: pointer;
  padding: 10px var(--sp-5); font-size: 14px; font-weight: 600; min-height: 40px;
  font-family: inherit;
  background: var(--card2); color: var(--text);
  transition: transform .15s ease-out, filter .15s ease-out, background .15s ease-out;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--red); color: #fff; }
.btn.primary:hover { background: var(--red-dark); filter: none; }
.btn.ghost { background: transparent; border: 1px solid #3a4a59; color: var(--text2); }
.btn.ghost:hover { color: var(--text); border-color: #4d5d70; filter: none; }
.btn.danger { background: #7a1f26; color: #fff; }
.btn.danger.ghost { background: transparent; border: 1px solid var(--bad); color: var(--bad); }
.btn.danger.ghost:hover { background: rgba(255, 107, 107, .12); }
.btn:disabled { background: var(--text3); color: #0d1420; cursor: not-allowed; transform: none; filter: none; }

label { display: block; margin: var(--sp-3) 0; font-size: 13px; color: var(--text2); }
input, select, textarea {
  display: block; width: 100%; margin-top: var(--sp-1);
  background: var(--bg); color: var(--text); font-family: inherit;
  border: 1px solid #3a4a59; border-radius: var(--radius-btn);
  padding: 10px var(--sp-3); font-size: 14px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--red); box-shadow: var(--ring); }
select { cursor: pointer; }
fieldset { border: none; padding: 0; margin: 0 0 var(--sp-4); }
legend { color: var(--text2); font-size: 13px; margin-bottom: var(--sp-2); padding: 0; }
.form-foot {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  flex-wrap: wrap; margin-top: var(--sp-4);
}

/* ------------------------------------------------------------------- 卡片 */
.card {
  background: var(--card); border-radius: var(--radius-card);
  padding: var(--sp-6); margin-bottom: var(--sp-6);
  border: 1px solid rgba(255, 255, 255, .04);
}
.card > p:last-child, .card > section:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- 登录 */
.auth-wrap { max-width: 420px; margin: 48px auto; }
.auth-wrap h1 { font-size: 20px; margin: 0 0 var(--sp-2); line-height: 1.4; }
.tabs { display: flex; gap: var(--sp-2); margin: var(--sp-4) 0; }
.tab {
  flex: 1; padding: 10px; background: var(--card2); border: none; color: var(--text2);
  border-radius: var(--radius-btn); cursor: pointer; font-size: 14px; font-family: inherit;
  min-height: var(--tap); transition: background .15s ease-out, color .15s ease-out;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--red); color: #fff; font-weight: 700; }
#auth-form .btn { width: 100%; margin-top: var(--sp-2); }

/* ------------------------------------------------------------------- 首页 */
.hero {
  background: linear-gradient(135deg, var(--card) 45%, #321a20 100%);
  border: 1px solid rgba(255, 70, 85, .18);
  position: relative; overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255, 70, 85, .22), transparent 68%);
  pointer-events: none;
}
.hero-main { position: relative; z-index: 1; }
.hero h1 { margin: 0; font-size: clamp(21px, 4.4vw, 30px); letter-spacing: 1px; line-height: 1.25; }
.hero .sub { margin: var(--sp-2) 0 0; }
.countdown { font-size: 18px; color: var(--gold); margin: var(--sp-2) 0 0; font-variant-numeric: tabular-nums; }
/* v2.5.0 首页倒计时：默认显示接下来两场未开赛的比赛，每场一行（原来是单行，第一场开赛后就没用了） */
.countdown-list { margin-top: var(--sp-2); }
.countdown-list .countdown { margin: 0; line-height: 1.45; }
.countdown-list .countdown + .countdown { margin-top: 2px; }
.countdown-list .cd-label { color: var(--text2); font-size: 15px; }
.countdown-list .cd-label b { color: var(--text); font-weight: 600; }
.countdown-list .cd-sep { color: var(--text3); }
.countdown-list .cd-val { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.home-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-6); align-items: start; }
.home-grid > * { min-width: 0; }
/* 首页「即将开赛」列表：卡片之间必须有间距（此前 .match-list 未定义 → 卡片全部贴在一起） */
.match-list { display: flex; flex-direction: column; gap: var(--sp-2); }

/* ------------------------------------------------------------------- 表格 */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 10px var(--sp-2); text-align: left; border-bottom: 1px solid var(--line); }
.tbl th { color: var(--text2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tr.top1 td { background: rgba(255, 209, 102, .08); }
.tbl tr.sum td { border-top: 2px solid #3a4a59; font-weight: 700; }
/* 横滚容器：窄屏表格不再撑破卡片/页面 */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; margin-bottom: var(--sp-1); }
.tbl-wrap::-webkit-scrollbar { height: 6px; }
.tbl-wrap::-webkit-scrollbar-thumb { background: #3a4756; border-radius: 3px; }
.tbl-wrap > .tbl { min-width: 100%; }

/* ---------------------------------------------- 页面容器 / 通用工具类 */
/*
 * 页面根节点（main.js 路由注入的 class）：统一 min-width:0。
 * 这些节点常作为 grid / flex 子项，默认 min-width:auto 会被内部宽表撑开，
 * 导致整页横滑 —— 显式归零后，溢出改为由内部 .tbl-wrap / .bk-wrap 承担。
 */
.admin, .home, .matches, .match-page, .standings, .team-page { min-width: 0; }
/* 窄屏折叠：.hide-sm ≤767px 生效，.hide-xs ≤479px 生效（见响应式断点） */
.hide-sm, .hide-xs { display: table-cell; }
/* 危险操作区（管理页重置/清空数据）：红色描边提示不可逆 */
.danger-zone { border-color: rgba(255, 107, 107, .45); }
.danger-zone h2 { color: var(--bad); }

/* ------------------------------------------ 赛程 / 对阵卡（首页·战队页列表） */
.groups-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.group-card h2 { color: var(--red); }
.br-round { margin-bottom: var(--sp-2); }
.line-legend { float: right; font-weight: 400; color: var(--text3); font-size: 11px; }
.br-col { display: flex; flex-direction: column; gap: var(--sp-2); }

.match-card {
  display: block; text-decoration: none; position: relative;
  background: var(--card2); border: 1px solid var(--line2);
  border-radius: var(--radius-btn); padding: var(--sp-2) var(--sp-3); color: var(--text);
  transition: border-color .15s ease-out, transform .15s ease-out, box-shadow .15s ease-out;
}
.match-card:hover { border-color: var(--red); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.match-card.st-locked { border-color: rgba(255, 209, 102, .45); }
/* st-scheduled = 可预测的默认态：显式声明，避免「用了没定义」的静态审计告警 */
.match-card.st-scheduled { border-color: var(--line2); }
.match-card.st-tbd { opacity: .65; }
.match-card.st-tbd .mc-team { color: var(--text3); font-style: italic; }
.match-card.st-settled { border-color: #2e4a3f; }
.match-card.is-bo5 { border-color: #6b3a3a; padding-top: var(--sp-3); }
.bo5-badge {
  position: absolute; top: -9px; right: var(--sp-2); font-size: 10px; line-height: 1.5;
  background: var(--red); color: #fff; border-radius: var(--sp-1); padding: 1px 6px; font-weight: 700;
}
.mc-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); font-size: 14px; min-height: 22px; }
.mc-row.win { color: var(--good); font-weight: 700; }
.mc-row.lose { color: var(--text3); text-decoration: line-through; }
.mc-meta { display: flex; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-1); font-size: 11px; color: var(--text2); }
.mc-score { color: var(--gold); font-weight: 700; }
.mc-lock { color: var(--gold); }
.mc-label, .mc-time { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-time { flex: none; }
.mc-tbd-tip { color: var(--text3); font-style: italic; }
.mc-check { flex: none; font-size: 12px; line-height: 1; }

.playoff-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.playoff-col h3.ub { color: var(--good); }
.playoff-col h3.lb { color: var(--bad); }
.playoff { overflow-x: auto; }
.gf-wrap { margin-top: var(--sp-4); border-top: 1px dashed #3a4a59; padding-top: var(--sp-4); }
.gf-wrap h3 { text-align: center; color: var(--gold); }
.br-col.gf { max-width: 360px; margin: 0 auto; }

/* --------------------------------------------------------------- 单场页头部 */
.match-page > .crumbs { margin-top: 0; }
.crumbs { margin: var(--sp-4) 0; font-size: 13px; }
.crumbs a { color: var(--text2); text-decoration: none; }
.crumbs a:hover { color: var(--red); }
.match-head .mh-meta { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.pill {
  font-size: 12px; color: var(--text2); background: var(--card2);
  border-radius: var(--radius-pill); padding: 2px var(--sp-3); border: 1px solid var(--line2);
  white-space: nowrap;
}
.pill.done { color: var(--good); border-color: var(--good); }
.pill.mini { font-size: 10px; padding: 0 var(--sp-2); }
.mh-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-4); align-items: start; }
.mh-vs { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding-top: var(--sp-4); }
.vs { color: var(--red); font-weight: 800; font-size: 20px; }
.final-score { font-size: 22px; color: var(--gold); font-weight: 800; }
.mh-team { text-align: center; min-width: 0; }
.mh-team.win .mh-team-btn { color: var(--good); }
.mh-team-btn {
  background: none; border: none; color: var(--text); font-size: 20px; font-weight: 800;
  cursor: pointer; text-decoration: underline dotted var(--text3); font-family: inherit;
  display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 100%;
  transition: color .15s ease-out;
}
.mh-team-btn:hover { color: var(--red); }
.mh-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-roster { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: center; margin-top: var(--sp-2); }
.roster-p {
  background: var(--card2); border: 1px solid var(--line2); color: var(--text2);
  border-radius: var(--sp-1); font-size: 12px; padding: 2px var(--sp-2);
  cursor: pointer; min-height: 28px; font-family: inherit;
  transition: color .15s ease-out, border-color .15s ease-out;
}
.roster-p:hover { color: var(--text); border-color: var(--red); }
.tbd-text { color: var(--text3); font-style: italic; font-size: 18px; }
.lock-tip { text-align: center; color: var(--gold); margin: var(--sp-2) 0 0; font-size: 13px; }
/* v2.5.0 管理面板「② 比赛锁定」卡片：左边一句状态说明、右边一个操作按钮，窄屏自动换行 */
.lock-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.lock-state { min-width: 0; color: var(--text2); font-size: 13px; line-height: 1.6; }
.lock-state b { color: var(--text); }
.final-line { font-size: 16px; }
.my-pick { color: var(--text2); font-size: 13px; background: var(--card2); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); }

/* ------------------------------------- 单场页：两队首发数据对比（vlr 风格） */
.player-cmp { margin-bottom: var(--sp-6); }
.pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-6); }
.pc-team { min-width: 0; }
.pc-team-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-1); }
.pc-team-head a { display: flex; align-items: center; gap: var(--sp-2); color: var(--text); font-weight: 800; text-decoration: none; }
.pc-team-head a:hover { color: var(--red); }
.pc-team-head img { border-radius: var(--sp-1); }
.pc-rating { font-size: 12px; color: var(--text2); }
.pc-rating b { color: var(--gold); font-size: 15px; margin-left: 2px; }
.pc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.pc-scroll::-webkit-scrollbar { height: 6px; }
.pc-scroll::-webkit-scrollbar-thumb { background: #3a4756; border-radius: 3px; }
.pc-tbl { min-width: 470px; font-variant-numeric: tabular-nums; }
.pc-tbl th, .pc-tbl td { padding: 7px 6px; }
.pc-tbl th { white-space: nowrap; }
.pc-tbl tfoot td { border-top: 2px solid #3a4a59; border-bottom: none; font-weight: 700; }
.pc-tbl td.better { color: var(--good); }
.pc-tbl td.worse { color: var(--text3); }
.pc-tbl td.pc-dim, .pc-tbl th.pc-dim { color: var(--text3); opacity: .7; }  /* v1.7.0 胜率不计分 */
.pc-tbl .igl-badge { margin-left: var(--sp-1); }
.pc-p {
  background: none; border: none; color: var(--text); font: inherit; font-weight: 600;
  padding: 0; cursor: pointer; text-decoration: underline dotted var(--text3);
}
.pc-p:hover { color: var(--red); }
.pc-role { color: var(--text3); font-size: 12px; white-space: nowrap; }
.pc-note { margin-top: var(--sp-3); }
.pc-good { color: var(--good); }
.pc-mp { margin-left: var(--sp-2); color: var(--text3); font-size: 11px; }

/* ------------------------------------------- 战队页：图池（第二赛段逐图战绩） */
.mappool { margin-bottom: var(--sp-6); }
.mp-tbl { font-variant-numeric: tabular-nums; }
.mp-tbl th, .mp-tbl td { padding: 7px var(--sp-2); white-space: nowrap; }
.mp-tbl tr.off { color: var(--text3); }
.mp-tbl tfoot td { border-top: 2px solid #3a4a59; border-bottom: none; font-weight: 700; }
.mp-map { font-weight: 600; }
.mp-en { margin-left: 6px; font-size: 12px; color: var(--text3); font-weight: 400; }
.mp-rec, .mp-wr { font-weight: 600; }
.mp-bar-cell { width: 130px; }
.mp-bar { display: block; height: 6px; border-radius: 3px; background: var(--card2); overflow: hidden; }
.mp-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--red), var(--gold)); }
.mp-tbl tr.off .mp-bar i { background: #3a4a59; }
.mp-tag { font-size: 11px; color: var(--text3); border: 1px solid #3a4a59; border-radius: 10px; padding: 1px 7px; }
/* 图池档位：强图 / 弱图 / 中性 / 样本不足 / 不玩 / 未出场 */
.mp-tbl tr.strong .mp-map, .mp-tbl tr.strong .mp-wr { color: var(--good); }
.mp-tbl tr.weak .mp-map, .mp-tbl tr.weak .mp-wr { color: var(--bad); }
.mp-tbl tr.thin, .mp-tbl tr.exempt { color: var(--text2); }
.mp-tbl tr.thin .mp-map, .mp-tbl tr.exempt .mp-map { color: var(--text2); font-weight: 400; }
.mp-tbl tr.unplayed, .mp-tbl tr.off { color: var(--text3); }
.mp-tbl tr.penalty .mp-map { color: var(--bad); text-decoration: line-through dotted var(--text3); }
.mp-tbl tr.strong .mp-bar i { background: linear-gradient(90deg, var(--good), var(--gold)); }
.mp-tbl tr.weak .mp-bar i, .mp-tbl tr.penalty .mp-bar i { background: var(--bad); }
.mp-tbl tr.strong td { background: rgba(61, 220, 132, .06); }
.mp-tbl tr.weak td { background: rgba(255, 107, 107, .06); }
.mp-tbl tr.penalty td { background: rgba(255, 107, 107, .11); }
.mp-tag.strong { color: var(--good); border-color: rgba(61, 220, 132, .5); background: rgba(61, 220, 132, .1); }
.mp-tag.weak { color: var(--bad); border-color: rgba(255, 107, 107, .5); background: rgba(255, 107, 107, .1); }
.mp-tag.neutral { color: var(--text2); }
.mp-tag.thin { color: var(--gold); border-color: rgba(255, 209, 102, .45); background: rgba(255, 209, 102, .08); }
.mp-tag.unplayed { color: var(--text3); }
.mp-tag.exempt { color: var(--blue); border-color: rgba(111, 168, 220, .45); background: rgba(111, 168, 220, .08); }
.mp-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-1) 0 var(--sp-2); }
.mp-chip {
  font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 12px;
  border: 1px solid #3a4a59; color: var(--text2); background: var(--card2);
}
.mp-chip.strong { color: var(--good); border-color: rgba(61, 220, 132, .5); background: rgba(61, 220, 132, .1); }
.mp-chip.weak { color: var(--bad); border-color: rgba(255, 107, 107, .5); background: rgba(255, 107, 107, .1); }
.mp-chip.neutral { color: var(--text2); }
.mp-chip.thin { color: var(--gold); border-color: rgba(255, 209, 102, .45); background: rgba(255, 209, 102, .08); }
.mp-chip.off { color: var(--text3); }
.mp-chip.exempt { color: var(--blue); border-color: rgba(111, 168, 220, .45); background: rgba(111, 168, 220, .08); }
.score-bd { font-size: 11px; color: var(--text2); font-weight: 400; margin: 6px 0 0; text-align: center; max-width: 250px; }

.match-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-6); align-items: start; }
.match-grid > * { min-width: 0; }

/* --------------------------------------------------------- 预测表单 / 小问题 */
.pick-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pick { position: relative; margin: 0; flex: 1; min-width: 88px; }
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick span {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid #3a4a59; border-radius: var(--radius-btn);
  padding: 10px var(--sp-2); font-size: 14px; cursor: pointer; color: var(--text2);
  min-height: 40px; transition: all .15s ease-out;
}
.pick:hover span { border-color: #4d5d70; color: var(--text); }
.pick input:checked + span { border-color: var(--red); color: var(--text); background: rgba(255, 70, 85, .12); font-weight: 700; }
.pick input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 1px; }
.pick.small span { min-height: 34px; padding: var(--sp-1) var(--sp-3); font-size: 13px; }

.tb-q { border: 1px solid var(--line); border-radius: var(--radius-btn); padding: var(--sp-3); margin-bottom: var(--sp-3); }
.tb-q.done { background: var(--card2); }
.tb-q:last-child { margin-bottom: 0; }
.tb-head { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-1); }
.tb-badge { font-size: 11px; font-weight: 700; }
.tb-cat { font-size: 11px; color: var(--text3); }
.tb-text { margin: var(--sp-1) 0 var(--sp-2); font-size: 14px; }
.tb-choices { display: flex; gap: var(--sp-2); max-width: 320px; }
.tb-ans { font-size: 13px; color: var(--text2); margin: 0; }
.tb-admin-list { max-height: 480px; overflow-y: auto; }
/* 小问题作答回顾（单场页） */
.tb-review { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }

/* ------------------------------------ 管理页 · 淘汰赛抽签对阵表（/admin） */
/* v2.0.0 补齐：.draw-* 此前被 admin.js 使用但从未定义，抽签区没有卡片感、窄屏会挤成一团 */
.draw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-4); }
.draw-row {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: var(--sp-2);
  background: var(--card2); border: 1px solid var(--line2);
  border-radius: var(--radius-btn); padding: var(--sp-2) var(--sp-3);
}
.draw-slot { display: flex; flex-direction: column; gap: 1px; font-size: 12px; font-weight: 700; color: var(--text2); }
.draw-slot small { font-size: 10.5px; font-weight: 400; color: var(--text3); }
.draw-row select { width: 100%; min-width: 0; margin-top: 0; }
.draw-vs { font-size: 12px; color: var(--text3); }
.draw-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* 难度徽标（utils.tierBadge 的 tier-* 后缀） */
.tier-easy { color: var(--good); }
.tier-medium { color: var(--gold); }
.tier-hard { color: var(--bad); }

/* ------------------------------------------------------- 分布条 / 百分位条 */
.dist-bars { display: flex; flex-direction: column; gap: var(--sp-2); }
.dist-row { display: grid; grid-template-columns: 120px 1fr 56px; align-items: center; gap: var(--sp-3); }
.dist-name { font-size: 13px; color: var(--text2); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { background: var(--bg); border-radius: var(--sp-1); height: 12px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--red); }
.bar.mini { width: 90px; height: 8px; }
.bar.mini i { background: var(--gold); }

/* ----------------------------------------------------------------- 战队页 */
.team-page .team-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.team-head h1 { margin: 0; }
.big-score { font-size: 44px; font-weight: 800; color: var(--gold); display: flex; flex-direction: column; align-items: center; line-height: 1; }
.big-score .sub { font-size: 12px; color: var(--text2); font-weight: 400; margin-top: var(--sp-1); }
.team-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-6); align-items: start; }
.team-grid > * { min-width: 0; }
.breakdown td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.starter-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.starter {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  background: var(--card2); border: 1px solid var(--line2); border-radius: var(--radius-btn);
  color: var(--text); padding: 10px var(--sp-4); cursor: pointer; text-align: left;
  font-family: inherit; font-size: 14px; min-height: var(--tap);
  transition: border-color .15s ease-out, background .15s ease-out;
}
.starter:hover { border-color: var(--red); background: #26333f; }
.st-name { font-weight: 700; flex: 1; min-width: 0; }
.igl-badge { font-size: 10px; color: var(--gold); border: 1px solid var(--gold); border-radius: var(--sp-1); padding: 0 var(--sp-1); white-space: nowrap; }
.st-role { font-size: 12px; color: var(--text2); }
.st-score { font-weight: 800; font-size: 18px; color: var(--gold); font-variant-numeric: tabular-nums; }
.team-title { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }

/* ------------------------------------------------------------ 弹层 / Toast */
.vp-dialog {
  background: var(--card); color: var(--text);
  border: 1px solid var(--line2); border-radius: var(--radius-card);
  padding: 0; max-width: 560px; width: calc(100vw - 32px);
  max-height: 80vh; max-height: 80dvh;   /* dvh：避开手机浏览器地址栏收起/展开造成的高度跳变 */
  box-shadow: var(--shadow-2);
}
.vp-dialog::backdrop { background: rgba(6, 11, 16, .75); }
.dialog-head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line); font-weight: 700;
}
.dialog-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-x { background: none; border: none; color: var(--text2); font-size: 20px; cursor: pointer; min-width: var(--tap); min-height: var(--tap); border-radius: var(--radius-sm); }
.dialog-x:hover { color: var(--text); background: var(--card2); }
.player-drawer { padding: var(--sp-5); overflow-y: auto; max-height: calc(80vh - 56px); max-height: calc(80dvh - 56px); }
.player-drawer h3 { margin: 0; }
.admin-dialog, .player-drawer { overscroll-behavior: contain; }
/* 弹层内的小节卡片：收紧内边距、改用次级底色，与弹层本体区分层次 */
.admin-dialog .card { padding: var(--sp-4); margin-bottom: var(--sp-3); background: var(--card2); }
.admin-dialog .card:last-child { margin-bottom: 0; }
#toasts { position: fixed; bottom: var(--sp-6); right: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); z-index: 999; max-width: calc(100vw - 32px); }
.toast {
  background: var(--card); border-left: 4px solid var(--red); color: var(--text);
  border-radius: var(--radius-btn); padding: var(--sp-3) var(--sp-4); font-size: 13px;
  box-shadow: var(--shadow-2); animation: slide-in .2s ease-out;
  display: flex; gap: var(--sp-3); align-items: center;
}
.toast.ok { border-color: var(--good); }
.toast.error { border-color: #ff5f5f; background: #3a1518; }
.toast-x { background: none; border: none; color: var(--text2); cursor: pointer; font-size: 16px; min-width: 24px; }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------ 已预测徽标 / 隐藏已结束 / 我的预测速览 */
.mc-mine {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  font-size: 10px; line-height: 1; padding: var(--sp-1) 6px; border-radius: var(--radius-sm);
  background: rgba(31, 185, 134, .15); color: var(--good); border: 1px solid rgba(31, 185, 134, .4);
}
/* Bo5 徽标在卡片上沿外侧，为此给卡顶留白，避免与「已预测」徽标叠在一起 */
.match-card.is-bo5 .mc-mine { top: var(--sp-3); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.page-head h1 { margin-top: 0; }
.hide-settled .match-card.st-settled { display: none; }
.mine-list { display: flex; flex-direction: column; gap: 6px; }
.mine-row {
  display: grid; grid-template-columns: 96px 1fr auto; gap: var(--sp-2); align-items: center;
  padding: var(--sp-2) var(--sp-3); border: 1px solid #3a4a59; border-radius: var(--radius-btn);
  color: var(--text); text-decoration: none; font-size: 13px; min-height: 40px;
  transition: border-color .15s ease-out;
}
.mine-row:hover { border-color: var(--red); }
.mr-label { color: var(--text2); }
.mr-pick { font-weight: 600; }
.mr-score { text-align: right; }

.footer { text-align: center; color: var(--text3); font-size: 12px; padding: var(--sp-8) 0; }

/* ============================================================ v1.3 括号图
 * 设计稿对齐：深色对阵框 + 金色轮次标题 + SVG 连线。
 * ⚠ 下列竖向几何值（列宽 236 / 卡片内边距 / 行高 38 / 间距 32 / 占位 246）
 *   互相咬合，改动任一值都会破坏小组图第 4 列的晋级框对齐。
 * ======================================================================== */
.group-bk { margin-bottom: var(--sp-5); }
.group-bk h2 { margin-bottom: var(--sp-2); }

/*
 * 横滑容器：括号图宽度固定（小组图约 1112px、淘汰赛图约 1696px），窄屏在卡片内横向滚动。
 * 注意：这里不能用 min-width: max-content —— 那会让 .bk-wrap 撑到内容宽度、溢出交给上级，
 * 结果是整个页面（含 sticky 导航）跟着横滑。改为容器宽度自适应 + 内部网格 max-content 溢出，
 * 滚动被收进卡片内，页面本身不再横向滚动。
 * overscroll-behavior-x: contain 防止横滑到边界后触发页面横滚/浏览器返回手势（iOS 侧滑）。
 */
.bk-wrap {
  position: relative; padding: var(--sp-2) var(--sp-3) var(--sp-4);
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: #3a4756 transparent;
}
.bk-wrap::-webkit-scrollbar { height: 6px; }
.bk-wrap::-webkit-scrollbar-track { background: transparent; }
.bk-wrap::-webkit-scrollbar-thumb { background: #3a4756; border-radius: 3px; }
.bk-wrap::-webkit-scrollbar-thumb:hover { background: #4d5d70; }
.bk-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 0; }
.bk-svg .ln-win { fill: none; stroke: #5a6b80; stroke-width: 1.5; }
.bk-svg .ln-lose { fill: none; stroke: #435062; stroke-width: 1.5; stroke-dasharray: 4 3; }

/* width: max-content 让网格按内容宽度撑开，溢出由 .bk-wrap 承担（横滑） */
.bk-grid { position: relative; z-index: 1; display: grid; gap: var(--sp-8) 56px; width: max-content; }
.bk-grid.group { grid-template-columns: repeat(4, max-content); }
.bk-grid.playoff { grid-template-columns: repeat(6, max-content); gap: 44px 56px; }

.bk-col { display: flex; flex-direction: column; min-width: 236px; }
.bk-col.center { justify-content: center; }
.bk-col.spacer { min-width: 0; }
.bk-matches { flex: 1; display: flex; flex-direction: column; gap: var(--sp-8); justify-content: center; }

.bk-pill {
  align-self: flex-start; margin-bottom: 14px;
  background: #c9a44f; color: #191307; font-size: 12px; font-weight: 700;
  letter-spacing: .5px; padding: var(--sp-1) 14px; border-radius: var(--sp-1);
  white-space: nowrap;
}
.bk-pill.gold { background: var(--gold); }

/*
 * 对阵框外壳：把「比赛卡」与「管理员按钮」分开成兄弟节点。
 * 原因：<button> 嵌在 <a> 内属非法 HTML（交互元素嵌套），也会误触整卡的跳转。
 * 竖向尺寸必须与 .bk-col 的 min-width 一致，否则小组图第 4 列的 .bk-adv-gap 对齐会偏。
 */
.bk-slot { position: relative; width: 236px; }

/* 对阵框 */
.bk-match {
  position: relative; display: block; width: 100%; text-decoration: none; color: var(--text);
  background: #10161d; border: 1px solid #2c3947; border-radius: var(--radius-sm);
  transition: border-color .15s ease-out;
}
.bk-match:hover { border-color: #8fa2b8; }
.bk-match.is-bo5 { border-color: #6b3a3a; }
.bk-match.st-locked { border-color: rgba(255, 209, 102, .4); }
.bk-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 10px; font-size: 11px; color: #93a3b5; border-bottom: 1px solid #1e2833;
}
.bk-bo { color: #c9d4e0; font-weight: 700; letter-spacing: .5px; }
/*
 * 日期不换行 + 省略号：窄屏（188px 卡片、管理员按钮占位）时若日期折行，头部变高，
 * 卡片总高变化会让小组图第 4 列的 .bk-adv-gap 对齐偏移。宁可截断也不折行。
 */
.bk-date { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-team { display: flex; align-items: center; gap: var(--sp-2); padding: 7px 10px; font-size: 12.5px; min-height: 38px; }
.bk-team + .bk-team { border-top: 1px solid #1e2833; }
.bk-logo {
  flex: none; width: 24px; height: 24px; border-radius: 5px; display: grid; place-items: center;
  font-size: 9px; font-weight: 800; color: #fff; letter-spacing: .3px;
  background: var(--tc, #39424e); border: 1px solid rgba(255, 255, 255, .18);
}
.bk-logo.tbd { background: #2f6bff; border-color: transparent; }
.bk-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-team.tbd-slot .bk-name { color: #7e8ea0; }
.bk-score { font-size: 13px; font-weight: 800; color: #dbe4ee; min-width: 18px; text-align: right; }
/* 胜者标记（v2.5.1）：放在队名前面而不是顶掉比分 —— 两队都要各自显示赢了几图 */
.bk-check { flex: none; display: inline-flex; align-items: center; font-size: 11px; line-height: 1; }
.bk-team.win .bk-name { color: var(--gold); }
.bk-team.win .bk-score { color: var(--gold); }
.bk-team.lose { opacity: .55; }
.bk-node {
  position: absolute; right: -6px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px;
  border-radius: 50%; background: #10161d; border: 1.5px solid #5a6b80; z-index: 2;
}
/*
 * 「已预测」徽标：作为 .bk-head 的最后一个左侧流式项（margin-left:auto 顶到右侧）。
 * 原先是 position:absolute; top:5px; right:8px，正好压住头部的 BO 文本 —— 改为流内布局消除重叠。
 * 高度 16px < 头部行高 17.6px，不改变卡片高度（括号图竖向对齐依赖固定高度）。
 */
.bk-mine {
  margin-left: auto; flex: none; font-size: 10px; line-height: 1; padding: 3px 5px; border-radius: var(--sp-1);
  color: var(--good); background: rgba(61, 220, 132, .14); border: 1px solid rgba(61, 220, 132, .35);
}

/*
 * 管理员快捷录入按钮（仅管理员渲染，见 views/matches.js）：
 * 贴在对阵框头部右上角，尺寸 ≤ 头部行高（约 28px），因此不改变卡片总高度 —— 括号图竖向对齐不受影响。
 * .has-admin 给头部预留右侧空间，避免压住 BO /「已预测」文本；原先是 <button> 嵌在 <a> 内，
 * 属非法 HTML 且会误触整卡跳转，故改为 .bk-slot 下的兄弟节点（z-index 高于卡片）。
 * 注意不要用负 top 放到卡片上方：.bk-wrap 是横向滚动容器（overflow-x:auto ⇒ overflow-y 计算为 auto），
 * 起始方向溢出会被裁剪，按钮会显示不全。
 */
.bk-admin-btn {
  position: absolute; top: var(--sp-1); right: var(--sp-1); z-index: 3;
  width: 20px; height: 20px; padding: 0; display: grid; place-items: center;
  font-size: 11px; line-height: 1; cursor: pointer;
  color: #c9d4e0; background: var(--card2); border: 1px solid #3a4756; border-radius: var(--radius-sm);
  transition: border-color .15s ease-out, color .15s ease-out;
}
.bk-admin-btn:hover, .bk-admin-btn:focus-visible { border-color: var(--red); color: #fff; }
.bk-slot.has-admin .bk-head { padding-right: 32px; }
.bk-match.st-settled { border-color: #2e4a3f; }

/* 晋级 / 冠军占位框 */
.bk-adv-box {
  height: 64px; background: #2b323b; border-radius: var(--radius-btn); padding: 10px;
  display: flex; align-items: center;
}
.bk-adv-bar {
  flex: 1; min-width: 0; height: 26px; background: #3d4550; border-radius: var(--radius-sm); overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 6px; font-size: 11px; color: #aeb9c6;
}
.bk-adv-box.champ { background: rgba(255, 209, 102, .08); border: 1px solid rgba(255, 209, 102, .35); }
.bk-adv-box.champ .bk-adv-bar { background: rgba(255, 209, 102, .14); color: var(--gold); font-weight: 700; }
/* 小组图第 4 列：与第 3 列「败者组决赛」对齐的下沉晋级框占位 */
.bk-adv-gap { height: 246px; }
/* 晋级框已确定（出线队伍落位）：高亮显示队名 */
.bk-adv-bar.done { background: rgba(255, 209, 102, .14); color: var(--gold); font-weight: 700; }
.bk-adv-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 队徽：真实图片（assets/logos/，来源 BWIKI）· SVG 字标为兜底 */
.t-logo { flex: none; border-radius: 5px; vertical-align: -3px; }
img.t-logo { object-fit: contain; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.t-logo.fallback { display: inline-grid; place-items: center; font-size: 8px; font-weight: 800; color: #fff; background: #39424e; border: 1px solid rgba(255, 255, 255, .18); }

/*
 * 赛区图标 + 队徽的组合标记（js/logos.js teamMark）：赛区图标统一排在队徽左侧。
 * 关键点：内层 gap 压到 3px 且整块 flex:none，这样相比旧版只多占「赛区图标宽 + 3px」，
 * 括号图 188px 窄卡里的队名不会被额外挤压、更不会把卡片撑高（竖向下沉会破坏第 4 列对齐）。
 */
.t-mark { display: inline-flex; align-items: center; gap: 3px; flex: none; min-width: 0; vertical-align: middle; }
.r-logo { flex: none; object-fit: contain; border-radius: 3px; vertical-align: middle; }
.mc-team { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mc-team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-pick { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }

/* 隐藏已结束开关同样作用于括号图（切换后由 JS 重画连线） */
.hide-settled .bk-match.st-settled,
.hide-settled .bk-slot.st-settled { display: none; }

/* ============================================================ v1.4.2 移动端
 * 目标：窄屏不再「整页」横滑、横滑可发现可定位、触屏点按目标够大、刘海屏留安全区。
 * 约束：括号图竖向几何（卡片高度、行间距、.bk-adv-gap 的对齐值）保持不动，
 *       只压缩横向尺寸（卡片宽度 236→188、列间距 56→20），以免破坏小组图第 4 列对齐。
 * ============================================================ */

/* ---- 横滑可发现性 ---- */
.bk-scroll-hint { display: none; margin: 0 0 var(--sp-2); font-size: 12px; color: var(--text2); text-align: center; }

/* 溢出时两侧渐隐；起点/终点不做无谓渐隐（at-start / at-end 由 JS 按滚动位置切换） */
.group-bk.is-scrollable:not(.at-start),
.playoff-bk.is-scrollable:not(.at-start) { --fade-l: 22px; }
.group-bk.is-scrollable:not(.at-end),
.playoff-bk.is-scrollable:not(.at-end) { --fade-r: 22px; }
.group-bk.is-scrollable > .bk-wrap,
.playoff-bk.is-scrollable > .bk-wrap {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l, 0px),
                      #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l, 0px),
              #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
}

/* 触屏：横滑按列吸附，一次滑动对齐一个轮次（仅粗指针，不干扰桌面滚轮） */
@media (pointer: coarse) {
  .bk-wrap { scroll-snap-type: x proximity; }
  .bk-col { scroll-snap-align: start; }
  .bk-admin-btn { top: 3px; right: 3px; width: 24px; height: 24px; font-size: 13px; }
  .bk-admin-btn::after { content: ''; position: absolute; inset: -8px; }
  .bk-slot.has-admin .bk-head { padding-right: 30px; }
}

/* 平板及以下（含触屏笔记本）显示滑动提示 */
@media (max-width: 1023px) {
  .group-bk.is-scrollable .bk-scroll-hint,
  .playoff-bk.is-scrollable .bk-scroll-hint { display: block; }
}

/* ---- v1.5.0：首页「我的战绩」卡片 + Bo5 得分提示 ---- */
.stats-card { grid-column: 1 / -1; }                 /* 首页整行展示，命中/连败一眼看清 */
.stat-tbl { margin: var(--sp-1) 0 var(--sp-3); font-variant-numeric: tabular-nums; }
.stat-tbl td { vertical-align: middle; }
.stat-tbl tfoot td { border-top: 2px solid #3a4a59; border-bottom: none; font-weight: 700; }
.stat-hint { display: block; margin-top: 2px; }

/* 卡片内的小节标题（大场预测 / 小问题） */
.stats-sub {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--sp-2);
  margin: var(--sp-5) 0 var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid #3a4a59;
  font-size: 16px;
}
.stats-sub .sub { font-size: 12px; font-weight: 400; color: var(--text2); }

.streak-box {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px;
  padding: 10px var(--sp-3); border-radius: var(--radius-btn);
  border: 1px solid #3a4a59; background: var(--card2);
}
.streak-box .sk-label { color: var(--text2); font-size: 13px; }
.streak-box .sk-num {
  font-size: 22px; line-height: 1; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.streak-box.warn { border-color: var(--bad); background: rgba(255, 95, 95, .08); }
.streak-box.warn .sk-num { color: var(--bad); }
.sk-warn { flex-basis: 100%; margin: 2px 0 0; font-size: 12px; color: var(--bad); }

.bo5-tip {
  margin: 0 0 var(--sp-3); padding: var(--sp-2) 10px; border-radius: var(--radius-btn);
  font-size: 13px; line-height: 1.5; color: var(--text);
  background: rgba(255, 209, 102, .08); border: 1px solid rgba(255, 209, 102, .35);
}

/* ============================================================ v1.8.0 BP 面板
 * 图池 = 外赛区第二赛段 7 张；Bo3 = 4 BAN + 2 PICK + 1 决胜图
 * 配色沿用图池档位口径：强图 green / 弱图 red / 决胜图 gold
 * ============================================================ */
.bp-panel h4 { margin: 0 0 var(--sp-2); font-size: 13px; color: var(--text2); font-weight: 600; }
.bp-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: 14px; }
.bp-conf {
  font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 12px;
  border: 1px solid #3a4a59; color: var(--text2); background: var(--card2);
}
.bp-conf.c-high { color: var(--good); border-color: rgba(61, 220, 132, .5); background: rgba(61, 220, 132, .1); }
.bp-conf.c-mid { color: var(--gold); border-color: rgba(255, 209, 102, .45); background: rgba(255, 209, 102, .08); }
.bp-conf.c-low { color: var(--bad); border-color: rgba(255, 107, 107, .5); background: rgba(255, 107, 107, .1); }
.bp-series { font-size: 12px; color: var(--text2); }
.bp-series b { color: var(--gold); font-variant-numeric: tabular-nums; }

/*
 * 两列网格：左「步骤推演」右「图池对位」。
 * min-width:0 必不可少 —— 右列内是 min-width:400px 的表格，grid 项默认 min-width:auto
 * 会被撑到 min-content 宽度，导致整块面板横溢出卡片（窄屏尤其明显）。
 */
.bp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-6); align-items: start; }
.bp-grid > * { min-width: 0; }
.bp-col-steps, .bp-col-map { min-width: 0; }
.bp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.bp-scroll::-webkit-scrollbar { height: 6px; }
.bp-scroll::-webkit-scrollbar-thumb { background: #3a4756; border-radius: 3px; }

/* ---- 步骤时间线（左侧竖条按 BAN / PICK / 决胜着色） ---- */
.bp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bp-step {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2);
  padding: 7px 10px; border: 1px solid #2c3947; border-left-width: 3px; border-radius: var(--radius-sm);
  background: #10161d; font-size: 12.5px;
}
.bp-step.ban { border-left-color: var(--bad); }
.bp-step.pick { border-left-color: var(--good); }
.bp-step.decider { border-left-color: var(--gold); background: rgba(255, 209, 102, .06); }
.bp-no { flex: none; min-width: 14px; text-align: right; font-size: 11px; color: var(--text3); font-variant-numeric: tabular-nums; }
.bp-act {
  flex: none; min-width: 40px; text-align: center; padding: 1px 0; border-radius: var(--sp-1);
  font-size: 11px; font-weight: 800; letter-spacing: .4px;
}
.bp-act.ban { color: var(--bad); background: rgba(255, 107, 107, .12); }
.bp-act.pick { color: var(--good); background: rgba(61, 220, 132, .12); }
.bp-act.dec { color: var(--gold); background: rgba(255, 209, 102, .14); }
.bp-who {
  display: inline-flex; align-items: center; gap: 5px; font-weight: 600;
  min-width: 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-side {
  flex: none; width: 14px; height: 14px; line-height: 14px; text-align: center;
  font-style: normal; font-size: 10px; font-weight: 800; border-radius: 3px;
}
.bp-side.s-A { color: #9fd0ff; background: rgba(111, 168, 220, .18); }
.bp-side.s-B { color: var(--gold); background: rgba(255, 209, 102, .16); }
.bp-map { flex: none; font-weight: 600; white-space: nowrap; }
.bp-map small { display: block; font-size: 10px; color: var(--text3); font-weight: 400; }
.bp-why { flex: 1 1 190px; min-width: 0; font-size: 11.5px; line-height: 1.5; color: var(--text2); }

/* ---- 图池对位表（7 张图 · 两队强度 + 处置） ---- */
.bp-tbl { min-width: 400px; font-variant-numeric: tabular-nums; }
.bp-tbl th, .bp-tbl td { padding: 7px var(--sp-2); white-space: nowrap; }
.bp-tbl td.bp-cell { white-space: normal; }
.bp-map-cell { font-weight: 600; }
.bp-map-cell small { display: block; font-size: 10px; color: var(--text3); font-weight: 400; }
.bp-wr { font-weight: 600; margin-right: 6px; }
.bp-cell.st-strong .bp-wr { color: var(--good); }
.bp-cell.st-weak .bp-wr { color: var(--bad); }
/* v2.0.0 补齐：neutral / thin 此前没有着色，胜率数字与「无数据」混在一起分不清 */
.bp-cell.st-neutral .bp-wr { color: var(--text); }
.bp-cell.st-thin .bp-wr { color: var(--gold); }
.bp-cell.st-unplayed .bp-wr, .bp-cell.st-off .bp-wr { color: var(--text3); }
/* v2.0.0 补齐：第二轮 BAN（late）左侧竖条改虚线，与第一轮 BAN 一眼区分 */
.bp-step.late { border-left-style: dashed; }
.bp-tbl tr.ban td { background: rgba(255, 107, 107, .05); }
.bp-tbl tr.pick td { background: rgba(61, 220, 132, .05); }
.bp-tbl tr.decider td { background: rgba(255, 209, 102, .08); }
.bp-disp {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 1px var(--sp-2);
  border-radius: 10px; border: 1px solid #3a4a59; color: var(--text2);
}
.bp-disp.ban { color: var(--bad); border-color: rgba(255, 107, 107, .5); background: rgba(255, 107, 107, .1); }
.bp-disp.pick { color: var(--good); border-color: rgba(61, 220, 132, .5); background: rgba(61, 220, 132, .1); }
.bp-disp.dec { color: var(--gold); border-color: rgba(255, 209, 102, .5); background: rgba(255, 209, 102, .12); }
.bp-disp.none { color: var(--text3); }
.bp-disp-cell { white-space: nowrap; }

/* ---- 特殊规则命中说明 ----
 * 颜色按「规则族」分组：CN 幽邃地窟（红）/ 先手方与双方都能打（蓝）/ 双方强图进决胜（金）/ 数据不足（红）
 * v1.10.0 起规则①改为「CN 第一轮直接把幽邃交给 BAN」，note code 见 js/bp.js：
 * cn_ban_abyss / cn_abyss_decider / veto_first_by_seed / both_weak_first / mutual_strong_decider
 * / deny_own_strong / no_map_data
 */
.bp-notes { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bp-notes li {
  font-size: 12.5px; line-height: 1.55; color: var(--text);
  padding: 7px 10px; border-radius: var(--radius-sm); background: var(--card2); border-left: 3px solid #3a4a59;
}
.bp-notes li.cn_ban_abyss,
.bp-notes li.cn_abyss_decider { border-left-color: var(--red); }
.bp-notes li.no_map_data { border-left-color: var(--bad); }
.bp-notes li.veto_first_by_seed,
.bp-notes li.both_weak_first,
.bp-notes li.deny_own_strong { border-left-color: var(--blue); }
.bp-notes li.mutual_strong_decider { border-left-color: var(--gold); }
.bp-note { margin-top: 14px; }

/* ========================================================= v2.2.0 赛后数据 + 查询
 * ① 单场页「赛后数据 · 全场统计」：地图卡（图一/图二/图三 + PICK 归属 + 比分）
 * ② 点卡展开的比分详情 + 12 列选手数据表（两个 +/- 为派生列，正负分色）
 * ③ 管理页赛后数据录入（逐图配置 + 10 行输入网格 + 粘贴解析）
 * ④ 查询页（搜索战队 / 选手）
 * 复用既有令牌，不新增颜色。
 * ========================================================================== */

/* ---- 单场页：赛后数据 ---- */
.post-panel .pm-head { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.post-panel .pm-head .pill b { color: var(--text); }
.post-pending { border: 1px dashed var(--line2); border-radius: var(--radius-card); }

.pm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--sp-3); }
.pm-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1);
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: var(--sp-3); color: var(--text); font: inherit; font-size: 13px; text-align: left;
  cursor: pointer; transition: border-color .15s, background .15s, transform .15s;
}
.pm-card:hover { border-color: var(--line2); background: var(--card3); }
.pm-card:active { transform: scale(.98); }
.pm-card.active { border-color: var(--red); background: rgba(255, 70, 85, .1); }
.pm-card.unplayed { opacity: .6; border-style: dashed; }
.pm-card-no { color: var(--red); font-size: 12px; font-weight: 700; }
.pm-card-cn { font-size: 15px; font-weight: 700; }
.pm-card-own {
  font-size: 11px; color: var(--text2); border: 1px solid var(--line2);
  border-radius: var(--radius-pill); padding: 0 var(--sp-2);
}
.pm-card-own.pick { color: var(--gold); border-color: var(--gold); }
.pm-card-own.decider { color: var(--blue); border-color: var(--blue); }
.pm-card-own.none { color: var(--text3); border-color: var(--text3); }
.pm-card-en { color: var(--text3); font-size: 11px; letter-spacing: .04em; }
.pm-card-sc { margin-top: var(--sp-1); font-size: 14px; font-weight: 700; }
.pm-card-sc.none { color: var(--text3); font-size: 12px; font-weight: 400; }

.pm-detail:empty { display: none; }
.pm-score {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-4); padding: var(--sp-3) 0 var(--sp-2);
}
.pm-side { display: flex; align-items: center; gap: var(--sp-3); }
.pm-side.right { justify-content: flex-end; }
.pm-side-team { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; }
.pm-side-num { font-size: 30px; font-weight: 800; line-height: 1; }
.pm-vs { color: var(--text3); font-size: 13px; letter-spacing: .1em; }
.pm-detail-meta { text-align: center; margin: 0 0 var(--sp-3); }

.pm-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  margin-bottom: var(--sp-1);
}
.pm-scroll::-webkit-scrollbar { height: 6px; }
.pm-scroll::-webkit-scrollbar-thumb { background: #3a4756; border-radius: 3px; }
.pm-tbl { border-collapse: collapse; font-size: 14px; min-width: 100%; }
.pm-tbl th, .pm-tbl td {
  padding: 8px var(--sp-2); text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.pm-tbl th { color: var(--text2); font-size: 12px; font-weight: 600; }
.pm-tbl th:first-child, .pm-tbl td:first-child { text-align: left; }
.pm-tbl tbody tr:last-child td { border-bottom: none; }
.pm-tbl tr.pm-sep td {
  background: var(--card2); color: var(--text2); font-size: 12px;
  border-bottom: 1px solid var(--line2);
}
.pm-tbl tr.pm-sep b { color: var(--text); margin: 0 var(--sp-2) 0 var(--sp-1); }
.pm-pos { color: var(--good); }
.pm-neg { color: var(--bad); }

/* ---- v2.8.0：单图获胜方徽标 + 胜方 MVP / 败方 SVP ----
 * 需求口径：「在上传比分领先的那一方标出获胜方，例如在 NRG Esports PICK 左边显示 NRG WIN This Map」
 *          「胜方 MVP 与败方 SVP 位于自己队伍表格的最高并有标记」
 * 配色沿用既有令牌：绿 = 胜（--good）、金 = MVP（--gold）、蓝 = SVP（--blue），不新增颜色。 */
.pm-win {
  font-size: 11px; font-weight: 800; color: var(--good);
  white-space: nowrap; letter-spacing: .01em;
}
/* 地图卡里「获胜方徽标 + PICK 归属」同一行：徽标在左，空间不够时自动换行
 * max-width 必须有：卡片是 align-items:flex-start 的纵向 flex，不给上限的话这个 span
 * 会撑成 max-content（不换行）而溢出卡片。 */
.pm-card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: var(--sp-1) 0; max-width: 100%; }
/* 比分区：把获胜方的比分染绿，再挂一枚 WIN 小徽标（未分出胜负时不渲染） */
.pm-side.win .pm-side-num { color: var(--good); }
.pm-win-chip {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; line-height: 16px;
  color: var(--good); border: 1px solid rgba(61, 220, 132, .45);
  border-radius: var(--radius-pill); padding: 0 6px;
}
/* MVP / SVP 行内标记 + 整行淡色底：保证队内最佳那一行（本队表格第一行）一眼可见 */
.pm-star {
  display: inline-block; margin-right: 6px; font-size: 10px; font-weight: 800;
  line-height: 16px; border-radius: var(--radius-pill); padding: 0 6px; white-space: nowrap;
}
.pm-star.mvp { color: var(--gold); border: 1px solid rgba(255, 209, 102, .5); background: rgba(255, 209, 102, .12); }
.pm-star.svp { color: var(--blue); border: 1px solid rgba(111, 168, 220, .5); background: rgba(111, 168, 220, .12); }
.pm-tbl tr.pm-star-row.mvp td { background: rgba(255, 209, 102, .06); }
.pm-tbl tr.pm-star-row.svp td { background: rgba(111, 168, 220, .06); }
.pm-detail-star { text-align: center; margin: 0 0 var(--sp-2); }

/* ---- 管理页：赛后数据录入 ---- */
.pm-cfg { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.pm-cfg-row {
  display: grid; grid-template-columns: 62px minmax(148px, 1.4fr) minmax(124px, 1fr) 68px 12px 68px;
  align-items: center; gap: var(--sp-2);
  background: var(--card2); border: 1px solid var(--line);
  border-radius: var(--radius-btn); padding: var(--sp-2) var(--sp-3);
}
.pm-cfg-row.active { border-color: var(--red); }
.pm-cfg-row select, .pm-cfg-row input { margin: 0; }
.pm-cfg-row input[type="number"] { text-align: center; }
.pm-cfg-tab {
  background: none; border: 1px solid var(--line2); border-radius: var(--radius-sm);
  color: var(--text2); font: inherit; font-size: 12px; padding: 4px 6px; cursor: pointer;
}
.pm-cfg-row.active .pm-cfg-tab { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }
.pm-cfg-vs { color: var(--text3); text-align: center; }

.pm-edit-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-2); color: var(--text2); font-size: 13px;
}
.pm-edit-head b { color: var(--text); }
.pm-edit-actions { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); }
.pm-edit td.pm-p { white-space: nowrap; }
.pm-edit td.pm-p input { display: inline-block; width: auto; min-width: 104px; margin: 0 0 0 6px; vertical-align: middle; }
.pm-edit td input[type="number"] { min-width: 58px; padding: 6px var(--sp-2); font-size: 13px; border-radius: var(--radius-sm); }
.pm-derived { color: var(--text3); }

.pm-paste { margin-top: var(--sp-4); }
.pm-paste textarea { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.pm-paste .btn { margin-top: var(--sp-2); }

/* ---- 查询页 ---- */
.search-page { max-width: 920px; }
.search-results { display: grid; gap: var(--sp-4); }
.search-results .card { margin-bottom: 0; }
.search-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.search-form input { flex: 1 1 220px; margin: 0; }
.search-form .btn { flex: none; }
.search-list { display: grid; gap: var(--sp-2); }
.search-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  background: var(--card2); border: 1px solid var(--line);
  border-radius: var(--radius-btn); color: var(--text); text-decoration: none;
}
a.search-row:hover { border-color: var(--red); }
.sr-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sr-main b { font-size: 14px; overflow-wrap: anywhere; }
.sr-main small { color: var(--text2); font-size: 11px; }
.sr-p {
  background: none; border: none; color: var(--text); font: inherit; font-weight: 600;
  padding: 0; text-align: left; cursor: pointer; text-decoration: underline dotted var(--text3);
}
.sr-p:hover { color: var(--red); }
.sr-meta { color: var(--text2); font-size: 12px; text-align: right; }
.sr-meta a { color: var(--text2); }

/* ==========================================================================
 * 响应式断点（统一收口；v2.0.0 增加 767/479 两档，覆盖大屏手机与竖屏小屏）
 * ========================================================================== */

/* ---- ≤1023px：平板 / 触屏笔记本 ---- */
@media (max-width: 1023px) {
  .groups-grid { grid-template-columns: repeat(2, 1fr); }
  .playoff-cols, .home-grid, .match-grid, .team-grid { grid-template-columns: 1fr; }
  .bp-grid { grid-template-columns: 1fr; }
  .pc-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(20px, 3.6vw, 26px); }
}

/* ---- ≤767px：手机（含大屏手机） ---- */
@media (max-width: 767px) {
  /* 表格横滚提示：仅在真的可能溢出时提示 */
  .scroll-hint { display: block; }
  /* 表格窄屏收紧内边距，读起来更紧凑 */
  .tbl { font-size: 13px; }
  .tbl th, .tbl td { padding: var(--sp-2) 6px; }
  .mp-tbl th, .mp-tbl td { padding: 6px 5px; }
  .bp-tbl th, .bp-tbl td { padding: 6px 5px; }
  /* 长表给一个最小宽度，避免列被挤到换行、失去对齐 */
  .tbl-wrap > .standings-tbl { min-width: 560px; }
  .tbl-wrap > .mp-tbl { min-width: 520px; }
  /* 次要列折叠：≤767px 先收起「细节」列（见 views/pages.js 的 .hide-sm） */
  .hide-sm { display: none; }
  /* iOS Safari 对字号 <16px 的输入框在获得焦点时会自动放大整页（且放大后不会还原）。
     手机端把所有可输入控件抬到 16px；查询框、管理页录入网格、粘贴框都覆盖到。 */
  input, select, textarea { font-size: 16px; }
  .pm-edit td input[type="number"], .pm-paste textarea { font-size: 16px; }
  /* 管理页抽签表：单列排布，每行改为「编号 + A 选 + B 选」竖向堆叠 */
  .draw-grid { grid-template-columns: 1fr; }
  .draw-row { grid-template-columns: 1fr; }
  .draw-slot { flex-direction: row; align-items: baseline; gap: var(--sp-2); }
  .draw-vs { display: none; }

  /* v2.2.0：赛后数据地图卡更紧凑、选手输入网格收紧；查询结果行改为两行 */
  .pm-cards { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
  .pm-side-num { font-size: 24px; }
  .pm-tbl { font-size: 13px; }
  /* 录入行原是 6 列固定模板（56+120+110+58+10+58 ≈ 452px），480–767px 之间必然撑爆容器。
     改为「左侧页签竖条 + 右侧整宽字段」的三行栅格：地图、归属各占一行，两个比分并排。
     字段用 data-pm-* 定位（见 views/admin.js），无需给模板加类名。 */
  .pm-cfg-row {
    grid-template-columns: 56px minmax(0, 1fr) 12px minmax(0, 1fr);
    grid-template-areas:
      "tab map map map"
      "tab own own own"
      "tab sa  vs  sb";
    row-gap: var(--sp-2);
  }
  .pm-cfg-tab { grid-area: tab; align-self: stretch; }
  .pm-cfg-row select[data-pm-map] { grid-area: map; }
  .pm-cfg-row select[data-pm-owner] { grid-area: own; }
  .pm-cfg-row input[data-pm-sa] { grid-area: sa; }
  .pm-cfg-row input[data-pm-sb] { grid-area: sb; }
  .pm-cfg-vs { grid-area: vs; }
  .pm-cfg-row select, .pm-cfg-row input[type="number"] { min-width: 0; width: 100%; }
  .pm-edit td input[type="number"] { min-width: 46px; padding: 6px 4px; }
  .pm-edit td.pm-p input { min-width: 84px; }
  .search-row { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--sp-1); }
  .sr-meta { grid-column: 1 / -1; text-align: left; }
}

/* ---- ≤639px：手机竖屏（含安全区自适应） ---- */
@media (max-width: 639px) {
  /* 标题：长副标题独占一行，避免与标题挤在一行折行错乱 */
  h1 { font-size: 20px; margin: var(--sp-4) 0 var(--sp-3); }
  h1 .sub, h2 .sub { display: block; margin: 6px 0 0; line-height: 1.5; }
  h2 { font-size: 16px; }
  .group-bk h2 { margin-bottom: 6px; }
  .card { padding: var(--sp-4); margin-bottom: var(--sp-4); }

  /* 页头竖排，「隐藏已结束」独立成行并给足点按高度 */
  .page-head { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .page-head .btn { align-self: flex-start; min-height: var(--tap); padding: 0 var(--sp-4); }

  /* 导航：品牌与用户区占首行，链接换到第二行并可横向滑动 */
  .nav { gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); }
  .nav-links {
    order: 3; flex-basis: 100%; gap: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { padding: var(--sp-2); min-height: var(--tap); }
  .nav-user { margin-left: auto; }

  /* 安全区留白（需 index.html viewport-fit=cover；无刘海设备 env() 为 0，无副作用） */
  .container {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
  .nav {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .footer { padding-bottom: max(32px, env(safe-area-inset-bottom)); }

  /* 单场页：三列挤不下，改竖排；比分与 VS 居中 */
  .mh-teams { grid-template-columns: 1fr; gap: var(--sp-3); }
  .mh-vs { padding: 0; }
  .mh-team-btn { font-size: 18px; }
  .dist-row { grid-template-columns: 88px 1fr 48px; gap: var(--sp-2); }
  .dist-name { font-size: 12px; }
  .pc-grid { gap: var(--sp-4); }

  /* 战队页头部：评分块左对齐，避免居中后两侧大片留白 */
  .team-page .team-head { flex-direction: column; align-items: flex-start; }
  .big-score { align-items: flex-start; font-size: 36px; }
  .score-bd { text-align: left; max-width: none; }
  .team-grid { gap: var(--sp-4); }

  /* 表单 / 列表：触控目标不小于 44px */
  .pick { min-width: 72px; }
  .pick span { min-height: var(--tap); }
  .roster-p { min-height: var(--tap); }
  .mine-row { grid-template-columns: 1fr auto; row-gap: var(--sp-1); }
  .mr-label { grid-column: 1 / -1; }
  .toast { font-size: 12.5px; }

  /* 我的战绩 / 图池表 */
  .stat-tbl { font-size: 13px; }
  .stat-tbl th, .stat-tbl td { padding: var(--sp-2) var(--sp-1); }
  .stats-card h2 .sub { display: block; margin-top: 6px; }

  /* BP 面板：表格隐藏英文副名，「依据」独占一行 */
  .bp-tbl { font-size: 12px; }
  .bp-map-cell small { display: none; }
  .bp-why { flex-basis: 100%; }
  .bp-who { max-width: 110px; }

  /* 括号图：仅压横向尺寸，竖向几何原样保留 */
  .group-bk, .playoff-bk { padding: var(--sp-3); }
  .bk-wrap { padding: var(--sp-2) 10px 14px; scroll-padding-inline: 10px; }
  .bk-col { min-width: 188px; }
  .bk-slot { width: 188px; }
  .bk-grid { gap: var(--sp-8) var(--sp-5); }
  .bk-grid.playoff { gap: 44px var(--sp-5); }
}

/* 窄屏横屏（高度受限）：压缩上下留白，把纵向空间还给括号图 */
@media (max-width: 900px) and (max-height: 500px) {
  h1 { margin: var(--sp-2) 0; }
  .group-bk { margin-bottom: var(--sp-3); }
  .bk-wrap { padding: 6px 10px 10px; }
}

/* ---- ≤479px：小屏手机（iPhone SE 一类）---- */
@media (max-width: 479px) {
  body { font-size: 13.5px; }
  h1 { font-size: 18px; }
  h2 { font-size: 15px; }
  .card { padding: var(--sp-3) var(--sp-4); }
  .tbl { font-size: 12.5px; }
  .tbl th, .tbl td { padding: 6px var(--sp-1); }
  .mc-row { font-size: 13px; }
  .tab { font-size: 13px; }
  .btn { padding: 10px var(--sp-4); }
  .hero h1 { font-size: 19px; }
  .countdown { font-size: 16px; }
  /* 次要列折叠：保留名次 / 总分 / 命中率等关键信息（见 views/pages.js 的 .hide-xs） */
  .hide-xs { display: none; }
  /* 折叠后剩余列可在小屏内自适应，不再强制最小宽度触发横滚 */
  .tbl-wrap > .standings-tbl, .tbl-wrap > .mp-tbl { min-width: 0; }
  /* v2.2.0：录入行已在 ≤767px 改为「页签竖条 + 整宽字段」，这里只收紧地图卡文案 */
  .pm-card-cn { font-size: 14px; }
  .pm-card-own { font-size: 10px; padding: 0 6px; }
  .pm-win { font-size: 10px; }            /* v2.8.0：地图卡窄到 118px，「NRG WIN This Map」跟着缩一档 */
  .pm-card-en { display: none; }          /* 英文图名是次要信息，窄屏让位给中文名与比分 */
  /* 单图比分：原 flex 换行后 VS 会跟在 A 侧后面、B 侧掉到第二行；改成三列记分牌 */
  .pm-score {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0 var(--sp-3);
  }
  .pm-side, .pm-side.right {
    flex-direction: column; justify-content: flex-start; align-items: center; gap: var(--sp-1);
  }
  .pm-side.right { flex-direction: column-reverse; }   /* DOM 是「比分 + 队名」，倒序后与左侧一致 */
  .pm-side-team { flex-wrap: wrap; justify-content: center; text-align: center; font-size: 13px; }
  .pm-side-num { font-size: 28px; }
  /* v2.8.0：窄屏记分牌是三列栅格、空间紧张，而右侧是 column-reverse（新加的小徽标会被倒到最上面，
   * 与左侧不对称）—— 直接收掉这枚小徽标：获胜方已经由染绿的比分本身表达。 */
  .pm-win-chip { display: none; }
  .pm-vs { font-size: 12px; }
  /* v2.5.0：锁定卡片的操作按钮整宽更好点按；首页双行倒计时的说明文字再收紧一档 */
  .lock-row .btn { width: 100%; }
  .countdown-list .cd-label { font-size: 14px; }
}

/* ==================================================================
 * v2.4.0 新模块样式：§14.7 全班数据看板 / §14.8 个人积分趋势 / §14.9 对比
 * 配色与间距沿用上方 CSS 变量（§14.16），不再引入新的品牌色。
 * ================================================================== */

/* ---- 通用小件（原先缺失或未定义，本版补齐） ---- */
.name-link { color: var(--text); text-decoration: underline dotted var(--text3); text-underline-offset: 3px; }
.name-link:hover { color: var(--red); text-decoration-color: var(--red); }
.name-btn {
  background: none; border: none; color: var(--text); font: inherit; font-weight: 600;
  padding: 0; cursor: pointer; text-decoration: underline dotted var(--text3);
}
.name-btn:hover { color: var(--red); }
.tag {
  display: inline-block; font-size: 11px; line-height: 1.6; padding: 0 6px;
  border: 1px solid var(--line2); border-radius: var(--radius-pill); color: var(--text2); white-space: nowrap;
}
.tag.ok { color: var(--good); border-color: rgba(61, 220, 132, .5); background: rgba(61, 220, 132, .1); }
.tag.bad { color: var(--bad); border-color: rgba(255, 107, 107, .5); background: rgba(255, 107, 107, .1); }
.head-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* 分段控件（曲线切换） */
.seg { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); background: var(--card2);
       border: 1px solid var(--line); border-radius: var(--radius-btn); padding: var(--sp-1); margin-bottom: var(--sp-3); }
.seg-btn {
  background: none; border: none; color: var(--text2); font: inherit; font-size: 13px;
  padding: 6px var(--sp-3); border-radius: var(--radius-sm); cursor: pointer; min-height: 34px;
  transition: background .15s ease-out, color .15s ease-out;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--red); color: #fff; font-weight: 600; }
.seg-btn.active:hover { color: #fff; }

/* ---- 图表容器（js/charts.js 输出） ---- */
/* overflow: hidden —— viewBox 已按容器实宽生成，图内标注也都夹在画布内，
   这里改为裁切，避免关键点标注在窄屏贴着卡片边缘溢出。 */
.chart { width: 100%; height: auto; display: block; overflow: hidden; }
.chart.radar, .chart.donut { max-width: 340px; margin: 0 auto; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: var(--sp-2) 0; font-size: 12px; color: var(--text2); }
.lg-item { display: inline-flex; align-items: center; gap: 6px; }
.lg-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.lg-swatch { width: 14px; height: 10px; border-radius: 2px; display: inline-block; flex: none; border: 1px solid var(--line2); }
.ratio-bar { display: flex; height: 22px; border-radius: var(--radius-pill); overflow: hidden; margin: var(--sp-3) 0; background: var(--card2); }
.rb-seg { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #0F1923; }

/* ---- §14.7 看板 ---- */
.dashboard { max-width: 1180px; }
.dash-meta { margin: var(--sp-2) 0 var(--sp-4); }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.dash-card { margin-bottom: 0; }
.dash-card h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.big-line { font-size: 26px; font-weight: 800; margin: 6px 0; }
.big-line b { color: var(--red); }

/* Widget 2 正确率 */
.acc-hero { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.acc-hero .chart.donut { max-width: 168px; margin: 0; flex: none; }
.acc-side { flex: 1 1 160px; display: grid; gap: var(--sp-2); }
.acc-row { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.acc-row b { font-size: 20px; font-variant-numeric: tabular-nums; }
.acc-row span { font-size: 12px; color: var(--text2); }

/* Widget 3 最热选手 */
.hot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.hot-row {
  width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--sp-2); background: var(--card2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--text); font: inherit; text-align: left;
  padding: var(--sp-2) var(--sp-3); cursor: pointer; min-height: var(--tap);
  transition: border-color .15s ease-out;
}
.hot-row:hover { border-color: var(--red); }
.hot-rank { color: var(--text3); font-weight: 700; font-variant-numeric: tabular-nums; }
.hot-name { font-weight: 700; overflow-wrap: anywhere; }
.hot-team { font-size: 11px; color: var(--text2); }
.hot-views { font-size: 12px; color: var(--gold); font-variant-numeric: tabular-nums; }

.split-legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--text2); }

/* Widget 6 榜首 */
.top3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.top-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  padding: var(--sp-3) var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-btn);
  background: var(--card2); color: var(--text); text-decoration: none; transition: border-color .15s ease-out;
}
.top-item:hover { border-color: var(--red); }
.top-item.rank-1 { border-color: rgba(255, 209, 102, .55); background: rgba(255, 209, 102, .07); }
.top-medal { font-size: 20px; }
.top-avatar {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--card3); border: 1px solid var(--line2); font-weight: 800; font-size: 15px;
}
.top-name { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.top-score { color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Widget 8 活跃度 */
.act-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); }
.act-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-3) var(--sp-1);
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.act-cell b { font-size: 20px; font-variant-numeric: tabular-nums; }
.act-cell span { font-size: 11px; color: var(--text2); text-align: center; }

/* ---- §14.8 个人趋势 ---- */
.profile-page { max-width: 1080px; }
.pf-head { display: flex; flex-direction: column; gap: var(--sp-3); }
.pf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--sp-2); }
.kpi {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-2) var(--sp-1);
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.kpi b { font-size: 17px; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 11px; color: var(--text2); text-align: center; }
.hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); }
.hl-card {
  position: relative; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-btn);
  background: var(--card2); display: flex; flex-direction: column; gap: 2px;
}
.hl-card.bad { border-color: rgba(255, 107, 107, .4); }
.hl-card.warn { border-color: rgba(255, 209, 102, .4); }
.hl-card h3 { margin: 0; font-size: 13px; }
.hl-num { font-size: 22px; font-variant-numeric: tabular-nums; }
.hl-card.bad .hl-num { color: var(--bad); }
.hl-card.warn .hl-num { color: var(--gold); }
.hl-badge {
  position: absolute; top: var(--sp-2); right: var(--sp-2); font-size: 10px; color: var(--text3);
  border: 1px solid var(--line2); border-radius: 50%; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
}
.pf-tbl tr.row-miss td { color: var(--text2); }

/* 阶段标签（§14.6 三段） */
.stage-tag {
  display: inline-block; font-size: 11px; padding: 0 7px; border-radius: var(--radius-pill);
  border: 1px solid var(--line2); white-space: nowrap;
}
.stage-tag.group { color: var(--blue); border-color: rgba(111, 168, 220, .45); background: rgba(111, 168, 220, .1); }
.stage-tag.playoff { color: var(--gold); border-color: rgba(255, 209, 102, .45); background: rgba(255, 209, 102, .1); }
.stage-tag.bo5 { color: var(--red); border-color: rgba(255, 70, 85, .45); background: rgba(255, 70, 85, .1); }

/* ---- §14.9 对比 ---- */
.compare-page { max-width: 1140px; }
.cmp-heads { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); }
.cmp-head {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); text-align: center;
  padding: var(--sp-3); background: var(--card2); border: 1px solid var(--line);
  border-radius: var(--radius-btn); color: var(--text); text-decoration: none; font: inherit; cursor: pointer;
  transition: border-color .15s ease-out;
}
.cmp-head:hover { border-color: var(--red); }
.cmp-name { font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.cmp-score { font-size: 26px; font-weight: 800; color: var(--gold); display: flex; flex-direction: column; line-height: 1.05; }
.cmp-score .sub { font-size: 11px; color: var(--text2); font-weight: 400; }
.cmp-tbl th[scope="row"] { color: var(--text2); font-weight: 600; white-space: nowrap; }
.cmp-tbl td { font-variant-numeric: tabular-nums; }
.cmp-tbl td.better { color: var(--good); font-weight: 700; }
.cmp-tbl td.worse { color: var(--text3); }
.cmp-tbl td.sub { color: var(--text2); }
.cmp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.cmp-grid .card { margin-bottom: 0; }
.donut-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-4); }
.donut-cell { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.donut-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; width: 100%; font-size: 12px; }
.donut-legend li { display: flex; align-items: center; gap: 6px; color: var(--text2); }
.donut-legend li .sub { margin-left: auto; font-size: 11px; color: var(--text3); }

/* 多选复选框 */
.cmp-pick { display: inline-flex; align-items: center; cursor: pointer; flex: none; }
.cmp-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cmp-pick span {
  width: 20px; height: 20px; border: 1px solid var(--line2); border-radius: var(--radius-sm);
  background: var(--card); display: inline-block; position: relative; transition: border-color .15s ease-out, background .15s ease-out;
}
.cmp-pick:hover span { border-color: var(--red); }
.cmp-pick input:checked + span { background: var(--red); border-color: var(--red); }
.cmp-pick input:checked + span::after {
  content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.cmp-pick input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.search-row.has-pick { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.search-row.has-pick:hover { border-color: var(--red); }
a.sr-p { color: var(--text); }
.starter-row { display: flex; align-items: center; gap: var(--sp-2); }
.starter-row .starter { flex: 1; min-width: 0; }

/* 底部对比面板 */
/* 页面底部留白：桌面单行 96px；≤767px 内容换两行，见本文件末尾的 v2.4.0 断点段 */
body.has-cmp-bar { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.cmp-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(27, 39, 51, .97); border-top: 1px solid var(--line2);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .35); backdrop-filter: blur(6px);
  padding-bottom: env(safe-area-inset-bottom);   /* 避开 iPhone 底部小横条 */
}
.cmp-bar[hidden] { display: none; }
.cmp-bar-inner {
  max-width: 1180px; margin: 0 auto; padding: var(--sp-2) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.cmp-chips { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; flex: 1 1 320px; min-width: 0; }
.cmp-bar-label { font-size: 12px; color: var(--text2); white-space: nowrap; }
.cmp-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  background: var(--card3); border: 1px solid var(--line2); border-radius: var(--radius-pill);
  padding: 3px var(--sp-2) 3px var(--sp-3); color: var(--text); max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmp-chip.team { border-color: rgba(111, 168, 220, .5); }
.chip-x {
  background: none; border: none; color: var(--text2); cursor: pointer; font-size: 14px;
  line-height: 1; padding: 0 2px;
}
.chip-x:hover { color: var(--red); }
.cmp-bar-actions { display: flex; gap: var(--sp-2); flex: none; }

/* ============================================================================
 * v2.7.0 成就徽章 + 赛后复盘
 *   §15.1 成就页（#/achievements）
 *   §15.2 赛后复盘页（#/review/<matchId>）
 *   §15.3 DeepSeek 赛后复盘：复盘页 AI 区 + 管理面板 AI 区
 *   §15.4 复盘入口（单场页标题右侧链接）
 * 约定：成就档位色统一走自定义属性 --tier（由 .tier-bronze/.tier-silver/
 *       .tier-gold/.tier-legend 提供），子元素直接 var(--tier) 取值，
 *       避免每个子元素重复写 4 遍档位选择器。
 *       与既有题目难度 .tier-easy/.tier-medium/.tier-hard 不冲突（档位名不同）。
 * ========================================================================== */

/* --------------------------------------------------- §15.1 成就徽章（成就页） */
.tier-bronze { --tier: #c0865a; }
.tier-silver { --tier: #a8b6c4; }
.tier-gold   { --tier: var(--gold); }
.tier-legend { --tier: var(--red); }

.ach-page { max-width: 1080px; }
.ach-head h1 { font-size: 22px; margin: 0 0 var(--sp-2); }

/* 顶部汇总条：3 个数据格 + 1 个档位分布格 */
.ach-summary { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.ach-sum-box {
  flex: 1 1 108px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: var(--sp-3) var(--sp-2); background: var(--card2);
  border: 1px solid var(--line); border-radius: var(--radius-btn);
}
.ach-sum-box b { font-size: 22px; font-variant-numeric: tabular-nums; }
.ach-sum-box span { font-size: 11px; color: var(--text2); text-align: center; }
.ach-sum-box.tiers {
  flex: 2 1 300px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2); align-items: stretch;
}
.ach-sum-tier {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 11px; color: var(--tier, var(--text2)); font-variant-numeric: tabular-nums;
  border: 1px solid currentColor; opacity: .85;
  border-radius: var(--radius-sm); padding: var(--sp-1) 2px;
}

.ach-block { margin-bottom: var(--sp-6); }
.ach-h3 {
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
  font-size: 15px; margin: 0 0 var(--sp-3);
}
.ach-sub { font-size: 12px; font-weight: 400; color: var(--text2); }

.ach-group { margin-bottom: var(--sp-5); }
.ach-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  font-size: 13px; color: var(--text2); padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--line); margin-bottom: var(--sp-3);
}
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: var(--sp-3); }
.ach-grid.wall { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* 徽章卡：未达成整体降饱和，达成后按档位色高亮 */
.ach-card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-3);
  padding: var(--sp-3); background: var(--card2);
  border: 1px solid var(--line); border-radius: var(--radius-btn);
  transition: border-color .15s ease-out;
}
.ach-card:hover { border-color: var(--line2); }
.ach-icon {
  width: 44px; height: 44px; border-radius: 50%; background: var(--card3);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  filter: grayscale(1); opacity: .4;
}
.ach-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ach-name {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 14px; font-weight: 700;
}
.ach-tier {
  font-size: 10px; font-weight: 600; line-height: 16px; padding: 0 6px;
  border: 1px solid currentColor; border-radius: var(--radius-pill);
  color: var(--tier, var(--text2));
}
.ach-self {
  font-size: 10px; font-weight: 400; line-height: 16px; padding: 0 6px;
  color: var(--text3); border: 1px dashed var(--line2); border-radius: var(--radius-pill);
}
.ach-desc { font-size: 12px; color: var(--text2); line-height: 1.5; }
.ach-meta { font-size: 11px; color: var(--text3); line-height: 1.5; }
.ach-progress {
  height: 4px; margin-top: 2px; background: var(--card3);
  border-radius: var(--radius-pill); overflow: hidden;
}
.ach-progress > i { display: block; height: 100%; background: var(--text3); border-radius: inherit; }
.ach-note { font-size: 11px; color: var(--text2); line-height: 1.5; }
.ach-note.good { color: var(--good); }

.ach-card.earned { border-color: var(--tier, var(--line2)); background: var(--card3); }
.ach-card.earned .ach-icon { filter: none; opacity: 1; color: var(--tier); background: rgba(255, 255, 255, .07); }
.ach-card.earned .ach-progress > i { background: var(--good); }

/* 成就墙：只显示达成者名单 */
.ach-owners { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-1); }
.ach-owners.empty { font-size: 11px; color: var(--text3); }
.ach-owner {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
  padding: 1px var(--sp-2); background: var(--card3);
  border: 1px solid var(--line2); border-radius: var(--radius-pill);
}
.ach-owner > em { font-style: normal; color: var(--text2); }
.ach-hint { font-size: 11px; color: var(--text3); }

/* ------------------------------------------- §15.2 赛后复盘页（#/review/<id>） */
.review-page { max-width: 1080px; }

.rv-logo { border-radius: var(--radius-sm); object-fit: contain; flex: none; }
.rv-logo-text {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card3); border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 700; color: var(--text2); flex: none;
}
.rv-empty { color: var(--text2); text-align: center; padding: var(--sp-5) var(--sp-3); margin: 0; font-size: 13px; }

/* ① 比赛概览 */
.rv-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.rv-score {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-5);
}
.rv-side { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 0; }
.rv-side-name { font-size: 14px; font-weight: 700; text-align: center; word-break: break-word; }
.rv-side.win .rv-side-name { color: var(--good); }
.rv-score-num {
  font-size: 30px; font-weight: 800; color: var(--gold);
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.1;
}

.rv-sub { font-size: 14px; margin: var(--sp-5) 0 var(--sp-2); }

.rv-tag {
  font-style: normal; font-size: 10px; line-height: 16px; padding: 0 6px;
  color: var(--text2); border: 1px solid var(--line2);
  border-radius: var(--radius-pill); white-space: nowrap;
}
.rv-tag.win, .rv-tag.good {
  color: var(--good); border-color: rgba(61, 220, 132, .45); background: rgba(61, 220, 132, .1);
}
.rv-tag.bad { color: var(--bad); border-color: rgba(255, 107, 107, .45); background: rgba(255, 107, 107, .1); }

.rv-maps { display: grid; gap: var(--sp-2); }
.rv-map {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); background: var(--card2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.rv-map.unplayed { opacity: .55; }
.rv-map-no { font-size: 11px; color: var(--text2); }
.rv-map-cn { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; min-width: 0; }
.rv-map-cn small { font-size: 10px; font-weight: 400; color: var(--text3); }
.rv-map-own {
  font-size: 11px; color: var(--text2); padding: 0 6px;
  border: 1px solid var(--line2); border-radius: var(--radius-pill); white-space: nowrap;
}
/* v2.8.0：获胜方徽标 + PICK 归属同一格（徽标在左）。包一层容器是为了让窄屏那套
   「PICK 落到第二行」的栅格规则整体搬过来时不被多出来的子元素打乱。 */
.rv-map-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); justify-self: end; min-width: 0; }
.rv-map-win { font-size: 11px; font-weight: 800; color: var(--good); white-space: nowrap; }
.rv-map-own.good { color: var(--good); border-color: rgba(61, 220, 132, .45); }
.rv-map-own.bad { color: var(--bad); border-color: rgba(255, 107, 107, .45); }
.rv-map-sc { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ② 本场 vs 赛前快照：窄屏在卡片内横滑 */
.rv-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain; margin-bottom: var(--sp-1);
}
.rv-scroll::-webkit-scrollbar { height: 6px; }
.rv-scroll::-webkit-scrollbar-thumb { background: #3a4756; border-radius: 3px; }
.rv-tbl { min-width: 720px; font-size: 13px; }
.rv-tbl th { white-space: nowrap; }
.rv-p { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.rv-v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-v small { display: block; font-size: 10px; color: var(--text3); }
.rv-delta { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-delta.good { color: var(--good); }
.rv-delta.bad { color: var(--bad); }
.rv-tbl tr.rv-win td { background: rgba(61, 220, 132, .07); }

/* ③ 劳累 / 犯罪榜 */
.rv-formula {
  padding: var(--sp-3); margin-bottom: var(--sp-3); background: var(--card2);
  border: 1px solid var(--line); border-left: 2px solid var(--red);
  border-radius: var(--radius-sm);
}
.rv-formula p { margin: 0 0 var(--sp-1); font-size: 12px; color: var(--text2); line-height: 1.65; }
.rv-formula p:last-child { margin-bottom: 0; }
.rv-formula b { color: var(--text); }
.rv-rank-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.rv-rank-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3); background: var(--card2);
  border: 1px solid var(--line); border-radius: var(--radius-btn);
}
.rv-rank-no {
  width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--card3);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text2); font-variant-numeric: tabular-nums;
}
.rv-rank-name { flex: 1 1 90px; min-width: 0; display: flex; flex-direction: column; font-size: 13px; font-weight: 600; }
.rv-rank-name small { font-size: 11px; font-weight: 400; color: var(--text2); }
.rv-rank-score { font-size: 18px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.rv-rank-card .ratio-bar { flex: 1 1 100%; }

/* ④ 班级预测分析 */
.rv-class-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
.rv-class-side { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.rv-class-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: 12px; color: var(--text2); }
.rv-class-scores { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); font-size: 12px; }
.rv-class-scores li {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2); background: var(--card2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.rv-class-key { font-weight: 600; font-variant-numeric: tabular-nums; }
.rv-class-cnt { margin-left: auto; color: var(--text2); }
.rv-class-line {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin: var(--sp-3) 0; font-size: 13px; color: var(--text2);
}
.rv-class-line b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }

/* ------------------------------- §15.3 DeepSeek 赛后复盘（页面 AI 区 + 管理区） */
.rv-ai-body { font-size: 13.5px; line-height: 1.75; }
.rv-ai-body h1, .rv-ai-body h2 { font-size: 16px; margin: var(--sp-5) 0 var(--sp-2); }
.rv-ai-body h3 { font-size: 14px; margin: var(--sp-4) 0 var(--sp-2); color: var(--red); }
.rv-ai-body p { margin: 0 0 var(--sp-3); }
.rv-ai-body ul { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
.rv-ai-body li { margin-bottom: 4px; }
.rv-ai-body strong { color: var(--text); font-weight: 700; }
.rv-ai-form { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.rv-ai-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.rv-ai-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.rv-ai-meta-item {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text2);
  padding: 2px var(--sp-2); background: var(--card2);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
}
.rv-ai-meta-item b { color: var(--text3); font-weight: 600; }

/* 管理面板：⑤ DeepSeek 赛后复盘 */
.ai-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ai-preview {
  max-height: 168px; overflow: hidden; margin: 0 0 var(--sp-3);
  padding: var(--sp-3); background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.7; color: var(--text2);
  white-space: pre-wrap; word-break: break-word;
}
.ai-extra { display: block; margin: var(--sp-3) 0; font-size: 13px; color: var(--text2); }
.ai-extra textarea { resize: vertical; min-height: 56px; }
.ai-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.warn-line { color: var(--gold) !important; border-left: 2px solid var(--gold); padding-left: var(--sp-2); }

/* ------------------------------------------------------- §15.4 复盘入口链接 */
.pm-review-link {
  float: right; min-height: 0; padding: 5px var(--sp-3);
  font-size: 12px; font-weight: 600; margin-top: 2px;
}

/* ------------------------------------------------------- §15.5 赛果页复盘入口（v2.7.1）
   线上反馈：v2.7.0 只在「赛后数据」标题右侧放了个 12px 小链接（float:right），
   赛果一出大家视线都在顶部大比分，入口形同不存在。这里改成 match-head 正下方的
   整幅横幅：左侧复述赛果、右侧主按钮；窄屏自动竖排并把按钮撑到 44px 触控高度。
   左侧用金色竖条（--gold）与「胜方/比分」的既有金色语义保持一致。 */
.rv-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; border-left: 4px solid var(--gold);
}
.rv-cta-text { min-width: 0; flex: 1 1 320px; }
.rv-cta-title { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: var(--sp-1); }
.rv-cta-sub { font-size: 12.5px; color: var(--text2); line-height: 1.6; }
.rv-cta-sub b { color: var(--gold); font-size: 14px; margin: 0 2px; }
.rv-cta-btn {
  flex: 0 0 auto; min-height: var(--tap); padding: 0 var(--sp-5);
  font-weight: 700; white-space: nowrap;
}
/* 赛果面板（主预测卡内）里的同一个入口：整行排布，按钮不要缩成小字 */
.rv-entry-line {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; margin-top: var(--sp-3);
}
.rv-entry-btn { min-height: var(--tap); padding: 0 var(--sp-4); font-weight: 700; }

/* ---- v2.4.0 模块自己的断点（必须留在本文件末尾：媒体查询不提升优先级，
       只有写在同名基础规则之后才能覆盖它们）---- */
@media (max-width: 1023px) {
  .dash-grid, .cmp-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .dash-grid { gap: var(--sp-3); }

  /* Widget 2：环形图居中；说明区独占一行（原先的固定 168px 会把它挤到左侧、右边大片留白） */
  .acc-hero { gap: var(--sp-3); justify-content: center; }
  .acc-hero .chart.donut { max-width: 156px; margin: 0 auto; }
  .acc-side { flex-basis: 100%; }
  .acc-row { justify-content: center; }

  /* Widget 3：4 列在窄屏会把选手名压断行，改为「名 / 战队」两行 + 次数跨行居中 */
  .hot-row { grid-template-columns: 22px minmax(0, 1fr) auto; row-gap: 0; }
  .hot-rank { grid-column: 1; grid-row: 1 / span 2; }
  .hot-name { grid-column: 2; grid-row: 1; }
  .hot-team { grid-column: 2; grid-row: 2; }
  .hot-views { grid-column: 3; grid-row: 1 / span 2; }

  .top3 { grid-template-columns: minmax(0, 1fr); }
  .top-item { flex-direction: row; justify-content: flex-start; text-align: left; gap: var(--sp-2); }
  .act-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 图表：viewBox 由 charts.js 按容器实宽生成，这里只管住雷达 / 环形不超过可视宽度 */
  .chart.radar, .chart.donut { max-width: 300px; }

  /* §14.9 多选：20px 复选框在手机上点不准，整块撑到 44px 触控区；
     查询结果行由「复选框 / 队标 / 队名 / 元信息」4 列改为 3 列 —— 元信息独占一行 */
  .cmp-pick { min-width: var(--tap); min-height: var(--tap); justify-content: center; }
  .search-row.has-pick { grid-template-columns: auto auto minmax(0, 1fr); }

  /* 曲线切换按钮：触屏上给足高度 */
  .seg-btn { min-height: var(--tap); }

  /* 底部对比面板：chips 改单行横滑，避免 6 个标签换三行把内容顶走；
     高度按「chips 行 + 按钮行 + 安全区」重算 */
  .cmp-bar-inner { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .cmp-chips {
    flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
  }
  .cmp-chips::-webkit-scrollbar { display: none; }
  .cmp-bar-label, .cmp-chip { flex: none; }
  .cmp-chip { max-width: 132px; }
  .chip-x { min-width: 32px; min-height: 32px; }
  .cmp-bar-actions { width: 100%; }
  .cmp-bar-actions .btn { flex: 1; min-height: var(--tap); }
  body.has-cmp-bar { padding-bottom: calc(116px + env(safe-area-inset-bottom)); }
}
@media (max-width: 479px) {
  .big-line { font-size: 22px; }
  .cmp-tbl { font-size: 12.5px; }
  .cmp-tbl th, .cmp-tbl td { padding: 6px 6px; }
  .donut-legend { font-size: 11.5px; }
  .chart.radar, .chart.donut { max-width: 260px; }
  .seg-btn { padding: 6px var(--sp-2); }
}

/* ---- v2.7.0 成就 / 复盘断点（同为媒体查询，必须写在 §15 基础规则之后）---- */
@media (max-width: 1023px) {
  /* 班级分析：环形图 + 分布两列在中等屏幕会挤，改为上下堆叠 */
  .rv-class-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  /* 成就：卡片单列；档位分布改两列 */
  .ach-grid, .ach-grid.wall { grid-template-columns: minmax(0, 1fr); }
  .ach-sum-box.tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ach-group-head { font-size: 12.5px; }

  /* 复盘：比分条压缩；逐图行改「图号 / 地图名 / 比分」+ 第二行「获胜方 + PICK 归属」 */
  .rv-score { gap: var(--sp-2); margin: var(--sp-3) 0; }
  .rv-score-num { font-size: 24px; }
  .rv-side-name { font-size: 13px; }
  .rv-map { grid-template-columns: 44px minmax(0, 1fr) auto; row-gap: 2px; }
  .rv-map-sc { grid-column: 3; grid-row: 1; }
  /* v2.8.0：获胜方徽标与 PICK 归属一起搬到第二行（徽标在新加的 .rv-map-tags 容器里） */
  .rv-map-tags { grid-column: 2 / span 2; grid-row: 2; justify-self: start; }
  .rv-rank-list { grid-template-columns: minmax(0, 1fr); }
  .rv-players .scroll-hint { display: block; }

  /* 触控目标：AI 区的生成 / 删除按钮撑到 44px */
  .rv-ai-actions .btn, .ai-actions .btn { flex: 1 1 140px; min-height: var(--tap); }
  .pm-review-link { min-height: 32px; padding: 5px var(--sp-2); }

  /* 赛果页复盘横幅：窄屏竖排，按钮独占一行并撑满（拇指可达） */
  .rv-cta { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .rv-cta-btn, .rv-entry-btn { width: 100%; justify-content: center; }
}
@media (max-width: 479px) {
  .ach-sum-box b { font-size: 19px; }
  .ach-card { grid-template-columns: 36px minmax(0, 1fr); padding: var(--sp-2) var(--sp-3); }
  .ach-icon { width: 36px; height: 36px; font-size: 18px; }
  .rv-score-num { font-size: 21px; }
  .rv-tbl { font-size: 12.5px; }
  .rv-tbl th, .rv-tbl td { padding: 8px 6px; }
}