/* ============================================================
   FlintHub — 综合棋牌中心 前台样式

   命名前缀 .bg-（board games）

   ★ 容器与贴边（规范 §6.4）
     .bg-wrap  = .mn-section + **自己补 padding**（核心 .mn-section 无 padding）
     .bg-grid  = 只管列数与 gap，无 padding / margin
     .bg-card  = 只管自己的框，无 margin
     ⇒ 间距归容器，卡片只管自己的框；禁止负 margin / calc(100%+N) 去抵消父级 padding。

   ★ 棋盘定位（四款游戏共用一套）
     .bg-board 上挂 --cols/--rows/--cw/--ch，每个 .bg-cell 用 --r/--c 定位。
     全部百分比，窄屏自动缩放，不需要 JS 测量。
     ⚠️ style="--r:N;--c:M" 是内联 CSS 变量注入（§7.3 第 4 条明确合规），
        不是静态样式，而是数据驱动定位。

   ★ 主题：只用 --mn-* 变量 + 浅色 fallback，禁止硬编码 #fff/#333（§11.7）
   ============================================================ */

/* ---------- 容器 ---------- */
.bg-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 16px 20px 24px;
}

.bg-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.bg-head-main { min-width: 0; }
.bg-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.bg-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
    color: var(--mn-text, #1f2937);
}
.bg-intro { margin: 0; font-size: 13px; line-height: 1.6; color: var(--mn-text-muted, #6b7280); }

.bg-crumb { margin-bottom: 12px; font-size: 12px; }
.bg-crumb a { color: var(--mn-text-muted, #6b7280); text-decoration: none; }
.bg-crumb a:hover { color: var(--mn-primary, #16a34a); }

.bg-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-size: 13px;
    color: var(--mn-text-secondary, #4b5563);
    background: var(--mn-bg-subtle, #f3f4f6);
    border-radius: 999px;
}
.bg-chip-sm { padding: 3px 10px; font-size: 12px; }
.bg-chip-inline { margin: 0 0 14px; }

.bg-btn-ghost {
    color: var(--mn-text-secondary, #4b5563);
    background: var(--mn-bg-card, #fff);
    border: 1px solid var(--mn-border, #e5e7eb);
}
.bg-btn-ghost:hover { color: var(--mn-primary, #16a34a); border-color: var(--mn-primary, #16a34a); }

.bg-btn-danger {
    color: var(--mn-error, #ef4444);
    background: var(--mn-bg-card, #fff);
    border: 1px solid var(--mn-error, #ef4444);
}
.bg-btn-danger:hover { color: #fff; background: var(--mn-error, #ef4444); }

.bg-btn-sm { padding: 5px 12px; font-size: 13px; }

.bg-link {
    font-size: 12px;
    color: var(--mn-primary, #16a34a);
    text-decoration: none;
}
.bg-link:hover { text-decoration: underline; }

.bg-hidden { display: none !important; }
.bg-muted { color: var(--mn-text-muted, #9ca3af); }
.bg-win { color: var(--mn-success, #16a34a); }
.bg-lose { color: var(--mn-error, #ef4444); }
.bg-streak { color: var(--mn-warning, #f59e0b); font-weight: 600; }

/* ---------- 战绩条 ---------- */
.bg-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.bg-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--mn-bg-subtle, #f9fafb);
    border: 1px solid var(--mn-border-light, #f3f4f6);
    border-radius: 8px;
}
.bg-stat-label { font-size: 11px; color: var(--mn-text-muted, #9ca3af); }
.bg-stat-num { font-size: 18px; font-weight: 600; color: var(--mn-text, #1f2937); font-variant-numeric: tabular-nums; }

/* ---------- 游戏卡片网格 ---------- */
.bg-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.bg-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 16px;
    background: var(--mn-bg-card, #fff);
    border: 1px solid var(--mn-border, #e5e7eb);
    border-radius: 10px;
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
.bg-card:hover {
    box-shadow: var(--mn-shadow-md, 0 4px 16px rgba(0, 0, 0, .08));
    transform: translateY(-2px);
    border-color: var(--mn-border, #e5e7eb);
    filter: brightness(0.96);
}
.bg-card-top { display: flex; align-items: flex-start; gap: 12px; }
.bg-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    color: var(--mn-primary, #16a34a);
    background: var(--mn-primary-subtle, #ecfdf5);
}
.bg-card-titles { min-width: 0; }
.bg-card-title { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--mn-text, #1f2937); }
.bg-card-rule {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--mn-text-muted, #6b7280);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bg-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--mn-text-muted, #6b7280);
}
.bg-card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 6px;
}
.bg-econ-hint {
    margin: 0;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--mn-text-secondary, #4b5563);
    background: var(--mn-primary-subtle, #ecfdf5);
    border-radius: 8px;
}

/* ---------- 开局表单 ---------- */
.bg-form { max-width: 560px; margin-bottom: 8px; }
.bg-h2 { margin: 18px 0 12px; font-size: 15px; font-weight: 600; color: var(--mn-text, #1f2937); }
.bg-hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid var(--mn-border-light, #f3f4f6);
}
.bg-field { display: block; margin-bottom: 16px; }
.bg-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--mn-text, #374151); }
.bg-input { width: 100%; box-sizing: border-box; max-width: 220px; }
.bg-help { display: block; margin-top: 4px; font-size: 12px; line-height: 1.6; color: var(--mn-text-muted, #9ca3af); }

.bg-levels { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bg-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--mn-text-secondary, #4b5563);
    background: var(--mn-bg-subtle, #f3f4f6);
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
}
.bg-radio input { margin: 0; }

.bg-empty {
    padding: 28px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--mn-text-muted, #6b7280);
    background: var(--mn-bg-subtle, #f9fafb);
    border: 1px dashed var(--mn-border, #e5e7eb);
    border-radius: 10px;
}

.bg-inline-form { display: inline-block; margin: 0; }

/* ---------- PvP 列表 ---------- */
.bg-pvp-list { display: flex; flex-direction: column; gap: 8px; }
.bg-pvp-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--mn-bg-card, #fff);
    border: 1px solid var(--mn-border, #e5e7eb);
    border-radius: 8px;
}
.bg-pvp-game { font-size: 13px; font-weight: 600; color: var(--mn-text, #1f2937); }
.bg-pvp-stake { font-size: 12px; color: var(--mn-warning, #f59e0b); }

/* ---------- 对局页 ---------- */
.bg-play-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.bg-play-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bg-turn {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mn-primary, #16a34a);
    background: var(--mn-primary-subtle, #ecfdf5);
    border-radius: 999px;
}
.bg-waiting {
    margin-bottom: 14px;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--mn-text-secondary, #4b5563);
    background: var(--mn-bg-subtle, #f9fafb);
    border: 1px dashed var(--mn-border, #e5e7eb);
    border-radius: 8px;
}
.bg-waiting p { margin: 0; }

/* ---------- 棋盘（四款共用） ---------- */
.bg-stage {
    display: flex;
    justify-content: center;
    margin: 0 auto 16px;
    padding: 8px;
}

.bg-board {
    position: relative;
    width: 100%;
    max-width: min(100%, 560px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    background: var(--mn-bg-card, #fff);
    border: 1px solid var(--mn-border, #e5e7eb);
    border-radius: 8px;
    /* 格子型（黑白棋/国象）：格线用背景渐变画，不需要 64 个额外元素 */
    background-image:
        linear-gradient(to right, var(--mn-border-light, #eef0f2) 1px, transparent 1px),
        linear-gradient(to bottom, var(--mn-border-light, #eef0f2) 1px, transparent 1px);
    background-size: var(--cw, 12.5%) var(--ch, 12.5%);
}

/* ===== 国际象棋：相邻格异色 =====
   conic-gradient 以 12 点方向顺时针分四象限：0-25% 右上、25-50% 右下、
   50-75% 左下、75-100% 左上。所以 `dark 0 25%, transparent 0 50%, dark 0 75%, transparent 0`
   让「每 2×2 tile 的左上角 = 透明（浅）」→ a8(row0,col0) 为浅格，符合国际象棋惯例。

   ⚠️ 深色格**不写死灰值**，而是取主题正文字色的低透明度混色：
      浅色主题 → 柔和冷灰；暗夜主题 → 比卡片略亮的冷灰。
      两边都能与浅格清晰分开，又不会压过棋子（用户要求「深色不要太深」）。
   ⚠️ 仍然给一句 rgba 兜底：不支持 color-mix 的浏览器退化为中性灰蓝，
      在明暗两种底色上都能分辨。 */
.bg-game-chess {
    --bg-chess-dark: rgba(120, 140, 170, .30);
    background-image: conic-gradient(
        var(--bg-chess-dark) 0 25%,
        transparent 0 50%,
        var(--bg-chess-dark) 0 75%,
        transparent 0
    );
    background-size: calc(var(--cw, 12.5%) * 2) calc(var(--ch, 12.5%) * 2);
    background-repeat: repeat;
}

@supports (color: color-mix(in srgb, red 10%, transparent)) {
    .bg-game-chess {
        --bg-chess-dark: color-mix(in srgb, var(--mn-text, #1f2937) 16%, transparent);
    }
}

/* 交叉点型（五子棋/象棋）：棋子居中在交点上，格子本身透明 */
.bg-board-point {
    background-image: none;
}
/* ===== 交叉点型网格线（五子棋） =====
   ⚠️⚠️ 曾经的写法：容器 `inset: cw/2` 缩窄，再 `background-size: cw%`。
      `background-size` 的百分比是相对**缩窄后的容器**算的，
      实际格距 = cw × (100−cw)/100 ≠ cw，每格偏 0.44%，
      14 格累计偏差 ~0.93 格 → 棋子看着落在格子中间而不是交叉点上。
      正解：容器**满幅**（inset:0），格距直接用 var(--cw/--ch)，
      线画在每个 tile 的 50% 处 → 线位置 = (k+0.5)·cw，正好等于棋子所在格心。 */
.bg-board-point::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right,
            transparent calc(50% - 0.5px),
            var(--mn-border, #d1d5db) calc(50% - 0.5px),
            var(--mn-border, #d1d5db) calc(50% + 0.5px),
            transparent calc(50% + 0.5px)),
        linear-gradient(to bottom,
            transparent calc(50% - 0.5px),
            var(--mn-border, #d1d5db) calc(50% - 0.5px),
            var(--mn-border, #d1d5db) calc(50% + 0.5px),
            transparent calc(50% + 0.5px));
    background-size: var(--cw, 6.666%) var(--ch, 6.666%);
    background-repeat: repeat;
    pointer-events: none;
    z-index: 0;
}

/* ===== 中国象棋棋盘：用 SVG 底纹（线条位置 = 格心，含九宫斜线 / 河界断开 / 兵炮位十字） =====
   SVG 内边距严格等于「半格」，因此线与 CSS 的格心 (c+0.5)·cw 逐像素对齐。
   用 mask 而不是 background-image：mask 只取形状、颜色由 background-color 决定，
   于是棋盘线能**跟随主题**（浅色主题偏褐、暗夜主题偏灰蓝），不会出现深底黑线看不清。 */
.bg-game-xiangqi::before {
    content: '';
    position: absolute;
    inset: 0;
    /* ⚠️ 不要用 --mn-border-strong：该变量在核心与所有主题里**都没有定义**，
       退化成硬编码褐色后，暗夜主题下棋盘线是暖褐色、与冷色卡片冲突。
       改为按主题正文字色混色：浅色主题是深灰线、暗夜主题是浅灰线，两边都清晰。 */
    background-color: rgba(96, 82, 62, .62);
    -webkit-mask-image: url('xiangqi-board.svg');
    mask-image: url('xiangqi-board.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none;
    z-index: 0;
    /* ★ 必须清掉 .bg-board-point::before 的渐变线：
       mask 会作用在整个元素上（含 background-image），
       两套线叠加会出现「双线 + 锯齿」。 */
    background-image: none;
}

@supports (color: color-mix(in srgb, red 10%, transparent)) {
    .bg-game-xiangqi::before {
        /* 主题正文字色的 42%：浅色主题→深灰线，暗夜主题→浅灰线，都清晰可辨 */
        background-color: color-mix(in srgb, var(--mn-text, #1f2937) 42%, transparent);
    }
}

/* ===== 中国象棋：楚河汉界 =====
   象棋棋盘 9 列 10 行，河界在「第 5 行与第 6 行之间」。
   显示行已按惯例翻转（红在下），故河界恒在棋盘垂直正中 50% 处。
   pointer-events:none 保证不挡点击。 */
.bg-game-xiangqi::after {
    content: '楚 河          汉 界';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: "KaiTi", "STKaiti", "Kaiti SC", "SimSun", serif;
    font-size: clamp(11px, calc(1.1vw + 6px), 17px);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-align: center;
    color: currentColor;
    opacity: .34;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    z-index: 0;                  /* 压在棋子之下，避免遮住河界附近的子 */
}

.bg-cell {
    position: absolute;
    left: calc(var(--c, 0) * var(--cw, 12.5%));
    top: calc(var(--r, 0) * var(--ch, 12.5%));
    width: var(--cw, 12.5%);
    height: var(--ch, 12.5%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    z-index: 1;                  /* 在棋盘底纹/楚河汉界之上 */
}
/* 交叉点型（五子棋/象棋）
   ⚠️⚠️ 这里**绝对不能**加 translate(50%,50%)。
      曾经的写法把每个格子整体推到「右下角」，导致：
        · 棋子中心 = c*cw + cw，整体右移/下移整整一格；
        · 最后一列中心落到 100%，被 overflow 裁掉 → 点不到 → 「无法落子」。
      正确几何：格子盒 left=c*cw、width=cw，其**中心天然在 (c+0.5)*cw**，
      而 (c+0.5)*cw 正是第 c 个交点应在的位置（首点 3.33%、末点 96.67%，两边各留半格）。
      所以只需让 .bg-cell 保持普通定位，棋子用 flex 居中即可，无需任何 transform。 */
.bg-board-point .bg-cell { transform: none; }

/* 可落子的空点：悬停高亮（只在轮到己方时由 JS 加 .bg-playable） */
.bg-playable { cursor: pointer; }
.bg-playable::after {
    content: '';
    position: absolute;
    left: 19%;
    top: 19%;
    width: 62%;
    height: 62%;
    border-radius: 50%;
    background: var(--mn-primary, #16a34a);
    opacity: 0;
    transition: opacity .12s;
    pointer-events: none;
}
.bg-playable:hover::after { opacity: .18; }

/* 棋子 */
.bg-piece {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78%;
    height: 78%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 50%;
    user-select: none;
}
/* ===== 五子棋 / 黑白棋：立体圆盘 =====
   ⚠️ 必须按游戏类限定。早先用 .bg-p1 通配，国际象棋的「透明字形」规则一加进来，
      黑白棋的圆盘也被一并改成透明 → 棋子看不见。 */
.bg-game-gomoku .bg-p1 .bg-piece,
.bg-game-othello .bg-p1 .bg-piece {
    background: radial-gradient(circle at 34% 28%, #6b7280 0%, #2b3440 45%, #11161c 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .35), inset 0 1px 1px rgba(255, 255, 255, .28);
}
.bg-game-gomoku .bg-p2 .bg-piece,
.bg-game-othello .bg-p2 .bg-piece {
    background: radial-gradient(circle at 34% 28%, #ffffff 0%, #eef1f4 45%, #c8cfd6 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .28), inset 0 1px 1px rgba(255, 255, 255, .9);
}
.bg-game-gomoku .bg-piece { width: 82%; height: 82%; }
.bg-game-othello .bg-piece { width: 84%; height: 84%; }
/* ===== 中国象棋棋子 =====
   观感要点（这几点决定「像不像真棋子」）：
     ① 木底：160° 线性渐变，左上偏亮 → 右下偏深，模拟木料受光
     ② 外圈：1px 深色描边 + 外侧投影，让棋子「浮」在棋盘上
     ③ 内圈：用两层 inset box-shadow 画出「双圈」，这是象棋棋子的标志性特征
     ④ 字：楷体 + 轻微深色描边，红黑分明，缩小后仍清晰
   尺寸用 clamp 跟随视口：桌面约 20px 字，手机约 14px 字，不会溢出格心。 */
.bg-game-xiangqi .bg-piece {
    width: 88%;
    height: 88%;
    font-family: "KaiTi", "STKaiti", "Kaiti SC", "SimSun", serif;
    font-size: clamp(12px, calc(1.5vw + 8px), 20px);
    font-weight: 700;
    line-height: 1;
    border-radius: 50%;
    background: linear-gradient(160deg, #fdf6e0 0%, #f3e3bd 48%, #e2c894 100%);
    /* ⚠️ 内圈用 em 而不是 px：棋子宽度是格子的 88%，格子尺寸随视口缩放，
          若内圈写死 4px/5px，小屏上会吃掉大半个棋子、把字挤没。
          em 相对本元素的 font-size（已用 clamp 跟随视口），因此内圈永远与字同比例。 */
    box-shadow:
        0 2px 5px rgba(0, 0, 0, .30),                     /* 外投影：浮起感 */
        inset 0 0 0 1px rgba(150, 110, 55, .55),          /* 外描边 */
        inset 0 0 0 0.20em #fbf0d4,                       /* 内圈留白 */
        inset 0 0 0 0.26em currentColor,                  /* 内圈细线（跟随字色） */
        inset 0 1px 2px rgba(255, 255, 255, .85);         /* 顶部高光 */
}
/* 红方 */
.bg-game-xiangqi .bg-red .bg-piece {
    color: #b3271e;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}
/* 黑方 */
.bg-game-xiangqi .bg-black .bg-piece {
    color: #23282e;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}
/* 被选中/可走提示时，棋子略微抬起 */
.bg-game-xiangqi .bg-playable:hover .bg-piece {
    box-shadow:
        0 4px 9px rgba(0, 0, 0, .38),
        inset 0 0 0 1px rgba(150, 110, 55, .55),
        inset 0 0 0 0.20em #fbf0d4,
        inset 0 0 0 0.26em currentColor,
        inset 0 1px 2px rgba(255, 255, 255, .85);
    transform: translateY(-1px);
}
/* ===== 国际象棋：Unicode 字形 =====
   ⚠️ 只给 .bg-game-chess。早先写 `.bg-board:not(.bg-board-point)`，
      本意是「非交叉点型」，结果黑白棋也被命中 → 圆盘被改成透明。 */
.bg-game-chess .bg-piece {
    background: transparent;
    box-shadow: none;
    border: 0;
    width: 100%;
    height: 100%;
    font-size: clamp(16px, calc(2.2vw + 10px), 34px);
    font-weight: 400;
    line-height: 1;
    color: var(--mn-text, #111);
}
/* 白棋：字形本身是空心，深色描边保证在浅色棋盘上可见 */
.bg-game-chess .bg-p1 .bg-piece {
    color: #f8fafc;
    text-shadow: 0 0 1px #111, 0 1px 1px #111, 0 0 2px rgba(0, 0, 0, .55);
}
/* 黑棋：实心字形 */
.bg-game-chess .bg-p2 .bg-piece {
    color: #161b22;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}

/* 选中态（象棋/国象：先点起点再点终点） */
/* 选中态：给「格子」画圆环提示（棋子本身不变形） */
.bg-cell.bg-selected::before {
    content: '';
    position: absolute;
    left: 2%;
    top: 2%;
    width: 96%;
    height: 96%;
    border: 2px solid var(--mn-primary, #16a34a);
    border-radius: 50%;
    pointer-events: none;
}

.bg-score {
    margin: 0 0 14px;
    text-align: center;
    font-size: 13px;
    color: var(--mn-text-secondary, #4b5563);
    font-variant-numeric: tabular-nums;
}

/* ---------- 操作栏 / 棋谱 ---------- */
.bg-play-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 14px;
}

.bg-movelog {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 12px;
    color: var(--mn-text-muted, #6b7280);
}
.bg-move-item {
    padding: 3px 8px;
    background: var(--mn-bg-subtle, #f3f4f6);
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}

/* ---------- 弹层（升变） ---------- */
.bg-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.bg-modal-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.bg-modal-box {
    position: relative;
    width: 100%;
    max-width: 320px;
    padding: 18px 20px 20px;
    background: var(--mn-bg-card, #fff);
    border: 1px solid var(--mn-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: var(--mn-shadow-lg, 0 20px 40px rgba(0, 0, 0, .18));
}
.bg-modal-title { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--mn-text, #1f2937); }
.bg-promo-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bg-promo-btn { padding: 10px 0; font-size: 13px; }

/* ---------- toast ---------- */
.bg-toast {
    position: fixed;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    z-index: 9100;
    padding: 8px 16px;
    font-size: 13px;
    color: #fff;
    background: rgba(0, 0, 0, .78);
    border-radius: 6px;
}

/* ---------- 列表 / 表格 ---------- */
.bg-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.bg-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.8fr 0.8fr 1.2fr;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--mn-text-secondary, #4b5563);
    background: var(--mn-bg-card, #fff);
    border: 1px solid var(--mn-border, #e5e7eb);
    border-radius: 8px;
    text-decoration: none;
    transition: border-color .12s, box-shadow .12s;
}
.bg-row:hover { border-color: var(--mn-primary, #16a34a); box-shadow: var(--mn-shadow-sm, 0 2px 8px rgba(0,0,0,.05)); }
.bg-row-game { font-weight: 600; color: var(--mn-text, #1f2937); }
.bg-row-time { font-size: 12px; color: var(--mn-text-muted, #9ca3af); }

.bg-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.bg-tab {
    padding: 6px 14px;
    font-size: 13px;
    color: var(--mn-text-secondary, #4b5563);
    background: var(--mn-bg-subtle, #f3f4f6);
    border: 1px solid transparent;
    border-radius: 999px;
    text-decoration: none;
}
.bg-tab-active { color: #fff; background: var(--mn-primary, #16a34a); font-weight: 600; }

.bg-table-wrap { overflow-x: auto; }
.bg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--mn-bg-card, #fff);
    border: 1px solid var(--mn-border, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
}
.bg-table th, .bg-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--mn-border-light, #f3f4f6);
}
.bg-table thead th {
    font-size: 12px;
    font-weight: 600;
    color: var(--mn-text-secondary, #4b5563);
    background: var(--mn-bg-subtle, #f9fafb);
    white-space: nowrap;
}
.bg-table tbody tr:last-child td { border-bottom: none; }
.bg-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- 复盘棋谱 ---------- */
.bg-move-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px;
}
.bg-move-line {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--mn-text-secondary, #4b5563);
    background: var(--mn-bg-subtle, #f9fafb);
    border-radius: 6px;
}
.bg-move-no { color: var(--mn-text-muted, #9ca3af); font-variant-numeric: tabular-nums; }
.bg-move-coord { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.bg-move-ms { margin-left: auto; font-size: 11px; color: var(--mn-text-muted, #9ca3af); }

.bg-pager { margin-top: 16px; }

/* ---------- 响应式：只改列数，padding 是「收窄」不是「归零」 ---------- */
@media (max-width: 860px) {
    .bg-wrap { padding: 14px 14px 18px; }
}
@media (max-width: 720px) {
    .bg-grid { grid-template-columns: minmax(0, 1fr); }
    .bg-row { grid-template-columns: 1fr 1fr; }
    .bg-row-time { grid-column: span 2; }
    /* 窄屏缩小国际象棋字形（只针对 chess；旧写法命中非交叉点板，会误伤黑白棋） */
    .bg-game-chess .bg-piece { font-size: 20px; }
    .bg-game-xiangqi .bg-piece { font-size: 13px; }
}